Embark on an exciting journey to master frontend development with this course created by Jess, the expert behind the acclaimed Coder Coder YouTube channel.

This comprehensive course on the freeCodeCamp.org YouTube channel is tailored to empower you with the knowledge and skills required to excel in JavaScript, HTML, and CSS, all while constructing an eye-catching social media dashboard equipped with a dark/light theme toggle.

Designed around the beginner-oriented Frontend Mentor challenge, this course guides you through the process of developing a landing page that closely mirrors the provided design. Feel free to utilize any tools you're comfortable with or wish to practice, as the primary focus lies in implementing a smooth color theme toggle through JavaScript.

By taking this course, users will be able to:

  • Use HTML, CSS, and JavaScript to build a simple site
  • Optimize site layouts for different screen sizes
  • Incorporate hover states for all interactive elements
  • Toggle color themes based on their preferences

The course is divided into five parts:

Part 1: Laying the Foundation

  • Introduction
  • Understanding functional design requirements
  • Creating accessible form controls
  • Updating CSS custom properties with JS
  • Implementing screen reader-only text

Part 2: Preparing the Development Environment

  • Creating a GitHub repository
  • Setting up SCSS and JS files
  • Establishing a Gulp workflow

Part 3: Diving into the Design

  • Analyzing the design
  • Constructing the top bar
  • Utilizing accessible markup
  • Styling the top bar
  • Styling the theme toggle and enhancing accessibility

Part 4: Building the Social Media Dashboard

  • Introduction to BEM and planning class names
  • Adding markup and SCSS selectors for the cards
  • Applying styles to the cards
  • Creating card grid layouts with flexbox and CSS grid
  • Styling the top bars on the cards
  • Implementing bottom card markup and styles

Part 5: Enhancing the Theme Toggle

  • Modifying the toggle based on user comments
  • Loading light or dark themes based on system preferences
  • Developing toggle logic to switch between light and dark themes manually
  • Saving toggle settings in local storage

Join Jess from Coder Coder on this exciting journey and level up your frontend development skills. Whether you're a novice or have some experience under your belt, this course is the perfect opportunity to learn and grow as a web developer.

Watch the full course on the freeCodeCamp.org YouTube channel (7-hour watch).