Client-Side Web Development - Weekly Assignment #2

  1. Open the file index.html, created during the completion of the first assignment and edit it as follows.
  2. Include a Bootstrap 5 CSS stylesheet with the use of a link element.
  3. Add a Bootstrap grid of elements arranged in three rows, all inside an element of class container-fluid. The first row should contain 3 column elements, the second 2 elements and the third 3 elements. Choose the column widths so that no two widths in a row are the same and so that each row is filled (widths must add up to 12). The content of the columns should be as follows:
    • One of the eight columns in the layout should contain the table created in the previous assignment. Style the table by assigning it to the Bootstrap class table.
    • Another one of the columns should contain a piece of text, around 100 words in length, copied from a newspaper or similar website, in a paragraph element.
    • Another one of the columns row should contain an image (if copyrighted make sure to reference the source in a comment in the HTML file).
    • The remaining five columns should contain elements with a border and with backgrounds coloured using at least three Bootstrap colours. These five elements should contain the following words: one, two, three, four, five (one each) and the words should be centred as well as possible, each within its element.
    • The grid should be collapsible i.e. the elements should be stacked at smaller screen/window widths.
    • All the elements in a row should be of equal height (use class h-100 for this).
    • There should be some spacing between the rows, which is also visible when the layout is collapsed (use class mt-3 for this).

 

For information on submission deadline and grading of this assignment see the the Schedule and Notes page, below the table.