Apprentice Brewing was founded to educate and engage people in the creative world of homebrewing. Users of the site will be able to discover the process and methods of brewing beer at home, explore the available products and retailers specialising in homebrew equipment and learn tips from experienced brewers through tutorial videos. Users also have the option to get in touch by asking any questions they have about brewing or to stay informed by joining the company mailing list. The website shows off the wide range of beer varieties in different environments to encourage users to try out brewing themselves and to experiment by creating their own novel beers.

1. Site Overview
2. Planning Stage
   • Target Audience
   • User Stories
   • Colour Scheme
3. Features
   • Navigation
   • Introduction
   • Contact Form
   • Animations
   • Brewing Guide
   • Recommended Resources
   • Tutorial Videos
4. Future Enhancements
5. Technology Used
6. Testing
   • Developer Tools
   • Validator Testing
   • Bugs
   • Unfixed Bugs
7. Deployment
8. Credits
   • Content
   • Media

• User who have never brewed beer before and are interested in trying it for the first time.
• Users who have brewed beer before or who are experienced brewers who want to learn additional tips to the brewing process.
• Users who want to learn about the process of brewing beer at home.
• Users who want to explore the product market for homebrew beer kits.
• Users who want to contact an organisation with questions regarding homebrewing beer.

• As a user, I want to see the subject matter of the page.
• As a user, I want to navigate quickly and easily through the page to find what I require.
• As a user, I want to leave the website more knowledgable than before visiting the site and be satisfied with my overall experience.
• As a user, I want to easily access additional resources for further personal research.
• As a user, I want to connect with the organisation, have the ability to ask questions and to stay up to date with company news.

• The site's main colours of black, white and gold were chosen to mimic the golden colours in a pint of lager within the dim setting of a pub.
• A colour grid was created to evaluate appropriate colour pairings using the Eight Shapes Color Grid
• From this it was decided that all fonts would be kept black upon either white or golden background colours in order to provide sufficient contrast for the users. The inversion was also used to highlight active classes or upon hovering over elements.

• The navigation bar shows the three main pages of the website which assist the user with smooth navigation. The header is consistent throughout all pages and is fixed to the top of the screen, meaning users can navigate to different pages easily.
• The submenus in the Brew and Resources pages allow the user to skip to the section they desire to view without manually scrolling themselves.
• Throughout the website there are several anchor elements which redirect the user to relevant pages and sub-sections of the website. For example in the introduction, several pages and sections within the website are hyperlinked within the paragraph to quickly redirect the user. The the text is underlined upon hovering the cursor over the hyperlinks to indicate to the user that it is an active link.
• There is also a 'Return To Top' button at the bottom of the page to save the user from scrolling back up to the top of the page.

• Users are welcomed to the site by an introduction to the Apprentice Brewing organisation and a small gallery of homebrew beer to encourage curiosity for the user to explore the site more.

• The contact from enables users to contact us with any questions they may have about brewing or the organisation. They also have the option to join the mailing list to stay informed on company updates and recommendations.
• The background image of people laughing and enjoying a beer expresses the company's desire to connect with their user community and encourages the user to get in touch.

• Hero Image Zoom This is the first thing the user will see on the site as the image is animated to zoom in 10% upon loading the page.
• Submenu Pan The submenus are designed with a background image of the carbonation bubbles within a beer. Upon loading the pages the image scrolls from the top of the image to the bottom, giving the impression that the bubbles are rising through the menu.

• The Equipment section provides direct hyperlinks to each product. This allows the user to familiarise themselves with what product looks like, and with a recommendation of a cheap option for each product should they wish to buy them.

• The resources section offer the user with products and information for them to explore to get started. Four key retailers are recommended, which vary in price and quality, so that a wide budget range is covered.
• Users can click on each retailer anchor block to be redirected to their respectivel websites. Each website opens in a new tab to keep the user's position on our website to easily return to the resources page later.

• The tutorial videos allow users to visually learn from expert brewers and beer enthusiasts to accelerate their knowledge of brewing processes and technques. Users can choose to open the videos externally on the Youtube in another tab by clicking the integrated 'Watch on YouTube' button.

Various additional features would bring a greater user experience to the website:

• The addition of a dedicated 'Tips' webpage would enable brewers to build upon their base knowledge by learning concepts including how to improve their process in brewing, the taste of their beer, and how to experiment with new flavours.
• The addition of user feedback through comments sections would allow for continual site improvement and additional perspectives from fellow brewers.
• The addition of a user up/down-voting system on the recommended products would help users to make an informed decision on what to buy by considering the recommendations of the site users.
• The addition of a community upload page, where users can post and descibe their own batches, and users can share general discussions about their shared interest in homebrewing beer.
• The embedded YouTube videos are resource heavy elements that cause a significant reduction in the performance of the website on mobile devices due to the eager-loading of videos upon the initial load of the webpage. As a result, it would be beneficial to introduce lazy-loading of videos, to ensure that only the data required by the user are loaded and therefore improving the performance of the website. Should users wish to then watch the tutorial videos, they can be loaded upon request.

• HTML & CSS programming languages
• Google Fonts - 'Josefin Sans' & Roboto Styles
• Font Awesome - Social Media Logos
• GitPod - IDE for local developement
• GIT - Version Control
• GitHub - to host the repositories for this project and the live website preview

• All links and images on the website work correctly and all elements are responsive to screen size.
• The contact form was tested by checking all possible input combinations. Such checks included:
  • Ensuring that the form is not submitted empty, without any information inputted.
  • Ensuring that the all required field were completed before submitting the form. All fields except the message were required, as users do not need to submit a comment.
  • Ensuring that the inputted email address was in the correct form and included the '@' sign.
• All embedded videos play within the site when clicked and successfully redirect to the Youtube site when requested.
• The website was tested across various browsers, including Google Chrome, Mozilla Firefox and Microsoft Edge.

• The Developer Tools function was used to test this across Google Chrome, Mozilla Firefox and Microsoft Edge to verify the site was fully responsive across the specificed screen witdhs and across different browsers.
• The website was responsive across screen sizes between 320px and 1600px in width. Content readablility was optimised by altering the size and positioning of elements.
• The website was designed using a desktop-first approach, therefore the image resolutions were optimised to look better on larger screens. This resulted in a lower performance score on mobile devices as the image resolution was much larger than the maximum screen resolution.
• As mentioned before, the eager-loading of embedded videos caused a significant reduction to the performance on mobile devices. Thus, the 'Resources' page exhibited a lower performance score compared to the other pages.

• No errors were found when running the html code through the official W3C validator

• No errors were found when running the css code through the official W3C Jigsaw validator

• The website was tested using the Lighthouse function in Chrome DevTools, showing a accessibility level of 100%.

• Issue - Centering images and headings within div elements

  • Resolution - Initially a supplementary empty div was placed about the image requiring centering to act as a spacer. However a much cleaner and simpler solution was employed by using the transform:translate(50%, 50%) function alongside relative positioning. This enabled the element to be positioned relative to its center rather than the edges.

• Issue - Fully containing floated elements within parent div elements

  • Resolution - A br element was created with class="clear" which assigned attributes of clear:both and line-height:0. This meant that any floats currently active were cancelled and the br element expanded the div element to fully contain all child elements.

• Issue - Header blocking the section titles after clicking on submenu hyperlinks

  • Resolution - An additional buffer was added when redirecting to different section via scroll-padding-top: 7rem. This added 7rem on to the absolue position of the titles to accomodate with the height of the header. The scroll-behavior was also set to smooth to dynamically scroll down to the relevant section rather than immediately relocating.

• Issue - Centering video

  • Resolution - A class="video-contianer" was created, with hidden overflow and position set to relative. padding-bottom:56.25% was used to create an aspect ratio of 16:9 relative to the width. height:0 as the padding-bottom dictated the size of the container. Within this class, the iframe was selected and assigned absolute positioning, with width and height both 100% and aligned from the top-left edges. This created an iframe video which was centered within its container, which was also centered on the page.

• Issue - Content moving onto next line on smaller screens

  • Resolution - Media queries were introduced depending on screen size to target elements for responsive deign. As the screen size reduced, the width of the content container was increased to fit in more content, the logo, menu items and footer icon font-size was reduced to fit on one line.

• Issue - Beer bubble panning effect on submenus not working on smaller screens

  • Resolution - On smaller screens, the submenu rearranges to fit the divisions vertically rather than horizontally (e.g. from 2 rows and 4 columns to 4 rows and 2 columns). As a result, smaller screens showed a higher proportion of the height of the background image in the submenu, thus leaving very little or no pixels to pan across. Therefore, media queries were added to smaller screen sizes to increase the zoom of the beer bubbles image, and make the animation more prevalent.

• Issue - Elements moving onto next line upon adding padding and margins

  • Resolution - The box-sizing: border box attribute was added which included padding and margins in the width of elements. This meant no compensation in width was required when assigning equal widths to elements. For example, this was used in the navbar menu, and submenus product link boxes.

There are no known bugs left unfixed.

The site was deployed to GitHub pages. The steps to deploy are as follows:

1. In the GitHub repository, navigate to the repository for apprentice-brewing and then click on the Settings tab.
2. Click on the Pages tab from the list of options on the left hand side of the page.
3. Under Source click the drop-down menu labelled None and select main as the branch.
4. Once saved the link to the page will be provided above the ‘Source’ sub-section upon refreshing.
5. The live link can be found here - https://bens6477.github.io/apprentice-brewing/

• All content was written by myself, taking inspiration from the following sources:
  • Northern Brewer - How to Make Beer
  • Kegregator - How to Brew Beer: The Ultimate Step-by-Step Guide
  • Adventures in Homebrewing - How to Make Your Own Beer
  • Balliihoo - Basic Guide to Making Beer from a Kit
• The icons in the footer were taken from Font Awesome
• All fonts were imported from Google Fonts

• The background and hero images were taken from Pexels
• The images from the How To Brew section were taken from Pexels, Kegerator, Serious Eats, All Recipes and Renegade Brewing
• The tutorial videos were taken from:
  • How to make great tasting beer at home.
  • Coopers Lager 40 Pint Home Brew Beer Kit, our experience - Part 1
  • A Guide To Siphoning
• The image displaying the website on different screens in this document was created using Am I Responsive
• The code to make the videos responsive was found at - https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
• The code to pan across the beer bubbles background image was taken from - https://stackoverflow.com/questions/33835096/css-to-pan-background-image-back-and-forth