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 repo from Wednesday:

• DO NOT FORK OR CLONE THIS REPOSITORY; YOU WILL WORK OUT OF YESTERDAY'S AGAIN.
• cd into your repository on the command line and use code . to open VS Code.
• Create a branch called firstName-lastName-responsive.
• Make an initial push after you complete your HTML structure, then make a Pull Request onto the main branch of YOUR repository (not BloomTech's).
• Go into Canvas and connect your repository by copy-pasting its Pull Request URL into the submission slot.
• Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
• Complete your work making regular commits to the firstName-lastName-responsive branch; your submitted URL will always reflect your most recent work.

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.

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