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 freeCodeCamp

Start learning Write review
Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More → Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This beginner course guides learners through building a card-grid website with HTML, CSS/SCSS, and JavaScript. It covers accessible markup, theme switching based on system preferences or a manual toggle, and saving settings in local storage.

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

Start learning

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.