Projects in CSS

S$30.00
Take This Course
Projects in CSS

Course Description
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 Design

Description: 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 Design

Project 2 – Responsive Tableless Calendar

Description: 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 Slider

Description: 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 & Positioning

Project 4 – Transition Drop Down Menu

Description: 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 element

Features/Technologies: HTML5, CSS3, Nested Lists, Responsive Web Design, CSS Transitions, JQuery

Project 5 – CSS Timeline

Description: 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 & Positioning

Project 6 – Tables with SASS

Description: 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 packages

Features/Technologies: HTML5, CSS3, Lists, Responsive Web Design, Fluid Layout, Installing, Configuring & Working With SASS

Project 7 – CSS Image Gallery

Description: 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 Photoshop

Features/Technologies: HTML5, CSS3, Responsive Web Design, Fluid Layout, JQuery, JQuery Fancybox Plugin

Project 8 – Animated Car

Description: 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 street

Features/Technologies: HTML5, CSS3, Animation, Keyframes, Image Slicing in Photoshop, Background Images & Positioning

Project 9 – Animated Bootstrap Template

Description: 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 CSS

Features/Technologies: HTML5, CSS3, Animation, Keyframes, Twitter Bootstrap, JQuery

Project 10 – NewsLetter Design with LESS

Description: 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

What are the requirements?
Basic Knowledge of HTML and CSS
What am I going to get from this course?
Learn CSS design techniques
Learn to use LESS and SASS
Learn the use of BootStrap
Learn best development practices for CSS
What is the target audience?
Frontend Developers
Graphic Designers who want to learn CSS development
Web Design Enthusiasts

Curriculum

Section 1: Introduction
Course Introduction
03:55
Section 2: Landing Page Design
Project Intro
02:15
Base Structure & Reset File
14:58
Page HTML Markup
20:15
Core CSS Style
11:08
Custom CSS Style
24:21
Mobile Responsive CSS
08:16
Section 3: Responsive Tableless Calendar
Project Intro
03:08
Calendar HTML Markup
13:49
Events HTML Markup
04:01
Calendar Page CSS
12:57
Calendar Responsive CSS
04:16
Section 4: Pure CSS Image Slider
Project Intro
02:48
Intro to CSS Keyframes
10:53
Slider HTML Markup
10:58
Page CSS
26:19
Animation CSS
08:27
Section 5: Transition Dropdown Menu
Project Intro
02:17
Intro To CSS Transitions
05:43
Menu HTML Markup
12:33
Menu CSS
20:44
Menu Responsive CSS
20:09
Section 6: CSS Timeline
Project Intro
02:10
Timeline HTML Markup
19:27
Timeline Page CSS
09:07
Timeline Inner Element CSS
13:33
Timeline Responsive CSS
08:39
Section 7: Pricing Tables With Sass
Project Intro
03:41
Sass Environment Setup
18:13
Pricetables HTML
08:32
Pricetables CSS
26:26
Sass Variables & Features
12:11
Section 8: CSS Image Gallery
Project Intro
02:45
Create a Simple Logo in Photoshop
07:01
Gallery HTML & CSS
22:32
Fancybox Plugin
10:42
JQuery Category Filters
12:24
Section 9: Animated Car
Project Intro
01:49
Creating the Images
06:47
Car Page HTML & CSS
12:07
Wheel Animation
03:36
Background Animation
07:48
Section 10: Animated Bootstrap Template
Project Intro
03:03
Bootstrap File Structure
11:36
Styling The Navbar
20:04
Showcase Section
19:31
Sections & Footer
14:47
Template Animation
21:32
Section 11: Newsletter Design With LESS
Project Intro
02:55
LESS Environment Setup
10:43
Newsletter HTML
12:36
Newsletter CSS & LESS 1
20:56
Newsletter CSS & LESS 2
16:56
Section 12: Course Summary
Course Summary
04:28

Instructor Biography
Eduonix Learning Solutions, The Knowledge Edge
Eduonix creates and distributes high quality technology training content. Our team of industry professionals have been training manpower for more than a decade. We aim to teach technology the way it is used in industry and professional world. We have professional team of trainers for technologies ranging from Mobility, Web to Enterprise and Database and Server Administration.

Instructor Biography
Eduonix-Tech

Course Features

  • Lectures
    Fatal error: Uncaught Error: Call to undefined method LP_Course::get_lessons() in /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/inc/learnpress-v2-functions.php:624 Stack trace: #0 /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/learnpress-v2/single-course/content-landing.php(64): thim_course_info() #1 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(2492): include('/home2/waf6oo0a...') #2 /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/learnpress-v2/content-single-course.php(65): learn_press_get_template('single-course/c...', Array) #3 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(2492): include('/home2/waf6oo0a...') #4 /home2/waf6oo0adwwo/public_html/wp-content/plugins/learnpress/inc/lp-template-functions.php(1563): learn_press_get_template('content-single-...') #5 /home2/waf6oo0adwwo/public_html/wp-includes/class-wp-hook.php(286): learn_press_content_single_course('') #6 /home2/waf6oo0adwwo/public_html/wp-i in /home2/waf6oo0adwwo/public_html/wp-content/themes/eduma/inc/learnpress-v2-functions.php on line 624