Error 404 Page
I created a custom 404 page for non-existent pages to cater to any URL misdirects. This will allow the user to maintain access to existing pages on the site. An example of this can be found at this non-existent link.
Personal Website
About This Section
This section houses progress records regarding the development of this website.
- - - - -
- - - - -
Performance Optimisation
In order to improve the website's overall performance, I ran Lighthouse tests to diagnose any potential drawbacks to the current state of the platform. I managed to achieve ratings of 93, 100, and 100 on Accessibility, Best Practices, and SEO metrics, however, I had various degrees of Performance ratings each time a new report was generated. The bulk of the Performance metric improvements were empirical, regarding the loading speed of the the pages when they are first loaded by the user. The remaining concerns identified by the reports did not directly intefere with user experience, and were therefore not considered as major priorities to deal with.
- - - - -
Mobile Responsiveness
Once my website was deployed to Vercel, I began to work on the mobile-responsiveness aspect of the application. This was done using a '@media' query in the stylesheet, containing tailored overrides for the different classes, tags, and ID's for the respective elements. One small unexpected issue involved adjusting the dimensions to the 'viewport' attribute in the meta data, as it seemed that the background images distorted the default positioning of pages. This was easily fixed by removing unnecessary width restrictions in the stylesheet. Other adjustments included rearranging the format of the navigation bar to compensate for the smaller screen widths, and disabling its stickyness due to the relatively large screen coverage. I also adjusted the padding and margins for a variety of elements, including the banner, main body, footer, image widths, grid formatting, and the various types of texts and headers. The idea was to standardise and condition the HTML tags such that it would be easy to add any new content to the website, without having to adjust the stylesheet further for each subsequent addition to the website's content.
- - - - -
Implementing JavaScript
The first use of JavaScript was used to add a slideshow of photos to the website's landing page. The code used to achieve this is from W3Schools. I have also given the images a clickable property, for users to easily navigate to the respective page which the image belongs to.
- - - - -
Backgrounds and Sticky Bars
Today's activities included updating the aesthetics of the webpage backgrounds, and the behaviour of the navigation bar.
The margins of the banner, main, and footer sections of the website were decreased as a proportion of the screen size,
allowing for space for the different background images to be shown on either side.
A new class was added ot the navigation bar, making it become 'sticky' if the user scrolled past its initial position. since
a text background was implemented, the z-index needed to be adjusted to rectify this. Another small feature is the inclusion
of a 'Back to Top' button at the base of each webpage, to increase usability/ease of navigation.
* * * * *