The assignment was to Build out the website, I decided on a Northern Lights theme mainly due to the quality and colurs of the images I was able to see.
I made some intial designs using figma so allow me to make a basic plan on what I wanted each sheet to include.
"Build out the website" week 1 assessment - Northern Lights
22/03/2024 - submission details image source: https://capturetheatlas.com/best-northern-lights-images/
Been an amazing week, highs and lows, but I have really enjoyed it.
I had moments where I felt almost lost, but then I found a new category that simply clicked.
I have/will include more notes in my README.md file in terms of assignment reflection.
I have a significant number of changes to ensure I have met the assessment criteria. e.g position: absolute and flexbox
One challenge I came across was I was thought we were trying to create something similar to the spacey website however some of the instructions on here seems to conflict in consistancy for example I added my images into the HTML as I wanted them to scroll rather than setting the background image on the CSS, so I wasn't sure if I misunderstood.
https://nicklormanhall.github.io/assessment-week1-northernlights/ (live) https://github.com/nicklormanhall/assessment-week1-northernlights.git (github repo)
Another challenge I found was the Live server changes weren't always reflected on the localhost, meaning that I may have made correct changes to the code but as those changes didn't always seem to show I removecould have removed correct changes. I ended up closing the live server and re-initiallising each time on big layout changes when nothong seemed to have changed.
23/03/2024 & 24/03/2024 - submission details
I made changes to the structure to move the images from the HTML file to the CSS file. Added text, buttons. short video at the end., I included links to external websites and added an email button. I finally added some JavaScript to change to font colours.
ADDITIONAL FEEDBACK:
Complete and meets expectations
Correct use of semantic HTML elements, including header, footer, nav.
I believe I have completed this, some examples used are, header, nav, section, div and footer
Correct use of CSS absolute positioning for overlaying text
I was able to include this within my image container sections, this posed quite a few challenges, as I couldn't get my 2nd and 3rd box to line correctly. I ended up redoing the HTML and CSS.
Correct use of CSS Flexbox for layout and nav links.
I used this in several areas include the header, nav and content
Correct use of image elements and file paths to image files
I have included three images and a short video, I initially included the images in the HTML based on the weeks lessons, then moved these to the CSS (as per the Build out the website - Adding background images section.
Complete and exceeds expectations
Some of the things I think I have done to exceed the expectations are:
I have included a short video at the bottom (including resizing to fit on the page) with autoplay and loop.
Added two buttons with JavaScript to change the font colours
Added an email button on the CONTACT
I certainly faced challenges. I spent a good number of hours trying to fix an issue where the page information on each sheet was all displaying on the first page.
I spend time going through resource documentation supplied over the past week. Web searches and AI on occasion to check my understanding
I probably used the Inspect Element the most through the set up, trying to get more familiar with how it works and how I could use it. This included looking at the Spacey.