Projects-Web

This repository contains a collection of 10 foundational frontend projects. Each project emphasizes semantic HTML5 structure, accessible and clean CSS styling, and responsive design principles suitable for beginner to intermediate developers.

This repository contains a curated collection of 10 foundational frontend projects developed. These projects focus on semantic HTML5, basic CSS styling, responsive design, and accessible markup suitable for beginner and intermediate developers.

Projects Included

1. Personal Portfolio Website
   A clean, semantic portfolio website featuring About Me, Projects, and Contact sections with a basic contact form.

2. Product Landing Page
   A responsive landing page for a fictional product showcasing effective use of CSS Box Model and accessible form inputs.

3. Blog Post Template
   An individual blog post page with semantic structure including article content, author info, publication date, images, and comments.

4. Simple Grid-Based Gallery
   A responsive photo gallery using a basic grid layout without flexbox or CSS grid, with media queries for different screen sizes.

5. Sticky Navigation Bar
   A webpage featuring a sticky-positioned navigation bar with smooth scrolling anchor links.

6. Basic E-commerce Product Listing
   A product catalog listing five items using an HTML table, styled buttons, and semantic handling of Sold Out status.

7. About Us Page with Sections
   A corporate About Us page divided into multiple styled sections with semantic HTML and box model styling.

8. Basic Blog Homepage
   A homepage displaying multiple blog post excerpts with titles, summaries, author and date metadata, and Read More links.

9. Simple FAQ Section
   A Frequently Asked Questions section using lists where questions are highlighted and answers styled for clarity.

10. Responsive Card Layout for Services
    A services page displaying cards in a flexible layout that adapts between columns on different screen sizes via media queries.

Technologies Used

• HTML5 semantic tags: <header>, <nav>, <main>, <section>, <article>, <footer>, <time>, etc.
• CSS3 for typography, box model, layout, form and button styling, media queries for responsiveness.
• No frameworks or preprocessors are used — pure HTML and CSS for foundational understanding.

How to Use

1. Clone or download this repository.
2. Open each HTML file in a modern web browser to view and interact with the projects.
3. Review the code to understand semantic structure and styling techniques.
4. Customize or build upon these projects to develop your frontend skills or portfolio.

---

This collection offers a strong starting point for developing clean, accessible, and responsive websites and prepares you for more advanced frontend development challenges.

Feel free to contribute enhancements or report issues!