Table of contents generated with markdown-toc
Cork Paints is a low-cost painting workshop for all different skill levels in Cork City, Ireland. The website is targeted towards children, teenagers, or adults who are interested in learning how to paint with acrylic, watercolour, or oil. Cork Paints offers in-class workshop sessions on evenings or weekends to suit the busy lifestyle of students and working adults.
-
-
First Time Visitor Goals
-
As a First Time Visitor, I want to be able to easily understand what Cork Paints has to offer and how they are different from other expensive painting workshops in the city. On the landing page, I can see that Cork Paints offers low cost and affordable painting workshops for all different skill levels.
-
As a First Time Visitor, I want to see exactly where Cork Paints is located in the city to know where to travel to for these in-class workshop sessions. On the landing page, I can easily see the workshops take place in Cork City and I can scroll down to see the map view of where the workshop is.
-
As a First Time Visitor, I want to read the review section where other learners have tried Cork Paints to be assured this service is reputable, reliable, and sufficient. On the landing page, I can scroll down and easily find and read the testimonies and reviews by other learners.
-
-
Returning Visitor Goals
-
As a Returning Visitor, I want to read what different courses Cork Paints has to offer, including the prices, age range, dates, and skill level. When I go onto the courses page, each course is carefully laid out in individual cards with all of the information present and written clearly.
-
As a Returning Visitor, I want to know the operating hours of Cork Paints and how I can get in touch with any query I may have. On the landing page, I can easily find this information when I scroll down and see the giant card with the operating hours and contact information.
-
As a Returning Visitor, I want to know exactly how to register for my next course. The registration page is very comprehensive and easy to use, thanks to the two dropdown menus to select my course and skill level. The website will not let me submit until all information is entered, which is great to make sure I have added all the necessary details.
-
-
Frequent User Goals
-
As a Frequent User, I want to be able to find and check out their social media links to be updated with any new events or updates. I can easily find this in the footer of all of the pages.
-
As a Frequent User, I want to see other courses I can try out that is either a skill level higher than the one I have tried previously or to try out a new type of course. On the courses page, I can easily jump to which skill level I want to see by clicking on the links at the top on my mobile device so I can save time scrolling.
-
-
-
-
Colour Scheme
- Purple (#78748F)
- White (#fff)
- Black (#232222)
- The main colours I have selected for this website are purple (#78748F), white (#fff), and black (#232222). For white text with the purple background, I have added 0.8 opacity to make the solid colour less harsh but also to increase readability for the user. These colours work beautifully together and white fonts are used on top of purple backgrounds and black font is used on top of white backgrounds to enhance accessibility.
-
Typography
- Montserrat
- Lora
- Sans Serif (fallback)
- The main fonts used are Montserrat and Lora, with Sans Serif used as the fallback font. Montserrat is a sans-serif typeface used for headings throughout the website for high readability when the user is browsing the page. The eyecatching nature of the font is perfect for high level headings because the font is very distinct so the users will know exactly what each heading represents. Lora is a gorgeous serif font used for paragraphs and lower level headings. Lora is chosen for it's attractive typography and high readability for lengthier paragraphs.
-
Imagery
- The hero image contains a gorgeous photo of a hand painting on a canvas, with colours that highly suit the colour scheme of the website. The hero mage contains a keyframe to zoom in to catch the user's attention. Throughout the website, all images are selected to be minimalistic and artistic which suit the painting theme of Cork Paints. All images match very well with the colour scheme of purple (#78748F), white (#fff), and black (#232222).
-
-
-
Navigation Bar
-
Featured on all three pages, the full navigation bar which is viewed on desktop and large devices shows the logo on the left hand side and navigation links on the right hand side. The logo contains an icon from Font Awesome which matches the colour scheme. The navigation links, 'Home', 'Courses', and 'Register', allow the user to easily direct themselves around the website. The links are consistent in text and size to allow for intuitive navigation.
-
The page that is currently active is coloured purple (#78748F) for the user to understand which page they are on. When the user hovers over the links, the links change to purple (#78748F) to help the user confirm which link they are about to click.
-
When the device screens go smaller (tablet and mobile sizes), the navigation links will turn into a hamburger icon. The hamburger icon is perfect for more breathing space between the navigation links and logo when the users redirect themselves to a different page. The icon highly increases user experience as the users will not have to worry about accidentally clicking another link if the links appear too small or squished. The hamburger icon is great for intuitive navigation as users will easily recognize the hamburger icon's purpose.
-
-
Landing Page
- The landing page contains a large photograph of a painting on a canvas which matches the purple (#78748F) colour scheme and centered text in the middle. The large heading text has white font and has a purple background for contrast. The landing page explains what Cork Paints is, where they are, and what they offer in very brief statements. The objective of this hero image and text is to explain very briefly what Cork Paints is all about, to grab the user's attention, and to give a good first impression of the website. The hero image also contains an eyecatching animation of zooming up.
-
About Section
-
The about section contains a paragraph of text and a circular image. The h3 heading is in purple (#78748F) to match the colour scheme of the website and the text is in black to contrast the white background for high accessibility. The text explains who Cork Paints is to allow the users to understand who is behind Cork Paints. This allows the users to feel more connected to the people behind Cork Paints by humanizing the website.
-
The circular image contains a woman's face behind a painted piece of glass to represent the volunteers of Cork Paints to enhance the aesthetics of this section.
-
-
Testimonial Section
-
The testimonial section contains testimonies and reviews from other learners who have attended Cork Paints. This section contains a large image of a painting as the background image. White text is displayed over purple (#78748F) cards for high readability. There are three cards for the section to be split into thirds to enhance the appeal of the section.
-
The testimonial section is crucial to give the users the confidence and reassurance that Cork Paints is a reputable website and service.
-
-
Location Section
-
The location section contains a card highlighting Cork Paints' hours of operation, address, and telephone number for users to be informed of the hours, location, and how to get in touch. Icons are included in this section for visuals on what each part represents.
-
An iFrame is included in this section for the user to know exactly where Cork Paints is located. The iFrame is from Google Maps so therefore the user is able to zoom in and out of maps and even look up the directions from their location.
-
-
Footer
-
The footer contains links to the social media pages of Cork Paints, including Facebook, Twitter, and Instagram. These links will open in a separate tab so the users will not be directed away from the website entirely. The icons are large to be highly accessible to the user.
-
When hovered, the links will become purple (#78748F) to help the user confirm which link they are about to click.
-
The footer is essential to provide more ways for the user to stay connected with Cork Paints.
-
-
Courses
-
The courses page will contain information on what classes Cork Paints has to offer. The top of the page will contain links to jump to the skill level section that the user is interested in (beginner, intermediate, or advanced), which will come in handy on tablets or mobile phones to minimize scrolling.
-
The courses page consists of nine cards. The courses are organized by skill level and each skill level offers workshops in watercolour, acrylic, and oil. The cards contain information such the dates and time, price, age range, and brief descrpition of each course. The information is centered nicely and contains icons for the users to easily read the information on the cards.
-
-
Register
-
The register page contains a header at the top to encourage users to register for Cork Paints. The page then contains a form where users will be able to sign up for their desired course. Users are able to input their first name, last name, and email address in the text boxes. There are two dropdown menus where users can select which skill level they wish to sign up with and the desired course.
-
The bottom of the form contains a submit button that changes to purple when hovered over to assure the user that the button is clickable.
-
-
-
In the future, I would like to create a form where users can register for a newsletter subscription to stay intuned with updates and events.
-
I would like to create a gallery section with various types of painting made by learners in the past to inspire first time users to come and see what they are capable of learning. As well, for frequent users to come see their artwork displayed on the website.
-
I would also like to create a sign up section for learners to volunteer to be a teacher at the workshop, since the teachers are volunteers. This feature will be of great use for frequent users of the website who has gained enough skills to feel confident enough to teach lessons.
-
-
-
-
- Bootstrap was used for the navigation bar on all pages to make the bar responsive on smaller devices. When the navigation bar reaches a certain size, the navigation links will turn into a hamburger icon. jQuery was part of Bootstrap to make the navigation bar toggle.
-
- Google Fonts was used to import the fonts Montserrat and Lora.
-
- Font Awesome was used throughout the pages for their icons to make the page look more aesthetically pleasing.
-
- Git was used by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- Git was used to store the project code after being pushed in by Git. GitHub Pages was also used to deploy the project to create a public link.
-
- Sketch was used to create low-fidelity wireframes of the website.
-
- Pexels was used for all images, including background images, to make the website look more appealing and eyecatching to the user.
-
- Google Maps was used to embed an iFrame to insert onto the index page of the website. The map is very useful for users to understand exactly where the workshop is located and to seek directions to the workshop from their location.
-
- ColorZilla Chrome extension was used to select the purple (#78748F) colour by using this tool on the hero image on the index page to identiy the main colour scheme of the website.
-
- Tinypng was used to compress all of my images throughout the website to enhance performance speed.
-
- Convertio was used to convert my jpeg images to webp to help decrease the size of the images.
-
Beautify
- Beautify Command Palette on Git was used to organize the code in all html and CSS files.
-
To thoroughly test the website, the W3C Markup Validator and W3C CSS Validation Service were used to validate all pages of the project to spot any errors in the syntax. No errors were found for all HTML pages and the CSS file.
The website was also tested on Lighthouse to test accessibility. When tested, all three pages come up as 97+ on accessibility.
-
- When previewed on Google DevTools in the 'Galaxy Fold' device viewport, the 'Cork Paints' logo breaks apart when the hamburger icon toggle collapses and 'Paints' moves onto the next line. When making the logo smaller using media queries, the logo becomes too small which could bring a bad user experience, especially users with visual impairment. Devices wider than the 'Galaxy Fold' show the logo perfectly when the hamburger icon toggles. Since this is a slight error that only causes a minor imperfection, I have left the logo's size alone since it does not cause a detrimental user experience compared to making the logo font size smaller.
- When this website is previewed on iPhones, the contact telephone number of the website becomes blue which does not contrast well to the purple background. In order to fix this, meta tag would need to be in place. I have not added this since it is only a slight imperfection and the phone number still contrasts perfectly when viewed on mobile sized viewports using Google DevTools.
-
- Bugs that have been fixed along the process of building this website are:
- Making the testimonial cards responsive on the index page for viewports under 840px. When the screen becomes smaller than 840px, the cards will stay along one line and will be very squished, creating a very bad user experience. With thorough research on Stack Overflow, I have been able to insert variables to help the cards to stack on top of one another on smaller screens.
- The navigation bar installed by Bootstrap v5.0 was very difficult to overcome. After adding the Bootstrap CSS stylesheet and script, the navigation bar refused to toggle when it became a hamburger icon. After researching on Stack Overflow and asking queries on Slack, I have asked tutor support for advice and they have helped me thoroughly. It turned out that I have added the plug-in twice by accident so I had to remove the script at the bottom. The navigation bar as well was left-aligned when I wanted it to be right-aligned. With help from tutor support, I was able to add 'ms-auto' as a class to the navigation bar for the navigation bar to be right-aligned.
- The course cards on the courses page were not stacking centered when the viewport became smaller. It turned out that I had a div with incorrect flex display properties and I had to create another div to have flex display properties to correctly center the cards when the screen becomes smaller.
- The background image on the courses page became very low quality when the screen size became a tablet size and smaller. To fix this, I decided to make the background image fixed when the screen is lower than 1245px so that the image would not be stretched and the webpage is still able to scroll with the fixed background.
- The performance score in Lighthouse for all of the pages were initially very low, scoring around 20%. In order to try to increase the score, I have taken all of the images and have compressed them used Tinypng.com. I have converted the smaller images from jpeg to webp format using the online conversion tool, Convertio, to help reduce the size of the images.
- Bugs that have been fixed along the process of building this website are:
-
- The website has been tested on different browsers including Chrome, Safari, and Firefox. Large monitors (LG), laptops (MacBook Early 2016, MacBook Pro 2020), tablets (Xiaomi Tablet), and devices (iPhone 13 Mini, iPhone 11, Xiaomi Mi Note 10) have been used to check the quality of the website.
- Using Chrome DevTools, I have tested all of the pages on multiple different device screens to check the responsiveness of all the pages:
- On the register page, I have ensured that the form cannot be sent unless all necessary and required details have been filled out (first name, last name, email address, course type, and skill level).
The website was deployed using GitHub Pages. The following steps were taken for the deployment process:
- Log in to GitHub.
- Click on the profile icon to locate 'Your repositories'.
- On the repository page, click on the repository you wish to deploy.
- At the top of the repository, locate the 'Settings' link and click.
- On the Settings page, locate the 'Pages' section in the left-hand navigation section and click.
- On the GitHub Pages page, under 'Source' click 'Main'. Click 'Save'.
- Refresh the page and the live link is ready.
-
-
Love Running:
- Code from the Love Running footer was used to create the footer for Cork Paints. The social media icons, links, aria labels, and styles were used from the Love Running project. The code was also used to create the header and logo.
- Code from the Love Running navigation bar was used to create the unordered list elements for the navigation links.
- The keyframe zoom in animation on the landing page was taken from the Love Running project.
-
- Bootstrap was used to create the navigation bar. The navigation bar toggles to a hamburger icon when it reaches a smaller screen with collapses to show the navigation links.
-
- Code was taken from CSS Scan for the box shadowing around the solid purple div cards.
-
- Code was taken from this helpful guide on how to use flex display and different components of flex display.
-
Code Institute Tutor Support and Slack Channel
- Code was taken from my helpful tutors and the Code Institute Slack channel when I have asked a query. Most queries were in regards to how to make Bootstrap navigation bars right aligned, how to collapse the navigation bar hamburger icon toggle, and how to center contents within a div.
-
-
Code from this post was used to center text within a div.
-
Code from this post was taken to change the colour of the list elements in the Bootstrap navigation bar.
-
This code:
width: var(--reviewsWidth); height: var(--reviewsHeight); margin: var(--reviewsMargin);
was taken from a Stack Overflow post on how to make div cards responsive on smaller screens. This code is used in the testimonial section of the index page to make the cards responsive.
-
-
-
- Majority of the structure of the website was inspired by the Love Running project.
- Code Institute's course section on how to create forms was used for the sign up section on the register page.
- Icons throughout the website are taken from Font Awesome.
- The structure of this README.md file was taken from the Code Institute sample README and the Love Running sample README.
- Information on the font, Montserrat, is taken from CTAN.
- Information on the font, Lora, is taken from Google Fonts.
- The table of contents for this README.md was generated by Ecotrust-Canada Markdown-toc.
-
- The iFrame on the index page is taken from Google Maps.
- All images throughout the webiste are taken from Pexels.
-
- My mentor for all of his wonderful feedback and support.
- Everyone on the Code Institute Slack channel who took their free time to answer my queries and help me throughout my project.
- The Code Institute tutors who have helped me tackle Bootstrap v5.0 and flex display.