Projects in CSS

Projects in CSS, available at $49.99, has an average rating of 4.35, with 55 lectures, based on 308 reviews, and has 5402 subscribers.

You will learn about Learn CSS design techniques Learn to use LESS and SASS Learn the use of BootStrap Learn best development practices for CSS This course is ideal for individuals who are Frontend Developers or Graphic Designers who want to learn CSS development or Web Design Enthusiasts It is particularly useful for Frontend Developers or Graphic Designers who want to learn CSS development or Web Design Enthusiasts.

Enroll now: Projects in CSS

Summary

Title: Projects in CSS

Price: $49.99

Average Rating: 4.35

Number of Lectures: 55

Number of Published Lectures: 55

Number of Curriculum Items: 55

Number of Published Curriculum Objects: 55

Original Price: $49.99

Quality Status: approved

Status: Live

What You Will Learn

Learn CSS design techniques

Learn to use LESS and SASS

Learn the use of BootStrap

Learn best development practices for CSS

Who Should Attend

Frontend Developers

Graphic Designers who want to learn CSS development

Web Design Enthusiasts

Target Audiences

Frontend Developers

Graphic Designers who want to learn CSS development

Web Design Enthusiasts

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Introduction

Chapter 2: Landing Page Design

Lecture 1: Project Intro

Lecture 2: Base Structure & Reset File

Lecture 3: Page HTML Markup

Lecture 4: Core CSS Style

Lecture 5: Custom CSS Style

Lecture 6: Mobile Responsive CSS

Chapter 3: Responsive Tableless Calendar

Lecture 1: Project Intro

Lecture 2: Calendar HTML Markup

Lecture 3: Events HTML Markup

Lecture 4: Calendar Page CSS

Lecture 5: Calendar Responsive CSS

Chapter 4: Pure CSS Image Slider

Lecture 1: Project Intro

Lecture 2: Intro to CSS Keyframes

Lecture 3: Slider HTML Markup

Lecture 4: Page CSS

Lecture 5: Animation CSS

Chapter 5: Transition Dropdown Menu

Lecture 1: Project Intro

Lecture 2: Intro To CSS Transitions

Lecture 3: Menu HTML Markup

Lecture 4: Menu CSS

Lecture 5: Menu Responsive CSS

Chapter 6: CSS Timeline

Lecture 1: Project Intro

Lecture 2: Timeline HTML Markup

Lecture 3: Timeline Page CSS

Lecture 4: Timeline Inner Element CSS

Lecture 5: Timeline Responsive CSS

Chapter 7: Pricing Tables With Sass

Lecture 1: Project Intro

Lecture 2: Sass Environment Setup

Lecture 3: Pricetables HTML

Lecture 4: Pricetables CSS

Lecture 5: Sass Variables & Features

Chapter 8: CSS Image Gallery

Lecture 1: Project Intro

Lecture 2: Create a Simple Logo in Photoshop

Lecture 3: Gallery HTML & CSS

Lecture 4: Fancybox Plugin

Lecture 5: JQuery Category Filters

Chapter 9: Animated Car

Lecture 1: Project Intro

Lecture 2: Creating the Images

Lecture 3: Car Page HTML & CSS

Lecture 4: Wheel Animation

Lecture 5: Background Animation

Chapter 10: Animated Bootstrap Template

Lecture 1: Project Intro

Lecture 2: Bootstrap File Structure

Lecture 3: Styling The Navbar

Lecture 4: Showcase Section

Lecture 5: Sections & Footer

Lecture 6: Template Animation

Chapter 11: Newsletter Design With LESS

Lecture 1: Project Intro

Lecture 2: LESS Environment Setup

Lecture 3: Newsletter HTML

Lecture 4: Newsletter CSS & LESS 1

Lecture 5: Newsletter CSS & LESS 2

Chapter 12: Course Summary

Lecture 1: Course Summary

Lecture 2: Bonus Lecture: More Interesting Stuff, Offers and Discounts

Instructors

Eduonix Learning Solutions
1+ Million Students Worldwide | 200+ Courses

Eduonix-Tech .

Eduonix Support

Rating Distribution

1 stars: 7 votes

2 stars: 12 votes

3 stars: 28 votes

4 stars: 81 votes

5 stars: 180 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!