Frontend Web Development
Assignment for Week 16
- Create an HTML file and a CSS file.
- Add a
<title> to the <head>.
- Link the CSS file to the HTML file by creating a
<link> element in the >head>.
- Add a
<nav>, <article>, and <aside> to the <body>.
- Put some random text inside each element so you can distinguish them from one another.
- Create a media query section in the CSS file that targets screens that are 960px wide or more.
- Add a declaration to the media query section to make the
<nav> and <aside> 200px wide.
- Add a declaration to the media query section to make the
<article> 500px wide.
- Add a declaration to the media query section to make the all three elements inside the
<body> float to the left.
Extra credit:
- Style the
<nav>, <article>, and <aside> so they are more visually distinct. Make sure these rules apply regardless of screen resolution.
- Style the header, article, and footer such that they look distinct from one another.
- Space the elements out from one another when the window width is above AND below 960px.
- Sniff out the user agent string using
navigator.userAgent and make something happen if the browser is Chrome.