product label

Supplement Facts

Serving Size 4 Chewables

Servings Per Container 36

Amount Per Serving%DV


Total Carbohydrates1%*4g

Total Sugars**4g

Includes 4g Added Sugars8%

Creatine Monohydrate**5g

* Percent Daily Values are based on a 2,000 calorie diet.

** Daily Value (DV) not established.

The “Supplement Label” project holds a special place in my heart as it represents one of the first projects I undertook when I began my web development journey. For this endeavor, I chose to recreate the digital version of a supplement label based on one of my favorite supplement products.

The webpage serves as a direct digital recreation of the supplement label, meticulously crafted by observing the original label’s design, layout, and content. By using HTML for structuring the elements and CSS for styling, I aimed to replicate the label’s appearance with precision.

The recreation captures the essential information presented on the physical supplement label, including serving size, servings per container, amount per serving, and daily values. Careful attention was given to typography, colors, and spacing to ensure an accurate representation of the original label.

Kindly note that this project is optimized for desktop viewing to maintain the authenticity of the supplement label experience. As I look back on this project, I am reminded of my humble beginnings and how it helped lay the foundation for my growth as a web developer.

View the source code below.

Source Code here