Skip to content

Latest commit

 

History

History
31 lines (24 loc) · 2.31 KB

README.md

File metadata and controls

31 lines (24 loc) · 2.31 KB
Raw

fed-homework-08-lesson

This homework gives you the chance to get a bit creative and apply your knowledge on flexbox and grid!

Background

The "ReDI News" team wants to setup an online version of their newspaper. They ask you the help them with this task. As they would like to reach as many readers as possible, the page should be easily readable on a laptop/tablet and phone screen.

The team asks you to create a website - the start page - which comprises at least the following content:

  1. a header with the ReDI logo and the name of the newspaper. The font-size should be a bit larger than that of the content.
    1. a navigation bar (They have not given any indication on how this should be designed. It could be a burger menu, a vertical or horizontal sidebar)
  3. one section for a preview of the featured article of the day with the following elements:
    1. title
    2. content of 100 words
    3. one picture with no given size
    4. small hint on source
  4. three sections for the previews of three secondary articles of the day with the following elements for each:
    1. title
    2. content of 50 words
    3. small hint on source
  5. a footer with important links to their imprint & contact, transparency, Privacy policy section. The links should be the same as in the ReDI Homepage footer

They also give you the freedom to add additional sections which you would like to include. You can use placeholders for the text or copy text from the ReDI website.

Tasks

1.Think about how you want to design the start page for a wide screen (laptop/tablet) and create a mockup on paper or in a digital form. Upload a screenshot or photo of your design as an image to this repository. Name it "wide_design". 3. Create two files redi-news-home.html + redi-news-home-style.css and implement your page design with Flexbox and Grid. 4. Think about how you need to improve your page design in order to be better viewable on a mobile phone. Create a second mockup on paper or in a digital form. Upload a screenshot or photo of your design as an image to this repository. Name it "mobile_design". 5. Adapt your existing code such that it implements your new design for mobile devices. Use Flexbox, Grid and Mobile Queries for that.