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

Overview

Learn to build a simple website using HTML, CSS, and JavaScript by creating a social media dashboard with a dark/light theme. The course covers functional design requirements, accessible form controls, updating CSS properties with JS, and more. The teaching method includes practical coding sessions guided by an experienced instructor. This course is designed for beginners looking to enhance their frontend development skills.

Syllabus

⌨️ 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