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 Accessibility, Content Hierarchies)
• 006-build-an-event-hub: Semantic event directory dividing future and past concerts with precise time validation and accessible imagery. (Skills: HTML5 Semantics, Time Element (ISO 8601), Web Accessibility (ALT text), Layout Architecture)
• 007-build-a-book-catalog-table: Structured data matrix featuring seamless header mapping, scoped rows, and summarized aggregate footers. (Skills: HTML Table Semantics, Data Alignment, Colspan Management, Information Architecture)
• 008-build-a-survey-form: Highly accessible data collection form utilizing multi-line formatting, explicit label mapping, and structured semantic groups. (Skills: HTML Form Semantics, Advanced Accessibility (WCAG), Fieldset/Legend Architecture, UX/CRO Friction Reduction)
• 009-debug-a-donation-form: Corrected and structured donation interface ensuring precise form validation, strict label-to-input mapping, and modern click-target behaviors. (Skills: Form Debugging, Native Validation (HTML5), Advanced Label Mapping, UX/CRO Friction Reduction)
• 010-build-a-checkout-page: Secure checkout interface structure focused on complex payment forms, input grouping, and purchase friction reduction. (Skills: Advanced Web Forms, UX/CRO Checkout Optimization, Input Formatting)
• 011-design-a-movie-review-page: Semantic article structure optimized for content readability and media review hierarchies. (Skills: Text Hierarchy, Media Content Structure, Advanced HTML5 Formatting)
• 012-build-a-multimedia-player: Accessible native media player integrating synchronized caption tracking, ARIA-described layouts, and decoupled textual transcripts. (Skills: HTML5 Multimedia API, Web Accessibility (ARIA), VTT Subtitle Integration, Semantics)
• 013-design-a-business-card: High-fidelity digital business card utilizing precise block centering, flexible image constraints, and standard text decoration overrides. (Skills: CSS Box Model, Spatial Layouts, Shorthand Properties, UI/UX Typography, Responsive Constraints)
• 014-build-a-stylized-to-do-list: Accessible task directory utilizing list reset architectures, explicit interactive element alignment, and custom interactive link states. (Skills: CSS Pseudo-classes, LVHFA Hierarchy, List Style Resets, UI/UX Micro-interactions)
• 015-design-a-blog-post-card: Modern components showcasing image layouts, explicit font hierarchy overrides, and optimized spacing configurations. (Skills: Visual Design Hierarchy, Typography Scales, Component Architecture, Content Optimization)
• 016-build-an-event-flyer-page: A responsive visual flyer built with deep structural CSS rules, fluid image framing, and optimized typographic scales to maximize visual engagement. (Skills: Typography Frameworks, Image Layout Constraints, Visual Hierarchy Design)
• 017-build-a-job-application-form: A production-ready semantic application form structured into isolated CSS architecture blocks to eliminate specificity friction, utilizing real-time native validation states for seamless user feedback. (Skills: CSS Architecture ("Mental Boxes"), Native HTML5 Validation (:valid/:invalid), Advanced Pseudo-classes, UX/CRO Friction Reduction)
• 018-build-a-colored-boxes-grid: A high-conversion visual matrix showcasing deep color-theory manipulation, utilizing advanced fluid layout mechanics (Flexbox) to bypass native block-stacking friction and guarantee pixel-perfect responsive proportions. (Skills: Flexbox Architecture (flex: 1), Layout Physics (Gap over Margin), Spatial Micro-interactions (3D Scale/Shadow Hover), Color Harmonies)
• 019-design-a-contact-form: A highly interactive contact form utilizing pure CSS state mechanics (:target) to deploy elastic modal architectures and micro-interactions without JavaScript dependency, fully optimized for inclusive access. (Skills: Pure CSS State Engineering, Spatial Physics (Inverted Input-to-Button Movement), Web Accessibility (A11y/:focus-visible), Temporal Curves (Cubic-Bezier Elasticity), Boundary Mechanics (Pointer-Events))
• 020-design-a-feature-selection-page: a feature matrix utilizing grid constraints for strict component symmetry, combined with absolute boundary tracking and conditional inline-logic (:has()) to deploy an automated, friction-free floating action submit bar. (Skills: Grid Alignment Mechanics, Absolute Anchor-to-Parent Bounds, Conditional State Logic, Friction Reduction (UX/CRO), Real-Time Conversion Triggers)
• 021-build-a-confidential-email-page: A responsive spy-themed document page utilizing absolute-to-relative layout shifting across standard viewport limits (320px SE), stabilized via container-bound padding boundaries and unified pseudo-state (:hover) alpha/blur temporal transitions. (Skills: Desktop-First Media Queries, Mobile Viewport Boundaries (320px), Layout Reset Engineering, CSS Temporal Transitions, Interaction Design)
• 022-design-a-pricing-plans-layout-page: A mobile-first responsive pricing matrix featuring hardware-accelerated smooth transitions, variable typography via Google Fonts, and a custom rotated popular-plan badge. (Skills: Mobile-First Flexbox, GPU-Accelerated Hover Physics, Variable Web Fonts, Responsive Media Queries, Micro-interactions)
• 023-build-a-page-of-playing-cards: A pixel-perfect rendering of a card deck layout leveraging responsive spatial proportions and fluid GPU isolation axes (translateZ) to stabilize asymmetric flex contents on ultra-narrow viewports (320px iPhone SE). (Skills: Dual-Axis Transformations (scale), 3D Hardware Render Stabilization, Symmetrical Flex Layouts, Cache Clearance Workflow, Viewport Edge Mitigation)
• 024-build-a-newspaper-article: A responsive newspaper layout leveraging fluid typography via clamp(), relative spacing units (rem), and optimized document structure. (Skills: Fluid Typography (clamp()), CSS Box Model, Responsive Layouts, Typography Hierarchies)
• 025-build-a-tribute-page: A fully accessible fluid tribute layout leveraging mathematical constraints (clamp()) to bridge the gap between viewport zoom mechanics and physical device dimensions (320px Fold to Desktop). (Skills: Advanced Fluid Typography, Web Accessibility (WCAG 2.1 Zoom Compliance), Element vs. Class Specificity Architecture, Multi-Device Target Emulation (F12 QA Workflow))
• 026-build-a-house-painting: A complex CSS-only geometric art layout showcasing strict coordinate mapping (top/left) and layer priority stacking without manual z-index inflation. (Skills: Advanced Positioning Mechanics, Structural CSS Layering, CSS Shapes & Borders, Spatial Math Alignment)
• 027-build-a-book-inventory-app: A highly optimized data matrix featuring unified linear-gradient state coloring, custom visual rating systems, and a scroll-bound container with zero-latency sticky tracking headers. (Skills: Sticky Axis Layouts (position: sticky), Advanced Attribute Selection, CSS Component Sizing (clamp()), Custom Visual Micro-states, Scroll-Container Clipping Engineering)
• *028-build-a-technical-documentation-page: A fully responsive mobile-first technical documentation layout stabilized via container-bound padding boundaries and unified pseudo-state temporal transitions, optimized for ultra-narrow viewports. (Skills: Mobile-First Flexbox Layouts, Sticky & Fixed Spatial Anchors, Layout Reset Engineering, Viewport Edge Mitigation (376px iPhone SE), Prettier Architecture Consistency)
• *029-build-an-availability-table: A structured availability matrix leveraging precise table semantics (caption, th[scope]), enhanced via advanced layout overrides and fluid hardware-accelerated coordinate shifting (translateY) to achieve pixel-perfect alignment against cross-browser table layout rigidity. (Skills: Advanced Table Semantics, Specificity Conflict Resolution, Hardware-Accelerated Transformations, Cross-Browser Layout Stabilization)
• 030-design-a-newspaper-layout: A fully responsive, multi-column magazine layout leveraging a Mobile-First architecture driven by named areas (grid-template-areas) and clean fluid breakpoints to eliminate cross-device structural friction. (Skills: CSS Grid Named Areas, Mobile-First Responsiveness, Media Query Optimization, Flexible Content Centering (Flexbox/Grid Alignment), Structural Refactoring)
• 031-build-a-product-landing-page: A production-ready commercial landing page engineered with a Mobile-First architecture using CSS Grid Areas and Flexbox overrides. Features smooth navigation anchors stabilized via scroll margin boundary offsets, custom hardware-accelerated micro-interactions on product matrices, and strict component constraint engineering. (Skills: Mobile-First Layout Engineering, Advanced Overrides Heritage, Scroll Margin Boundary Isolation, Fluid Component Symmetry, CSS Architecture, CRO Optimization)
• 032-build-a-moon-orbit: A high-fidelity planetary orbital system utilizing absolute positioning frameworks, synchronized multi-axis temporal animations, and independent structural transforms to eliminate native axis-locking and coordinate-drift friction. (Skills: CSS Animation Physics, Temporal Curves (@keyframes), Multi-Axis Transform Mechanics, Space-Origin Coordinates, Layout Centering Architectures)
• 033-build-a-personal-portfolio: A production-grade, mobile-first portfolio layout driven by modern architectural constraints. Features native adaptive thematic states (prefers-color-scheme), accessible motion control limits (prefers-reduced-motion), persistent viewport navigation setups (position: sticky), and centralized design token schemes utilizing semantic CSS custom properties with strict typography fallback configurations. (Skills: Mobile-First Engineering, Advanced Media Queries, CSS Variables (Tokens), Motion Accessibility (A11y), Interface Architecture)

🛠️ Tech Stack

• HTML5 & CSS3: Semantic markup, styling sheets, advanced forms, data tables, and scalable document tree architectures.
• Layout Mechanics: Mobile-First fluid design, box model alignment (border-box), shorthand property optimization, Flexbox structures (flex: 1), strict Grid layout constraints, and viewport-resilient scaling via mathematical boundaries (clamp()).
• CSS Architecture & Design Tokens: Centralized component styling utilizing semantic CSS custom properties (Variables) for color schemes, custom borders, and structural typography scales optimized with fallback configurations.
• System Preference & Accessibility (A11y): Advanced media query integration for native device matching, isolating dark mode overrides (prefers-color-scheme) and accessible animation reduction triggers (prefers-reduced-motion). Strict adherence to WCAG standards including structural contrast controls, alternative text assets, explicit form labels, and focus visibility management (:focus-visible).
• CSS State Engineering & Micro-interactions: Pure CSS behavior states powered by modern selector mechanics (:target, :has()), absolute viewport anchoring navigation (position: sticky), spatial transformations (translateZ), and event boundary masks (pointer-events).
• Animation & Temporal Physics: Hardware-accelerated GPU layouts leveraging complex temporal curves (cubic-bezier) to map fluid elastic-rebound mechanics and seamless alpha-channel alpha transitions.
• UX/CRO Integration: Production-oriented frontend code focused on maximizing layout speed, asset payload compression, and systematic elimination of cognitive user friction across conversion-critical paths (Checkouts, lead captures, and single-page application indices).