✨ Hello! ✨
In this series, I am documenting the process of building my portfolio website. Thank you for reading!
⚗️ Downloading a boilerplate
A boilerplate is a template you can use to kickstart your project. It contains all of the files, folders, and code that tends to be repeated throughout a project. I use HTML5 BOILERPLATE. It is constantly being updated and all you need to do is click the download button:
Once downloaded, I extracted the files and selected a folder (mine is called "portfolio-2023") to send them to:
📂 Adding folders for a multi-page website
Inside of my "portfolio-2023" folder, I added four new folders titled "menu," "about," "connect," and "projects" for each of my website pages. I then opened my "portfolio-2023" folder in VS Code and added an "index.html" file to each folder:
I copied the HTML from the main "index.html" file (the one that came with the boilerplate download) and pasted the code into each "index.html" file inside the "menu," "about," "connect," and "projects" folders.
🔗 Updating the links
Because the "index.html" files are nested inside of the "menu," "about," "connect," and "projects" folders, anything that links to an external file needs to have ../ added to the beginning. This tells the link to move up a level in the folder structure to find the necessary file. I updated the following links in each "index.html" file other than the main one:
<link rel="manifest" href="../site.webmanifest">
<link rel="apple-touch-icon" href="../icon.png">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-3.11.2.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
🥳 That's all for now!
My next post will be about turning the files I just set up into a directory and pushing it to a GitHub repo. Thank you for following along!
Top comments (0)