Projects in CSS (Udemy.com)

Learn Professional CSS Development Techniques Building Projects

Created by: Eduonix Learning Solutions

Produced in 2018

icon
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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 88 / 100

icon
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 Who this course is for:
  • Frontend Developers
  • Graphic Designers who want to learn CSS development
  • Web Design Enthusiasts

icon
Instructor Details

placeholder

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.

icon
More courses by Eduonix Learning Solutions

Learn Ruby on Rails from Scratch

$11.99

Learn Adobe Photoshop from Scratch

$11.99

The Full Stack Web Development

$11.99

Learn Nodejs by building 12 projects

$11.99

Learn HTML5 Programming From Scratch

$11.99

Learn Socket Programming in C from Scratch

$11.99

icon
More css courses

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

$11.99

Step By Step HTML and CSS course for beginners

$11.99

The Complete HTML and CSS Course For Beginners

$11.99

Web Design: Wireframes to Prototypes

Free

Modern HTML & CSS From The Beginning (Including Sass)

$11.99

Materialize CSS From Scratch With 5 Projects

$11.99

icon
Reviews

4.4

50 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

By Cherry Hackney

Instructor very knowledgeable and very easy to follow...

By Ismet Glumcevic

Course explain css in details and it is very easy to follow course.

By Javier González Hernández

Un buen curso para incorporar CSS en tus aplicaciones. Buenos ejemplos. El autor habla despacio y esto hace fácil seguirlo aunque tu nivel de inglés no sea muy alto.

By Jakub Grzywaczewski

Some things just not work properly, course should be update in some points.

By Master Norman

He should first make a skeleton of the page with all the top level divs, forms etc. Then, he should fill the code in these sections, one change at a time and show the change in the browser. This is step by step teaching. Instead, he just types a lot of code and then checks its output. You don't know which part of the code did what.

If people are copy pasting and reverse engineering your code then why should people pay you $150 ? Why not $25 because we can get the same code off freelancer sites ?

Often, he does not explain why he did something. Eg. Assign an id to a div or put some content in a div without telling us why. The support is also poor which is clear from the one line replies to our questions all the time. However, I still managed to get a little bit out of these courses because I used books and competitor tutorials before I came here.

$150 for this course is outrageous. It seems that all Eduonix only wants to make a quick buck. I doubt if Udemy even reviews any of these courses before charging a lot of $$$ for them. Its better to go to Udemy's competitors if we have to pay $150 for crappy courses like these.

By Rick Blaze

Pretty good WYSIWYG demo, and a fine start for seeing what CSS can do. But could use a little more depth on explaining the syntax details. Or at least point us to where good CSS references/resources can be found to learn the details. e.g. What do you use when you want to drill down deep or look at other examples? Teach us how to fish...

By Stephen White

Good class with lots of examples. I will be able to use a lot of the information on web sites that I will be creatiing.

By Noel Kelly

Alright for students with knowledge of CSS and HTML who want to tackle a few projects and get some practise, but the lessons go much too fast to really learn an awful lot. Making things worse, is the almost complete lack of actual instruction. The instructor says out loud what he is doing, but doesn't really explain *why* he is doing it, or the expected outcome. There are also sections where the instructor is using SASS or LESS, but doesn't explain how to set up the environments on a Mac. There are sections where he attempts to teach Photoshop and even jQuery, which should really be beyond the scope of this course.

All in all, I didn't learn much, but I got a little practise at least.

By Smrtypntz

I'm not finished with this course yet, but so far I am not impressed and not super excited to continue. The instructor seems to know what he is doing and speaks clearly, however pretty much all he does is type out code. There are few explanations as to why he is doing what he is doing. Three of the four projects I have completed have issues (as pointed out by the fellow students) and either won't work in certain browsers, are out-of-date, or have technical issues that need to be addressed before the project could be implemented successfully. And from what I can see the instructor does not respond to hardly any questions raised by the students. So, if all you are looking for is some code to copy and paste (and don't care that some of it won't function as is) then this might be a good course for you.

By Noor ali Bayat

I really enjoyed learning Web skill as the instructor is tremendous

By Rama spencer

Very detail, easy to follow & great project. Great for beginner & who want it to go to the next level. More course with the same tutor please !!

By Irma Lampinen

I found here lot of things I did not know, even I thought I knew CSS.