ReadFirst is the best site for readers and book lovers. Our mission is to help people find and share books they love. ReadFirst launched in April 2022 and updated in June 2022.
-
Navigation Bar
- Is fullyfunctional, responsive menu that featured in all pages and have links to logo( home page), Home, Book genres, Quiz and Contact
- This section will allow the user to easily navigate throigh the website across all devices.
-
Landing Page Section
- Contains a brief motivational statement encourage the users to read book
- Both Image and statement has eye catching animation to catch the user attention
-
Books Genre Section
- This section will allow the users to review the book featured genres and select the genre they like to read.
- By selecting a genre in this section user will be navigated to a page containing recommended books for user to download and read.
- This section also contain a button to all book genres for users who cannot find his/her favorite genre.
-
Greates Books Section
- This section is a slide show of three great books for users to easily review, download and read.
- Each slide interoduces a book with an image, it's title, author, language a briaf description about the book and a download button that will allow users easily decide which book to download and read next.
-
All Books Genres Page
- This section will allow the user to review all book genres included to the website.
- This section also allow the users to review the books in a genre by selcting thier favorite genre.
- Note: The books recommended by this page are not dynamic. It's Just a sample.
-
Book Recommendation Page
- This section contain three book information (image, author, language and brif description) that allow users to decide and download the book they want to read next.
- also contain a sidebar that will allow the users to easily select another book genre to read.
-
Quiz Page
- Contains three level quiz (Easy, Medium and Hard).
- Every quiz contain 10 questions. Next question will take place of previous quistion.
- After answering all 10 questions the website will calculate and show the score of user.
- If the user take more than 7 score the website shows Congratulation message with animation.
- User can take the quiz unlimited.
- Quiz Page Question Part
- Quiz Page Showing Result
-
Contact Page
- Contains a form thet will allow the users to send thier mesages to website owner.
- also contains other contact information that user can use to contact the website owner.
-
Footer
- Contains social media links website logo, a brief description about the website and contact information as sections
- Is responsive and available in all pages
- Contact informations are featured as links that will allow users to easily use them just by clicking.
- Social media links in this section will open a new tab in the browser so that allow the user to quickly get back to the website.
- Dynamic Recommendations
- The website should show differrent books acourding to genre selected by the user
- Review Books
- Users can write review about books
- Upload Book
- Users should have the ability to upload any book they find it usefull
- Validation Tecting
- HTML and CSS
- No errors or warnings were returned in all pages validation by W3C validator - Can be checked in - W3C validator
- HTML and CSS in Quiz Page
- No errors or warnings were found when passing through the validation by W3C validator - Can be checked in - W3C validator
- HTML and CSS
- Hero image in home page is not fully responsive.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- Login to GitHub
- In the GitHub repository, navigate to the Settings tab
- In Settings, navigate to pages
- From the source section of GitHub Pages drop-down menu, select the main Branch
- Once the main 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://zahra-raha.github.io/read-first/
- The site salogan and mativational statement are taken from - https://sloganshub.org/slogan-about-reading/
- Book informations are taken from - https://thegreatestbooks.org/
- The icons in the footer are taken from - https://fontawesome.com/
- The quiz questions are from - https://triviaquiznight.com/books-quiz-questions-and-answers/ and - https://www.ultimatequizquestions.com/book-trivia-questions/
- All images used except favicon and logos are taken from - https://unsplash.com/
- Favicon and logos are taken from - https://www.brandcrowd.com/
- Fonts used are based on the Code Institute love running walkthrough project
- Instructions on how to implement slideshow is taken from - https://www.w3schools.com/
- Instructions on how design resbonsive navigation is taken from - https://stackoverflow.com/
- Animation on quiz page is taken from - https://alvarotrigo.com/blog/animated-backgrounds-css/