This website has been built from scratch as a way to learn about web design and development.
The pages of the website are built with the following elements:
<div class='wrapper' id='banana'> <header></header> <main></main> </div>
The wrapper is centered within the page's body using flexbox. For its inner layout, CSS-Grid was used.
To accomodate for different display sizes, the website has been designed with responsiveness in mind. This is accomplished using media queries which mainly change the grid-template-area attribute of the wrapper.
To ensure consistency among all pages, their HTML code, apart for the content of the main section, is generated using PHP includes. Thus, the PHP code of a simple page would look like this:
<?php include $_SERVER["DOCUMENT_ROOT"].'/includes/pre_main.php'; ?> <h1>PAGE TITLE</h1> <p>Some text</p> <?php include $_SERVER["DOCUMENT_ROOT"].'/includes/post_main.php'; ?>
This allows the layout of every page to be changed by editing a single file