Below are all of the external resources and the physical code I used to create this website. Prettier, ESLint, and VS Code are totally free to view and install.
All of my code including the specific designs I used to create my website are located in my codepen above.
In total I created five html and five css files for this website. One of each for every page including this one.
The three tools I used to code my website were VS Code, and the extensions Prettier and ESLint.
Everyting in this website was designed behind the idea of simple grid, where different areas of the page held different content. At the top of my grid I have a horizontal navigation bar and at the bottom I have a horizontal social media bar. Because every page on my website maintained these bars I only had to create them once and paste them on every html page. You can view the code I used for these two elemnts on my code pen above. Within the middle of my page I organized my content using a CSS property called flexbox which allowed me to create adaptive areas of information based on the size of the browser. A full tutorial to flex box is below.
^ A full explanation on how to create a navigation bar ^
^ A full tutorial to flexbox and its properties ^