MyPizza

First Milestone Project - Code Institute

This is my theoretical pizza catering service website. The website is designed to provide a great user-experience for anyone looking for a high-end catering service.

Demo

A live demo of the site can be found here.

UI/UX

My goals behind the design were to create a positive user-experience from the moment the user viewed the page. Because of this, I designed the landing page to be quite minimalistic, with a transparent navbar, and JavaScript delayed jumbotron text.

I studied many websites for inspiration, including the StudentExampleFive, which certainly left an impression. However, the basic layout is inspired by this helpful Udemy course.

Not knowing JavaScript, but wanting to use it, this course provided some great code, although I heavily customised it to suit MyPizza.

I wanted to include visually pleasing animations throughout the site, they can be found at every section. The colours were carefully handpicked for MyPizza also, with a nice balance of Spartan Red complementing the grays & whites. The same goes for the logos & images, which I spent a long time finding the perfect of both.

Technologies

1. HTML5
2. CSS3
3. Bootstrap v4.3.1
4. JavaScript and Jquery v3.4.0 were used for the interactivity of the website.
5. Bash
6. Ubuntu
7. Chrome Dev Tools
8. Sublime Text

Features

• This site uses the scrollSpy in Bootstrap with some JavaScript customization for 'smooth scrolling' throughout the page.

• An auto-collapsing navbar menu is also present when used on smaller devices.

• This site includes two interactive carousels as well an interactive image grid, both carousles are automatic.

• This site is mainly interactive, with user-positive animations at ever section.

• The 'Our Skills' section includes dynamic number statistics also.

Testing

Having to alter and customize almost all of the original code, there were definetly some hurdles to jump during development. I spent a great deal of time trying to troubleshoot issues such as social media logos & specific colours with certain actions, and eventually solved these issues with the '!important' code in my CSS.

The website was also designed with respoinsive design in mind, and was developed at many different sizes. The same goes for browsers, have tested on Chrome, Safari, Microsoft Edge & FireFox.

Finding and sizing/colouring all of the images were tedious to say the least, but I'm happy with the end result!

I also had to troubleshoot some h4 text on smaller screens, it wouldn't align correctly, so I just lowered the font size by a small amount.

Deployment

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/DanielCrowleyy/My-Pizza.git into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

Credits

Content

• All text within this website was written by me.

Media

• All photos were taken from Pexels or Pixabay.

• All icons can be found on FontAwesome.

Acknowledgements

• The basic HTML structure as well as the CSS folder are from the mentioned Udemy course. All of the JavaScript and Jquery files can be found in said course.

• The StudentExampleGradeFive gave me great inspiriation with it's minimalistic design, it also made me quite ambitious, which is one of the reasons why I looked for help on Udemy for this project.