-
This website has been built to improve the existing website for Redland Renovations, which serves as a portfolio and point of contact for a property renovation company in Bristol, UK.
-
The website intended to function as a landing page for the prospective visitors.
-
It features essential information about the company, its services, and portfolio of images of the previous works.
-
The main purpose of the website is to convert prospective visitors into leads and capture their contact details.
-
A. First Time Visitor Goals
As a first-time visitor, I would like to:
- Identify the nature of the business and specialization of the company.
- Locate where the company is based and its areas of operation.
- Determine what services the company offers and the scope of work undertaken.
- Explore the company's portfolio showcasing previously completed projects.
- Find essential information about the company.
- Contact the company.
-
B. Returning Visitor Goals
As a Ruturning visitor, I would like to:
- Easily navigate through the website to access different pages and return to the home page if needed.
- Quickly contact the company or request a callback.
-
C. Website Owner Goals
As a website owner, I would like to:
- Introduce the company and it's services to the website visitors.
- Present essential information about the company in a user-friendly format.
- Showcase the company's portfolio of previously completed works.
- Offer a various options for customers to get in touch.
- Capture the leads from incoming inquiries.
-
Project Goals
- Design a website that is simple yet intuitive to use and accessible to audience of all ages and technical abilities.
- Build a fully responsive website accessible from all devices.
- Optimize accessibility of the website.
- Optimize the website to enhance lead conversion.
-
Company Goals
- Improve the online presence and corporate image of the company.
- Expand the customer base and boost sales.
-
Due to constraints of set requirements, website is built using vanilla HTML5, CSS3 and JavaScript. Backend development is out of scope for this project.
-
Feature requirements:
- Website is static but responsive.
- Website is intuitive and user-friendly.
- Website is accessible on various devices.
- Website is accessible to audience of all ages and technical abilities.
- Website is developed with a mobile-first approach.
-
Content requirements:
- Key information about the company is easily accessible.
- Website is visually engaging, featuring a multitude of images across its pages.
- Content is presented in a format that is easy for users to understand and absorb.
- Website is presented in a professional yet friendly manner.
-
Website is designed as a single landing page.
-
Website has single primary call-to-action for its visitors.
-
Website is structured to guide visitors towards the primary call-to-action.
-
Main content is divided to the following pages and sections:
- Home page
- Services list
- Galleries
- About us section
- Contact form
-
Additionally website features:
- Static navigation bar.
- Aside with additional call-to-action.
- Aside with unique selling proposition.
- Footer.
-
Navigation bar features the following links:
- Home Page (Button hidden in Logo)
- Services
- Gallery
- About us
- Contact
Mobile
Desktop
-
Color Scheme
-
Typography
-
Headings are formatted using the 'Suez One' font.
-
Text content is formatted using the 'Inter' font, a sans-serif typeface.
-
Imagery
-
Logo
-
Hero Image
- Header + Navigation bar desktop layout
- Header + Hamburger menu mobile layout
-
Home Page
-
Mobile
-
Desktop
-
- Services Section
- Call to action bar
-
Gallery Sections
-
Small screen layout folded
-
Small screen layout expanded
-
Medium screen layout folded
-
Medium screen layout expanded
-
Large screen layout folded
-
Large screen layout expanded
-
-
About us section
-
Unique selling proposition bar
-
Contact us form
-
Footer
-
Thank you page
-
Error 404 page
-
Image slider showcasing images from the gallery sections full screen when clicked.
-
Function to close the navbar automatically when the nav links are clicked.
-
Form validation function to set either phone number or email to be required in the form.
-
Function to change the theme color meta tag when hamburger menu is open.
-
Add visual effects:
-
Drop the shadow under the navbar when the page is scrolled.
-
Add visual effects to the elements on page, to make them appear or disppaer as they slide through the vieport.
-
Animate logo and set animation to be triggered if the navigation links or primary call-to-action buttons are clicked.
Note: Some JavaScript features has already been implemented, however the code was not tested and used only as a temporary measure, due to JavaScript being out of scope for this project.
-
-
Photos and text content were taken from the existing Redland Renovations website.
-
Font styles and colors were taken from the existing Redland Renovations website. Additional colors were generated using Coolors.co.
-
Dummy images were taken from Pexels.
-
Code Institute Template was used as a starting point for this project.
-
Hamburger menu navigation was implemented following the tutorial from Web Dev Simplified and Codehal.
-
Intersection observer to switch the visibility of the elements was implemented following the tutorial from Beyond Fireship.
-
Text reveal-on-scroll effect was implemented following the tutorial from WebStylePress.
-
Text highlight-on-scroll effect implemented following the tutorial from Kevin Powell.
Testing results can be found in testing.md.
-
HTML - was used to provide structure for this project.
-
CSS - was used to style the HTML elements.
-
JavaScript - was used to add additional styling effects and form validation functions.
-
GitHub - is the hosting site used to store the code for the website.
-
Cloudflare - was used as custom domain provider for demo website.
-
Git - was used as a version control software to commit and push the code to the GitHub repository.
-
VS Code - was used as local IDE.
-
Balsamiq - was used to create the wireframes for the website.
-
Figma - was used for svg editing.
-
Inkscape - was used for svg editing.
-
imageresizer.com - was used to resize and compress images.
-
Pixelied - was used to convert the format of the files.
-
Google fonts - was used to source 'Suez One' font.
-
fontsquirrel.com - was used to compress font.
-
screenspan.net - was used to generate fallback font.
-
svgrepo.com - was used to source arrow icons.
-
Coolors.co - was used to generate and display the colour scheme.
-
Google Chrome Developer Tools - was used during testing, debugging and making the website responsive.
-
Mozilla Developer Tools - was used during testing, debugging and making the website responsive.
-
Google Lighthouse - was used during the performance testing of the website.
-
W3C HTML Validator - was used to check for errors in the HTML code.
-
W3C CSS Validator (Jigsaw) - was used to check for errors in the CSS code.
-
Wave.webaim - Was used during the testing accessibilty of the website.
- Navigate to the root project repository in GitHub.
- Click on "Settings" in the header menu.
- Click on "Pages" on the menu on the left to open GitHub Pages window.
- From the drop down menu under source select "deploy from branch".
- From the drop down menu under branch select "main" (or select another branch for GitHub to deploy).
- Click "Save".
- Navigate to the Redland Renovations root repository.
- In the top-right corner of the page click on the fork button and select "create a fork".
- You can change the name of the fork and add description.
- Choose to copy only the main branch or all branches to the new fork.
- Click "Create a Fork". A repository should appear in your GitHub.
Open terminal at your working directory and type:
sudo git clone https://github.com/vadimsj/redland-renovations.git