Workshop: Grid and other CSS concepts

All these exercises can be placed on the same HTML page. Whilst logged into GitHub with your Birkbeck email address, get the starter repository from the link in moodle.

Grid CSS and positioning

1. Create an empty HTML page and linked CSS stylesheet.
2. Create a grid container with at least 9 grid items.
3. Make the grid container have at least 3 grid items across the horizontal when in desktop view.
4. Make one grid item span more than 1 column.
5. Create one positioned element that is outside the grid layout.
6. Create a media query so that in mobile view the number of grid items across the horizontal is only one.

Other CSS concepts

1. On the same page create a page with header, navigation, main with simple grid layout, and footer.
2. Use a pseudo-class and a pseudo-element.