emjose / keto-food-list

A reference guide of keto-friendly food.

• 100 Days of Code
• Installation
• Live Site
• Resources
• Copyright
• Let's Connect!

Day 36: April 2, 2022

• The ketogenic diet is a high-fat, low-carb diet.

• The Keto Food List is an online reference of keto-friendly food.

• The visual style is directly based on Popsugar's Keto Food List Guide, with structure adapted from a vertical tabs tutorial.

• Categories were expanded, Freepik images were used, and a printable PDF was created in Photoshop.

• Keyboard navigation and responsiveness to landscape orientation were also implemented.

• Consult your physician before starting a diet or fitness program.

1. Git clone and cd into the repo folder:

git clone [email protected]:emjose/keto-food-list.git && cd keto-food-list

2. Run the command:

open index.html

• The Keto Food List is responsive and keyboard-navigable.

• The Keto Food List is a progressive web app.

• Users can view lists of keto-friendly food, sorted by category.

• Users can view or download a printable PDF of the Keto Food List.

• The PDF can fit within 8.5 x 11 inches standard letter paper size (landscape orientation).

• Freepik

• SmolCSS

• Cloudinary

• Adobe Fonts

• Adobe Photoshop

• Vertical Tabs Tutorial

• Array.prototype.forEach()

• Ketogenic Diet 101 - Healthline

• Orientation: CSS Media Feature

• Keto Food List Guide - Popsugar

• Keto Diet Food List - Perfect Keto

• Ketogenic Diet Food List - Dr. Berg

• Keto Diet Grocery List - Chow you Later

• The Complete Guide to Centering in CSS

• My blog on how I created my Github READMEs

• Background vectors created by freepik - Freepik

• Book draw vector created by mamewmy - Freepik

• Food collection photo created by Vectorium - Freepik

• Hand drawn food vector created by Pikisuperstar - Freepik

• Halftone background vector created by Creative_hat - Freepik

• Keto Food List PDF and app copyright of © Emmanuel Jose. All Rights Reserved.

• Vector illustrations and background are copyright of © Freepik. All Rights Reserved.

• This project is for made for educational purposes only. Consult your physician before starting a diet program.