Frontend Web Development

Assignment for Week 18

  1. Create an HTML file and a CSS file.
  2. Add a <title> to the <head>.
  3. Link the CSS file to the HTML file by creating a <link> element in the <head>.
  4. Add a <meta> tag that, on mobile devices, causes the viewport to match the device's width and prevent zooming.
  5. Add a <header>, <nav>, <article>, <aside>, and <footer> to the <body>.
  6. Put some random text inside each element so you can distinguish them from one another.
  7. Create a media query section in the CSS file that targets screens that are 960px wide or more.
  8. Add a rule to the media query section to make the <body> 960px wide.
  9. Add a rule to the media query section to make the <nav> and <aside> 200px wide.
  10. Add a rule to the media query section to make the <article> 500px wide.
  11. Add a rule to the media query section to make the <nav>, <article> and <aside> float to the left.
  12. Add a rule to the media query section to make the <footer> clear the floated elements.

Extra credit:


Solution