jessdk / diplomaprojectone

Kuromi News

Kuromi news is a website aimed at delivering updates for everything Kuromi based. We share the latest images, tweets, and send a weekly email newsletter to all of Kuromi's fans.

Features

On our landing page, you will see a brief description all about Kuromi and who she is, and why we love her so much! Looking down just a little further is a live feed of tweets from the official Project Kuromi twitter account! The gallery section is updated regularly with the newest pictures of Kuromi, from merch to TV appearances! Finally, we offer a newsletter service, allowing users to get weekly recaps of all of the weeks Kuromi news!

Site Breakdown

• Header Menu
• Seen all across our site, this navigational menu is fully responsive to all screen sizes and allows for easy navigation between our pages.
• This feature eliminates the need for back buttons and confusing menus.
• Landing page content
  • Immediately on our site you are met with our landing page, this page gives a brief yet detailed explanation of who kuromi is.
  • This section is also fully responsive using flexboxes.
• Latest News
  • The latest news section uses twitters timeline embed function to allow us to offer tweets from Kuromi_Project's twitter in real time.
  • This section also uses flexboxes and is fully responsive to display size.
• The Footer
  • The website's footer bar offers a quick and easily identifiable way to reach some of the official social media outlets of Sanrio/Kuromi.
  • Using fontawesome's social media icons allows users to easily identify which site is which.
• Gallery
  • The gallery is regularly updated and filled with the latest Kuromi images!
  • All images in the gallery can be viewed in their full resolution in a new tab when they're clicked on.
  • The images also all have alt text for those with visual impairments.
  • Images have a text description with link that appears when hovered over
• The signup/newsletter page
  • This signup page for the newsletter includes email validation on the input box
  • It also includes a checkbox to confirm people are okay with subscribing

Bugs

There is a bug on mobile devices where it becomes impossible to scroll back up to the top of the website after reaching the bottom of the twitter feed, this could be fixed by either changing the scaling more or more optimally by adding a "return to top" button overlay on the screen.

Testing

The site was rigorously tested on a variety of devices and browsers. Some of them include

• Chrome desktop browser
• Microsoft edge desktop
• Firefox desktop
• iOS Safari
• iOS Chrome

Alongside testing on various browsers, the built in chrome developer tools were also used extensively to test screen sizes from 320px wide to 2560px this is reflected in the responsiveness section of styles.css

Validation

• HTML
  • No errors were returned when passing through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator

Deployment

• The site was deployed using GitHub pages
• It was built using the master branch and is available live at https://jessdk.github.io/DiplomaProjectOne/

Credits

Thank you to everyone over on the slack channels, and to all my friends I used as rubber ducks for this whole project! This tutorial was used for helping to create creating the gallery https://blog.logrocket.com/responsive-image-gallery-css-flexbox/ The text sections on the landing page are slightly edited versions of the ones available at https://hellokitty.fandom.com/wiki/Kuromi