Responsive-Design

In this module challenge you will continue working on your portfolio website to make it compatible for different browser widths.

User Interface and Git

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 a web developer's portfolio site.

In this challenge you will refactor your personal portfolio 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 yesterday:

• cd into your personal portfolio folder
• Create a new branch from <firstName-lastName>:

git checkout -b <firstName-lastName-day2> <firstName-lastName>.

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

Task 2: Minimum Viable Product

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

• Insert a viewport meta tag into the head of the project with these html attributes: 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 closely follow the mobile wireframe given for your chosen layout

Task 3: Stretch Goals

Once you finish the minimum viable project, 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 challenge from yesterday is in a state that you absolutely cannot work on it, reach out to your TL 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

👀 Explore a Curated Gallery of Professional Portfolios

Submission format

Follow these steps for completing your project.

• Submit a Pull-Request to merge Branch into master (student's Repo). Please don't merge your own pull request
• Add your team lead as a reviewer on the pull-request
• Your team lead will count the project as complete by merging the branch back into master.