Portfolio Project 1 - HTML/CSS Essentials
Visit the site on GitHub.
Our website presents a fictional company. Bad Dog Puppy Training, Glasgow, Scotland. Users will be able to find information on class days and times along with services offered and enquiry form.
This is a static front-end site designed to present information on puppy training classes based in Glasgow.
We have included a description of the services along with a gallery of images showing dogs from previous classes. The inclusion of the contact form allows users to contact us with key information being collected.
Table of Contents
- Website Objectives
- New User Benefits
- Returning User Advantages
- Website Layout
- Wireframes
- Home Page
- Gallery Page
- Contact Page
- Aesthetics
- Colour Palette
- Fonts
- Images
- Features
- Navigation Bar
- Header
- Information Section
- Class Days and Times
- Footer
- Back to Top Button
- Gallery
- Contact Form
- Technologies Used
- Testing
- Functionality Testing
- Compaitibility Testing
- Performance testing
- Code Validation
- Deployment
- Credits
Website Objectives
The primary function of this website is to promote puppy training classes whilst outlining the goals of the training, class days and times as well as offering a contact option to gather the required information for the business.
New User Benefits
- Obtain information on the benefits of puppy training
- Find class times and days
- Make an enquiry through the contact form
- View gallery images of dogs from previous classes
- Access the companies social media sites
Returning User Advantages
- Make further enquiries on available sessions
- Gain access to social media links
- View the ever changing gallery images
- Refresh knowledge on the companies services
Website Layout
The initial wireframe structure was created using balsamiq.com. There were some slight changes to the original plans when creating the website. It has been desinged to be clear and as user friendly as possible with the use of simple sight navigation links, return to top button, hover effect and social media links. Accessibility has been carefully considered with the use of cointrasting colours and alt text equivalents for the visually immpared. The site is responsive for all screen sizes and tailored to suit each. The user experince will be smooth and satisfying accros all devices.
Wireframes
Home Page
Gallery Page
Contact Page
Aesthetics
The look of the site was created with the aim of being clean, professional and modern.
Softer, soothing colours were choesn to create a more relaxing feel to the site with a nice light sage green used to reflect the grass of the location where the classes are held.
Colour Palette
- Light Sage Green Hex #c9c592
- Darker Grey Hex #333
- White
- Contrasting Purple rgb(180, 54, 123)
Fonts
- Body - Urbanist with a back up of sans-serif.
- Headings - Bebas Neue with a backup of Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif.
Images
Royalty free and licensed images were sourced from www.pexels.com and stock.adobe.com.
Features
The website is made up of 3 pages. A 'Home' page, 'Gallery' page and 'Contact' page.
Key features are as follows:
Navigation Bar
The Navigation Bar is located at the top of each page and is consitent in style throughout the site.
The 'active' page is indicated with a left and right dotted border. A 'Hover' feature has also been added.
Links to each page are included for easy navigation to:
- Home
- Gallery
- Contact
Header
The header includes two features:
- Licensed image
- Custom designed logo
Information Section
- Puppy Classes
- Class Content
- Angry dog image
Class Days and Times
This section clearly advertises the days and times that the classes are held whihc inludes:
- Day
- Time
- Location
This is all overlayed on to an imge of dogs.
Footer
A clean minimal fopoter containing only social media icons for:
- You Tube
Back to Top Button
For easy navigation backl to the top of the page. A hover feature is included for accessibility and aesthetics.
Gallery
A selection of images of dogs from previous classes.
Contact Form
All contact to the business will be made via the contact page form with the aim of return contact being made after the enquiry. Users will add their:
- Name
- Email address
- Phone number
- Preferred class choice
Technologies Used
HTML 5
- Structure Language
CSS
- Styling Language
Google Fonts
- As a font resource.
Font Awesome
- Icons for headings and socials links
Pexels
- Images
Adobe Stock
- Images
Github
- As a software hosting platform to keep project in a remote location.
Gitpod
- As a development hosting platform.
Balsamiq
- To create wireframes
Adobe Illustrator
- Logo creation
- PNG production
Photoshop
- Screens mockup image
Imgur
- Image hosting
Testing
Functionality Testing
Website functionality testing was done using Google Chrome Developer Tools.
This allowed me to regularty test the responsiveness and also idenitify any problems with the format of the site.
During the design process the site was shown to my fellow students on slack for feedback in style, function and navigation. One suggestion that was made was to incorporate a back to top button for quick access to the nav bar. I added it and styled to suit.
When creating my enquiry form I tested it to make sure that the input fields contained the relevant information and displayed a warning message if not.
On the home page I used an alternative image for phone screens and moved the logo position as the image used for bigger screens didnt work at that size.
I am very happy with the overall the feel of the site and the smooth flow of functionlity.
At this point there are no bugs or issues to be resolved.
Compaitibility testing
The site was tested on various devices including:
- iPhone
- Macbook Pro
- iMac
- iPad
- I also tested it on Google Chrome Dev Tools.
Performance Testing
I used Google Chrome Developer Tool Lighthouse to check performance of the site.
The main problem with the home page was the high resolution images that i had used which was affecting the performance.
I took all of the images to photoshop and optimized them for web. After uploading the new images the next performance test came back with a hugely improved rating.
The Gallery page was scoring very low on performance because of the high resolution images. Once id optimized them and replaced them the rating shot up.
The gallery page results were fine throughout.
Code Validation
I regularly check my HTML and CSS code using 2 websites.
- validator.w3.org
- jigsaw.w3.org
Deployment
The project was deployed on GitHub Pages. I used Gitpod as a development environment where I commited all changes to git version control system. I used push command in Gitpod to save changes into GitHub. To deploy the project I had to:
- Log in to GitHub and click on repository to deploy (Bad_Dog_Portfolio_1)
- Select
Settings
and find GitHub Pages section down the left hand column. - From the Source select
none
and thenmain
branch. - click
save
and page was deployed after auto-refresh.
Your site is published at https://stevemiller7.github.io/Bad_Dog_Portfolio_1/
To run localy:
- Log in to GitHub and click on repository to download (Bad_Dog_Portfolio_1)
- select
Code
and click Download the ZIP file. - after download you can extract the file and use it in your local environment
Alternatively you can Clone or Fork this repository (Bad_Dog_Portfolio_1) into your github account.
Credits
Initital creation of the project was done using Code Institute student template:
- gitpod full template
Ideas and coding guides:
- www.w3schools.com
- Diploma in Software Development (E-commerce Applications) from Code Institute.
- Love Running walkthrough project from Code Institute.
Content
Information for this fictional website was taken from Scotland based business Perth Dog training.
Images, Icons and Styling
Licensed and royalty free images were taken from:
- stock.adobe.com
- pexels.com
- fontawesome.com
- fonts.google.com