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.6 (12 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.
51 students enrolled
$19
$150
87% off
Take This Course
  • Lectures 46
  • Length 5.5 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 4/2016 English

Course Description

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.

What are the requirements?

  • HTML knowledge is must
  • fundamentals of computer
  • editor to write code (instruction for free editors are in course)

What am I going to get from this course?

  • 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

What is the target audience?

  • web developer
  • new to CSS
  • new to web design
  • NOT FOR PROFESSIONAL
  • beginner friendly course for web developers

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.

Curriculum

Section 1: Introduction to CSS
04:49

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

06:36

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

03:49

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

05:28

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

05:08

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

06:49

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

Section 2: Backgrounds, colors and Paddings in CSS
09:54

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

07:08

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

05:42

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.

03:40

 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.

04:37

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.

07:05

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

04:51

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

04:15

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

Section 3: Text properties
08:25

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.

11:54

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.

07:41

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.

08:20

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

Section 4: Selectors in depth
07:54

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 

08:37

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

04:38

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

08:26

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

07:48

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

16:40

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

04:58

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

Section 5: Conflicts, cascading and inheritance
09:15

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

15:08

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

08:06

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

05:22

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

07:17

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

08:58

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

03:16

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

Section 6: More features in CSS 3
03:25

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

08:52

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

11:17

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

10:00

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

07:20

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

09:04

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.

07:55

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

06:45

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

13:18

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

Section 7: Responsive designs
08:32

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

06:32

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

07:20

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

04:10

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

Section 8: Farewell and learning resources
06:24

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Igneus Technologies, 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.

Ready to start learning?
Take This Course