Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via

Overview

Coursera Plus Flash Sale: All Certificates & Courses 40% Off. 72 Hours Only!
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.

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

Taught by

freeCodeCamp.org

Reviews

Start your review of Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.