Due Date: Wednesday, 3/13/24

explanation video

Bootstrap is one of the "frameworks" most used by modern web designers.

A framework is a style sheet, prepared by someone else, which makes sure that the web pages look good on phones, tablets and desktops (called "responsive" web design). They also generally have lots of other, nice, styling shortcuts which coders can avail themselves of. We will begin by exploring the styling shortcuts and then have a later lesson on responsive web design.

The Bootstrap style sheet includes many shortcuts to good-looking styling. The CSS is already written by the authors of Bootstrap and you can apply it to an html element by giving it the correct class.

Go to W3schools and begin reading Bootstrap Typography tutorial.
It shows how, just by linking to the bootstrap css, you get to use many new or re-defined elements and classes. Be thinking of which of these you might be able to use.

IMPORTANT: You need to add a link and two scripts to the head element your html file for this to work. Each of the W3Schools examples has these. Just look carefully and copy them.

Also be thinking about what you could use these convenient style shortcuts for, as you read the following sections.

Assignment:

Create a new web page on a new topic. Include several sections of text and several images. For the layout, you can use flexbox or the box model, whichever you want. Part of this lesson involves creating a navbar with links, which are clickable. Those links can just be links out to places on the internet, if you want.

Typography
Use 5 of the elements or classes described in the BS Typography page AND include a code comment in your html file, listing the 5 that you chose.
Images
Use at least one of img-rounded, img-circle or img-thumbnail to give your images a new look.
Navbar or Pills
Create a navbar on your page using one of the styles shown on the BS Tabs/Pills or BS Navbar pages.

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
ILayout Used Flexbox or the box model Used Flexbox or the box model to effectively lay out several sections of text and several images, making sure the boundaries between sections are easily noticed
Typography Used 3 of the BS Typography elements Used 4 of the BS Typography elements Used 5 of the BS Typography elements Used 5 of the BS Typography elements or classes AND includes code comment, listing the 5 chosen
Images and Navigation Used BS to style images or navigation Used BS to style images and navigation
Code Quality Code doesn't run as expected and shows they did not study or understand the semantic elements Code displays somewhat as expected, minimal understanding the semantic elements Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of the semantic elements Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the semantic elements very well
Creativity Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) Student shows minimal creativity (i.e adds a couple things but not much) Student shows some creativity (i.e creates some content, text/headings/etc and some nice styling) Student shows creativity with both the overall layout and the individual articles (i.e. additional content, lots of styling, etc.)