Frontend Web Development
Assignment for Week 18
- 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
<meta> tag that, on mobile devices, causes the viewport to match the device's width and prevent zooming.
- Add a
<header>, <nav>, <article>, <aside>, and <footer> 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 rule to the media query section to make the
<body> 960px wide.
- Add a rule to the media query section to make the
<nav> and <aside> 200px wide.
- Add a rule to the media query section to make the
<article> 500px wide.
- Add a rule to the media query section to make the
<nav>, <article> and <aside> float to the left.
- Add a rule to the media query section to make the
<footer> clear the floated elements.
Extra credit:
- Style the elements inside the
<body> so they are more visually distinct. Make sure these rules apply regardless of screen resolution.
- Space the elements out from one another by 20px 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.
Solution