The live website can be found HERE

This website forms part assignment for the Code Institute’s Full Stack Developer course - personal portfolio one. Using principles of user experience design, accessibility and responsivity this website was developed with html and css. The website presents a simple step by step method for beginner baking enthusiasts to follow in their journey in learning how to bake.

1. As a New User I want to learn how to bake (brownies is an easy recipe to start with).
2. I want to navigate to the information I need to complete the baking project.

1. As a returning visitor with some baking experience I want to have access to a trusted method and ingredients list.
2. I want to access other ideas for developing my interest in baking.

1. As a regular visitor I want to be able to sign up for the newsletter for further updates on new baking recipes. I need inspiration for new baking ideas to expand my baking skills.
2. I want to access community links and other resources to complement my interest in baking.

The header provides a holder for the site logo and navigation elements of the site. The navigation bar is found on the top of all pages for easy navigation to the different pages of the site. By being identical and in the same location on all pages it makes it easy for the new, returning and frequent users to navigate through the various pages of the website.

The hero image on the home page sets the atmosphere that the site is aiming to deliver, family engaged in the process of learning how to bake.

An introduction section is followed by seven sections each section representing a significant step in the brownie making process. Accompanying an image of each step is a list or a description of the particular step. Each section heading has a Font Awesome icon depicting elements of the process. Sections alternate with image first and descriptive text next and then with descriptive text first and image. The colours used in alternate sections create a contrast for easy user experience as the home page is scrolled.

The footer section provides links to the social media sites of Let’s Make Brownies and is located at the bottom on each page making it easy for user to find and the links open in a new tab providing easy navigation for the user.

Pictures of various baking projects are presented in the gallery page offering inspiration for user to delve into more complex baking projects.

The sign up page provides a form for users to sign up for an information pack and access to newsletter.

The learning process is enhanced where imagery is used to describe the various stages in a process and this is utilised in Let’s Make Brownies by introducing photos of the ingredients and the photos of the various stages in the brownie making process.

Photos of the different baking projects are presented in the gallery page to encourage interested bakers to develop their skills by trying more advanced baking projects.

Two fonts are used throughout the site : Roboto, used for body of site and ‘Playfair Display’, used for headings.

• Roboto

• Playfair Display

Research into colours that would look well with brownie pictures resulted in these three main colours which are used throughout the site.

• HTML5

  • HTML5 was used as the main language to complete the structure of the Website.

• CSS

  • Custom written CSS is used to style the website and define the responsive elements of the site.

• Visual Studio Code

  • VSCode was used as the preferred IDE.

• Git

  • Git was used for version control of project development.

• Github

  • GithHub repository is used store and manage code, as well as track and control changes to code on a cloud-based service. Git Pages is used for the deployment of the live site.

• Font Awesome

  • Font awesome icons are used to add style to the headings of each of the sections on the home page and for the social media links contained in the footer section of the website.

• Am I Responsive

  • Am I Responsive was used to generate mockup responsive imagery on various devices.

• my colors space

  • My color space was used to identify three complementary colours that work well together on website.

• Balsamiq

  • Balsamiq wireframe was used for wireframe layout design.

• Google Fonts
  • "Roboto" and "Playfair Display" google fonts is used to import the fonts into the style.css file. These fonts were used throughout the project.

• Due to the site being a static site (html & css), there are limitations to the scope of the website and its function can only be a descriptive site. Further investigaion, with expanded technologies, could expand the function of the website with more interaction with the user.

A process of continuous testing was carried out throughout the development of the website with display or functionality improvements made as they were warranted. Testing consisted of observing the site’s visible responses to different view screens and on different browsers. The site was viewed and tested on the Google Chrome, Firefox, Microsoft Edge, Internet Explorer and Safari browsers.

Google Chrome Developer tools and Firefox Developer edition were used to test site’s response to various screen sizes. Care was taken, during testing, to avoid overlapping of elements, loss of information due to scrolling off page and ensuring alignment of elements. Media queries are incorporated to ensure the site displays properly at break points between different device screen sizes. Over-lapping issues were detected on the navigation area when viewed on smaller screen size. The issue was resolved by introducing flex display in the navigation.

Internal links were tested to ensure that they navigated to the appropriate position on the site. External links were tested to ensure that a new page was opened whenever an external link was selected and that it was directed correctly.

The various user (first, repeat and frequent) experiences were noted in the process of testing elements of the website.

All Pages were run through the W3C HTML Validator and showed no errors. CSS Stylesheet was run through the W3C CSS Validator and showed no errors.

Lighthouse scores quality in five categories: performance, accessibility, best practices, SEO, and qualification as a Progressive Web Application. 

Lighthouse analysis was performed on the three pages of the website, on an incognito browser window (as suggested by Lighthouse) for both desktop and mobile.

• Lighthouse result for home page

  • Mobile

  • Desktop

• Lighthouse result for gallery page

  • Mobile

  • Desktop

• Lighthouse result for sign up page

  • Mobile

  • Desktop

• Initial coding with display block resulted in elements not aligning as expected and was resolved by using display flex instead.
• Spelling mistakes and ommissions were found when proof reading, were then corrected.
• Hero image zoomed in so that only a portion of the image could be seen. Issue resolved by sizing the image and saving the re-sized image.
• Navigation menu items were being overlapped on smaller screens. Resolved by adding a media query for small screens that changes display from row to column.
• Content was stretched across the entire width of the screen. Resolved by introducing container that had max width of 1100 px.
• To achieve a contrasting flip-card effect in the main section of the home page each section’s layout ( image first followed by text / next section text first followed by image) caused an issue on mobile display. This issue could be resolved by aligning sections in same order for small screen displays and using flex reverse on columns for large screen displays.
• Download time to display background image on sign up page is marginally long and could be addressed by further compressing image.

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub and publishes a cloud bases website that is publicly accessible.

The steps to deploy were as follows:

• In the GitHub repository, navigated to the Settings tab
• From the source section drop-down menu, selected the 'Main Branch'
• Once the main branch has been selected, after a few moments, the page was automatically deployed.

A special thanks to my mentor Rownan McClelland who offered me guidance at each stage of the project. A very special thanks to my wife Clodagh, for all her support, images of baking, and understanding of the time needed to undertake this project.

• Code institute’s “Love Running Walkthrough Project”.

• W3schools.com: code references.

• css-tricks.com: css animation.

• kevinpowel.co: css references.

• codesandbox.io: overlay styling

• istockphoto.com