Projects in CSS
4.2 (299 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,357 students enrolled

Projects in CSS

Learn Professional CSS Development Techniques Building Projects
4.2 (299 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,357 students enrolled
Last updated 12/2018
English [Auto]
Current price: $41.99 Original price: $59.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 1 article
  • 42 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn CSS design techniques
  • Learn to use LESS and SASS
  • Learn the use of BootStrap
  • Learn best development practices for CSS
Course content
Expand all 55 lectures 10:13:10
+ Landing Page Design
6 lectures 01:21:13

Getting to know the project.

Preview 02:15

Building blocks of the project - Creating the base structure

Preview 14:58

Learn to build the Page HTML

Page HTML Markup

Building the Core CSS for the site

Core CSS Style

Adding the custom CSS style

Custom CSS Style

Learn to make the the CSS responsive

Mobile Responsive CSS
+ Responsive Tableless Calendar
5 lectures 38:11

Introduction to the project calendar

Project Intro

Learn to create the HTML file for the project

Calendar HTML Markup

Creating the HTML for the Events in calendar

Events HTML Markup

Building the CSS for the calendar

Calendar Page CSS

Making the CSS responsive

Calendar Responsive CSS
+ Pure CSS Image Slider
5 lectures 59:25

Introduction to CSS Image slider project

Project Intro

Learn the concept behind CSS keyframes

Intro to CSS Keyframes

Slider HTML development

Slider HTML Markup

CSS for the HTML page

Page CSS

Creating the Animation using CSS

Animation CSS
+ Transition Dropdown Menu
5 lectures 01:01:26

Introduction to the project

Project Intro

Introduction to the concept of CSS transitions

Intro To CSS Transitions

Building the Menu HTML

Menu HTML Markup

Adding the menu css

Menu CSS

Creating the responsive design using CSS

Menu Responsive CSS
+ CSS Timeline
5 lectures 52:56

Introduction to CSS timeline project

Project Intro

Building the HTML for the project

Timeline HTML Markup

Building the CSS for the project

Timeline Page CSS

Inner Element CSS usage for the product

Timeline Inner Element CSS

Building the responsive css

Timeline Responsive CSS
+ Pricing Tables With Sass
5 lectures 01:09:03

Introduction to the project

Project Intro

Learn to setup SASS for development

Sass Environment Setup

Building the HTML for pricetables

Pricetables HTML

Building the CSS for the pricetable

Pricetables CSS

Introduction to SASS variables and features

Sass Variables & Features
+ CSS Image Gallery
5 lectures 55:24

Introduction to Project

Project Intro

A simple photoshop logo

Create a Simple Logo in Photoshop

Building the HTML and CSS of the project

Gallery HTML & CSS

Learn to use the fancybox plugin in your project

Fancybox Plugin

Learn to use the JQuery category filters

JQuery Category Filters
+ Animated Car
5 lectures 32:07

Introduction to animated car project

Project Intro

Creating the images for the project

Creating the Images

Building the Car Page HTML and CSS

Car Page HTML & CSS

Learn to animate the wheel.

Wheel Animation

Learn to implement the background animation

Background Animation
+ Animated Bootstrap Template
6 lectures 01:30:33

Introduction to the project

Project Intro

Understanding the bootstrap file structure

Bootstrap File Structure

Styling the navbar for the project

Styling The Navbar

Creating the Showcase Section.

Showcase Section

Creating the sections and footer for the template

Sections & Footer

Creating the animation for our template

Template Animation
  • Basic Knowledge of HTML and CSS

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

Who this course is for:
  • Frontend Developers
  • Graphic Designers who want to learn CSS development
  • Web Design Enthusiasts