About the page

Sematic Elements

I did some reseach on different sematic components and how to use them. And decided that "nav" was the best slector for my header and navigation bar. "figure" and "figcaption" was the best thing to use for images, as this can hold an image but is also natural for other things like illustrations etc. I decided to use "section" for the parts where I wanted to group elements together, however I only used this element alone or together with a class and never with an id. For individal ids i usually used "div". This was done to easiely recognize when something is a unique element not repeated elsewhere.

I decided to only use the "div" element together with specific ids in cases where i didn't feel like anything else would fit better, or I had already used the sematic component for something else on the same page. An example for this is with "nav" and the "div id=pfnav". If I was to make my code even better, I could either name them both nav with seperate ids, or use "header" for the main navigation bar and "navn" for the second one.

Contents

I decided to have every page within their own folder to create a consistent pathing in the link. I named every html file for index.html as this is what the browser looks for at a defeult, and this way the .html part of the file is not visable in the pathin. I followed the same consept for the portfolio page, and created each of these also within their own folder. For easy access and clean folder sorting, I also decided to have all images within one folder. I renamed most pisture files to recognize them more easily in the code. The pros about this is that the pathing is understandable and consistent. The cons is that there is a lot of folders to keep track off.

In the css file i also had some internal strucrure. I decided to first list all sematics and elements, starting with the most to the least used. Then I listed the classes and lastly the IDs. This allowed me to know where to look for a spesific element, class or ID, allowing me to work more efficient.

Estetics

Even though it was not requried, I decided to make a colorpalette for my webpage. This is something I decided to do to make sure colors where complementing each other and elements ahd good readabillity. I did this using the coolors website. You can see my colorpalette below.