Week 07 Homework

Implement HTML/CSS to Build the Adjacent Layout

  • Open file /schedule/week-07/02/after-class/week07-homework-starter.zip from the class repo.
  • Update the HTML/CSS you find to add flexbox classes where you see <!-- comments --> and class="???" to complete the flexbox layout matching the .pdf file as closely as you can. The starter file already has classes in place for flexboxes in 2 sizes (flex: 3; and flex-1;) and flex-container (display: flex;). It's up to you to determine which classes to add on which section, div, and aside elements.
  • Have a look at the annotated image I added to the homework folder in GitHub for additional guidance.
  • The starter file uses shaded boxes — div elements with width, height, and grey background-color — in place of the image placeholders (x-ed out boxes). If you have time, move the inline CSS for the shaded boxes to the internal CSS in the style element.
  • Approximate the sizes of the shaded boxes. For example, the big page banner looks to my eye about three times as wide as the list block to its right.
  • If you can, follow instructions here to get the Font Awesome stylesheet linked in your code, then use it to represent the search button icon, home link icon, and social media icons in the right column. It's acceptable to simply add a shaded box labeled 'social media icons' or similar in place of the fa icons.
  • Create a new folder in your personal GitHub repo for week07-homework
  • Upload your new HTML and CSS files.
  • View in GitHub Pages and work with your HTML and CSS until they visually resemble the .pdf file.
  • Submit your HTML and CSS files to Blackboard along with your GitHub Pages URL.
template file