Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Learn CSS and CSS 3 from scratch to your Wishlist.

Add to Wishlist

Learn CSS and CSS 3 from scratch

A complete guide that targets only CSS and CSS 3. No need to be afraid of CSS any more
4.3 (6 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.
55 students enrolled
Last updated 4/2016
$10 $150 93% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 5.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
full understanding of every CSS code
getting started with CSS 3
understanding the fundamentals of CSS
get better in designing of web
Learn about best tools to write faster CSS
View Curriculum
  • HTML knowledge is must
  • fundamentals of computer
  • editor to write code (instruction for free editors are in course)

Hey there, welcome to learn css and css 3 from scratch. We understand that looks in web development matters a lot. If you need to impress a user, a web page should look awesome and then only user might test the functionality of that website.

If you want to make your webpage look awesome, CSS is one stop that you need to make for sure. CSS or cascading style sheet allows you to modify the content of web page and makes sure that everything looks elegant, clean and sharp on every device. It might be your mobile phones, tablets or big desktop screens.

Usually courses like to take CSS just casually and teach them as a side bar with HTML. But this is not the case with this course. We are taking CSS very seriously and hence a dedicated 6-hour content, which will grow in future.

We will start the course by installing proper tools require to write faster CSS. Then we will give you exercise files and each exercise file will help you to understand a new concept. We will take backgrounds, colors, ID’s and Classes, Box models along with text properties. Further we will explore Selectors in depth so that you can edit any template easily. Further we will move towards, CSS 3 and look at 2-D and 3-D transformations of objects. We will cover the responsive designs and media queries. And finally we will refer some books and online resource to learn in future.

Want to upgrade your web development skills or want to design a website that looks great on different devices; this course has got all covered.  We have done great research to make sure that content is in full sequence so that students learns and also completes the course. You won’t feel bore in the course, that our guarantee.

So, enough of talking and lets launch an editor and write some great CSS code. Join the course and see you inside.

Who is the target audience?
  • web developer
  • new to CSS
  • new to web design
  • beginner friendly course for web developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 46 Lectures Collapse All 46 Lectures 05:43:28
Introduction to CSS
6 Lectures 32:39

Getting introduction to the course and few tips before watching the course

Preview 04:49

In this movie we will get the tools that we need to write CSS in an effective and productive manner. These tools will suggest the code and makes life easier

Preview 06:36

In order to go into more details we first need to understand What is CSS and why CSS is so important. CSS makes websites look good and study about it in detail

What is CSS and exercise files in this lecture

Let's have a look on CSS basic syntax and explore the difference between ID and Classes. How can we select ID and classes to style them up

Syntax and ID vs Classes

ID is unique in Html file while one class can be used many times. In this movie we will take a look at ID classes and grouping of classes

ID Classes and Grouping

You can write CSS at multiple points. Let's see what is the difference in writing CSS in same file or a separate file, which one is best at what situation

Preview 06:49
Backgrounds, colors and Paddings in CSS
8 Lectures 47:12

puting a background is important. Sometime we put just a solid color, sometime we put put images or videos in background. Let's explore this in this movie

Backgrounds in CSS

Border is less used and very powerful concept of CSS. In early days, everyone seems to be using this but now people are switching towards CSS shadows

Border in CSS

Hexadecimal Color Codes. This page demonstrates the six-digit hexadecimal representation of color of the form #RRGGBB, where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.

Hexadecimal Colors

 The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

RGB colors

HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation.

HSL and Opacity of colors

Margin is the important concept to make sure that every object is placed at desired position in the page. Lets explore the concept of margins in this css

Margins in CSS

Paddings is the important concept to make sure that every object is placed at desired position in the page. Lets explore the concept of margins in this css

Paddings in CSS

Let's learn to adjust Height and width of any object using CSS properties. Specially in case of images, it's always a good idea to define height and width to make sure aspect ratio remains good

Adjusting height and width
Text properties
4 Lectures 36:20

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.

Text properties in CSS

In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic), and weight (like regular and bold).

The web browser will only be able to apply a font if it is available on the system on which it operates, which is not always the case.

Fonts and Google Fonts

links in the CSS can be styled in many ways and at least one style should be applied on them otherwise they just look bad with blue color and underline.

Styling the links

Tables are extensively used in the web page. Styling the tables sometime goes in such a depth that it is even hard to specify that it is a table

Styling the tables
Selectors in depth
7 Lectures 59:01

selectors are an important part of CSS to handle complex already built in pages. We can target very specific and deep buried elements using selectors 

Selectors Part 1

Due to many selectors, we have broken down the topic in 3 parts, in the second part we will look at more dedicated selector topics

Selectors part 2

Due to many selectors, we have broken down the topic in 3 parts, in the second part we will look at more dedicated selector topics. Although selectors can go in further depth, but this is good for now

Selectors part 3

Box model is just term giving for the sake of understanding. It is just a combination of padding and margins. Once we are clear with box model, further we can calculate the length of item on web page

Box model in css

Some time we need to set the margins automatically. So we will talk about the in this movie. Also we will talk about outline and display properties

Outline, display and Auto margins

Position of an element can be of various type like absolute, fixed, inherit and relative. We will  explore all such things in this movie

Position of elements

Hover is the important property that can be applied to almost all things on a web page like links, division and images. Let's learn about them

Inline block and hover
Conflicts, cascading and inheritance
7 Lectures 57:22

Let's learn about styling the navigation bar. Navigation bar is used to move from one page to another on a website and that can be styled in various ways

Styling navigation bar

Drop down menus are a way to put lots of option to navigate and hide them in tree structure. it really makes sense when we have many pages to move on

Drop down menus

Images plays in important role in making a website looks good. Lets learn about the implementation of images using the CSS

Playing with images

An Assignment was given in the last movie,if you did that already, then you can skip this movie, other wise, lets do it

Completing the assignment

Forms are an important part to take input from the user. Lets learn how we can make forms more impressive using CSS

Forms and transition

Conflicts are for sure going to happen in the CSS. In this movie we will learn to handle conflicts. Also we will look at cascading concepts too

Preview 08:58

important declaration is used to over ride every other rule and the rule with important always wins over the other rules mentioned anywhere in the css

Important declaration
More features in CSS 3
9 Lectures 01:17:56

Exploring the CSS 3 basic feature and learning the difference between the versions of css 3. This movie is just a basic idea about CSS 3

What is CSS 3

One of the developers favourite thing is to get rounded corners with css3. This was done with images before but now things are much simpler

Rounded corners and circles

Borders and gradients are now redefined in CSS3. Specially, now we don't need gradient images for fancy backgrounds. This increases the load time of the page

Image borders and gradients

This is going to be a simple exercise. In this we will design a simple 3-d box of date. With box shadow property, we will give it a 3-d look

Designing a 3d date box

Text shadow is important update to get rid of text images. Now we can give shades to text and with google fonts we have many designs to give it a try

Text and box shadows

2-d transformation is the ability to move object like images and division in 2-d. We can change the size, move them at right or left.

2-D transforms in CSS

3-d transformations is the revolutionary update in css 3 giving us the opportunity to make more cool stuff with only css and html. Have a look at this video to get some examples

3-D transforms in CSS

Transition is the property that sometimes can handle complex tasks that were meant to be handled by javascript. This is again an advantage

Transition in CSS

Animation is something that makes website extraordinary. It is not heavy on the site also because there is no flash in order to run it

Animation in details
Responsive designs
4 Lectures 26:34

We will  put CSS properties to video frame so that it looks nice on all screen sizes like mobile, tablets and desktop. We will  use youtube videos in this example

Responsive Videos

With CSS 3, now we can put a query to the browser to find out the size of current device. Based on that, we can write custom css for that device

Basics of media queries

Grid view is the basis of bootstrap foundation and many other responsive frameworks. Let's learn the basics of grid view in this example video

Grid views in CSS

Finally, a simple assignment for you to explore internet and get the task done. In this task, every component is responsive, except the image. get the image responsive too, to complete the assignment

Complete responsive page and assignments
Farewell and learning resources
1 Lecture 06:24

Thanks for taking the course and hope to see you in other igneus courses at Udemy

Farewell and Free learning resources
About the Instructor
4.4 Average rating
1,713 Reviews
61,933 Students
31 Courses
Best Comprehensive Courses

We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.

IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.

IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.

Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.

Report Abuse