code-institute-submissions / trailwalk Goto Github PK

Welcome to TRAIL WALK, a website developed to introduce to newbies and veterans a place to find their next adventure, whenever you are looking for a starting point or put your capabilities to the test.

HTML5 CSS3 Gitpod Git

TrailWalk is a 5 pages website, the home page is loaded by default. The design is clean usign white as background to make more relevant the rest of the content.

Information is well display, starting for the navbar that allows to quickly navigate through the 4 main pages. A call to action button is display just after the hero section to encourage the users to register if they are interested.

The first idea to choose the colors was to keep a clean website with low to no distraction for the users. In the same idea the following colors were chosen.

The results provided by the Coolors contrast checker were very good with a score of 11.82

We use Flex Box in the website. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Grid was also used on the website. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

A clean Navbar with white background allows the menu to highlight for a better navigation.

The footer includes the social media links and again the navbar providing comfort to the user to keep navigating.

The Checklist provide insightful information in a form of a list of fundamentals steps to provide a better experience when doing hiking.

The trails page provide more details of the location, acompanied with a photo and the map directions if the user decided to go for a hike.

This page allows the visitors to register name, last name and email address in a form. It's responsive and it was made with 3 input fields, 2 types text and 1 type email and with a submit button.

This page with a navbar on top and footer at the bottom and only one section to confirm all details have been delivered and provide a link to go back.

• HTML Markup Validator by The World Wide Web Consortium W3C

• CSS Validator Jigsaw by The World Wide Web Consortium W3C

After running the lighthouse for the first time we were able to achieve the following results

• Perfomance 73
• Accessibility 96
• Best Practices 92
• SEO 92

After fixing the problems with Lighthouse recomendations we were able to achieve better results

• Perfomance 74
• Accessibility 100
• Best Practices 100
• SEO 100

The constant low Perfomance on the lighthouse test is regarding to short cache lifetime and it can only be resolved from the server side.

Lighthouse collects all the JPEG or BMP images on the page, sets each image's compression level to 85, and then compares the original version with the compressed version. If the potential savings are 4KiB or greater, Lighthouse flags the image as optimizable.

All you need to do is add the images native width and height to the image. You can do this with the width and height attributes, defining the sizes in pixels. This then allows the browser calculate an aspect ratio (the ratio of the width to the height) and allocate enough space for the image before it loads.

For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.

Large network payloads are highly correlated with long load times. They also cost users money; for example, users may have to pay for more cellular data. So, reducing the total size of your page's network requests is good for your users' experience on your site and their wallets.

AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

Messages logged in the console come from either the web developers who built the page or the browser itself. All console messages have a severity level: Verbose, Info, Warning, or Error. An Error message means there's a problem on your page that you need to resolve. In this case, was missing the favicon that later was created.

The low performance is due to inefficient cache policy, Google's lighthouse suggest a year.

  Cache-Control: max-age=31536000

This couldn't be fixed as this need to be taking care from the server side and not the client side.

The background can be scrolled when responsive menu is displayed. One of the solutions is using JavaScript but wanted to keep the project as much possible only HTML and CSS.

The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Main Branch, then click "Save".
• The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

The website is hosted using GitHub pages, deployed directly from the master brach.

Clone the project by following the next command on Bash

  git clone https://giankpetrov.github.io/TrailWalk/

• Starting idea for responsive menu by Coding Nepal and Ivy Walobwa @ LogRocket
• Idea for responsive cards by WebIQ

• Favincon made with Favicon.io
• Color palette from Coolors
• Font from Google Fonts
• Button Design from Cornerstone Ephraim @ Uiverse.io

• Images from Pexels

Harry Dhillon for being my mentor on this project and provide excellent feedback from real work experience.