DIYI - Do It Yourself Installation (PP1)

Deployed live website here

Github code here

Description

This Website is the 1st out of five Personal Projects for the Code Institute's Web Developer course with e-Commerce applications. It is built merely using HTML5 and CSS. The last update to this file was: June 5, 2022

This website is a guide to the installation of artificial grass and it's purpose is to help to clear doubts about the necessary steps to successfully undertake this DIY project. I made used of the information contained here myself when I took the challenge of doing my very own garden without previous experience. (photos of my own project are included).

Target user

The target user for the website is

• English speaker.
• Spanish speaker.
• Interested in DIY.

User of this website are browsing for

• Information on how to install artificial grass.
• Guide to install artificial grass themselves efficiently.

User stories

As a first time user

• I want to easily navitage the site.
• I want to find the content I am looking for.
• I want to see a video explaining the installation.
• I want to see pictures of projects done using this guide.
• I want to be able to view the content in my mobile phone.
• I want to be able to view the content translated into Spanish Language.

As a returning user

• I want to be able to contact through social media.
• I want to be able to fill in a form to ask questions if I have doubts during my installation.

Structure

Typography

Main font used in the website is Monserrat which is beautiful and with excellent readability features and compliments and highlights the Lobster font of the headings.

Layout

The website uses a two column responsive layout that will merge into one for small screen size.

Home page

The user will be greated with a hero image of green surface and a pair of builder gloves making it clear to the user of what the website is about .Each page contains a conventional logo positioned on the top left and a navigation bar on the right side, which will me placed under the logo for mobile small screen sizes. Additionally, on the bottom right corner of the hero image there is a link in all the pages to translate the website into spanish language. All pages will be responsive and layout will adapt to different screen sizes.In the botton of the page the user will find the footer that contains social media links and a button to return to the top of the home page to enhance the user experience.

About section

Under the hero image it is the about section where the user will see and introduction of what artificial grass is and a graphic showing how it is made.

Project section

This is the main section of the website with key information. The project page will feature a explanatory video showcasing the how-to installation of artificial grass. This is one of the resources i used myself when i did the project and the user will find it very beneficial, followed by images of the before and after the project. Below that is a detailed description and images of the 8 more important steps to install artificial grass in a proffessional maner. Images where taken during the process of doing the project, except three of them pictures that are screenshot of the video because i found it would graphically explain more clear the step described.

Contact page

In the contact page the user will find a custom made contact form, where the user can input contact personal details and can ask question and about doubts he/she might have about the guide.

Technologies

• HTML

  • This project uses html as the mark up language to give structure to the website.

• CSS

  • This project uses css language to style the website.

• Github

  • GithHub is the site used to store the source code for the Website.

• Git

  • Git is the version control software used to commit and push code to the GitHub repository where the source code is stored.

• Visual Studio Code

  • VS Code for short is the integrated development environment (IDE) software used to build the website.

• Developer Tools

  • Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.

• Balsamiq

  • This software was used to create wireframes or sketches of the website.

• Google Fonts

  • Google fonts are imported and used as main typography in the project.

• Font Awesome

  • Icons from fontawesome are used for throughout the website, from navigation to social media links in the footer.

• TinyPNG

  • Is the software used to reduce the weight of the images making the website faster and save bandwidth.

• Simple Images Converter

  • Is a image format converter Application to optimize images.

• Code Beautify

  • Is a software that help beautify the code resulting in reducing data an improving performance.

Testing

• Links

  • All links have been tested and they are working as they are expected.
    • Home
    • Project
    • Contact
    • Logo
    • Top

• Form

  • Input fields in the form are working as expected, eg. if user miss to fill a required field an error message pops up.

  • When the form is filled correctly a new window opens confirming that the form has been correctly submited.

• HTML and CSS

  • HTML validation

    • 

  • Readable colour scheme

    • 

    • Header checker

      • 

    • Body checker

      • 

  • CSS validation

    • 

  • Lighthouse Test

    • 

  • Compability test

    • The website had been tested on windows-10, Mac Os, Android phone, with no errors reported.

Bugs report

• lighthouse reported images with no specific width and height and obsolete extentions.

  • solution: added width and height measurements and change image extention to .webp.

• Error on planing initial layout and i couldn't make it work in mobile screen size.

  • solution: started the proyect with a mobile first aproach.

Wireframe

• Final product had changed from the initial plan to improve design and functionality.

  • 

Deployment

• The site was deployed to GitHub pages. Following this steps:

  • Log in to GitHub and access the Repository.
  • In the GitHub repository, navigate to the "Settings" tab.
  • Go to "Pages" on the left hand menu.
  • Under "Source", select "Main" in the dropdown menu.
  • Next to select "Root" in the right dropdrown menu.
  • Click the "Save" button.
  • Your site URL will be highligthed in green and ready un a few minutes.

Resources / Credits / Inspiration

• The project that the website is based on, it's been done by myself.
• The video included by Marshalls (linked bellow) is the one i used as a reference to learn how to install artificial grass.
• Header and background images are from unsplash (linked bellow).
• Step by step pictures are from the actual DIY project and taken by me.( except three screenshot from the video, for clarity reasons.)
• Responsive iframe video idea is from Hayden Adams and adapted to suit the site requirements.(linked bellow)
• About section is based on wikipedia (linked bellow).
• W3Schools
• Kevin Powell
• Haydn Adams
• Marshalls
• Wikipedia
• Stackoverflow
• Unsplash
• Google maps
• Love Running project.
• Coders Shop project.

Acknowledgments

• Thank you to my mentor Brian Macharia for giving me good feedback and pointing me on the right direction., and my collegues and slack comunity at Code Institute.