Responsive Website

Introduction

In this task, you'll be enhancing the visual appeal of the corporate website for tablets and mobile devices by applying your expertise in responsive layouts.

Please, visit the following resources prior to getting started:

• The Figma mockup for the Responsive Website
• The Responsive Website INTRO video
• The Responsive tag page at w3schools documentation.

Learning objectives

This assignment should prove that a student is able to:

• Set the responsive HTML meta tag
• Implement media queries to define distinct views for desktop, tablet, and mobile devices.

Standard requirements

• Fork the project to your github account
• Clone the project to your computer
• Open the project in VSCode with code <cloned_repo_folder_name>
• This assignment does NOT have automated tests!
• All the tasks of the "Specific requirements" section MUST be solved
• The project's file/folder structure should NOT be edited!
• The index.html file should NOT be edited!
• The /css/styles.css file should NOT be edited!
• VSCode IDE MUST have 0 problems listed
• The code of the index.html and styles.css should pass the W3C validation (Feel free to use either the "w3c web validator" VSCode extension or the "Online w3c Markup Validation Service")
• The code MUST be formatted with Prettier.
• Push the changes to the Github repo, when finished.
• Submit a .txt file with the Github repo url.

Specific requirements

Acceptance criteria:

• The responsive HTML meta tag is set.
• The website should replicate the mockup for desktop, tablet, and mobile views, incorporating all aspects such as fonts, font sizes, colors, paddings, margins, gaps, etc.
• The hover styles are added for the desktop view for:
  • The top navigation items
  • The social icons of the teammate
  • The links in the footer (social icons and labels, emails, phone numbers)
• The index.html file must remain unchanged.
• The styles.css file should remain unaltered. Any necessary styles should be appended to the /css/responsive.css file.
• Media queries should address the following viewport ranges:
  • Desktop: 1024px and above
  • Tablets: 768px (0px) to 1023px
  • Mobile devices: 360px (0px) to 767px