How to build a responsive website with HTML, CSS, and JavaScript (first 3 hours of my course)
💥 Check out my course here: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=brw-course
⬇️ RESOURCES MENTIONED
Figma design file — https://download.filekitcdn.com/d/b85KhMaWYVjKmVP5ggrpgr/k5vtqixmvY8gYcHrJuRffi
Real Favicon Generator — https://realfavicongenerator.net/
CSS Reset by Josh Comeau — https://www.joshwcomeau.com/css/custom-css-reset/
Google Webfonts Helper — https://github.com/majodev/google-webfonts-helper
Hiding an element visually — https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/
Codepen on CSS layers — https://codepen.io/thecodercoder/pen/wBKaNeJ
Codepen on CSS flow layout — https://codepen.io/thecodercoder/pen/XJmOJOv
Starter Files — https://github.com/thecodercoder/brw-starter-files
____________
This video is the first 3 hours of my full course, where I show you how to build a responsive website from scratch, with HTML, CSS, and JavaScript.
💻 LEARN TO CODE 💻
MY COURSE:
🟢 Build a Responsive Website — Learn how to build a website from scratch — https://coder-coder.com/responsive
RECOMMENDED RESOURCES:
Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel– thank you!)
🔷 Frontend Mentor Pro — Practice building real-world projects (20% off 1 yr with code JESSCHAN20) — https://www.frontendmentor.io/?via=jesschan
🔷 Boot.dev — Learn back-end development (25% off) — https://www.boot.dev/?promo=CODERCODER
🔷 Zero to Mastery — Learn web dev, AI, DevOps and more with 100+ courses — https://academy.zerotomastery.io/a/aff_s3xc407h/external?affcode=441520_ti97uk6b
OTHER STUFF:
🟢 Coder Coder Dark — My VS Code theme — https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
🟢 Coder Coder Merch — get my hoodie, coffee cup, and more! — https://coder-coder.com/merch
SOCIALS:
Posts by thecodercoder
https://www.instagram.com/thecodercoder
__________________
0:00:00 — Intro
0:00:43 — VS Code Setup
0:08:24 — Project Setup
0:20:10 — Figma Basics
0:33:51 — Colors
0:43:53 — Wrapper Styles
0:52:50 — Typography
1:16:34 — Organizing Styles
1:24:21 — Top Navigation
1:29:08 — Skip Link
1:36:41 — HTML Markup
1:47:29 — Link Styles
2:03:00 — Layout Styles
2:20:29 — CSS Flow
2:39:08 — Hover States
#css #javascript #html
