Build a Landing Page with HTML, CSS + JavaScript | Sticky Header on Scroll

Today I’m building a landing page with a sticky on-scroll header, masonry layout, and an accessible, responsive navbar. Enjoy! ✨ As always, it’s all vanilla HTML, CSS and JavaScript. No frameworks, just clean frontend code built from scratch. We’ll cover: → Sticky header on scroll with Intersection Observer API → Masonry layout with CSS Columns → Accessible + Responsive Navbar → Fully mobile responsive design MDN • Intersection Observer API https://developer.mozilla.org/en-US/d... 🟠 REPO: https://github.com/angelajholden/solo... 🟠 DEMO: https://angelajholden.github.io/solo-... 🔵 CODE REVIEWS: https://angelajholden.com/consulting 🔵 EMAIL: [email protected] 🟢 SPONSOR: https://github.com/sponsors/angelajho... 🟢 DONATE: https://www.paypal.me/angelajholden Original design: Solo - Modern Personal Blog PSD Template https://themeforest.net/item/solo-mod... Design Attribution https://themeforest.net/licenses/stan... The visual design of this template was adapted from a commercial Photoshop mockup purchased from ThemeForest. That asset was used in accordance with the ThemeForest Regular License, which permits distribution of a finished end product for free, but does not allow redistribution of the original PSD or design source files. 📚 Chapters 00:00:00 Intro + Setup 00:02:17 HTML Header + Navigation 00:06:51 HTML Main Markup 00:24:40 CSS Base Styles + Setup 00:25:50 A11y Color Contrast Checker 00:31:04 CSS Base Styles 00:37:42 CSS Header Styles 00:40:15 CSS normalize.css 00:42:04 CSS Navigation 00:58:49 CSS Hero Styles 01:32:58 CSS Columns + Masonry Layout 01:46:02 CSS Footer Styles 02:12:24 A11y + Responsive Navbar 02:57:52 JavaScript Mobile Navigation 03:05:08 JavaScript Intersection Observer API + Scroll 03:09:06 CSS On Scroll Header Styles 03:23:02 CSS Hero Mobile Styles 03:49:37 CSS Footer Mobile Styles 04:00:39 We're done!