Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add The CSS and CSS3 Crash Course to your Wishlist.

Add to Wishlist

The CSS and CSS3 Crash Course

The most in-depth CSS and CSS3 course on Udemy.
4.4 (74 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,880 students enrolled
Last updated 4/2016
English
$10 $150 93% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
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.

Who is the target audience?
  • Beginning website developers
  • Beginning website designers
  • Experienced website developers
  • Experienced website designers
Students Who Viewed This Course Also Viewed
What Will I Learn?
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
View Curriculum
Requirements
  • A computer
Curriculum For This Course
Expand All 74 Lectures Collapse All 74 Lectures 13:00:53
+
Introduction to the Course
3 Lectures 37:49

Download the source code for this course here.

Preview 07:29


How CSS and HTML Work Together
20:14
+
CSS and CSS3 Basics
27 Lectures 04:31:07
Targeting elements to style them. We look at the most useful.
Selectors (Part 1/4)
10:39

Targeting elements to style them. We look at the most useful.
Selectors (Part 2/4)
11:31

Targeting elements to style them. We look at the most useful.
Selectors (Part 3/4)
11:00

Targeting elements to style them. We look at the most useful.
Selectors (Part 4/4)
08:38

Styling links with CSS, including pseudo classes for hover, visited and active.
Styling Links (Hyperlinks)
13:16

Working with widths and heights in CSS, including maximum and minimum properties for both width and height.
Widths and Heights
12:43

Covering absolute, relative and fixed positioning, why we'd use them, and how to work with them.
Positioning
10:57

Centering an element in CSS, in this case a container we use to wrap our website contents.
Centering a Container
10:11

Display Types
12:27

Expanding on the display property, and a discussion of how and why we use the property value 'none'.
Hiding an Element
04:40

Applying margins and/or padding to elements and how this effects your elements with a brief discussion of the box model.
Margins and Padding
13:43

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.
Overflow
08: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.
Element Stack Order (z-index)
07:31

Cursor changes can be used to give subtle hints to interactive websites where default hover pseudo classes aren't defined in the browser.
Cursors
07:30

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

Box Sizing
07:41

A brief look at colors and how we can specify color in CSS.
Color
10:45

Implementing different fonts, specifying font size and allowing appropriate fallbacks. We also look at the font shorthand property.
Font Basics
13:43

Floats
17:26

Clearfix
06:45

We can transform text using styles alone, as all uppercase/lowercase text is semantically incorrect. We also look at the interesting capitalise functionality.
Forcing Uppercase, Lowercase and Capitalisation
05:38

Aligning text within it's parent element, simple!
Text Alignment
06:30

Indenting text and a very practical example of using this in conjunction with submit buttons.
Text Indenting
11:16

A practical look at backgrounds in CSS, and a less obvious example of what we can do with them.
Backgrounds
12:28

Applying multiple backgrounds to one element in CSS, removing the need for excess markup.
Multiple Background Images
08:59

Changing the size of a background image. Useful when the same image needs to be used twice at different sizes.
Background Size
05:56

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.
Borders
11:01

Applying borders to elements, as images. This can be extremely useful to avoid any additional markup.
Border Images
09:42
+
Your First CSS Projects
6 Lectures 01:15:46
A very basic, fixed width layout. This basic tutorial takes you on a very short journey of creating this layout from start to finish.
Build a Website (Part 1/3)
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.
Build a Website (Part 2/3)
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.
Build a Website (Part 3/3)
14:10

Creating a pure CSS dropdown tool menu. Cross browser compatible, scalable and fast.
Dropdown List Menu (Part 1/2)
09:41

Easily create a pure CSS drop-down menu, no JavaScript or other technology required.
Pure CSS Drop-Down Menu
14:34

Creating a pure CSS dropdown tool menu. Cross browser compatible, scalable and fast.
Dropdown List Menu (Part 2/2)
11:49
+
Intermediate CSS and CSS3
9 Lectures 01:46:12
Creating a horizontal menu, by styling an unordered list and the list items within it.
Horizontal Menu (Part 1/2)
12:43

Creating a horizontal menu, by styling an unordered list and the list items within it.
Horizontal Menu (Part 2/2)
13:38

Creating and styling a vertical menu, with a hover effect for each button.
Vertical Menu
12:01

Styling a class, which we apply to an anchor (a) element to give it a clean, nice looking button appearance.
Creating a Button
11:06

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.
Display Property
08:09

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.
Floating Elements
17:02

Styling h1, h2, etc. elements, their default properties and some properties we can add to headers to change their appearance with careful targeting.
Styling Headers
08:56

A quick, dirty way to clear floats without having to add additional markup to a page.
Clearfix (For Clearing Floats)
13:24

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.
Styling Unordered Lists
09:13
+
Advanced CSS and CSS3
9 Lectures 01:32:24
Changing the opacity of elements, making them more transparent.
Opacity
06:17

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!
Sprites
14:33

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.
Dashed Link Underline
06:55

Rounding borders is the most useful thing to avoid excess markup and can be easily implemented, with some more advanced functionality if required.
Rounded Borders
11:47

Looking at adding shadows to elements with CSS to create depth and some nice effects.
Element Shadows (Box Shadow)
07:22

Text shadows can increase readability, add depth or give specific effects.
Text Shadows
10:37

What is a pseudo element? Why do we use them? And a more specific look at before and after with an example.
Before and After Pseudo Elements
13:48

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.
Image Overlay Effect (Part 1/2)
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.
Image Overlay Effect (Part 2/2)
11:34
+
2D Transformations
4 Lectures 30:00
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.
2D Transformations (Part 1/4)
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.
2D Transformations (Part 2/4)
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.
2D Transformations (Part 3/4)
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.
2D Transformations (Part 4/4)
05:35
+
Fun Advanced Topics
16 Lectures 02:47:37
No, not for a website container! For data, which tables are and always have intended for.
Styling Tables (Part 1/2)
13:38

No, not for a website container! For data, which tables are and always have intended for.
Styling Tables (Part 2/2)
10:44

An integral part of many websites, most form elements appearance can be changed with CSS to break away from the default styles.
Styling Form Elements (Part 1/2)
11:37

An integral part of many websites, most form elements appearance can be changed with CSS to break away from the default styles.
Styling Form Elements (Part 2/2)
07:00

Slide Out Navigation Part 1
12:50

Slide Out Navigation Part 2
05:51

Buttons
18:31

Quickly and easily create triangles in CSS with any colour, size, shape or direction.
Quick & Easy CSS Triangles
03:30

Progress Bar
12:52

Create a 3D cube using CSS3 styles. A bit of fun to demonstrate the power of CSS.
Creating a 3D Cube with CSS3
18:53

A clean, modern looking effect for displaying a user's profile image.
Create a CSS3 Avatar/Profile Picture Effect
03:49

Create a speech bubble effect, useful for comment posts.
CSS Speech Bubble Comment Effect
13:20

A headline effect usually found on carousels. The aim of this is to set the background so it follows the line breaks.
CSS Headline Background Effect
12:23

Create a swanky play button for video overlay, with pure CSS.
Pure CSS Video Play Button
11:34

How to download, include and use font icon packs.
CSS Icon Fonts
10:43

Request a Course
00:22
About the Instructor
4.3 Average rating
11,112 Reviews
228,457 Students
185 Courses
220,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.

Report Abuse