Reflection
Visual Design
The target audience I decided to go for was 14 to 16 year olds. I wanted a website that didn't look too childish, while not looking too professional either. This included the active use of colors, larger fonts and elements, and reading material fitting the young teenager demographic. I prioritized making a cohesive design that was playful, e.g. the navigation bar with the hover effect and yellow bulletins. At the same time, it was important to not "dumb it down" too much as they are quite capable of understanding the current struggles connected to climate, and acting as if they aren't would only be a disservice. I went for the font family Arial, due to it's applicability and how readable it is on the screen. It was also necessary to make sure that how the colors communicated with each other followed WCAG, to make the website as accessible as possible.
Structure
Structural tags I used within the <body> tag, where <nav> for the navigation bar at the top, <main> for the main content, and <footer> for the footer at the bottom of my website. In addition, I used <section> or <article> (like on my "About" page) where they applied within the <main> tag. When it comes to my folder system, I have one folder called "images" for images, and another called "pages"—that includes all sites besides the home page (landing page, index.html)—below my parent folder. The stylesheet I used is not within any subdirectories. I did it this way to make sure everything was orderely and easy to navigate.
Responsivness
I applied both grid and flexbox to build my website. I am not sure if I created more <div> containers/boxes than necessary, but layout-wise my site ended up looking how I wanted. With media queries, which were (max-width: 600px) and (min-width: 1200px), I increased, reduced or eliminated properties such as padding, margin and gap depending on the need. Combined with the use of responsive units, such as rem and %, my website ends up being quite responsive. It does look functional for the "Galaxy Fold" screen, the smallest definitive screen within the Inspect tool, and the design doesn't start breaking before around 262px width.
Carbon Footprint
To make sure that the carbon footprint of my website is as small as possible, I went through multiple processes. First, I attempted to write efficient code and not repeat myself (DRY-principle) in my CSS. Writing inefficient code and including elements that you won't display on your website only lead to higher energy consumption, as it takes resources from the computer to store and increases the load on a website for example. Another way to reduce the carbon footprint was to change the format of all my images to WebP, a photo format that has around the same file size as JPG while preserving the quality of an image better. Using a converter, I saved about 2.8 MB total. While that's not a lot, doing this on more complex sites will add up. The exceptions are the game board I created with Adobe Illustrator (did use the "save for web" option however), and the Goal 13 logo due to the green color changing after the conversion.
Sources
The source used to make this website has only been UN, both for facts and information and when it comes to images linked to their visual identity. Other images where downloaded from Pixabay, which are royalty-free. I used ChatGPT as a tool to rephrase the text to make it easier to understand for the chosen target group, which was 14–16 years old, and for identifying issues when it comes to certain issues within my code.