Whiskey Drop is a mock landing page for an imaginary product to experiment with Boostrap's core features and to use CSS styling to enhance the look of the Boostrap functionality. This is part of Module 5 - User Centric Front End for the Full Stack Software Developer Diploma.
- Logo
The goal of this project is to build a website which experiments with Boostrap's core features and to use CSS styling to enhance the look of the Boostrap functionality
- Sign up for more information about the range of whiskeys on offer.
- Read testimonials from previous customers
- Read featured articles about related subjects.
- As a user, I can see a responsive navbar with Home, About and a dropdow menu of different whiskey types on offer.
- As a user, I can see a call-out section with a call to action (cta) containing a marketing offer and a sign sign up butto.
- As a user, I can see a quotes section containing images and quotes for happy customers.
- As a user, I can see a features section containing featured articles with the option of a readme button to see more of each article.
- As a site owner, I want to create visually engaging webpage that inspires customers to explore the whiskeys on offer
- As a site owner, I want the user to be able to sign up for marketing emails.
- As a site owner, I want my users to be able to see customer testimonials.
- As a site owner, I want my users to be able to see featured articles and additional content.
-
Header, Main body divided into three sections
-
In the Header we should see a Logo and a navigation bar on the left side with option to go to:
- Home section (top of the site)
- About section (link not working yet)
- Whiskey's section dropdown menu containing different types of whiskeys available.
-
On the right side of the Header you should see additional call to action with a slogan and a sign in / sign up button.
-
In the Main body we should see:
- Callout section with a heaing, call to action and a sign up button
- Quotes section with a header and testimonials from previous customers.
- Features section with a header and features arranged in a card format.
We have chosen Roboto from Google fonts for the entire site.
We have chosen the colour that enhance and contrast the dark coloured Bootstrap theme that are appealing to the eye and also compliments the design of the project.
- Onyx (444444) - Dark Grey
- Yellow Munsell (EEC802) - Yellow
- Orange Soda (F05F40) - Orange
- Cinnabar (DF4929) - Dark Orange
These colours will compliment each other well when used across the site creating pleasant ambience.
We designed our site mock-ups using balsamiq wireframes. We were focusing on defining basic layout structure of the site and identifying how displays would change on different screen sizes such as mobile, tablet and desktop.
- Responsive design
- User friendly display
- Navbar with easy navigation
- ...
- ...
- Social media links
- ...
- Testing information can be found in a separate testing.md file.
For every bug we found while in development process, we have logged an incident report. Bug we have managed to fix are now marked as closed.
The website was developed using both Gitpod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using GitHub Pages:
- Opened up GitHub in the browser.
- Signed in with my username and password.
- Selected my repositories.
- Navigated to simonjvardy/[repo name here].
- In the top navigation clicked settings.
- Scrolled down to the GitHub Pages area.
- Selected Master Branch from the Source dropdown menu.
- Clicked to confirm my selection.
- CI-Whiskey-Drop-Project(https://simonjvardy.github.io/CI-Whiskey-Drop-Project/) is now live on GitHub Pages.
Cloning CI-Whiskey-Drop-Project from GitHub:
- Navigate to simonjvardy/CI-Whiskey-Drop-Project.
- Click the green Code button.
- Copy the url in the dropdown box.
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
Copy the following code and input it into your terminal to clone CI-Whiskey-Drop-Project:
git clone https://github.com/simonjvardy/CI-Whiskey-Drop-Project.git
You can find the images used for the site here. We have sourced them through the Code Institute course material:
- We have used snippet tool for capturing screengrabs which we have saved as images.
- A handy Birme site allowed us to resise the images all at once.
- W3Schools for just being a constant source of help and inspiration!
- Code Institute Course material for the code-along challenge.
- Neringa Bickmore for her guidance and advice on the README.md and testing.mddocument content and layout.