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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Styling top bar

12 of 23

12 of 23

⌨️ Styling top bar

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro
  2. 2 ⌨️ Functional requirements of design
  3. 3 ⌨️ Accessible form controls
  4. 4 ⌨️ Update CSS custom properties with JS
  5. 5 ⌨️ Screen reader-only text
  6. 6 ⌨️ Creating GitHub repo
  7. 7 ⌨️ Set up SCSS and JS files
  8. 8 ⌨️ Set up Gulp workflow
  9. 9 ⌨️ Studying the design
  10. 10 ⌨️ Building out the top bar
  11. 11 ⌨️ Using accessible markup
  12. 12 ⌨️ Styling top bar
  13. 13 ⌨️ Styling toggle and make accessible
  14. 14 ⌨️ What is BEM? Planning out the class names
  15. 15 ⌨️ Adding the markup and the SCSS selectors for the cards
  16. 16 ⌨️ Styles for card
  17. 17 ⌨️ Layout for the card grid with flexbox, then CSS grid
  18. 18 ⌨️ Styling the top bars on the cards
  19. 19 ⌨️ Bottom cards markup and styles
  20. 20 ⌨️ Changing the toggle based on comments
  21. 21 ⌨️ Use system preferences to load light or dark theme
  22. 22 ⌨️ Build the toggle logic to manually change light/dark theme
  23. 23 ⌨️ Save toggle settings in local storage

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.