code-institute-submissions / stuart-douglas Goto Github PK

View the live project here.

This is the marketing website for Stuard Douglas whisky. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for people interested in finding out more about this brand.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the whisky.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
    3. As a First Time Visitor, I want to look for testimonials to understand more about the whisky (taste, production). I also want to locate their social media links to see their followings on social media, and to be in touch with the community.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find community links.
    2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any newly added whisky.
    2. As a Frequent User, I want to check to see if there are any news and activities from the community.

• Design

  • Colour Scheme

    • The colors, reflecting branded whisky lable and from the representative front photograph are used. Mainly greys with the bluish tint and, for the contrast rish yellow, orange and dark broeny-red .

  • Typography

    • The Merriweather and Open Sans fonts are the main fonts used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Merriweather font was specifically created for the screens and easy to read in any forms and sizes. It gives a nice clean, elegant feel, but still feels modern and dynamic. Open Sans is chosen as one of the best suggested matches.

  • Imagery

    • Image was provided by the client and were specialy made for this brand. Image represent a whicky bottle and was used as a logo for the header for this project. As image itself is striking, it also provided a base of the site's color scheme.

• Wireframes

  • as a still very junior developer, i chose to mockup website with the paper and pen. (as still need to work out how to attach wireframe files to the github...)

Features

• Responsive on all device sizes

• Interactive elements (icons, links, video)

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Merriweather' and 'Open Sans' fonts into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process, but still need to work out how to attach them to the Git.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Known Bugs

• On some mobile devices the Hero Image pushes the size of screen out more than any of the other content on the page.
  • A white gap can be seen to the right of the footer and navigation bar as a result.
• On Microsoft Edge and Internet Explorer Browsers, all links in Navbar are pushed upwards when hovering over them.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Credits

Code

• The Code Institute's Mini Project was used as the main sceleton for this project.

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

• Font information was taking from the artickle on https://www.canva.com/learn/best-professional-fonts-use-website/

Content

• All content was written by the client and the developer.

• Code Institute's template was used to create README.md file.

Media

• All Images were created by client.

Acknowledgements

• My Mentor, Ignatius for continuous helpful feedback and believing in miracle.

• Tutor support at Code Institute for their support.