Skip to content

shadeofpurple79/vitaminception

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PORTFOLIO PROJECT - 1

VITAMINCEPTION

Summary

Vitaminception is a guide for the big and complex world of vitamins and supplements. A quick search on Amazon or Google for vitamins, shows a vast number of search results. There are hundreds of vitamin brands in the market and the product ingredients label is a mystery. If that wasn't enough, the advice from medical professionals, health coaches, nutritionists and of course the media are confusing and conflicting. Vitaminception takes this back to the beginning and explains the benefits of vitamins, the natural sources to obtain them, and if necessary, the recommended supplements to take, in simple, plain terms.

According to datareportal.com, 92& of global internet users aged 16 to 64 go online via a mobile phone. For this reason, Vitaminception has been designed and developed with a mobile-first approach. Alternative views for tablets and desktops have also been provided for such users.

Mobile View

Mobile View Screenshot

Tablet View

Tablet View Screenshot

Desktop View

Desktop View Screenshot

Features

Vitaminception explains each vitamin individually in very simple terms. Each vitamin type has its own unique page, with a short description on what the vitamin is for, how it's used by the body, what the benefits are, and the consequences of being deficient in this vitamin. Each vitamin page then goes on to cite external sources, cherry picked for the audience of this website; a short video, a scientific or medical research article, and a book.

The final section of each vitamin page is a small shop area where a selection of only three vitamin products are shown, selected by the Vitaminception authors. The user can click on these links to directly visit a shopping website and complete their purchase.

Vitaminception business will have special commercial agreements with the selected three suppliers where the business will earn a commission on each purchase made in this way.

Navigation Bar

Navigation bar appears on all pages, at the top, and includes a logo, links to all pages, and is fully responsive. The mobile view is stacked links, whereas tablet and desktop views display the navigation inline.

Navigation Mobile View

Navigation Mobile View

Navigation Tablet View

Navigation Tablet View

Navigation Desktop View

Navigation Desktop View

Footer

Footer includes a social media link to Instagram to invite the users to follow Vitaminception activities. A simple sign up form has also been added to the footer to invite the user to provide their email address in order to receive news and updates from Vitaminception.

Footer Mobile View

Footer Mobile View

Footer Tablet View

Footer Tablet View

Footer Desktop View

Footer Desktop View

Index Page

the index page gives an overview of the purpose and objectives of the website for the audience. It introduces the common questions and issues for the average vitamin user, such as which vitamin to use, why vitamins are needed, what the body does with vitamins, and how we, the homo sapiens, have lost through evolution, the ability to make certain vitamins in our body.

Homepage Main Content

The index page guides the users to the rest of the website where detailed information can be found on each vitamin type.

Homepage Lead to Other Pages

Vitamin Detail Pages

Each vitamin page follows the same format to provide visual familiarity for the audience:

  • A brief description and background
  • Natural sources to obtain the vitamin without having to take supplements
  • A section to read more about the vitamin from trustworthy resources, which includes:
    • A video
    • A scientific article
    • A book
  • And finally a mini shop section consisting of three recommended products to buy, ideally in different "forms" of the vitamin, such as pill, tablet, gummy, gel capsule, powder and so on. This mini shop would in the future include affiliate marketing links, in order to generate commission revenue from the sale of the products.

Vitamin C Page

Vitamin C page begins by describing this particular type of vitamin, a brief background and history of it in science, it provides a list of natural sources of the vitamin, with a visual infographic, an information section directing the user to external links to watch a video, to read a scientific article and to read or buy a book on the topic. The mini shop section offers vitamin c products in three different forms: liquid, gummy and pill.

Vitamin C page refers to the following external links:

Vitamin D page

Vitamin D page follows the same format and begins by describing this particular type of vitamin, a brief background, it provides a list of natural sources of the vitamin, but this time specifically for vegans as this is a challenging area for this special diet, followed by an information section directing the user to external links to watch a video, to read a scientific article and to read or buy a book on the topic. The mini shop section offers vitamin c products in three different forms: gummy, liquid and gel capsules.

Vitamin D page refers to the following external links:

Future Features

There is a huge potential to expand this website to become a trustworthy source for the audience, as well as make it a commercially viable business. Future features could include but are not limited to:

  • Add affiliate links on mini shop products from reputable affiliate programs such as Commission Junction in order to bring revenue share on the sale of products
  • Add a database link to connect the sign up form to, and store the users' email addresses which could be used for email marketing purposes
  • Add a GDPR policy to comply with the regulations when collecting users' data
  • Convert the mobile navigation menu into a burger menu using javascript

Tools & Technologies Used

  • HTML: used for the markup and content
  • CSS: used for the layout, design, and responsiveness
  • Git: used for version control
  • GitHub: used for securing code online
  • GitHub Pages: used for deployment of the live site
  • Gitpod: used as cloud-based IDE for development
  • Canva: used for designing a unique logo and branding

Testing

The website has been tested on Chrome, Safari and Firefox latest versions. There are minor issues to be fixed which have been listed in the Known Bugs section and will be fixed in the second release.

Chrome

Chrome

Firefox

Firefox

Safari

Safari

Responsinator validator showed a broken text overlay on rotated landscape view on mobile screens which has not been fixed in this version.

Responsinator

Validator Testing

HTML Validator

No errors were returned when passing through the official W3C validator

Index Page HTML Validator Results

Index Page HTML Validator Results

Vitamin C Page HTML Validator Results

Vitamin C Page HTML Validator Results

Vitamin D Page HTML Validator Results

Vitamin D Page HTML Validator Results

CSS Validator

No errors were found when passing through the official (Jigsaw) validator

Index Page CSS Validator Results

Index Page CSS Validator Results

Vitamin C Page CSS Validator Results

Vitamin C Page CSS Validator Results

Vitamin D Page CSS Validator Results

Vitamin D Page CSS Validator Results

Responsinator Validator

Mobile and tablet views appear to be without any issues on portrait view, however, there are fixes to be made in the landscape view, which have been noted in the known issues list and will be fixed in an upcoming release.

Index Page Responsinator Results

Index Page Responsinator Results

Vitamin C Page Responsinator Results

Vitamin C Page Responsinator Results

Vitamin D Page Responsinator Results

Vitamin D Page Responsinator Results

Unfixed Bugs

  1. Broken text overlay on rotated landscape view on mobile screens Bug1
  2. Broken text overlay on Safari desktop view Bug2
  3. Vitamin D third product in mini shop, product image size is distorted in mobile view Bug3
  4. Sign up form in the footer is not aligned correctly Bug4
  5. Images with white background don't appear well on the website's off-white background colour Bug5a Bug5b
  6. The signup form doesn't capture the user's email address (not a bug but missing feature, requires database connection)

Deployment

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 source section drop-down menu, select the Main Branch, then click "Save".
  • The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

Local Deployment

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

  • git clone https://github.com/shadeofpurple79/vitaminception.git

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Credits

Images and content have been sourced from external websites, which have been explicitly cited on the website.

Content

Vitamins are not pharmaceuticals and therefore are not regulated as medicines. However, they are still used for their health benefits and therefore most of the content on the website were sourced from medical and scientific journals, or credible health publishers:

Recommended books were sourced from the World of Books website which sells used books:

Shop content and recommended product links are sourced from trusted sellers of vitamin propducts:

Media

The photography has been sourced from Pexels.com which is a free stock photograpy website. The terms of use requires the photograph filenames to be kept the same in order to acknowledge the photographer.

The videos used on the website have been taken from Youtube. Special attention has been given to ensure that the resources are qualified medical professionals.