main header

main content:

The html code and layout are (mostly) the same for every page. The different pages have different css styles applied. This page (homepage) has no css applied for grid or flexbox, so it will always display content vertically by default regardless of screensize or device used.

This small website is built with code based on the tutorials below, but just put into the format of a small website to demonstrate how it fits together to form functioning cohesive web pages.

Great Resources for Responsive CSS:

source of page layout info: https://wpengine.com/resources/combine-flexbox-and-css-grids-for-layouts-how-to/

hamburger menu: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download

CSS Grid Info: https://drafts.csswg.org/css-grid-1/#overview-grid