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

Jossie C. — Thu, 03 Sep 2026 01:30:45 +0000

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! 🛠️

📂 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

Direct Folder Link: Browse the Landing Page Code
Live Demo: Click here to view the live site

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

[Boost]

Jossie C. — Thu, 03 Sep 2026 01:07:17 +0000

HTML, CSS and many tools in just one website 👉 devdocs.io

Jossie C. — Wed, 02 Sep 2026 04:18:50 +0000

Hi community! I want to share a tool that is helping me every day. It is called DevDocs. It puts together the documentation for HTML, CSS and many tools in just one website. Perfect for looking up properties fast while coding.

DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.

DevDocs is free and open source. It was created by Thibaut Courouble and is operated by freeCodeCamp.

Check it out!

👉 https://devdocs.io/

DEV Community: Jossie C.