You’ll need to understand the following to complete this assignment:
- Media queries
- Bootstrap’s breakpoints (but do not use Bootstrap itself!)
- Tables (including
Create a new project in your Web Dev Projects folder called
Create a file named
ZOMG! I can actually DO this!.
Create a folder named
styles. In that folder, create a file named
Look at the following image. You’ll see that if your viewport is at the Bootstrap
sm breakpoint or greater (I am referring to the Bootstrap
sm breakpoint only to give you a size for your media query):
Now look at this image. You’ll see this if your viewport is at the Bootstrap
xs breakpoint (Again, I am referring to the Bootstrap
xs breakpoint only to give you a size for your media query):
Here’s the text for that table (the
| delimits the table cells):
Table 6.1: Writers & Their Most Famous Creations Lovecraft | Cthulhu Burroughs | Tarzan of the Apes Dent | Doc Savage Gibson | The Shadow Haggard | Allan Quatermain Wells | The Time Traveler Verne | Captain Nemo Howard | Conan the Barbarian Raymond | Flash Gordon Rohmer | Fu Manchu Nolan | Buck Rogers Leiber | Fafhrd & the Gray Mouser
Create a table that holds that data. Don’t forget the caption to the table!1
For background colors, use a color picker.
To create a bookmarklet that is specific to Bootstrap’s breakpoints, follow these instructions:
Go to the Viewport Resizer Bookmarklet.
Scroll down the page until you come to Build Your Own Bookmarklet Here. In the text area labeled Result • Editor, enter the following:
<a data-viewport="640×960" data-icon="mobile">xs (640)</a><a data-viewport="800×1280" data-icon="tablet">sm (800)</a><a data-viewport="1024x768" data-icon="notebook">md (1024)</a><a data-viewport="1280x800" data-icon="tv">lg (1280)</a>
Click & drag the blue button labeled Your Customized Bookmarklet to your Bookmarks (or Favorites) toolbar. By default, the name will be
↔ Resizer. Change it to
↔ Resizer (Bootstrap 3). If you already have the Viewport Resizer Bookmarklet installed, you can keep it or delete it—it’s your choice.