Dominic Beesley’s 1st Milestone Project

A static front-end site to present useful information to users, using all the technologies that I've learned about so far, for Code Institute. This is a website for an imaginary bookshop, the Sempere & Sons book shop. It has three pages - a landing page, a page listing the shop’s forthcoming events, and a page with contact information and a contact form for potential customers.

UX

The goal of the website was for potential customers to find out more information about this book shop. To do this, I aimed to keep things simple for these users, while still providing as much content and information as possible, without the site looking too cluttered.

Features

Existing Features

Fonts

I used two fonts on the website – and EB Garamond and Dancing Script. Dancing Script is a flowing, cursive font, which I thought was reminiscent of the fonts used in works of classic literature. EB Garamond, meanwhile, is similar to Garamond, one of the most common fonts used in books. Combined with the white background of the site, the aim was for this to remind users of looking at the page of a book.

Navbar

The navbar at the top of the screen has three links – one to each of the different pages. It’s fixed, so even when the user scrolls down to the bottom of the page, they’ll still have access to the navbar.

Events Timeline

The timeline on the events page features a list of four forthcoming events, such as author signings, and book club meetings. On a desktop, these events are on either side of the timeline. On a smaller screen, they move so they’re on top of one another.

Contact Form

The contact form has three boxes for the user to fill in so they can contact the shop – one for their name, one for their email address, and a larger one for the message they want to send.

Map

The map to the bookshop is from Google Maps. It doesn’t actually show where the shop is, because it’s not real, but directs the user to a Waterstones instead.

Technologies Used

• HTML – for creating the structure and layout of the website’s three pages.
• CSS – for styling the website’s content.
• Bootstrap – for styling the website’s content.

Testing

I tested the website on multiple browsers and screen sizes, to ensure that it worked and displayed all the content correctly for the user, and that the contents were responsive on different screen sizes.

Deployment

The website is deployed using GitHub pages.

On the page for the GitHub repository for this project, I went to Settings.

I scrolled down to the GitHub Pages section.

I chose Master Branch as the source, and this gave me the link to where the site is hosted on GitHub Pages. It’s deployed from the master branch, and will update automatically.

Credits

Content

The timeline in events.html is from https://codepen.io/krishnab/pen/OPwqbW/

The contact form in contact.html is based on the form that can be found here - https://codepen.io/dfitzy/pen/VepqMq - but I made some changes to it to fit the website.

Media

The header image of bookshelves is from https://www.pexels.com/photo/assorted-books-on-shelf-1370295/.

The image of a bookshop on index.html is from https://www.pexels.com/photo/blur-book-stack-books-bookshelves-590493/.

Acknowledgements

I received inspiration for this project from my mentor, Antonija Šimić.