Giter Club home page Giter Club logo

rhema28-project-0's Introduction

Love Reading

Love Reading is a site that promotes a dynamic book club which caters to people with different reading styles. It hopes to connect, motivate and inspire people to become literary lovers. This book club provides opportunities for members to better understand their reading styles and explore ways to not only digest powerful novels but learn how to bring the pages to life. The Love Reading site will be a perfect start for those who are ready to adopt a new lifestyle of reading. All readers who would like to join the club can find out about our different reading methods, locations and meeting times and how to become a member.

Responsive Mockup

Features

On the Love Reading site the main features are the navigation bar, the landing page image, the club ethos section, the meet up times and location section and the footer.

Existing Features

  • Navigation Bar

    • Featured on all three pages, the fully responsive navigation bar includes links to the Logo, Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
    • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

Nav Bar

  • The landing page image

    • The landing includes a photograph with text overlay to allow the user to see exactly which location this site would be applicable to.
    • This section introduces the user to Love Reading with an eye catching animation to grab their attention

Landing Page

  • Club Ethos Section

    • The club ethos section will allow the user to see the length and outline of the diverse and engaging sessions we hold that cater to different reading styles.
    • The user will be able to identify the session that is most suitable for them and the location and times.
    • The user will see the value of signing up for the Love Reading meetups. This should encourage the user to adopt reading as a new healthy hobby.

Club Ethos

  • Meetup Times section

    • This section will allow the user to see the exact location of the meet ups and what particular session is taking place at a particular time.
    • This section will be updated as these times change to keep the user up to date.

Meetup Times

  • The Footer

    • The footer section includes links to the relevant social media sites for Love Reading. The links will open to a new tab to allow easy navigation for the user.
    • The footer is valuable to the user as it encourages them to keep connected via social media

Footer

  • Gallery

    • The gallery will provide the user with supporting images to see what to expect at our meetup sessions.
    • This section is valuable to the user as they will be able to easily identify the types of meetings the Love Reading club puts together.

Gallery

  • The Sign Up Page

    • This page will allow the user to get signed up to Love Reading to start their reading journey with the community. The user will be able specify if they would like to take part in the kinaesthetic, literary, audio ,visual or all of the reading sessions. The user will be asked to submit their full name and email address.

Sign Up

Features Left to Implement

  • Another feature idea that can be implemented to this site is testimonials from previous or present members who have participated in some of the reading sessions provided by Love Reading.

  • An additional feature would be a link in the footer that takes the user to the communal blogging site mentioned in the literary session of the club ethos section.

  • Furthermore, a book recommendations page could be added for members of the group to share suggestions of novels to read in future.

  • In addition to this there could be a feature that allows members to create a Love Reading social media profile page where they could post their thoughts on their current reads, post their favourite novel quotes, connect and discuss with other club members.

Testing

According to light house testing my project meets the main criteria. However, my initial performance score was 65%. After discussing this with my mentor, we concluded that this was as a result of the size of my hero image 1. He suggested that I compress the image using

CompressJpeg.

LightHouseTesting

I did this and also compressed my hero image 2. After both images were compressed, my score went up to 85%

My accessibility score was at 92% initially as I had a problem with the color contrast. So I had to darken the font color of my menu and body text so that users who may suffer from color blindness would be able to read the content clearly and with ease. This brought my score to 100%.

Validator Testing

  • CSS

    • No errors were returned when passing through the official W3C validator
  • HTML

  • No errors were found when passing through the official (Jigsaw) validator

Unfixed Bugs

There were no unfixed bugs found.

Deployment

  • The site was deployed to GitHub pages. The steps to deploy are as follows:
    • In the GitHub repository, navigate to the Settings tab
    • From the source section drop-down menu, select the Master Branch
    • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://rhema28.github.io/Project-0/

Credits & Content

-The structure of this project was taken from Code Institute [https://learn.codeinstitute.net]

  • The text for the Home page was taken from Wikipedia Article A
  • Instructions on how to implement form validation on the Sign Up page was taken from Specific YouTube Tutorial
  • The icons in the footer were taken from Font Awesome

Media

  • The photos used on the home page are from Pik Wizard [https://pikwizard.com/]
  • The images used for the gallery page were taken from Pik Wizard and another open source site.

rhema28-project-0's People

Contributors

rhema28 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.