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

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=krfUjg0S2uI


Duration: 7:12:30
290,046 views
9,124

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://coder-coder.com/responsive/
🔗 Source code on GitHub: https://github.com/thecodercoder/fem-dklt-toggle
🔗 Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H
🔗 Andy Bell: Create a user controlled dark or light mode -- https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/

⭐️ 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 reader-only 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
👾 jedi-or-sith
👾 南宮千影
👾 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



Other Videos By freeCodeCamp.org


2023-05-18Use ChatGPT to Code a Full Stack App – Full Course
2023-05-16JavaScript Security Vulnerabilities Tutorial – With Code Examples
2023-05-15Ionic & Capacitor for Building Native Mobile Apps – Full Course for Beginners
2023-05-11Go Programming – Golang Course with Bonus Projects
2023-05-10Functional Programming with Elixir – Full Course
2023-05-09SQL Tutorial for Beginners (and Technical Interview Questions Solved)
2023-05-04.NET MAUI Course for Beginners – Create Cross-Platform Apps with C#
2023-05-03Machine Learning Foundations Course – Regression Analysis
2023-05-01Harvard CS50’s Introduction to Programming with Python – Full University Course
2023-04-27Scrapy Course – Python Web Scraping for Beginners
2023-04-26Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners
2023-04-25Zustand React State Management Course (Simple Redux Alternative)
2023-04-24React Router 6 – Full Course
2023-04-20JavaScript Interview Prep: Functions, Closures, Currying
2023-04-19ChatGPT Course – Use The OpenAI API to Code 5 Projects
2023-04-18Godot Game Development – Crash Course for Beginners
2023-04-17No Black Box Machine Learning Course – Learn Without Libraries
2023-04-13Build a LinkedIn Clone with React and Firebase – Tutorial
2023-04-12Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript
2023-04-11Bash Scripting Tutorial for Beginners
2023-04-10React Native Course – Android and iOS App Development