Project 1: Responsive Website

Description

This project is my first fully responsive website built using HTML, CSS, and JavaScript. The objective was to recreate a pre-existing design, add interactions with the DOM, and deploy the project to Netlify.

Learning Outcomes

By completing this project, I was able to:

• Build a responsive website using HTML, CSS, and JavaScript.
• Utilize layout properties like Flexbox and positioning effectively.
• Deploy a live website to Netlify using Git.

Technical Requirements

The project adheres to the following technical requirements:

• The website is rendered in a browser.
• Includes separate HTML, CSS, and JavaScript files.
• The project has a GitHub repository with at least one commit per day.
• The website is deployed online using Netlify.
• Followed KISS (Keep It Simple Stupid) and DRY (Don’t Repeat Yourself) principles.
• Replicated the provided design files using HTML and CSS.
• Ensured the website is responsive.
• Implemented functionality using JavaScript.
• Created this README file covering all features, configuration, and specifications of the application.

Project Description

The website is built for a fictional web design company and includes the following pages:

• Home Page
• Project Page
• Contact Page with a form

Features

• Navigation: Added navigation between the pages.
• Form Validation: All fields in the contact form are required before submission.
• JavaScript Interactions:
  • Fetched and displayed the first three projects from an API.
  • Implemented form validation to show alerts for specific input conditions.
• Bonus Features:
  • Added animations to different sections, like the “recent projects” cards.
  • Created a responsive menu that toggles on click.

Setup

1. Clone the repository:

   git clone https://github.com/yasoli06/Project_1-Brief.git
   cd Project_1-Brief
   

2. Open the project in your preferred IDE.

3. To view the website locally, open the index.html file in a web browser.

Deployment

The website is deployed on Vercel. You can view the live website here

Assets

For this project, the following assets were used:

HTML, CSS & JavaScript A Figma design file for the website layout and specifications. A folder containing all necessary images for the project. MDN Web Docs W3Schools

Contacto

Nombre: Yasmin Neri E-mail: yasmiineri@gmail.com