Skip to content

olly-tech/tqbn

Repository files navigation

The Queer Book Nook Website

An LGBT+ book review website created during web development course, using HTML, CSS and JavaScript.

Showcased on this site

  • Used semantic tags and adding alt text to images in HTML for accessibility.
  • Used HTML metadata to include information that would improve SEO.
  • Used high contrast colours throughout the site to ensure legibility and accessibility.
  • Used CSS Grid to format the website as a whole, and using CSS Flexbox to format smaller areas.
  • Created a responsive site that adjusts based on size of device window. This includes font sizes, images and adjusting the overall page structure to accommodate smaller devices. This site was developed with a desktop-first mindset.
  • Used JavaScript to create a quiz, using functions and if/else statements to calculate scores associated with differing results based on user input. Results appear on website using JavaScript, rather than as a prompt box for better user experience.

Updated after first code review of site

  • Altered colour scheme to fit the site's theme better
  • Edited usage of CSS Flex to make aside better at being responsive
  • Edited layout of quiz so that image is aligned on the left side of the quiz
  • Added new specific review pages, and linked them to their correct image or card on any webpage.
  • Added appropriate external and internal links.
  • Created a rainbow stripe using a HTML div and CSS only, applying this to the site to section it out while keeping in theme.

Updated after second code review of site

  • minor edits to ensure consistency across site.
  • removed link functionality to coming soon cards on 'All Reviews' page.
  • removed unused JS file from HTML.
  • removed duplicate variable declarations.
  • reduced JS code by using addition assignment operator.
  • added semantic tags and alt tags on social media icons for increased accessibility.
  • edited quiz response display to make it's appearance more obvious.
  • added function to change location of result appearance based on viewport width.

Updated after third code review of site

  • changed image for quiz page to better reflect quiz

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published