Learn CSS3 and HTML Development By Building Projects

You will get Live online lectures,Recorded virtual class room lectures from BITSKART.

9270

Overview of Learn CSS3 and HTML Development By Building Projects

Be the front end wizard with this unique course from Eduonix. We bring together a curriculum where you will learn all the tips and tricks of CSS and HTML design while building ten awesome projects. It will help you master different aspects of front end programming and will show you all the best development practices. The following projects have been specially selected to be part of this course.Project 1 - Landing Page DesignDescription: We will create an HTML5/CSS landing page which will feature a header & footer, a list with image bullet points, an HTML5 form and a testimonial block. The page will be completely responsive and will adapt to any screen size by using CSS3 media queries. We will be using the Eric Meyers reset file as well.Features/Technologies: HTML5, CSS3, Web Forms, Lists, Reset Files, Responsive Web DesignProject 2 - Responsive Tableless CalendarDescription: We will create a web calendar page using HTML5/CSS. Unlike many calendars which use HTML tables for positioning and presentation, our calendar will use only CSS. The calendar will be completley responsive and will have a sub-layout for smaller screen sizes.Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Table-like layout using CSS only, Box Spacing, Padding & Margins Project 3 - Pure CSS Image SliderDescription: Most image sliders that you see around the Web are powered by JavaScript or a JavaScript library like JQuery. We will build a fully functional image slider with pure CSS. We will have thumbnails which when clicked, make the bigger image slide into place. We will use CSS animation/keyframes to achieve this.Features/Technologies: HTML5, CSS3, Animation, Keyframes, z-index & PositioningProject 4 - Transition Drop Down MenuDescription: We will build a multi-level dropdown menu using CSS transitions for the dropdown animation effect. We will use just a bit of JQuery to dynamically add a div elementFeatures/Technologies: HTML5, CSS3, Nested Lists, Responsive Web Design, CSS Transitions, JQueryProject 5 - CSS TimelineDescription: In this project we will build a timeline using HTML5/CSS. This project will steer away from the common box-like layouts we see all the time. There will be points for years and events with descriptions. This could be used for many things such as professional/employment and personal/lifestyle tracking.Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, Background Images & PositioningProject 6 - Tables with SASSDescription: SASS is a CSS pre-processor that allows us to do great things like use variables, mixins and nested styles. We will create some pricing tables for web hosting packagesFeatures/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Fluid Layout, Installing, Configuring & Working With SASSProject 7 - CSS Image GalleryDescription: We will build an image gallery with the help of JQuery. The layout will be styled with CSS and we will use JQuery for dynamic category filtering and image lightbox. We will also create a very simple logo in PhotoshopFeatures/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, JQuery, JQuery Fancybox PluginProject 8 - Animated CarDescription: We will focus on CSS3 animation and keyframes to position and animate images. We will use an image of a car and make it appear to be driving down the streetFeatures/Technologies: HTML5, CSS3, Animation, Keyframes, Image Slicing in Photoshop, Background Images & PositioningProject 9 - Animated Bootstrap TemplateDescription: Twitter Bootstrap is the most popular HTML5/CSS framework available. We will be building a custom Bootstrap template along with some animation including scroll initialized animation using JQuery and CSSFeatures/Technologies: HTML5, CSS3, Animation, Keyframes, Twitter Bootstrap, JQueryProject 10 - NewsLetter Design with LESSDescription: LESS is another CSS pre-processor like SASS. We will be creating a smooth newsletter template for a restaraunt. We will implement LESS and use features like variables, mixins, nested styles and importing .less files.Features/Technologies: HTML5, CSS3, Node.js Installation, Installing, Configuring and Working With LESS

Table of contents

Curriculum

SECTION 1: COURSE INTRO

1 Course Intro

 

SECTION 2: LANDING PAGE DESIGN

2 Landing Page Intro

 

3 Base Structure and Reset File

 

4 Page HTML Markup

 

5 Core CSS Style

 

6 Custom CSS Style

 

7 Mobile Responsive CSS

 

SECTION 3: RESPONSIVE TABLELESS CALENDAR

8 Calendar Intro

 

9 Calendar HTML Markup

 

10 Events HTML Markup

 

11 Calendar Page CSS

 

12 Calendar Responsive CSS

 

SECTION 4: PURE CSS IMAGE SLIDER

13 Image Slider Intro

 

14 Intro To CSS Keyframes

 

15 Slider HTML Markup

 

16 Page CSS

 

17 Animation CSS

 

SECTION 5: TRANSITION DROPDOWN MENU

18  Menu Project Introduction

 

19 Intro To CSS Transitions

 

20 CSS Menu HTML Markup

 

21 Menu CSS

 

22 Menu Responsive CSS

 

SECTION 6: CSS TIMELINE

23 CSS Timeline Intro

 

24 Timeline HTML Markup

 

25 Timeline Page CSS

 

26 Timeline Inner Element CSS

 

27 Timeline Responsive CSS

 

SECTION 7: PRICING TABLES WITH SASS

28 Pricing Tables Intro

 

29 Sass Environment Setup

 

30 Pricetables HTML

 

31 Pricetables CSS

 

32 Sass Variables & Features

 

SECTION 8: CSS IMAGE GALLERY

33 Image Gallery Intro

 

34 Create a Simple Logo in Photoshop

 

35 Gallery HTML and CSS

 

36 Fancybox Plugin

 

37 JQuery Category Filters

 

SECTION 9: ANIMATED CAR

38 Animated Car Intro

 

39 Creating the Images

 

40 Car Page HTML and CSS

 

41 Wheel Animation

 

42 Background Animation

 

SECTION 10 : ANIMATED BOOTSTRAP TEMPLATE

43 Bootstrap Template Intro

 

44 Bootstrap File Structure

 

45 Styling the Navbar

 

46 Showcase Section

 

47 Sections and Footer

 

48 Template Animation

 

SECTION 11: NEWSLETTER DESIGN WITH LESS

49 Newsletter Template Intro

 

50 LESS Environment Setup

 

51 Newsletter HTML

 

52 Newsletter CSS & LESS 1

 

53 Newsletter CSS & LESS 2

 

SECTION 12: COURSE SUMMARY

54 Course Summaries

 

Reviews of Learn CSS3 and HTML Development By Building Projects

Rating - 4.4
5 stars 0
4 stars 0
3 stars 0
2 stars 0
1 stars 0

Have you used this product?

Rate Now:
OR
WRITE A REVIEW
Loading
Refer Your Friends
How to refer?

1 Click link below to share on facebook

OR

2 Enter your friends email address and invite them to join cakart (comma seperated)

Buy India's Best CA, CS, CMA Faculty Video Classes only at CAKART