Projects in CSS

Learn Professional CSS Development Techniques Building Projects
4.3 (179 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
4,366 students enrolled
70% off
Take This Course
  • Lectures 54
  • Length 10 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2014 English

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

Who is the target audience?

  • Frontend Developers
  • Graphic Designers who want to learn CSS development
  • Web Design Enthusiasts

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

Introduction to CSS design course

Section 2: Landing Page Design

Getting to know the project.


Building blocks of the project - Creating the base structure


Learn to build the Page HTML


Building the Core CSS for the site


Adding the custom CSS style


Learn to make the the CSS responsive

Section 3: Responsive Tableless Calendar

Introduction to the project calendar


Learn to create the HTML file for the project


Creating the HTML for the Events in calendar


Building the CSS for the calendar


Making the CSS responsive

Section 4: Pure CSS Image Slider

Introduction to CSS Image slider project


Learn the concept behind CSS keyframes


Slider HTML development


CSS for the HTML page


Creating the Animation using CSS

Section 5: Transition Dropdown Menu

Introduction to the project


Introduction to the concept of CSS transitions


Building the Menu HTML


Adding the menu css


Creating the responsive design using CSS

Section 6: CSS Timeline

Introduction to CSS timeline project


Building the HTML for the project


Building the CSS for the project


Inner Element CSS usage for the product


Building the responsive css

Section 7: Pricing Tables With Sass

Introduction to the project


Learn to setup SASS for development


Building the HTML for pricetables


Building the CSS for the pricetable


Introduction to SASS variables and features

Section 8: CSS Image Gallery

Introduction to Project


A simple photoshop logo


Building the HTML and CSS of the project


Learn to use the fancybox plugin in your project


Learn to use the JQuery category filters

Section 9: Animated Car

Introduction to animated car project


Creating the images for the project


Building the Car Page HTML and CSS


Learn to animate the wheel.


Learn to implement the background animation

Section 10: Animated Bootstrap Template

Introduction to the project


Understanding the bootstrap file structure


Styling the navbar for the project


Creating the Showcase Section.


Creating the sections and footer for the template


Creating the animation for our template

Section 11: Newsletter Design With LESS

Introduction to the project


Setting up the environment for LESS


Building the HTML for newsletter


Building the CSS with LESS - Part 1


Building the CSS with LESS - Part 2

Section 12: Course Summary

Course Wrap-Up

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Eduonix Learning Soultions, 1+ Million Students Worldwide | 200+ Courses

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

Instructor Biography

Ready to start learning?
Take This Course