In this project you will build a responsive website. To be more specific, you will clone The Next Web, which uses media queries to gracefully degrade their site as the window size is reduced.
Don’t worry since the process will be quite similar to what we have done before.
Assignment
As usual, don’t worry about 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).
[Note] : As you could see the website is too large, and the idea is to practice the concept of responsiveness with media queries, so you do not have to clone the entire page,also you can use lorem ipsum for the text 😉
- Bare minimum requirements [basics]:
- Clone the first three sections:
- the navbar
- the images
- and
the most popular stories todaysection.
- Clone the first three sections:
You can follow these steps 👇🏻
-
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.
-
Add in the media queries and positioning/floating attributes that are needed to make them rearrange as necessary when the browser changes sizes.
-
Fill in the divs and style them to look like the original homepage.
-
Double check that all the elements still behave just like the original when the browser size is changed.
-
Push your solution to Github.
-
Submit your pull request URL
