View the live project here.

This is the website for a neighbourhood book-lovers club. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for members and non-members.

• User 1 : I want to understand the purpose of the webpage

1. The About Us section on Home Page defines the goal and describes the activities of the club.
2. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice.
3. The main points are made immediately with the 'About Us' and 'features' sections on the home page.

• User 2 : I want to navigate with ease

1. The navigation is simple and the home button brings you back from every page.
2. The facebook button at the bottom of each page takes you directly to the Selsey Book Club facebook page.

• User 3 : I want to know what other users think about the club

1. The 'Join the Club' page has member quotes that expresses clearly that they value the club.
2. The gender mix of users is also expressed in the quotes section which leaves a positive impression on a new user.

• User 4 : I want to know what I can do with used books

1. The 'Books' page has a section on recycle and reuse. It encourages the user to donate books to the Club library.
2. The section on 'Recycle and Reuse' also gives the user other ideas on recycling books.

• The club helps form sub-groups of readers who enjoy the same/similar books and connects them via the Facebook app.

• The "popular titles" provides a list of books that already have sub-groups discussing them. This allows members to get involved with with a specific interest group and mingle more meaningfully.

• The Club facilitates various events for the book club members. These are organised by members themselves within their specific groups.

• A donate page with payment provision that links to a larger charity that supplies books to the underpriviledged in certain countries.

• HTML5
• CSS3

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 'Roboto' and 'Exo' 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.

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

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.

• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.

• A large amount of testing was done to ensure that all pages were linking correctly.

• Contact form: Testing

1. Go to the "Contact Us" page
2. Try to submit the empty form - an error message about the required fields appears.
3. Try to submit the form with an invalid email address - an error message appears.
4. Try to submit the form with all inputs valid - a success message appears.

• The initial impulse was to make myself look good only through the website. My mentor introduced me to the concept of user stories. It completely changed the way I was approaching the project.
• I also was living under the impression that too many commits are unnecessary and just shows how little you are doing so was reluctant to commit unless I had made significant changes. Discussion with my mentor put an end to that myth. That is the reason my initial commits are rare.
• Asthetic appeal and readability of the text improved significantly when I tried the font 'Lato' instead of 'Roboto'. Had never realised before that fonts make such a huge difference.

• Upon submitting the form, to come back to the website, we have to rely on the browser's back button. I would ideally want the 'congratulations' message to open in a separate tab. However, I could not achieve it.

• While inspecting, there is a very thin white space on the extreme right that appears to keep widening for screen widths below 1068px.

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.

• The whiskey drop project(Code Institute) - The quotes and features section

• The Resume project(Code Institute)- The navbar design

• The Love Running project(Code Institute) - The contact form

• The text for recycle books was copied from link

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

• The font 'Lato' used was inspired by the Love Running Project (Code Institute)

• Remaining content was written by the developer.

• All Images were obtained from the internet and renamed.

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.