The CSS and CSS3 Crash Course

The most in-depth CSS and CSS3 course on Udemy.
4.5 (52 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.
1,751 students enrolled
$19
$150
87% off
Take This Course
  • Lectures 74
  • Length 13 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 3/2013 English

Course Description

Like us on Facebook and/or Follow us on Twitter. Message us to let us know you liked us, or Tweet us @sr_elearning.

Link to Our Facebook Page

Link to Our Twitter Profile

Stone River eLearning

_____________________________________________________________________________________

With more video content than any CSS or CSS3 course on Udemy, you can be sure you'll learn everything you need without having to read hundreds of pages of text. No eBook here, just great video content.

If you have ever wanted to become a web developer, then you know you need to know both CSS and CSS3. It's your choice how you learn it. You can read through a textbook or eBook, or you can have your own personal tutor showing you how to do everything every step of the way. That's what this course is all about.

If you're interested in more programming, web development or mobile app development courses, Stone River eLearning has everything you need.

How the Course is Taught

This course is taught via a step-by-step tutorial system. You will start with tutorials for beginners who are new to CSS and CSS3 programming and move through progressively more difficult skills, including everything you need to know to build a fully functional, modern and sleek website.

Course Length

There are well over 11 hours of video lectures in this course. It is estimated that you would spend anywhere from 30 - 100 hours in total after viewing all the lectures to practice and master each skill on your own.

Why Take this Course?

You should take this course because it is comprehensive, easy to follow, inexpensive, fun and exciting! Web development is a huge industry, and if you really want to become an app developer, it starts with CSS and CSS3.

What are the requirements?

  • A computer

What am I going to get from this course?

  • To understand what CSS and CSS3 are
  • To learn the basic techniques of CSS and CSS3
  • To greatly advance your knowledge of CSS and CSS3
  • To build your first website
  • To build many more websites in the future

What is the target audience?

  • Beginning website developers
  • Beginning website designers
  • Experienced website developers
  • Experienced website designers

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 the Course
07:29

Download the source code for this course here.

Understanding CSS
Preview
10:06
How CSS and HTML Work Together
20:14
Section 2: CSS and CSS3 Basics
10:39
Targeting elements to style them. We look at the most useful.
11:31
Targeting elements to style them. We look at the most useful.
11:00
Targeting elements to style them. We look at the most useful.
08:38
Targeting elements to style them. We look at the most useful.
13:16
Styling links with CSS, including pseudo classes for hover, visited and active.
12:43
Working with widths and heights in CSS, including maximum and minimum properties for both width and height.
10:57
Covering absolute, relative and fixed positioning, why we'd use them, and how to work with them.
10:11
Centering an element in CSS, in this case a container we use to wrap our website contents.
Display Types
12:27
04:40
Expanding on the display property, and a discussion of how and why we use the property value 'none'.
13:43
Applying margins and/or padding to elements and how this effects your elements with a brief discussion of the box model.
08:31
Overflowing is a way to handle content that flows outside the constraints of a parent container, and can be used for a variety of purposes.
07:31
We can specify the stacking order of elements by defining the z-index. This may not seem immediately useful, but it's essential to understand this property.
07:30
Cursor changes can be used to give subtle hints to interactive websites where default hover pseudo classes aren't defined in the browser.
07:41

Breaking away from the box model, we can define how padding and borders can be essentially ignored using box sizing in CSS.

10:45
A brief look at colors and how we can specify color in CSS.
13:43
Implementing different fonts, specifying font size and allowing appropriate fallbacks. We also look at the font shorthand property.
Floats
17:26
Clearfix
06:45
05:38
We can transform text using styles alone, as all uppercase/lowercase text is semantically incorrect. We also look at the interesting capitalise functionality.
06:30
Aligning text within it's parent element, simple!
11:16
Indenting text and a very practical example of using this in conjunction with submit buttons.
12:28
A practical look at backgrounds in CSS, and a less obvious example of what we can do with them.
08:59
Applying multiple backgrounds to one element in CSS, removing the need for excess markup.
05:56
Changing the size of a background image. Useful when the same image needs to be used twice at different sizes.
11:01
Styling element borders, including different border styles, widths and how this effects the size of your element with a brief discussion of the box model.
09:42
Applying borders to elements, as images. This can be extremely useful to avoid any additional markup.
Section 3: Your First CSS Projects
11:19
A very basic, fixed width layout. This basic tutorial takes you on a very short journey of creating this layout from start to finish.
14:13
A very basic, fixed width layout. This basic tutorial takes you on a very short journey of creating this layout from start to finish.
14:10
A very basic, fixed width layout. This basic tutorial takes you on a very short journey of creating this layout from start to finish.
09:41
Creating a pure CSS dropdown tool menu. Cross browser compatible, scalable and fast.
14:34
Easily create a pure CSS drop-down menu, no JavaScript or other technology required.
11:49
Creating a pure CSS dropdown tool menu. Cross browser compatible, scalable and fast.
Section 4: Intermediate CSS and CSS3
12:43
Creating a horizontal menu, by styling an unordered list and the list items within it.
13:38
Creating a horizontal menu, by styling an unordered list and the list items within it.
12:01
Creating and styling a vertical menu, with a hover effect for each button.
11:06
Styling a class, which we apply to an anchor (a) element to give it a clean, nice looking button appearance.
08:09
Different display types allow us to specific how elements naturally sit. Whether this be in line with other elements, a block, or a combination of the two.
17:02
The dreaded float isn't actually that hard to grasp. We look at a practical example of applying floats to elements to create a comment-like box. We also look at creating a class to clear any floated elements.
08:56
Styling h1, h2, etc. elements, their default properties and some properties we can add to headers to change their appearance with careful targeting.
13:24
A quick, dirty way to clear floats without having to add additional markup to a page.
09:13
Unordered lists are easy and flexible to implement and style, with a variety of applications. We look at creating an unordered list and style specific aspects of a list.
Section 5: Advanced CSS and CSS3
06:17
Changing the opacity of elements, making them more transparent.
14:33
Sprites are often underused. Good use of sprites can decrease HTTP requests and increase page load time! And, they're easier than you thought to handle!
06:55
An effect often seen floating around the internet, this tutorial will show you how to create a nice dashed underline effect to links, with a hover effect.
11:47
Rounding borders is the most useful thing to avoid excess markup and can be easily implemented, with some more advanced functionality if required.
07:22
Looking at adding shadows to elements with CSS to create depth and some nice effects.
10:37
Text shadows can increase readability, add depth or give specific effects.
13:48
What is a pseudo element? Why do we use them? And a more specific look at before and after with an example.
09:31
A popular effect, involving laying a transparent block with text over an image. We create this effect, with a look at IE problems and fallbacks.
11:34
A popular effect, involving laying a transparent block with text over an image. We create this effect, with a look at IE problems and fallbacks.
Section 6: 2D Transformations
03:29
We can now start to use 2D transformations to apply a variety of transformations to elements. We look at different effects and how we apply them.
11:28
We can now start to use 2D transformations to apply a variety of transformations to elements. We look at different effects and how we apply them.
09:28
We can now start to use 2D transformations to apply a variety of transformations to elements. We look at different effects and how we apply them.
05:35
We can now start to use 2D transformations to apply a variety of transformations to elements. We look at different effects and how we apply them.
Section 7: Fun Advanced Topics
13:38
No, not for a website container! For data, which tables are and always have intended for.
10:44
No, not for a website container! For data, which tables are and always have intended for.
11:37
An integral part of many websites, most form elements appearance can be changed with CSS to break away from the default styles.
07:00
An integral part of many websites, most form elements appearance can be changed with CSS to break away from the default styles.
Slide Out Navigation Part 1
12:50
Slide Out Navigation Part 2
05:51
Buttons
18:31
03:30
Quickly and easily create triangles in CSS with any colour, size, shape or direction.
Progress Bar
12:52
18:53
Create a 3D cube using CSS3 styles. A bit of fun to demonstrate the power of CSS.
03:49
A clean, modern looking effect for displaying a user's profile image.
13:20
Create a speech bubble effect, useful for comment posts.
12:23
A headline effect usually found on carousels. The aim of this is to set the background so it follows the line breaks.
11:34
Create a swanky play button for video overlay, with pure CSS.
10:43
How to download, include and use font icon packs.
Request a Course
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 200,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 370,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.

Ready to start learning?
Take This Course