peterirlam / ketoMe-365

KetoMe365 is a personal project for a 365 day-a-year ketogenic food subscription delivery site. Inspiration drawn from Hello Fresh and Gousto.

💻   ketoMe-365

KetoMe365 is a personal project for a 365 day-a-year ketogenic food subscription delivery site. Inspiration drawn from Hello Fresh and Gousto.

📖   Description

Features sticky nav bar, mobile navigation, 180° rotating hover animation on pricing cards using CSS perspective property, fully responsive and accessible thanks to the power of flex box and CSS Grid.

🔗   Demo

Live view by clicking the badge (use Ctrl/Cmd + Shift to open a new window):

You can also clone the project and open it in localhost (See Prerequisites below).

🛠   Technologies

• HTML
• CSS
• JavaScript

🎱   Why I Chose This Project

I wanted to showcase my ability in creating a visually striking landing page writing my own 'copy' (content) rather than Lorem placeholder text.

I built the project using HTML, CSS and JavaScript with particular focus on CSS for a fully responsive and highly accessible user experience.

🏗️   How I Worked on This Project

• I used git to track my files locally and created branches using git switch -c new-branch.
• I designed a rough paper sketch of the layout of each section so I had a mental model of html elements.
• I envisioned user goals, what they wanted to accomplish and established consistent design patterns to reinforce UI/UX principles
• For future projects I intend to explore using Jira for a more formal project management experience.

⏲️   If I Had More Time I Would Change

Add more branding colors. I approached the project using a green branding color, synonymous with health and vitality. I used tints and shades of the primary color to provide visual hierarchy for a better user experience.

However, I feel that the design needs additional brand colors, especially for the pricing section which indicates the 3-tier pricing structure. I will return to this project soon, add css variables for all colors and add a wider range of color palettes.

📦   Prerequisites

Before cloning/forking this project, make sure you have the following tools installed:

• Git
• NodeJS

⚙️   Installation

1. Fork the project
2. Clone the project
3. Follow the instructions in the console:
4. Navigate to the project directory cd directory-name
5. Install the dependencies npm install
6. Run the project npm start

🏁   Finished product

• Fully responsive and fluid layout.
• Professional and sleek design designed in line with UI/UX best practices.
• Use of correct semantic elements such as figure, blockquote etc.
• Optimised images for browsers by using 'srcset' attributes on <img> tags.