Advanced HTML & CSS
Take your CSS skills to the next level with this comprehensive training course. Learn about
COURSE SYLLABUS
advanced topics such as SVG, CSS variables, gradients, shadows, positioning, transitions,
transforms, responsive images, and more to help you code professional looking webpages.
Group classes in NYC and onsite training is available for this course.
For more information, email hello@nobledesktop.com or visit:
https://www.nobledesktop.com/classes/web-development-level2
hello@nobledesktop.com • (212) 226-4149
Course Outline
Section 1
Normalize.css, Default Box Model, & More
Using normalize.css
Grouping CSS selectors using a comma separator
Fluid, hi-res images
Constraining the width of content
Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
Fixing spacing issues around images
CSS shorthand for the background property
Font-Weight, Font-Style, & Unitless Line-Height
Adding custom web fonts from Google Fonts
Using font-weight & font-style
Unitless line-height
Box Model: Content-Box vs. Border-Box
How border-box is different than content-box
Best practice for applying border-box to everything
Intro to SVG (Scalable Vector Graphics)
Adding SVG to a webpage
Sizing SVG
Web Servers: Configuring a .htaccess file for SVG & gzip
Section 2
Embedding SVG
Course Syllabus | Advanced HTML & CSS 1
Embedding SVG (instead of linking)
Styling SVG using CSS
Using currentColor
SVG Sprites
Defining the SVG sprite
Using a sprite
Styling sprites
CSS Position Property
The static value & the normal document flow
The relative value
The absolute value
The dynamic duo: relative parent, absolute child
The fixed value
Creating a Fixed Navbar & RGBA Color
Creating a fixed navbar on wider screens
RGBA color
Section 3
CSS Background Gradients & Gradient Patterns
CSS background gradients
Creating a striped background using gradients
Multiple Backgrounds & Viewport Sizing Units (vw)
Multiple backgrounds on a single element
Colorizing a photo by overlaying a transparent gradient
Using viewport sizing units (vw)
Creating Columns with Inline-Block & Calc()
Displaying content as columns using inline-block
Using CSS calc()
CSS Variables (Custom Properties)
Defining & using CSS variables
The power of inheritance
Section 4
Relational Selectors
Adjacent selectors
Using first-child & last-child
Using first-of-type
Using nth-child
Direct child/descendant selectors
Pseudo-Elements & the Content Property
Course Syllabus | Advanced HTML & CSS 2
Using pseudo-elements
The content property
Seeing pseudo-elements in Chrome’s DevTools
Attribute Selectors
Adding link icons with attribute selectors
“Ends with” attribute selector
“Begins with” attribute selector
“Contains” attribute selector
Styling Forms with Attribute Selectors
Styling form elements
Targeting inputs with attribute selectors
The ::placeholder pseudo element
Relative Sizes: Em and Rem
Em units
Rem units
Section 5
Flix: Creating a Scrollable Area
Creating a horizontal scrollable area
Optimizing the scrolling for iOS touch devices
Flix: Media Queries for Retina/HiDPI Graphics
Using media queries to load hi-res images for Retina/HiDPI displays
Responsive Images
Img srcset
The picture element
Off-Screen Side Nav Using Only CSS
Responsive off-screen navigation
Toggling the navigation with a checkbox
CSS transitions
Section 6
Box-Shadow, Text-Shadow, & Z-Index
Using the CSS box-shadow property
Changing an element’s default stack order with position and z-index
Inset shadows
Adding drop shadows to text with CSS text-shadow
Layering multiple text-shadows for a detached outline effect
Hiding & Showing: Display, Visibility, & Opacity
Removing an element from the normal document flow with display: none
Hiding/showing elements with visibility
Course Syllabus | Advanced HTML & CSS 3
Hiding/showing elements with opacity
How display, visibility, & opacity differ
CSS Transitions
Transition-property & transition-duration
Transition shorthand & the all keyword
Transitioning position coordinates
Adding easing with transition-timing-function
Custom easing with Ceaser
CSS Transforms with Transitions
Testing transforms using the DevTools
Adding a scale transform & transitioning it
Transform origin
Rotate & skew transforms
Using the translate transform to nudge elements
Course Syllabus | Advanced HTML & CSS 4
