Build a Simple Website with HTML CSS JavaScript – Course for Beginners

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=krfUjg0S2uI

Improve your skills in JavaScript, HTML, and CSS by building a social media dashboard with a dark/light theme. Jess, who runs the popular Coder Coder YouTube channel, will guide you through a beginner Frontend Mentor challenge. • ✏️ Course created by ‪@TheCoderCoder‬ • Resources: • 🔗 Responsive Design for Beginners! https://coder-coder.com/responsive/ • 🔗 Source code on GitHub: https://github.com/thecodercoder/fem-... • 🔗 Challenge on Frontend Mentor: https://www.frontendmentor.io/challen... • 🔗 Andy Bell: Create a user controlled dark or light mode -- https://piccalil.li/tutorial/create-a... • ⭐️ Contents ⭐️ • Part 1 • ⌨️ (0:00:00) Intro • ⌨️ (0:01:26) Functional requirements of design • ⌨️ (0:11:31) Accessible form controls • ⌨️ (0:15:37) Update CSS custom properties with JS • ⌨️ (0:23:39) Screen reader-only text • Part 2 • ⌨️ (0:29:10) Creating GitHub repo • ⌨️ (0:34:33) Set up SCSS and JS files • ⌨️ (1:09:55) Set up Gulp workflow • Part 3 • ⌨️ (1:31:24) Studying the design • ⌨️ (1:37:10) Building out the top bar • ⌨️ (1:51:42) Using accessible markup • ⌨️ (2:04:55) Styling top bar • ⌨️ (2:23:26) Styling toggle and make accessible • Part 4 • ⌨️ (3:24:56) What is BEM? Planning out the class names • ⌨️ (3:36:46) Adding the markup and the SCSS selectors for the cards • ⌨️ (3:47:30) Styles for card • ⌨️ (4:16:41) Layout for the card grid with flexbox, then CSS grid • ⌨️ (4:33:26) Styling the top bars on the cards • ⌨️ (4:49:36) Bottom cards markup and styles • Part 5 • ⌨️ (5:33:54) Changing the toggle based on comments • ⌨️ (5:54:42) Use system preferences to load light or dark theme • ⌨️ (6:18:24) Build the toggle logic to manually change light/dark theme • ⌨️ (6:43:34) Save toggle settings in local storage • 🎉 Thanks to our Champion and Sponsor supporters: • 👾 davthecoder • 👾 jedi-or-sith • 👾 南宮千影 • 👾 Agustín Kussrow • 👾 Nattira Maneerat • 👾 Heather Wcislo • 👾 Serhiy Kalinets • 👾 Justin Hual • 👾 Otis Morgan • -- • Learn to code for free and get a developer job: https://www.freecodecamp.org • Read hundreds of articles on programming: https://freecodecamp.org/news • ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

#############################

New on site