Learning Path: CSS: Mastering Web Design with CSS3 Selectors
4.8 (8 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.
60 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: CSS: Mastering Web Design with CSS3 Selectors to your Wishlist.

Add to Wishlist

Learning Path: CSS: Mastering Web Design with CSS3 Selectors

Upgrade your selection skills using CSS3 selectors to build modern websites
4.8 (8 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.
60 students enrolled
Created by Packt Publishing
Last updated 4/2017
English
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 1 Supplemental Resource
  • 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
  • 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
  • Delve into modular, reusable, and scalable CSS code for more organized and smaller style sheets
  • Understand media queries and the other fundamentals of responsive web design
  • Reduce the excess overhead on your web pages using combinator selectors
  • Enhance the usability of your web pages by adding dynamic content on the fly with the help of structural selectors
View Curriculum
Requirements
  • A basic understanding of the HTML syntax is required to take this Video Learning Path.
  • Atom editor is recommended for editing the code.
Description

CSS is a deceptively simple presentation language that has significantly developed over the last few years. Front-end developers need to keep style sheets manageable and organized by taking a modular approach to building a website.  

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

In this Video Learning Path, 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 explore the power of CSS3 selectors and how they can be intelligently leveraged to create powerful interactive sites.

As we proceed, we'll master the usage of a wide array of selector techniques and tricks, manipulating inner content, understanding structural selectors, and more.

By the end of this Video Learning Path, you’ll have complete control over every element of your web page to make it behave exactly the way you want it to.

This Learning Path is authored by some of the best in the field.

About the Authors

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.

Ben Fhala discovered his passion for data visualization seven years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Who is the target audience?
  • This Video Learning Path is for front-end developers who are willing to learn advanced concepts of CSS.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
65 Lectures
07:54:08
+
Mastering CSS - Second Edition
51 Lectures 06:09:23

The course needs a summary that describes what will be learned over the course of each

Preview 05:55

In order to style websites with CSS, you must

The Anatomy of a Rule Set and the ThreeTypes of Style Sheets
07:17

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
06:27

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

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
04:56

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

Renaming Elements: Classes and IDs
06:32

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

Descendant Selectors
05:54

How to have text flow around an image? The ori-gin of floats.

Preview 05:08

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

Creating a Multicolumn Layout
05:39

When all elements inside a container are floated, the container "collapses." We’ll go over three

Solving the Problems of Floats
07:23

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 varia-tion in our style with an object-oriented approach.

Multiple Classes
04:43

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

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

Transitions
06:44

CSS3 allows us to transform elements like never before.

Transforms
07:01

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

Styling a Call to Action button
05:23

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

Gradients
03:47

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
05:43

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

Absolute Positioning
05:20

How do we build the drop-down menu?

Building the Drop-down
07:44

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

CSS Animations
06:19

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 Anima-tions(Continued)
07:46

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

Finalizing the Navigation
07:17

Creating a fluid percentage-based layout.

Preview 11:13

How to make images squishy like our content.

Flexible Images
08:18

Media QueriesHow to fix remaining issues with the site at narrower widths.

Media Queries
09:38

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

Mobile Menu
10:54

Need to test a device on a phone.

Viewport Meta Tag
03:23

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
06:24

Where can youget free quality web fonts?

Google Web Fonts
04:37

How do youobtain fonts that aren’t free? Through subscription font foundries.

Subscription Font Foundries
06:14

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
10:40

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

Preview 06:05

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

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
04:32

How do we account for background images on retina?

Background Images
06:06

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

SVG
08:01

This video will explain why to use Srcset over JavaScript.

Srcset
12:12

We need to know what it is what It solves, and key terminology.

Preview 05:36

We’re starting with a float based layout, how do we switch to flex-box?

From Floats to Flexbox
08:42

Need to understand the options for sizing flex-items.

Understanding flex-grow, flex-shrink, flex-basis, and flex
13:31

Need to continue to under-stand ways to position and size flex items.

More Layout, More Positioning
10:12

What else can we build with flexbox?

Building the Product Listing
10:54

Need ability to have multi-ple rows and to arrange/align those rows.

flex-wrap and align-content
08:59

Responsive designs sometimes need the ability to change display order.

Changing the Display Order of Content
08:44

There are too many vendor prefixes to add to get deep flexbox support.

Vendor Prefixes
07:30

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
06:30
+
Mastering CSS3 Selectors
14 Lectures 01:44:45

This video will provide an overview of the course.

Preview 01:25

Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector.

The Universal Selector
04:58

Let’s turn our attention to the actions related to pseudo classes. By the end of this video, you will know how to control the colors of actions and links in CSS and be up-to-date with the changes that have taken place in them.

Linking and Action Selectors
06:08

We will now move on to the world of attributes, where we will stay in the next two videos. By the end of this video, you will know how to work with CSS2 Attribute Selectors.

CSS2 Attribute Selectors
14:08

In this video, we will explore the new CSS3 attribute selectors. By the end of this video, you will know how to work with the new CSS3 attribute selectors.

CSS3 Attribute Selectors
07:00

You might speak only one language, but there are differences in the way users expect content to look like when they are from different countries. The language attribute enables you to create small custom rules that will apply to specific sublanguages at ease without you having to create separate pages for each sublanguage. By the end of this video, you will know the basics of how to work with the lang attribute in HTML and the lang-CSS selector.

Preview 11:49

So far, in our journey into the world of CSS3 selectors, we came across many selectors that help us find an item by explicitly trying to configure that item. In this video, we will have a reversal in the CSS selection logic by weeding out content based on what it's not.

Working with the not CSS3 Selector
07:30

Combinator selectors have been around since CSS2 and have been enhanced in CSS3. Through the usage of combinator selectors, we can drastically reduce the amount of classes that we use in an application. Combinator selectors enable us to define rules based on the relations of an item to its parent, the immediate adjacent item, or even a further removed preceding item. By the end of this video, you will know how to work with the Combinator selectors.

Combining Logic with combinator Selectors
07:33

A really powerful group of selectors has been added into the CSS3 Selectors specs; this group can be clustered as UI selectors. In this video, we will take a look at jQuery and see how its selector engine works with a live example of a JavaScript code that we created, which switches the language dynamically based on user selection.

Playing with the CSS3 UI Selectors
13:02

In this video, you will know how to dynamically add anything to your HTML content before or after the element using the CSS2 content-adding selectors.

Preview 04:28

In this video, we will continue to explore two more selectors that enable us to select a part of the content in a page. Both the selectors were added in CSS1; they enable us to change the style of the first letter in an element or the entire line. By the end of this video, you will know how to work with the ::first-letter and ::first-line CSS1 selectors.

Manipulating Inner Content with Inner Content Selectors
04:58

One of the coolest new selectors in CSS3 is the target selector. The target selector enables you to control the styling of an item that is the focus of a hashtag link. With the new CSS target selector, we can now help viewers by highlighting the selected area, making it much more easy to find them.

Focusing on a Target with CSS3
04:29

When it comes to creating smart and dynamic layouts, one of the more powerful features that was first introduced in CSS2 was the :first-child selector, which enabled us to do something with the first child in a group of elements. CSS3 takes that idea and pushes its further with more structural controls.

Getting to Know the Structural Selectors
11:23

In this last video of the course, we will take a look at a few more structural selectors that we didn't cover yet, as we compare the differences between only-child and only-of-type.

Comparing Between only-child and only-of-type
05:54
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,352 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.