Page 1 of 3

CPSC 1030 Assignment 13

Setup:
● Download the starter files from D2L.
● There is a CSS file with styles already written for you (given-styles.css).
Don’t change this file.
● You will write your styles in style.css

There is a screenshot in the assignment folder that will show you what the site
should look like when you’re done.

Task: Layout using Flexbox

Study the screenshot and apply the styles to match it as closely as possible.

- Layout:
▪ <nav>: Currently the <nav> bar children (the Microsoft logo and
links) are laid out vertically . We are going to use CSS flex-box to
make it resemble the screenshot.

● Start selecting the <nav> tag and make it a flexbox

container. You can do this by applying the display: flex
property.
● Set the align-items property to center. This should center
align the flexbox vertically (along the cross axis in this case).

▪ <header>: Now, we are going to use flex-box to make the header

resemble the screenshot.
● Similar to the <nav>, start by setting the display property
of the <header> to flex to make it a flex container.
● Play around with the flex-direction, align-items and
justify-content properties to make it look like the
screenshot.
● Apply an appropriate amount of padding and margin to
make it look like the screenshot.

▪ <section class=”follow”>: The next task is to fix the layout for the
<section> tag with class “follow” using flex-box.
● Set it’s display property to flex to make it a flex container.
 Page 2 of 3

● Play around with the flex-direction, align-items and

justify-content properties to make it look like the
screenshot.
● Apply an appropriate amount of padding and/or margin to
make it look like the screenshot.

▪ Footer<div class=”footer-inner”>: The next task is to use flex-box

to do the layout for the <div> inside the <footer>.

● Start by selecting it and making it a flexbox container.

● Set the justify-content property to space-between. This
should insert some space between the child elements
(<div> and <ul>).

▪ Footer ul: Finally, we are going to use flex-box to do the layout for
the <ul> inside the <footer>.

● Start by selecting it and making it a flexbox container.

● Play around with the flex-direction, align-items and
justify-content properties to make it look like the
screenshot.

Hand In:
When you have completed the assignment, please rename the a13 folder to
a13_firstname_lastname, create a zip archive, and hand it into the Assignment 13
folder on D2L.

Check your Work:

Look at the screenshot in the assignment folder. Is there anything you’ve missed?

- [2.0 marks] Layout for <nav>

- [3.0 marks] Layout for <header>
- [2.0 marks] Layout for <section class=”follow”>
- [2.0 marks] Layout for <div class=”footer-inner”>
- [1.0 marks] Layout for <footer> ul

Total: 10 marks

Resources:
 Page 3 of 3

- CSS Flexbox Guide

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp

Acknowledgements and References:

- Brad Traversy, Traversy Media
- Mozilla Developer Network (MDN)
- CSS Tricks