Introduction
In this project, you’ll get the chance to build a responsive website. We’ll be cloning The Next Web, a tech-focused magazine which uses media queries to gracefully degrade their site as the window size is reduced.
The process will be quite similar to what we’ve done before. At this point, you should be much faster at setting up a site layout and positioning the elements than when you first started.
Assignment
As usual, don’t worry about the small stuff like sharing buttons or comments or javascript-enabled widgets like the endless scroll feature.
-
Visit The Next Web and poke around their home page. Play with changing the window width and see how the site changes (for instance when the sidebar gets hidden).
-
Set up a private Github repository for this project and add your instructor(s) as collaborator(s).
-
Create a new HTML document.
-
Think about all the elements on the page and how they are grouped together.
-
Try to discover which browser widths are "breakpoints" where element properties change (e.g. the sidebar disappearing). Make a plan for which elements need to be modified at which widths.
-
Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned. You may want to make their background colors different so you can see them. Don’t forget to use your browser’s developer tools (right click on the page, click "inspect element")!
-
Now — before you’ve filled in any of these divs — add in the media queries and positioning/floating attributes that are needed to make them rearrange as necessary when the browser changes sizes.
-
Once you’ve got the page layout performing as it should, fill in the divs and style them to look like the original homepage. Don’t get lost in the details — it’s okay if it isn’t exact.
-
Double check that all the elements still behave just like the original when the browser size is changed.
-
Push your solution to Github.
Additional Resources
- Suggest some in the comments below!
LOOKING FOR HELP?
When looking for help, try doing so in the following order:
- Did you try everything you could?
- Did you read the documentation?
- Did you Google for it?
- Did you post your question on Slack/Forum?
- Did you ask your fellow students for help?
- Did you ask your Mentors for help?
- Did you leave a comment on the comments section of this page?
- Did you ask your Instructor for help?
- Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
- Is it urgent? Did you try reaching him on Slack
UPDATED: 02.11.2020
