Project 1: CatPhotoApp - Responsive Web Design (FCC)

This repository contains the completed code for the first project in the FreeCodeCamp "Responsive Web Design" course.

The project showcases fundamental HTML by building a simple web page for a fictional cat photo application.

Project Overview

The CatPhotoApp demonstrates the basics of HTML5, while focusing on responsive design principles. The project includes images, links, forms, and lists, all structured semantically to create a user-friendly experience.

Key Features

• Basic HTML Structure: The project uses common HTML tags to create sections like headers, footers, and body content.
• Interactive Links and Images: The page contains interactive elements such as links to external websites and images with alt attributes for accessibility.
• Unordered and Ordered Lists: It features both unordered and ordered lists to display information in an easy-to-read format.
• Forms with Input Fields: Users can input data through radio buttons, checkboxes, and text fields, which are handled by a form submission process.
• Use of Semantic Elements: The project incorporates semantic HTML tags like <header>, <footer>, <section>, and <main> to improve both readability and SEO.
• Figures and Captions: The images are complemented with <figure> and <figcaption> elements to provide context and additional information about the images.

Code Details

• The project includes three primary sections:
  1. Cat Photos: This section introduces users to the cat photo gallery, with a link and a featured image.
  2. Cat Lists: A detailed description of things cats love and hate, presented through unordered and ordered lists.
  3. Cat Form: A form where users can specify their cat's characteristics and submit a cat photo URL.

Project Layout

• Header: Contains the title of the app.
• Sections:
  • Cat Photos: Displays a featured cat image with a link to more cat photos.
  • Cat Lists: Displays lists of things cats love and hate, with images and captions.
  • Cat Form: A simple form for users to submit details about their cat, including its personality and whether it's an indoor or outdoor cat.
• Footer: Includes a "No Copyright" message and a link to FreeCodeCamp.

How to Run the Project

1. Clone the repository:

   git clone https://github.com/your-username/catphotoapp.git

2. Open the index.html file in a web browser to view the project.

Learning Objectives

This project helps learners:

• Understand the importance of semantic HTML.
• Create forms with various input types (radio buttons, checkboxes, text inputs).
• Build structured lists and figures.
• Use accessible features like alt text for images and properly labeled form elements.

FreeCodeCamp Curriculum

This project is a part of the Responsive Web Design Certification on FreeCodeCamp.