This project was developed in order to demonstrate some ability to code in HTML and Css through the creation of a responsive static website.
This website have the unique purpose to present a project called "Food Cost". This ambitious project aims to help small entrepreneurs in food industry to perform an efficient production with a visual panorama of costs, organization, events, digital recipe books and much more.
- User Experience UX
- Features
- Body
- Home
- Partners
- Partnership is important!
- Partnership listing
- Partnership timeline
- Suscribe
- suscribe form and "Any question form"
- Any questions form
- Submitted form
- To sum up
- Future Features
- Technologies Used
- Testing
- Am i responsive?
- HTML / CSS Validator
- Browser Compatibility
- Lighthouse
- Bugs
- Deployment
- Credits
- Acknowledgements
The wireframes for this website were produced in Balsamiq. The final site varies slightly from the wireframes due to developments that occured during the creation process.
FOOD COST website has three pages. The home page is the default loading page, partners and suscribe pages are all accessible primarily from the up navigation menu.
-
The font chosen were 'Delius' for all the content of the website. I have chosen to import the font directly from the .ttf file to avoid any problem of compatibility in the future.
-
The colour scheme chosen is blue, purple and white. Blue evoke feelings of reliability and people feel more secure when they see the colour blue. In terms of web design, this means that users may be more likely to purchase, as they view your blue website as reliable and professional.
This website is intended for small or private entrepreneurs who works in food industry. The main page is composed by three sections :
-
- Featured on all three pages, the full responsive navigation bar includes links to the Logo, Home page, Partners and Suscribe page and is identical in each page to allow an easy navigation.
- This section is fixed and will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
From the beginning, i wanted to have a very flexible middle page. In this case , flexible means :
- constituted by different boxes with different design.
- easy to change the design just by selecting the right CSS class.
Box without design with title on left side :
Box with design with title on right side :
Box with design with title on center :
- middle content can have 1, 2, 3, 4 and even 5 boxes in same line.
- easy to change the design of the title of each boxes just by selecting
the right CSS class.
Back to top - and finally, easy to configure and display in different screen size.
- The footer contains social media links and email adress. This section is situated in the bottom of each page and it will allow the user to comunicate with the team from anywhere in the website. The links will open to a new tab to allow easy navigation for the user.
-
- The loading page includes an image with catching animation to grab users attention ('punchlines').
- It was important for me to explain the current situation in small food industry companies to highlights FOOD COST solution's proposal.
- A small list of questions which FOOD COST can answers.
Contains a video "trailer" :
- I wanted to highlights the possibilities of the FOOD COST app in less than 1 minut.
- The trailer is accesible directly after scrolling down the loading page. This section is valuable as it encourages the user to have a dynamic view of the app's features in less than 1 minut.
- The image gallery is made in such a way as to see the different stages from the creation of the recipe in paper format to final result on the plate.
- This section aims to inform the user about allocated fees to each offers from the App.
- 3 different offers brings possibilities to users to selected the apropriate needed service. This section is valuable as it gives details about what is actually included on each offer.
- This section aims to inform the user about the roadmap of the project.
- The roadmap highlights the progress of the project and especially future goals. It can allow users to visualize an more accomplished version of the project.
- This section aims to inform the user about the team.
- Providing clear information about a project's team is a guarantee of quality and involvement.
This section contains all about partnership : already registered partners and their story in relation to the app. Also, a form is available to eventually request as a new partner to the app.
- This section aims to inform the user about partnerships.
- Providing partnerships details is bringing guarantee of a sustainable activity.
- Partnership is important.
- Partnership listing to highlights our current partners of the App
- Partnership Timeline to highlights some chronologic aspects.
In this section you can :
- Suscribe as new client by filling up the payment information form and select premium package of your choice.
- Any concerns, please use the form below.
Two extra pages called submit-partners.html and submit-questions.htmlhas been created as a sucessfull submit process.
- Every correctly filled forms of the website will load those extra page just to inform that the form has been correctly filled and the information will be transmitted.
A meta refresh is used to load home page / suscribe page after 5 secondes.
To sum up, a user can have a direct acces throught a navigation menu to informations about the product, how it works, what are the offers and how to suscribe.
As i wrote in the roadmap, my goal would be to develop the app entirely.
As a first goal :
- Create an log in section
- Create a database where users can add ingredients list with prices
- Create a nice template for recipes
- Display a recipe book with one click.
As a final goal :
- Create a marketplace where you could share/sell/exchange your best recipes.
- Give the possibility to add a new recipe in the database just by taking a picture of an hand written recipe and all items auto-detected and then generate a food cost price and digital recipe. Very ambitious!
- HTML5 - provides the content and structure for the website.
- CSS - provides the styling.
- Balsamiq - used to create the wireframes.
- Gitpod - used to deploy the website.
- Github - used to host and edit the website.
Yes, I am!
-
The responsive design tests were carried out on Iphones, Samsung Galaxy S8+, Ipad Air and Surface Pro 7 with Google Chrome DevTools and also on Responsive design checker.
-
Responsive test from https://ui.dev/amiresponsive :
The HTML validator results for each page are below:
- index.html :
- partners.html :
- suscribe.html :
The website site has been tested through the CSS Validator. No errors or warnings shows up as the picture below shows :
The website was tested on the following browsers with no visible issues for the user :
- Google Chrome
- Mozilla Firefox
- Safari
Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.
The site was also tested using Google Lighthouse in Chrome Developer Tools to test each of the pages for:
- Performance - How the page performs while loading.
- Accessibility - Is the site acccessible for all users and how can it be improved.
- Best Practices - Site conforms to industry best practices.
- SEO - Search engine optimisation. Is the site optimised for search engine result rankings.
My first try was surprising : Very slow to load
This part of the testing process showed up that the site was slow to load, mainly due to the image sizes and video trailer. All the images/videos needed to be compressed before adding to the repository.
- Thanks Panda!
and thanks Veed.io :
After using Panda Tiny png and Veed.io :
To sum up :
- I confirm that this project is responsive, looks good and functions on all standard screen sizes.
- I confirm that the navigation, header, footer and middle content are readable and easy to understand.
- I confirm that the forms works requires entries in every field, will only accept an email in the email field, and the submit button works.
- The Layout in smaller screen as Iphone SE shows some issues with the box shadow.
I fixed it easily by take away the shadow effect : box-shadow: none; into style.css file.
- The website site has been tested through the W3C html Validator. Some Warnings shows up at the beginning but easily fixed.
The trailer shows up really small in small devices like Iphone 5. I would like to add a possibility to put full screen display but it seems I need Javascript to fix that. Check this link
The site was deployed to GitHub pages. The steps to deploy a site are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - Here
If you need to "FORK" a repository:
- Login in to GitHub and go to https://github.com/artontray/PROJECT1
- In the top right corner, click
Fork - The next page will be the forked version of https://github.com/artontray/PROJECT1 but in your own repository
The method from cloning a project from GitHub is below:
- Under the repository’s name, click on the code tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL copied from GitHub.
- Press enter and the local clone will be created.
- The font came from Google Fonts.
- Veed.io was used to compress the video trailer.
- The vertical Timeline idea came from YouTube tutorial.
- The Custom Checkbox idea came from YouTube tutorial.
- Balsamiq was used to create the wireframes.
- Readme.so was used to write this readme File.
- Some Food Pictures came from Google Images.
- Icons for social media came from Google Images.
- Some Icons came from Font Awesome.
- First loading picture came from Free pik Images.
- Logos for partnerships come from :
To be honest, best parts of my learning progress are the following :
- Learn how to interact with github and Gitpod to create project
- Learn some Unix basics commands to interact with Gitpod/Github
- Learn how to deal with screen functionality and responsiveness
- Learn how to use browser Inspect Element
- Learn how to make animation with CSS (@keyframes)
The site was completed as a Portfolio 1 Project for the Full Stack Software Developer Diploma at the Code Institute. As such I would like to thank the web in general for beeing such an open library for learning, the Slack community for the good vibes and my mentor Precious_Mentor for the support.
This material has been prepared for educational purposes only and is not intended to provide any offer or service.
Damien B.