This project will be enhancing the
Basic-Portfolio
repo with a mobile-responsive layout.
-
Copy the contents of
Basic-Portfolio
and paste the mentioned files intoResponsive-Portfolio
. -
If applicable: Be sure not to include any dot files (e.g. .git, .gitignore) from the
Basic-Portfolio
repo. -
Inside your
Responsive-Portfolio
folder, find yourstyles.css
file.
Write the media queries at the bottom of styles.css.
Write the media queries at the bottom of styles.css.
- Use
three @media screen tags
, each with one of these min-widths:980px
,768px
and640px
.
-
You use
980px
because you never want any of the content to be cut off. Since the desktop layout is about 960px wide, you want the media queries to kick in before your content gets cut off. -
768px
is about the width of a tablet and640px
is about the width of a phone in landscape. -
Make the layout match the following screenshots:
index.html:
contact.html:
portfolio.html:
-
Make the position of the header static (the default positioning) when the screen is
640px
wide. The header design takes up a lot of room; you don't want it to stick to the top of a small screen and leave no room for the rest of your site. -
Be sure to include the
viewport tag
in all your HTML files, otherwise your media-queries won't function as expected on mobile devices. (Hint: You won't need to use exact pixels for anything other than the container) -
Protip: Use the
Chrome extensions Window Resizer and Browser Width
to see the browser dimensions in Chrome. -
Deploy your new portfolio (now with media queries!) to GitHub Pages.
โข Incorporate CSS animations in your portfolio. More info: https://www.w3schools.com/css/css3_animations.asp