Mastering CSS
4.3 (274 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,897 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering CSS to your Wishlist.

Add to Wishlist

Mastering CSS

Get to grips with CSS best practices to create modern, responsive, and retina-ready websites
4.3 (274 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,897 students enrolled
Created by Packt Publishing
Last updated 8/2015
Curiosity Sale
Current price: $10 Original price: $95 Discount: 89% off
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Master the fundamental CSS concepts, such as the box model, the anatomy of a rule set, and the types of style sheets
  • Take advantage of the Chrome developer tools to troubleshoot CSS
  • Explore some of the most solid techniques used to solve the problems of floats, such as the clearfix hack
  • Rename elements with classes, use descendant selectors, and understand specificity rules
  • Become proficient with CSS3 properties such as transitions, transforms, gradients, pseudo classes, and animations
  • Leverage the power of absolute, relative, static, and fixed positioning techniques
  • Delve into modular, reusable, and scalable CSS for more organized and smaller style sheets
  • Understand media queries and the other fundamentals of responsive web design
  • Get creative with the @font-face property, font kits, Google Web Fonts, subscription font services, and icon fonts
  • Display the workflow for HiDPI (retina) devices using 2x images, 1.5x images, JavaScript approaches, and SVG
View Curriculum
  • This web development video course has been designed to help you build your knowledge of CSS and master one of the most valuable tools in modern web design.

CSS is a deceptively simple presentation language that has significantly developed over the last few years. Frontend developers need to keep style sheets manageable and organized by taking a modular approach to building a website. They can either wrestle with it, or learn how to master it in order to easily apply layouts and styles with precision.

This web development video course has been designed to help you build your knowledge of CSS and master one of the most valuable tools in modern web design.

We start off with a brief review of the foundations of CSS by using a good text editor to automate your authoring and set up a CSS baseline. We then move on to creating a layout with floats and a functioning menu with dropdowns, taking a modular-organized approach to CSS. We'll also go into detail about CSS3 properties such as transforms, transitions, and animations. By the end, you'll have an understanding of responsive web design, web fonts, icon fonts, and techniques used to support retina devices; all things a modern frontend web developer must know.

We deep dive into a lot of details of CSS in this course, from creating a modern looking ghost button and a big call-to-action button to the supposedly difficult and scary SVG. Mastering CSS will arm you with all the knowledge, tips, and tricks you need to make you stand out in the world of developing complex, responsive, feature-rich web applications.

About the Author

Rich Finelli is a husband and a father living in Piscataway, NJ, working as a frontend developer. He's truly passionate and excited for all frontend technologies and enjoys learning about web design and development. He also teaches two courses on CSS at Mercer County Community in NJ, and writes about web design on his blog.

Who is the target audience?
  • If you know a little bit about CSS but struggle with floats, or creating tricky UI elements such as a dropdown menu, and you want to expand on your knowledge of CSS to learn responsive web design, web fonts, SVG, retina techniques, icon fonts, and other advanced-level topics, this is the course for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
42 Lectures
CSS Foundations
3 Lectures 19:31

The course needs a summary that describes what will be learned over the course of each section, provide a course overview, and describe what will be learned.

The Course Overview

In order to style websites with CSS, you must understand the syntax for writing CSS rules.

The Anatomy of a Rule Set and the Three Types of Style Sheets

All CSS elements conform to a box model. If the box model isn't understood completely, CSS cannot be mastered. The same goes with block and inline elements.

The Box Model and Block versus Inline Elements
Ramping Up
5 Lectures 32:04

Writing code is error-prone and hard; a good text editor like Sublime Text 3 solves this problem.

Preview 06:51

Browsers add a lot of default styling, especially margins and padding. A nice CSS reset can solve this and allow you to provide the styling.

CSS Reset

CSS doesn't always work without failing. Usually, it's a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.

Chrome Dev Tools

CSS allows you to position, style, and control elements on a page. What if you want to style one div differently than another? You can name an element with a class.

Renaming Elements: Classes and IDs

Renaming elements with classes is an extremely powerful feature in CSS. However, this is not the only way to target a specific type of element. Descendant selectors allow you to target elements on a page based on their parent element.

Descendant Selectors
Creating a Page Layout with Floats
3 Lectures 18:10

How to have text flow around an image? The origin of floats.

Preview 05:08

How do we create a page layout without abusing tables? Using Floats.

Creating a Multicolumn Layout

When all elements inside a container are floated, the container "collapses." We'll go over three methods of fixing this.

Solving the Problems of Floats
Creating Buttons with Modular, Reusable CSS Classes, and CSS3
7 Lectures 40:37

Buttons appear all over a site (Go Premium, Learn More, Submit, and so on) and usually have the same general style but vary in things such as color, width, and position. Creating modular lightweight classes to handle this variation can be very efficient.

Preview 05:17

Buttons vary throughout the site, but a good portion of the button style remains the same. Multiple classes on an element will allow variation in our style with an object-oriented approach.

Multiple Classes

Understanding which selectors overrule other selectors can be confusing. Throughout a site, overriding styles tends to be common, so understanding specificity and weight is important.

Specificity Rules

Creating an added experience layer, transitioning elements from the default to hover state and vice versa.


CSS3 allows us to transform elements like never before.


Most sites need a call to action button to drive users toward a desired result.

Styling a Call to Action Button

Writing gradient syntax by hand is lengthy and difficult. Use an online tool to automate it.

Creating the Main Navigation and Drop
7 Lectures 46:55

How to build a site's primary navigation.

Preview 06:46

How to target elements based on their order of appearance without adding a class to the HTML.

Using Pseudo Classes

How to get the shark positioned properly, and how to get the menu to be “sticky” to the top and always visible.

Absolute Positioning

How do we build the drop-down menu?

Building the Drop-down

Need to smoothly animate the drop-down menu sliding down.

CSS Animations (Part 1)

In the previous video, we explained the surface of animations, in this video; we will take a deeper dive into what animations can do.

CSS Animations (Part 2)

We have a z-index bug, and we need the box shadow and the nav on all pages.

Finalizing the Navigation
Becoming Responsive
5 Lectures 43:26

Creating a fluid percentage-based layout.

Preview 11:13

How to make images squishy like our content.

Flexible Images

How to fix remaining issues with the site at narrower widths.

Media Queries

The navigation really is terrible looking at mobile widths, and we need a design pattern that will withstand adding more menu items.

Mobile Menu

Need to test a device on a phone.

Viewport Meta Tag
Web Fonts
5 Lectures 32:12

There were only so many “web safe” fonts out there until Web Fonts came along.

Preview 04:17

It's kind of hard to make Web Fonts work in all browsers by yourself. Here's how font kits solve this when hosting your own web fonts.

Font Kits and Font Services

Where can you get free quality web fonts?

Google Web Fonts

How do you obtain fonts that aren't free? Through subscription font foundries.

Subscription Font Foundries

Have a lot of solid color images or icons on your site and want to reduce the number of http requests? Icon Fonts can help.

Icon Fonts
The Workflow of HiDPI Devices
5 Lectures 34:03

Retina devices make our images look blurry. We need to supply larger images.

Preview 06:03

Non-retina devices get a huge retina-sized image when they don't need it. JavaScript can help serve the appropriately sized image based on the devices' capabilities.

The JavaScript Approach

Double-sized images can be 3-4 times as large as their regular sized counterpart. Creating two images to account for retina and non-retina is a lot of work. There is a middle ground: 1.5x images.

1.5x Images

How do we account for background images on retina?

Background Images

We don't have a perfect solution to the retina trials and tribulations, but SVG is pretty darn good.

Wrapping Up
2 Lectures 17:39

We're done learning CSS, what do we do next?

Preview 11:08

A recap of site and recommended links for further learning.

Conclusion and Links
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,420 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.