DEV Community

Jossie C.
Jossie C.

Posted on

Smooth Responsiveness + Auto Dark Mode: My New Landing Page 🌙

#css #ux #html #beginners

Testing out modern CSS features on my latest landing page project. It automatically adapts to any screen size and respects the user's system theme preferences seamlessly. I would love to get your feedback on the layout and code structure! 🛠️

Product landing page preview with dark mode and desktop fluid grid alignment.

📂 Project Details

This landing page is project #31 (31-build-a-product-landing-page) inside my freeCodeCamp Responsive Web Design repository.

💡 What I Learned

  • Native Dark Mode: Implemented system theme matching entirely through CSS using the @media (prefers-color-scheme: dark) query—bypassing the need for JavaScript logic to switch classes.
  • Fluid Layouts: Mastered responsive media queries alongside relative units to keep the UI adaptive and consistent across mobile, tablet, and desktop viewports.

🔗 Links

GitHub logo jcamposa-dev / freecodecamp-responsive-web-design

Academic assignments, automated commits, and semantic laboratories developed for the freeCodeCamp Responsive Web Design Certification.

FreeCodeCamp: Responsive Web Design Certification

This repository contains my daily practices, exercises, and mini-projects developed while completing the Responsive Web Design certification from freeCodeCamp. 

🎯 Goal

The purpose of this repository is to track my learning progress in modern HTML5, CSS3, accessibility (WCAG), and document structuring, combining them with my experience in conversion rate optimization (CRO) and user experience (UX). 

📂 Project Structure

  • 001-lasagna-recipe: Basic HTML structure, semantic elements, and semantic nesting. (Skills: Semantic HTML5, Data Structuring, Content Hierarchy)
  • 002-pet-adoption-debug: Identifying and fixing broken tags, nesting errors, and layout bugs. (Skills: Code Debugging, Problem Solving, HTML Standards)
  • 003-travel-agency: High-conversion landing page with optimized SEO tags and metadata. (Skills: SEO Optimization, UX/CRO, Responsive Design)
  • 004-audio-video-player: Custom audio and video player layout with advanced attributes. (Skills: Multimedia Elements, Code Standards, HTML5 Layouts)
  • 005-costa-rica-travel-guide: Semantic multi-video dashboard bypassing privacy-blocking environments via secure iframe curation. (Skills: Third-Party Embeds, Iframe…
View on GitHub

Top comments (0)