Description
Assignment 2: Bootstrap and CSS Layouts
This assignment is intended to provide you with some practice using basic Bootstrap as well as gaining
a little more experience with CSS layouts. Using Bootstrap https://getbootstrap.com/ and a theme
https://bootswatch.com/ you will create two static web pages, with one linking to the other. The
requirements are listed below, but please take some time to think of a good topic and look that has some
aesthetic details. (That is, I want some theme, whatever you wish, rather than simply displaying a collection
of random data on the pages.) Bootstrap is intended to make it easier to make your pages look attractive, so
please try to do this well.
Your requirements for the Bootstrap part of the assignment are as follows:
1. Create a cleanly written README.md page for your repository with your full name, the class and
section, date the assignment is due, as well as the details I ask for below. These details will help me to
not miss requirements that are sometimes hard to pick up on during grading.
2. Call your two pages first-page.html and second-page.html. For this assignment, all CSS you use should
be placed in a separate styles.css file in a css folder.
3. Between your two pages, you must include a combination of Images, Tables, and Figures that make
your pages conceptually coherent. (You should go through the Bootstrap documentation on these
topics under the Content section in the left panel.) On your README.md page, briefly list which classes
you used for these on your two pages. (e.g. on first-page.html, used img-fluid for three images and a
element with img-fluid as well), doing this for your Images, Tables, and Figures.
4. You should have a decent amount of content, such as a navigation bar on the top or left side of the
page, sections (rather than everything just in one big section), etc., using grids within grids to format
your page.
5. The page should look good when resized using responsive design.
6. Has a Form that allows you to enter information, and when submitted, directs you to your other page.
Note: you do NOT need to pass any information from the first page to the second since that requires
Javascript, which we will only require in the next assignment.
7. Uses a variety of Components, at least 3 different types. In your README.md, list your components
used.
8. Uses a variety of Utilities, at least 3 different types. In your README.md, list your utilities used.
9. Uses at least one using Ratio from the Helpers options.
Your requirements for the CSS layout part of the assignment are as follows:
1. Place a copy of https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/ flexboxwrap0.html in your repository. This will be the starting point for this part of the assignment.
2. Do NOT change anything between the and tags except to copy the three lines of the
section and paste it below the tag. Do not change anything else in the
section. The only changes you can make after that are to the section of the file between and
.
3. Using whatever combination of layout formats you want (e.g. grids, flexbox, positioning, etc), change
the section to respond as in the video shared on keybase.
4. I will only scroll up and down to test the layouts. You must have the twelve content sections
displayed as 5 in the first row, 5 in the second row, and 2 in the last row when I scroll (as seen in the
video clip).
Create normalized tables for the following situations. Create proper foreign keys and
demonstrate at least one insert for each table. Set cascade on delete for each foreign
key.
1. Event bookings:
o Each venue can have multiple events. Venues have a name and
address.
o Each event has a name, a start/stop date and has a schedule which
lists several items with a date and time and room number (e.g.,
lunch is at 12-1pm in room 5).
2. Tweets:
o Each tweet is owned by a user. A tweet has a message and time,
and a user has a name.
3. Wikipedia:
o Each article has a body (its own text), title, and links to other
articles.
o Each link points to one other article, and has a name for the link.
o Each article also has a history, which lists each change and who
made the change at what time.
o Authors is another table that keeps track of all the changes each
author has made to many articles.
4. Sports team:
?
o
o
Each team plays a particular sport, and each team has multiple
members (players). A team also has a name.
Should have separate sport and player tables. A player can join
multiple teams.
Purchase answer to see full
attachment
