Learning Path: CSS: Mastering Web Design with CSS3 Selectors

Name: Learning Path: CSS: Mastering Web Design with CSS3 Selectors
Rating: 4.2 (74 reviews)

Upgrade your selection skills using CSS3 selectors to build modern websites

Created byPackt Publishing

Last updated 4/2020

English

What you'll 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

Course content

2 sections • 65 lectures • 7h 54m total length

The Course5:55
The course needs a summary that describes what will be learned over the course of each
The Anatomy of a Rule Set and the ThreeTypes of Style Sheets7:17
In order to style websites with CSS, you must
The Box Model and Block versus Inline Elements6: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.
Text Editors6:51
Writing code is error prone and hard; a good text editor like Sublime Text 3 solves this problem.
CSS Reset7: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.
Chrome Dev Tools4: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.
Renaming Elements: Classes and IDs6:32
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.
Descendant Selectors5:54
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.
Floats Introduction – Flowing Text around Images5:08
How to have text flow around an image? The ori-gin of floats.
Creating a Multicolumn Layout5:39
How do we create a page layout without abusing tables? Using Floats.
Solving the Problems of Floats7:23
When all elements inside a container are floated, the container "collapses." We’ll go over three
Creating Buttons with Modular CSS5: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.
Multiple Classes4:43
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.
Specificity Rules7:41
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.
Transitions6:44
Creating an added expe-rience layer, transitioning elements from the default to hover state and vice versa.
Transforms7:01
CSS3 allows us to transform elements like never before.
Styling a Call to Action button5:23
Most sites need a call to action button to drive users toward a desired result.
Gradients3:47
Writing gradient syntax by hand is lengthy and difficult. Use an online tool to automate it.
Starting the Navigation6:46
How to build a site’s primary navigation.
Using Pseudo Classes5:43
How to target elements based on their order of appearance without adding a class to the HTML.
Absolute Positioning5:20
How to get the shark positioned properly,and how to get the menu to be “sticky” to the top and always visible.
Building the Drop-down7:44
How do we build the drop-down menu?
CSS Animations6:19
Need to smoothly animate the drop-down menu sliding down.
CSS Anima-tions(Continued)7: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.
Finalizing the Navigation7:17
We have a z-index bug, and we need the box shadow and the navigation on all pages.
Fluid Grid11:13
Creating a fluid percentage-based layout.
Flexible Images8:18
How to make images squishy like our content.
Media Queries9:38
Media QueriesHow to fix remaining issues with the site at narrower widths.
Mobile Menu10:54
The navigation really is terrible looking at mobile widths, and we need a design pattern that will withstand adding more menu items.
Viewport Meta Tag3:23
Need to test a device on a phone.
The @font-face Property4:17
There were only so many “web safe” fonts out there until Web Fonts came along.
Font Kits and Font Services6: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.
Google Web Fonts4:37
Where can youget free quality web fonts?
Subscription Font Foundries6:14
How do youobtain fonts that aren’t free? Through subscription font foundries.
Icon Fonts10: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.
2x Images6:05
Retina devices make our images look blurry. We need to supply larger images.
The JavaScript Approach7:39
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.
1.5x images4: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.
Background Images6:06
How do we account for background images on retina?
SVG8:01
We don’t have a perfect solution to the retina trials and tribulations, but SVG is pretty darn good.
Srcset12:12
This video will explain why to use Srcset over JavaScript.
Introduction to Flexbox5:36
We need to know what it is what It solves, and key terminology.
From Floats to Flexbox8:42
We’re starting with a float based layout, how do we switch to flex-box?
Understanding flex-grow, flex-shrink, flex-basis, and flex13:31
Need to understand the options for sizing flex-items.
More Layout, More Positioning10:12
Need to continue to under-stand ways to position and size flex items.
Building the Product Listing10:54
What else can we build with flexbox?
flex-wrap and align-content8:59
Need ability to have multi-ple rows and to arrange/align those rows.
Changing the Display Order of Content8:44
Responsive designs sometimes need the ability to change display order.
Vendor Prefixes7:30
There are too many vendor prefixes to add to get deep flexbox support.
Next Steps11:08
We’re done learning CSS, what do we do next?
Conclusion and Links6:30
A recap of site and recommended links for further learning.

The Course Overview1:25
This video will provide an overview of the course.
The Universal Selector4:58
Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector.
Linking and Action Selectors6:08
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.
CSS2 Attribute Selectors14: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.
CSS3 Attribute Selectors7:00
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.
Localizing Your Site with Language Selectors11:49
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.
Working with the not CSS3 Selector7:30
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.
Combining Logic with combinator Selectors7:33
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.
Playing with the CSS3 UI Selectors13:02
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.
Adding Dynamic Content Before or after an Element4:28
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.
Manipulating Inner Content with Inner Content Selectors4:58
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.
Focusing on a Target with CSS34:29
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.
Getting to Know the Structural Selectors11:23
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.
Comparing Between only-child and only-of-type5:54
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.

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 this course is for:

This Video Learning Path is for front-end developers who are willing to learn advanced concepts of CSS.

Learning Path: CSS: Mastering Web Design with CSS3 Selectors

What you'll learn

Explore related topics

Course content

Mastering CSS - Second Edition51 lectures • 6hr 9min

Mastering CSS3 Selectors14 lectures • 1hr 45min

Requirements

Description

Who this course is for: