Beta Supplies

This project is designed to highlight what I have learnt so far from HTML, CSS and Bootstrap. It also combines my love of climbing and shopping for climbing supplies.

UX

This website is designed to be used by climbers, to be efficient in the finding of equipment and the latest information.

User stories:

As a climber, I want to find the latest deals on climbing supplies, so that I can afford better equipment. It's for this reason that I ensured that the latest sale items were in a jumbotron at the top of the site,

As a climber I want to be able to see the latest information. It's for this reason that the latest blogs are a section on the home page, each with links that would go to induvidual blog posts.

Wireframes:

https://github.com/OllieMedley/ms1.2/tree/master/wireframe

I removed the search bar from the header and the radio buttons from the product pages as I felt they would be there just to be there, and it isn't something I wanted. Once I am able to add funcitoning versions it may be somehting I look at adding in.

The typography that I chose was designed to be more rustic and reminisent of rock face, which is why I chose Bangers, I chose Encode as a juxtaposition to this to display factually correct information.

Features

• Jumbotron featuring image, from Bootstrap Library
• Social media links in the footer and on the contact page
• Flexbox display in the product pages
• The link in the jumbotron uses a linear gradient which switches as you hover and changes the pointer icon to the pointer implying a click.

Features Left to Implement

Search bar in header once there is a database attached Radio buttons, again once a database is attached.

Technologies Used

Languages: -HTML -CSS -Javascript

Libraries and Integrations:

-Google fonts (for typography) -FontAwesome (for the icons) -Bootstrap (used for the header, jumbotron, grid layout and cards)

Workspace:

-Brackets.IO -GitHub -Git

Testing

I used W3C validators for HTML and CSS.

HTML test brought up 1 error relating to the Jumbotron. This was the use of an a tag around the button.

There were also 2 warnings, again for the Jumbotron, the lack of a section heading and the use of a h1 tag.

To fix the error I removed the button entirely and styled the link to look like a button.

The warnings don't impact the functionality.

1 error was found with my CSS with the Validator but this is relating to the list of colors which is only there for ease when selecting colors.

I did have to take out code that didn't do anything that I left in from the beginning.

Deployment

To write the code I used Brackets.IO

All of the written code was pushed to the master branch of github repository.

I selected the master branch as a source file in the settings menu.

Once selected, this publishes the project to GitHub Pages and displays the site URL.

There aren't any differences between the deployed version and the source.

The code can be run locally through clone or download.

You can do this by opening the repository, clicking on the 'Code' button, and selecting either 'clone or download'.

The site is published at https://olliemedley.github.io/Beta-Supplies/

Credits

Media

The photos used in this site were obtained from myself - the image for the jumbotron or from www.istockphoto.com - a very helpful site ad one image from Climbing Gear Reviews - https://www.google.com/url?sa=i&url=https%3A%2F%2Fclimbinggearreviews.com%2F2020%2F03%2F12%2Fscarpa-veloce-review-2020%2F&psig=AOvVaw3tkYzoQuLOmypvKSFvDL25&ust=1605963981954000&source=images&cd=vfe&ved=0CAMQjB1qFwoTCJjRzpeYke0CFQAAAAAdAAAAABAD

Acknowledgements

I received inspiration for this project from Epic TV and Depot Climbing and help from my mentor