Mobile Preview (375x812)	Desktop Preview (1440x960)

A simple, responsive showcase of my early frontend projects using HTML5 and CSS3. Designed with accessibility and semantic structure in mind, this layout serves as my live gallery and entry point to each individual project.

This website is a personal portfolio hub that displays multiple beginner-level HTML5 and CSS3 projects. Each project is represented by a preview image and hover-reveal title. The layout is responsive, uses semantic HTML, and follows mobile-first design principles.

I built this during my learning path following the freeCodeCamp.org Responsive Web Design Certification course and extended it with my own custom styling, accessibility features, and layout system.

• Responsive grid layout for all screen sizes
• Semantic HTML structure with proper use of headings, section, and footer
• Custom CSS variables for theming and easy maintenance
• Animated hover effects for project cards
• Focus-visible states for keyboard accessibility
• Media queries to adapt grid layout (1, 2, 3 columns)

This collection contains 19 individual HTML-CSS mini projects built while completing freeCodeCamp.org's CSS course:

1. Book Inventory App – A semantic layout simulating an inventory page for books.
2. Confidential Email Page – A secure-themed email layout using visual emphasis and spacing.
3. House Painting Page – A simple page of a house painting generated from CSS.
4. Job Application Form – A styled and accessible job application form showcasing various input types.
5. Moon Orbit Page – A visual demonstration of a moon orbit revolving using CSS layout.
6. Newspaper Article – A classic newspaper layout using typography and multicolumn formatting.
7. Playing Cards Page – A card-based layout using grid display.
8. Personal Portfolio – A basic portfolio landing page with semantic layout and CTA elements.
9. Product Landing Page – A landing page mockup for a tech product.
10. Stylized To-Do List – A visually enhanced to-do list interface using styled lists.
11. Technical Documentation Page – A documentation-style page with a sidebar and sections.
12. Tribute Page – A tribute-style page focused on layout and content flow.
13. Availability Table – A structured table layout for showcasing schedules or availability.
14. Event Flyer Page – A flyer-style design focused on event promotion and design hierarchy.
15. Blog Post Card – A card component design for blog post previews.
16. Business Card – A digital mockup of a business card layout with styled elements.
17. Contact Form – A simple but styled form layout for gathering user contact inputs.
18. Magazine Layout Page – A creative magazine-style layout using advanced positioning.
19. Set of Colored Boxes – A layout showcasing colored boxes in a structured design grid.

• How to structure and plan a scalable CSS grid layout
• Managing and organizing projects in a visual portfolio format
• Implementing ARIA roles and focus states for better accessibility
• Creating smooth transitions and visual feedback with CSS only
• Responsive design with mobile-first breakpoints

• HTML5
• CSS3
• Git
• GitHub
• Netlify

1. Clone the repository
2. Open index.html in your browser

Or you can check out the live website here

Created by Elmar Chavez

Month/Year: May 2025

Journey: 2^nd month of learning frontend web development.