This is my first project on HTML and CSS. After a long thought process, I decided to create a website for an ice cream parlour which is located in Le Mars, Iowa. Le Mars is known as the ice cream capital of the United States of America.
The target audience are ice cream lovers living in and around Le Mars, Iowa.
This website is the first of five projects that must be completed in order to earn a degree in software engineering from The Code Institute.
Requirements for the project are that the website is static, responsive and uses HTML5 and CSS3.
A live version of the project can be found here: Project 1
- Find new products/flavours available.
- Find new deals.
- Become a member of customer club.
- Find list of products available.
- Ordering facility through online or via calls.
- Find nearest parlour.
- Find contact details.
- Find flavours and their discription.
- Find ordering details.
- Find parlour address.
- Find contact details.
- Contact via contact form.
A responsive website that offers all users the best possible user experience. A website with the best accessibility, easy to use for visually impaired people. All phases from website conception, development and deployment should be well documented and stored in GITHUB.
I wanted to choose colours that reflectes the colour of an ice which has slight blue tint. I chose black for contrast. Different colors were used on the menu page to increase people's desire for a delicious ice cream.
The colour palette was created using Coolors.
Google Fonts was used to import the chosen fonts for use in the site.
I have selected multiple fonts for my project. I used the Ribeye font for my logo. This font gives my logo an extra awesome style. I used Merriweather for my headlines. It's a solid, well-constructed, legible serif and comes in a range of weights. For paragraphs, I used Inconsolata, a clean, stable font that's easy to read even at a small size. Sans serif was used as a fallback. Font weights of 300, 500 and 700 were used on the website.
The images have been appropriately chosen to showcase the colorful ice cream parlor and offer a wide variety of flavors.
Images have been resized to fit the theme and changed to .webp format for better site performance.
The website consists of 5 pages, the index page (landing page), the about us page, the menu page, the contact page and the feedback page.
The index page has a background image covers whole screen. It has logo on the top left side of the page. It contains three navigation links(appears as buttons) that are anchored to pages on the website. On the bottom of the index page, the footer containing four social media links (Facebook, Twitter, Instagram and Google Plus). The code for the footer is borrowed from the Stockin.
The About Us page consists of a header, a main area and a footer. The header has the logo at the top left of the page. On the right, menu items are listed horizontally for navigating to the pages of the site.
Navigation bar:
The main part of the page contains a section giving a short history of the company and a beautiful, colorful, enticing picture from outside of our parlour.
At the bottom of the About Us page there is a section that gives an overview of the qualities we ensure in the manufacture and delivery of our products.
At the bottom of the About Us page is a footer with links to social media.
The menu page also consists of a header, a main section, and a footer. The header is similar to the About Us page, but this time the menu anchor is active.
The main section of this page has the heading "Our Menu" and contains several blocks that describe the flavours available at Ice Ville.
There is a footer at the bottom of the page.
The contact page contains all three areas as well as other pages.
The main area contains a contact form that customers can use to contact us and give us their feedback. The user will be asked to provide their full name and email address. After clicking the send button, the user will be redirected to the feedback page with a message. On the right side of the section is the location of our parlour on the Google map.
After filling out the contact form on the contact page and clicking the submit button, the user is redirected to the feedback page where a short thank you message is displayed.
- HTML
- CSS
Testing continued throughout the build. I used Chrome developer tools during the build to locate and fix issues over time.
During development I used Google developer tools to make sure everything was working properly and to help troubleshoot when things weren't working as expected.
I checked each page using the Google Chrome developer tools to ensure each page is responsive on a variety of different screen sizes and devices.
During CSS validation of style.css I got some errors related to Scale property. With some help from a tutor I was successful in solving it. Instead of scale, I should have used the transform:scale() property.
The initial lighthouse test was unsatisfactory, especially in the performance class. After some research, I found that the images used on my website are in either PNG or JPG format, which is not ideal for an HTML file. So I converted them all to .webp format.
The contact us page is missing the best performance rating due to some issues including importing external resources like google fonts and google map.
The development of this project started with a thought process and some rough sketches of the structure of my website.
- Sketch of the Index/Landing Page:
- Sketch of the About Us Page:
Gitpod was a major player providing the development environment used for this project. To track the development phase and handle version control, regular commits and pushes were made to GitHub. The GitPod environment was built using a template provided by Code Institute.
The site is deployed using GitHub Pages.
The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.
- Login or Sign Up to GitHub.
- Open the project repository.
- Open the project repository.
- Click on "Pages" in the left hand navigation panel.
- At the "Source" section choose ”main” as Branch and root as folder and click "Save".
- The website will be deployed in few minutes and the page URL will be displayed above "Source".
-
Most of the textual content on this page was created by the author of the project and is fictitious. Some text content has been taken from the external sources linked below. The people/places mentioned do not exist in real life and there is no Ice Ville.
-
Icons used in the project were taken from the external source.
-
Some snippets(or ideas) have been taken from the following sources.
-
The images come from various sources listed below.
-
The keywords were taken from the following sources.
I would like to thank the following people:
Lauren-Nicole
- My helpful mentor at Code Institute who was always there to offer useful tips and constructive feedback.
Paul-Thomas
- Tutor: Thank you for the weekly meetings.
Oisin
- Tutor: Thank you for your help in fixing bugs in my code.
Websites that have provided me with information and assistance beneficial to this project:
The top screenshot in this ReadMe was created with:
Best regards,
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent