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
