View the repository in GitHub here
View the live project here
The Tansi Kitchen is a local family business established in 2020. They started out modestly supplying their handmade ravioli and artisan breads, including sourdough loaves, to people putting together produce boxes for online stores, and quickly evolved into a thriving business from our farm outside Lusaka. They supply small shops and delicatessens in Lusaka, with all kinds of pasta and sauces, including ravioli, tagliatelle, spaghetti, ready to cook lasagne, as well as bread and sourdough.
- As a user I would like to browse the website.
- As a user I need to easily find a contact number.
- As a user it is important I can find an email address.
- As a user I would like to be able to view the products available.
- As a user I need to be able to find various social media sites.
- As a user I need to be able to find price for the products
- As a user I would like different forms of contacting Tansi kitchen.
- As a user I need to be able to access the website from different devices.
Strategy
Having a online store is must these days. Especially, given the current circumstances, people are searching for products that are made in smal scale. Considering that most business is performed online these days, it's more than a must to have an online presence.
Main directions of our development are:
- Having our potential clients to build their holiday package
- Addressing client's needs or queries by linking to our office
Scope
Structure
These are the structure targets of the website.
Targets:
- Navigation for the website
- Menu bar.
- Ease of access.
- Digestible content.
- Different web pages for content
- Home page.
- Products page.
- Contact Us page.
- Contact details.
- Contact Form.
- Countries section.
- Footer with links to external social platform pages.
Skeleton
Surface
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
Landing page
This page welcomes and presents to the user Tansi Kitchen website. Logo is positioned top left on all pages including home page and has a link to the home page. On small tablets and smartphones, logo and Nav menu are stacked on top of each other. The menu bar features in the top right corner, this is a modern and intuitive design. The user can see a contact number and address. This section is always in the middle on all devices. The background is a video that is responsive to different screen sizes.
-
Desktop
-
Tablet
-
Mobile
Navigational Menu
Navigational Menu is very intuitive to the user. Included on all internal pages at the top right of the page. Allows access to internal links. On desktop on hover above Destinations in Nav menu: a drop-down menu with countries links appears. On mobile the user has to touch Destinations in order for drop-down menu to appear. Since there are 6 countries with individual pages, putting all links in the Nav menu without the Destinations drop-down would have cluttered the Nav menu, hence the decision for drop-down menu.
-
Desktop
-
Mobile
Countries Section
Provides to the user link to individual countries pages from homepage in addition to Nav menu. It is available only on the homepage.
- Desktop
- Tablet
- Mobile
Fixed footer
Footer is available on Homepage, Products pages and Sign up page. Allows the user to see available links to other Travel Destinations social media sites and copyright info.
-
Desktop
-
Tablet
-
Mobile
Includes:
- Links to external websites, which have aria labels and open in a new tab.
- Facebook.
- Twitter.
- YouTube.
- Instagram.
-
Tablet
-
Mobile
Video controls and subtitles
Video controls and subtitles are turned on by default, to provide the user with the best experience.
- Desktop
- Tablet
Contact us page
This page provides all the relevant information to the user in order to get in contact with Tanmsi Kitchen.
-
Desktop
-
Tablet
-
Mobile
Includes:
1.Map:
- Mobile
3.Contact form
Contact form offers the user one more form of contact with the travel agency. The Fields: First Name, Last Name and Email are required and the form cannot be submitted without completing the fields - it prompts the user to enter correct type of format for email.
Thank you page
Testing was performed to ensure all navigation links on the respective pages, navigated to the correct pages as intended. This was done by clicking on the navigation links on each page.
I was able to make the website responsive by using a combitation of CSS display:
- Flexbox
- Inline
The screen sizes, which I implemented, allow the site to adapt to various user screens, starting from 320px and up to 1080p (1920x1080px).
Chrome Developer Tools was the tool I used to make the site responsive.
All internal pages passed official W3C Validator testing.
I corrected all problems the html checker indicated. The html checker pointed out embedded video deprecated features and semantic issues. All were corrected thanks to this useful tool.
Css passed official W3C Validator testing. There were no warnings or mistakes in my CSS.
Screenshots
All the pages were tested with Chrome Developer Tools using the Lighthouse resource.
-
Performance:
-
To improve performance I limited the number of images on all pages.
-
Most images were resized and reformatted to reduce data consumption.
-
Went as feasibly low in quality for the images without damaging the cosmetic appeal of the website.
-
High scores throughout the website.
-
-
Accessibility:
- Missing fieldset and legend for checkboxes added.
-
Best Practices:
-
Displayed images either are or are near the correct aspect ratio.
-
HTML doc type included in the html for all pages.
-
-
Search Engine Optimization:
-
Semantic HTML included in all internal pages created.
-
All links have descriptive text added.
-
Alt attributes added to all images.
-
Meta-data descriptions added to each internal page created.
-
- All pages were tested with Wave Chrome extension to check web accessibility.
Wave does not show any error. It shows only 3 advisory warnings.
Alert Screenshot
Screenshots
- Page behaves as expected in all browsers tested. The website was tested in Chrome, Firefox, Brave Browser, Edge and Opera.
I used GitPod as a local repository and IDE & GitHub as a remote repository.
-
To begin with I used Code Institute template on GitHub
-
Then I used that template to create tansi Kitchen repository.
-
Once repository was created I pressed green Gitpod button at the top of the page to create a Gitpod workspace.
-
I created some files and folders.
-
To push my newly created files to GitHub I used a Bash terminal:
- git add (name of file) This selects the file for the commit
- git commit -m "Commit message: (i.e. Initial commit)" Allows the developer to assign a specific concise statement to the commit
- git push The final command sends the code to GitHub
Close to the end stage of the development I looked for a way to deploy the website. As a deployment solution, I chose the version control system GitHub. They have an excellent resource called GitHub pages that allows developers to visually inspect how their website would look on a cloud platform.
- To begin, I went to the repository and selected 'settings.'
- I went to the 'pages' section.
- I chose the master branch as the 'main' branch under 'source.'
- I ensured that it was deployed from the 'root' directory.
- Once completed, I got the website's URL.
Here's six steps to clone the repository:
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the menu on left select 'Pages'
- From the source section drop-down menu, select the Branch: main
- Click 'Save'
- A live link will be displayed in a green banner when published successfully.
- HTML5 for the contents and structure of the website.
- CSS3 for the styling and animations.
- GitPod as a local IDE & repository.
- GitHub as a remote repository.
- GitHub Pages to deploy the website.
- Chrome, for browser testing the responsiveness.
- Chrome Developer Tools for testing screen sizes and using
- Lighthouse.
All the icons were sourced from Fontawsome.
All images and videos were suplied by he the business owner and others taken from social media accounts.
My name is Gustavo Almeida I am a full-stack software developer student at Code Institute, where I am pursuing Diploma in Full Stack Software Development.
Thanks to Code institute for provide a amazing material that help me complete my project. I looking forward for some javascript.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent