In this module challenge you will continue working on your portfolio website to make it compatible for different browser widths.
- 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
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!
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:
-
cdinto 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>.
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
Once you begin, you will have 15 minutes to answer the questions here
The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.
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
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!
📚Best Practices for Responsive Design
🤝W3 Schools - Responsive Design
👀 Explore a Curated Gallery of Professional Portfolios
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.