Learning Path: CSS: Mastering Web Design with CSS3 Selectors

Mastering CSS – Second Edition 51 lectures 06:08:29 Mastering CSS – Second Edition - The Course Overview 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.

• Understand what CSS is and what we are going to learn
• Know the expected prerequisite knowledge, such as how to write basic HTML and even some basic CSS, which is required to follow along with this course
• Go over different software we are using, such as Sublime Text, Mac, Live Reload, and the basics to move along the course

The Anatomy of a Rule Set and the Three Types of Style Sheets In order to style websites with CSS, you must understand the syntax for writing CSS rules.

• Review a sample rule set and see how it affects a web page
• View the rule set in an embedded style sheet and an external style sheet
• View an inline rule set

The Box Model and Block versus Inline Elements 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.

• A review of the box model and using box-sizing border box to change the box model
• Block-level elements
• Inline elements

Text Editors Writing code is errorprone and hard; a good text editor like Sublime Text 3 solves this prob-lem.

• Snippets
• Syntax highlighting
• Code completion and other cool features

CSS Reset 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.

• Add the reset
• Check out what the reset is doing
• Customize the reset to fit our needs

Chrome Dev Tools 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.

• Open up the Element Inspector
• Change the CSS inside the Dev Tools
• Check whether there are any errors in the console

Renaming Elements: Classes and IDs 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 with classes
• Renaming with IDs

Descendant Selectors 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.

• Find out what a parent and child element is
• Create a descendant selector
• Calculate the weight of descendant selectors

Floats Introduction – Flowing Text around Images How to have text flow around an image? The origin of floats.

• Have an image floated to the left with text on the right
• Clear the floats
• The problem with floats

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

• Creating a page layout
• Floating elements next to each other
• Collapsed elements caused by floats

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

• Floating the container
• Overflow: hidden
• Clearfix

Creating Buttons with Modular CSS 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.

• Explore the different button types we are going to create throughout the final site
• Create Button variation 1
• Create Button variation 2

Multiple Classes 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.

• Create multiple classes to vary our buttons
• Add the desired classes to our HTML

Specificity Rules 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.

• An explanation of the various weights and point systems
• Discuss the universal selector and important declaration

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

• Create a hover state
• Create a transition
• Discuss vendor prefixes

Transforms CSS3 allows us to transform elements like never before.

• Scale
• Translate
• Rotate

Styling a Call to Action Button Most sites need a call to action button to drive users toward a desired result.

• Adding the HTML
• Styling the button
• Adding the hover effect

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

• Plug in start and stop colors to the gradient generator tool
• Copy the output to the CSS file
• Explanation of the output

Starting the Navigation How to build a site’s primary navigation.

• Create an unordered list in the HTML to be used as the navigation
• Add in the CSS to make it look like the final product

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

• The first child
• The last child
• The nth child

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

• Warm up by absolutely positioning the shark
• Use fixed positioning for the navigation bar

Building the Dropdown How do we build the dropdown menu?

• Create a UL inside an LI
• Add the CSS for the dropdown menu

CSS Animations Need to smoothly ani-mate the dropdown menu sliding down.

• Define the anima-tion name, duration, timing, and function
• Add in keyframes
• Create more robust an-imation for the shark logo and add in all necessary vendor pre-fixes

CSS Animations (Continued) In the previous video, we explained the surface of animations, in this video; we will take a deeper dive into what anima-tions can do.

• Explore animation-delay, animation-iteration-count, and animation-fill-mode
• Combine and simplify all animation properties into a shorthand
• Add in all vendor pre-fixes and non-prefixed versions of the animation properties

Finalizing the Navigation We have a z-index bug, and we need the box shadow and the naviga-tion on all pages.

• Fix the z-index bug
• Add the drop shadow using the box-shadow property
• Copy the navigation HTML to all other pages

Fluid Grid Creating a fluid percent-age-based layout.

• Learn the formula
• Apply the formula to widths
• Apply the formula to margins and padding

Flexible Images How to make images squishy like our content.

• Wrap an image in a container
• Make the container fluid
• Add a 100 percent max-width to the image

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

• Add a media query discuss anatomy
• Fix obvious design problems at narrower widths inside the media query

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

• Create the mobile menu layout
• Hide the mobile menu for the desktop and add the mobile menu icon
• Add jQuery to activate the mobile menu on a click or touch

Viewport Meta Tag Need to test a device on a phone.

• Use Chrome’s emu-lator
• Add the viewport meta tag
• Discuss the anatomy of the viewport tag

The @font-face Property There were only so many “web safe” fonts out there until Web Fonts came along.

• Add the OTF file to the site folder
• Define new fonts in CSS
• Apply the font to elements

Font Kits and Font Services 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.

• Download a font kit
• Implement CSS to make it work

Google Web Fonts Where can you get free quality web fonts?

• Find the fonts we want from Google fonts
• Add link to the font in the <head> of the document
• Add the font to differ-ent parts of our website

Subscription Font Foundries How do you obtain fonts that aren’t free? Through subscription font found-ries.

• Select a font from Typekit
• Add JavaScript to our site
• Apply the font to different parts of our website

Icon Fonts 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.

• Build the footer in the HTML where the icons will go
• Download Zurb Icon fonts and add the font files to our web-site
• Add the icon CSS file and an icon hover state to our website and apply the icons to our footer.

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

• Create an image that is twice the size
• Add the image to our HTML
• Update the CSS to size the 2x image down to the intended display size

The JavaScript Approach 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.

• Check out retina.js and what it can do, and grab the script
• Add the script to the js folder and add a script tag that links to it in our HTML
• Test to make sure it’s working using Chrome’s Developer Tools

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

• Create an image that is 1.5 times the size it will be displayed at
• Add the image to the HTML
• Test to make sure it works

Background Images How do we account for background images on retina?

• Create a special media query to deter-mine the device’s pixel ratio
• Update the background image inside the media query to serve the 2x image only to retina devices

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

• Save an Illustrator file as SVG
• Add the SVG file as a background image and as a regular im-age
• Create an inline SVG and use it instead of an image

Srcset This video will explain why to use Srcset over JavaScript.

• Remove Retina.js from our code
• Use ‘Srcset’ attribute on the img element for non-svg images

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

• What is it
• What does it do
• Key terminology and diagram

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

• Removing float-based layout properties
• Using display: flex
• Changing flex-direction

Understanding flex-grow, flex-shrink, flex-basis, and flex Need to understand the options for sizing flex-items.

• Explore flex-grow
• Use flex-shrink
• Use flex-basis

More Layout, More Positioning Need to continue to under-stand ways to position and size flex items.

• Justify-content
• Nested flexboxes
• Auto-margins

Building the Product Listing What else can we build with flexbox?

• Explore align-items
• Explore align-self

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

• Wrapping content to multiple lines
• Arranging and centering multiple lines

Changing the Display Order of Content Responsive designs sometimes need the ability to change display order.

• Using order to change display order
• Accessibility impacts

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

• The W3 spec has changed, syntax has changed
• Autoprefixer online tool
• Autoprefixer Gulp task

Next Steps We’re done learning CSS, what do we do next?

• CSS Preprocessors
• JavaScript and jQuery

Conclusion and Links A recap of site and recommended links for fur-ther learning.

• A recap of the website
• Links to my favorite learning resources that have helped me learn web develop-ment

Mastering CSS – Second Edition. 51 lectures 06:08:29 Mastering CSS – Second Edition - The Course Overview 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 g, such as Sublime Text, Mac, Live Reload, and the basics to move along the course Mastering CSS – Second Edition - The Course Overview 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...