Frontend Web Development
Assignment for Week 14
- 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.