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

Learn to build a responsive social media dashboard with a dark/light theme toggle in this comprehensive 7-hour course for beginners. Improve your JavaScript, HTML, and CSS skills as you follow along with Jess from the Coder Coder YouTube channel. Explore functional requirements, accessible form controls, CSS custom properties, and screen reader-only text. Set up a GitHub repository, configure SCSS and JS files, and implement a Gulp workflow. Study design principles, create accessible markup, and style components using BEM methodology. Master flexbox and CSS grid for layout, implement system preference-based theming, and build toggle logic for manual theme switching. By the end of the course, you'll have created a fully functional dashboard with local storage for user preferences, gaining practical experience in frontend development and accessibility.

⌨️ Intro
⌨️ Functional requirements of design
⌨️ Accessible form controls
⌨️ Update CSS custom properties with JS
⌨️ Screen reader-only text
⌨️ Creating GitHub repo
⌨️ Set up SCSS and JS files
⌨️ Set up Gulp workflow
⌨️ Studying the design
⌨️ Building out the top bar
⌨️ Using accessible markup
⌨️ Styling top bar
⌨️ Styling toggle and make accessible
⌨️ What is BEM? Planning out the class names
⌨️ Adding the markup and the SCSS selectors for the cards
⌨️ Styles for card
⌨️ Layout for the card grid with flexbox, then CSS grid
⌨️ Styling the top bars on the cards
⌨️ Bottom cards markup and styles
⌨️ Changing the toggle based on comments
⌨️ Use system preferences to load light or dark theme
⌨️ Build the toggle logic to manually change light/dark theme
⌨️ Save toggle settings in local storage