Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners
By freeCodeCamp.org
Published: Apr 26, 2023
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-dklt-toggle
🔗 Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H
🔗 Andy Bell: Create a user controlled dark or light mode — https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/âï¸ 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 textPart 2
âŒ¨ï¸ (0:29:10) Creating GitHub repo
âŒ¨ï¸ (0:34:33) Set up SCSS and JS files
âŒ¨ï¸ (1:09:55) Set up Gulp workflowPart 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 accessiblePart 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 stylesPart 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