Responsive-Design

In this module task you will continue working on the restaurant website to make it compatible for different browser widths.

Responsive Design

Objectives

• describe the differences in fixed, fluid, adaptive, and responsive layouts
• implement media queries in a project.
• describe how using scalable units for font sizes impacts accessibility and why designing accessible web pages is important

Introduction

It goes without saying that this skill is essential for a professional Web Developer. Imagine trying to visit a store's webpage on your phone and not being able to even read the names of items? That would be totally unacceptable in this day and age! Same goes for the restaurant website.

In this task you will refactor the restaurant website code to make it responsive. You have the ability to write HTML, CSS, and responsive media queries. You also know how to identify and write responsive units. It's time to put that knowledge into action!

Instructions

Task 1: Set up Project

New features of a project should occur in a new branch in the same repository. Follow these steps to set up and work on your project from last lecture:

• Fork this project
• Clone this project into your computer
• cd into the project
• Create a new branch from <YourfirstName-YourlastName>:

git checkout -b <YourfirstName-YourlastName-day2> <YourfirstName-YourlastName>.

• Implement the project on your newly created <YourfirstName-YourlastName-day2> branch, committing changes regularly.
• Push commits: git push origin <YourfirstName-YourlastName-day2>.

Task 2: Minimum Viable Product

Use the checklist below to guide your work today. Your final product should work with mobile, tablet and a desktop-width.

• Insert a viewport meta tag into the head like this: content="width=device-width, initial-scale=1"
• Introduce max-width media queries into your project at 800px and 500px
• Add accessability features to your webpage
• Design should look like design_responsive.jpg file.
• The Gallery section and the newsletter form in the design are optional.

Task 3: Stretch Goals

Once you finish the minimum viable tasks, work on any of the following stretch goals:

• Test your website at several breakpoints and refactor code as needed. A few common breakpoints are below:
  • iPhone: 360×640
  • Laptop: 1366×768
  • Widescreen: 1920×1080
• Test your webpage's accessibility with a screen reader like this
• Start over with min-width media queries to get a feel for how a mobile first approach would be like. I recommend making a branch of all your content in a new folder named "mobile-first" to keep it separate
• Test your webpage's accessibility with a screen reader like this

FAQs

What if I'm not done with my site from last time?

If you're not totally happy with your site, that's fine. Try to work with what you have. If your task from yesterday is in a state that you absolutely cannot work on it, reach out to your GL for starter code and attend support hours for more HTML/CSS help.

My site works on mobile - does that count as responsive?

A mobile website is not the same thing as a responsive website! A responsive webpage works at any browser width, not just mobile. Keep on coding!

Resources

📚Best Practices for Responsive Design

🤝W3 Schools - Responsive Design

👀 If you need images for the gallery section, go here

Submission format

Follow these steps for completing your project.

• Submit a Pull-Request to merge Branch into main (student's Repo). Please don't merge your own pull request