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 corporate@nobledesktop.com or visit:
https://www.nobledesktop.com/classes/web-development-level2
hello@nobledesktop.com • (212) 226-4149
Course Outline
Section 1
Starting a New Website from Scratch & Emmet Shortcuts
Creating a new HTML page with Emmet shortcuts
Adding content & styling it
Variable Fonts (from Google Fonts) & Unitless Line-Height
Adding custom web fonts from Google Fonts
Using font-weight
Unitless line-height
Styling the Navbar
Styling the Navbar
Hover & Focus Link Styles
CSS Box Model: Content-Box vs. Border-Box
How border-box is different than content-box
Visualizing the box model in Chrome’s DevTools
Fixing spacing issues around images
Flexible padding: using percentage amounts
Section 2
SVG Sizing (Width & Height) and Embedding SVG
How Width & Height Affect Sizing of SVG
Embedding SVG (instead of linking)
Styling SVG using CSS
,
Course Syllabus | Advanced HTML & CSS 1
Using currentColor
CSS Position Property
Static position & the normal document flow
Relative position
Absolute position
The dynamic duo: relative parent, absolute child
Fixed position
Fixed Position Navbar, RGBA, & Backdrop Filters
Creating a fixed navbar on wide & tall screens
RGBA color
Blurring & desaturating a background with CSS backdrop filters
Improvements for Mobile Devices
Preventing mobile text size adjustment
Preventing a fixed navbar on short screens
Dealing with the iPhone’s dynamic island (or notch)
CSS calc()
Section 3
Background Gradients & Text Gradients
CSS background gradients
CSS text gradients
Multiple Backgrounds, Viewport Sizing (vw), & Clamp
Multiple backgrounds on a single element
Colorizing a photo by overlaying a transparent gradient
Using viewport sizing units (vw)
Using Clamp to set a min & max font size
Creating Columns with Flexbox
Displaying content as columns using Flexbox
Vertical alignment with Flexbox
Pseudo-Elements & the Content Property
Using pseudo-elements
The content property
Seeing pseudo-elements in Chrome’s DevTools
Section 4
Attribute Selectors
Adding link icons with attribute selectors
“Ends with” attribute selector
“Begins with” attribute selector
“Contains” attribute selector
Course Syllabus | Advanced HTML & CSS 2
Relational Selectors
Using first-child & last-child
Using first-of-type
Using nth-child
Direct child/descendant selectors
CSS Variables (Custom Properties)
Defining & using CSS variables
The power of inheritance
Light & Dark Modes using CSS
Styling webpages for light & dark modes
Previewing light & dark modes in Chrome DevTools
“Alt” text for embedded SVGS
Section 5
Creating Forms with HTML
Creating a form & text inputs with labels
Adding an email input, submit button, textarea, & select menu
Fieldset, legend, & radio buttons
Checkbox vs radio button
Styling Forms (with Attribute Selectors)
Styling form elements
Targeting inputs with attribute selectors
Relative Sizes: Em and Rem
Em units
Rem units
Section 6
Off-Screen Side Nav Using Only CSS
Responsive off-screen navigation
Toggling the navigation with a checkbox
CSS transitions
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
CSS Transitions
Using CSS transitions to animate elements on hover
Adding easing
Course Syllabus | Advanced HTML & CSS 3
Custom easing with Ceaser
CSS Transforms with Transitions
Testing transforms using the DevTools
Adding a scale transform & transitioning it
Transform origin
Adding a rotate transform
Using the translate transform to nudge elements
Course Syllabus | Advanced HTML & CSS 4
