CSS and HTML Project Submission

> KeepCoding Projects - Web 18: 📁 repos-kc-web-18.md

> Select your Language: Spanish 🔄 German

Project Objective

The main goal of this project is to develop a personal portfolio (or one based on a fictional character), applying the knowledge acquired in class. The idea is to create an interactive and visually appealing presentation that showcases the skills and projects of the chosen character, using the technologies and practices learned during the course.

Learned and Applied Knowledge

• Implementation of structured HTML and its interaction with the DOM, accompanied by cascading styles through CSS.
• Proper use of semantic HTML tags combined with CSS rules to enhance accessibility and performance.
• Development of media queries to ensure a responsive design adaptable to various screen resolutions.
• Creation of dynamic animations and transitions using CSS to enhance user experience.
• Customization of animations using keyframes, achieving unique visual effects.
• Design of a responsive layout using CSS grids for a flexible and scalable structure.
• Application of proper CSS hierarchy, ensuring correct styling and visual consistency across elements.
• Analysis of the behavior of different HTML tags and their interaction with CSS to optimize content presentation.
• Implementation of input fields with efficient validations, ensuring proper user interaction with forms.
• Inclusion of links for navigation to other websites, enhancing connectivity and accessibility.
• Ensuring code cleanliness and cohesion, with an organized structure that facilitates maintenance and scalability.

Project Details

• A header must be created where the links include a smooth hover state transition. These links are not required in the mobile version.
• A section with a description about us and our skills, represented through progress bars. These bars should be animated using CSS.
• A banner must include a background image. On mobile screens, a different image should be shown (implement media queries or responsive images).
• A contact form using input fields. All fields should have correct types and HTML validations:
  • First Name, Last Name, Phone Number (required fields).
  • Radio input to answer "How did you hear about me?" (required field):
    • University
    • Keepcoding kick-off
    • School
    • On GitHub
  • GitHub tag (Use regular expression ^@[^\s]+ for validation — @username).
  • Textarea for additional user information (maximum 180 characters) (required field).
  • Checkbox for newsletter subscription.
  • Save and reset buttons.
• A footer with external resource links to social media profiles.
• A new page that includes a video which plays automatically when the page loads and appears with a fadeIn animation.
• A new page that contains a grid displaying our projects.

Optional Goals

• Create a burger menu using only CSS and a checkbox input, without JavaScript.
• Deployment on GitHub Pages.
• Custom 404 page.
• Custom 500 page.

Technologies Used

• Languages: HTML and CSS.
• Notable Dependencies (Node.js): None.

Installation and Usage Instructions

1. Software Requirements

• Git (tested on version 2.47.1.windows.1)
• Visual Studio Code (tested on version 1.99.0)
• Live Server (VS Code addon, optional)

2. Repository Cloning

   git clone https://github.com/pablo-sch/keepcoding-02-html-css.git

> See Cloning Demo in VSCode: 🎥 Gif Demo

Note: Once the repository is cloned, open the index.html, project.html, 404.html, and 500.html files using Live Server to preview them in your browser.

Project Resources

> Project Preview: 👀 Preview

Contributions and Licensing

Project licensed under the MIT License. Free to use and distribute with attribution. External contributions are not accepted, but suggestions are welcome.