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://codercoder.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/createa...

⭐ 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 readeronly 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
jediorsith
南宮千影
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