Mastering CSS

Get to grips with CSS best practices to create modern, responsive, and retina-ready websites
4.4 (132 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,239 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 42
  • Length 5 hours
  • Skill Level Expert Level
  • 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 6/2015 English

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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

What 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.

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: CSS Foundations
06:07

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.

06:57

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

06:27

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.

Section 2: Ramping Up
06:51

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

07: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.

04:56

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.

06:32

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.

05:54

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.

Section 3: Creating a Page Layout with Floats
05:08

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

05:39

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

07:23

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

Section 4: Creating Buttons with Modular, Reusable CSS Classes, and CSS3
05:17

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.

04:43

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.

07:42

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.

06:44

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

07:01

CSS3 allows us to transform elements like never before.

05:23

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

03:47

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

Section 5: Creating the Main Navigation and Drop
06:46

How to build a site's primary navigation.

05:43

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

05:20

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

07:44

How do we build the drop-down menu?

06:19

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

07:46

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

07:17

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

Section 6: Becoming Responsive
11:13

Creating a fluid percentage-based layout.

08:18

How to make images squishy like our content.

09:38

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

10:54

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

03:23

Need to test a device on a phone.

Section 7: Web Fonts
04:17

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

06:24

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.

04:37

Where can you get free quality web fonts?

06:14

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

10:40

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.

Section 8: The Workflow of HiDPI Devices
06:03

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

07:14

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.

04:32

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.

06:06

How do we account for background images on retina?

10:08

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

Section 9: Wrapping Up
11:08

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

06:31

A recap of site and recommended links for further learning.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course