CSS Tutorial for Absolute Beginners - Learn CSS3

This beginner tutorial teaches CSS3 by styling an HTML page into a responsive website for desktop and mobile screens. Learners practice CSS syntax, reusable classes, layout, BEM naming, media queries, pseudo-selectors, and Chrome DevTools.

Syllabus

Intro
CSS needs HTML
CSS3 definition
CSS cascades / CSS3 syntax
Dive into CSS
Start with the HTML code
Create your CSS file
Link your CSS3 to your HTML5
Add Live Server to VS Code
Chrome Dev Tools Mobile View / Responsive Web Design
CSS Reset / Select All
Setting Default CSS Styles
Defining Reusable CSS Classes
Applying Classes to HTML
Styling the navbar
BEM naming convention
Styling the main element
Applying styles to the posts
Changing the placeholder images
Styling the footer
Fixing the link scroll with scroll-margin-top
Using CanIUse.com to identify an iOS / Safari issue
Adding a media query for responsive web design
Post columns or equal height or not?
Adding more posts to the page
Updating the navbar to handle more links
Adding a pseudo-selector to the images
Adding a unicode symbol
Conclusion