Advice Needed on this begginer html/css coding

KnightCypher · May 4, 2024, 5:02pm

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewpot" content="width=device-width, initial scale=1.0"/>
        <link rel="stylesheet" href="styles.css">
        <title>Nutritional Facts</title>
     </head>
     <body>
        <div class="box">
        <h1 >Nutrional facts</h1>
        <p class="per">8 servings per container</p>
        
        <section>
        <div class="serving">
            <article class="item">
                <p class="m">Serving size</p>
                <p class="n">2/3 cup(55g)</p>
            </article>
        </div>
        </section>
        
        <section>
            <article class="item1">
                <p>Amount per serving</p>
            </article>
        </section>

        
        <section>
            <div class="box1">
            <article class="item2">
                <p class="mm">Calories</p>
                <p class="nn">230</p>
            </article>
             </div>
        </section>
       

        <section>
            <article class="mag">
                <p class="daily"> % Daily value* </p>
            </article>
        </section>

        <section>
        <div class="total">
            <article class="cont">
                <p class="fat" >Total Fat</p>
                <p class="sm"> 8g</p>
                <p class="value">10%</p>
            </article>  
        </div>

        <div class="subtotal">
            <article class="cont1">
                <p class="sat">Saturated Fat</p>
                <p class="sm1"> 1g</p>
                <p class="value1">5%</p>
            </article>
        </div>
        
            <article class="trans">
                <p class="txt">Trans Fat 0g</p>
            </article>

            <div class="total">
            <article class="cont">
                <p class="fat">Cholesterol</p>
                <p class="sm">0mg</p>
                <p class="value2">0%</p>
            </article>
            </div>

            <div class="total">
                <article class="cont">
                    <p class="fat">Sodium</p>
                    <p class="sm">160mg</p>
                    <p class="value3">7%</p>
                </article>
            </div>

            <div class="total">
                <article class="cont">
                    <p class="fat">Total Carbohydrate</p>
                    <p class="sm">37mg</p>
                    <p class="value4">136%</p>
                </article>
            </div>

            <article>
                <div class="diet">
                <p class="fiber">Dietary Fiber 4g</p>
                </div>
            </article>
            
            
            <article  class="totalsugar">
                <p class="sugar">Total Sugars 12g</p>
                <p class="value5">10%</p>
            </article>
            
            <div class="totalsugar1">
            <article class="cont2">
                <p class="sugar1">Includes 10g Added Sugars</p>
                <p class="value6">20%</p>
            </article>
            </div>
        </section>
        
        <div class="protein">
        <section>
            <p class="pro">Protein</p>
            <p class="value7">3g</p>
        </section>
        </div>

        <section>
            <article class="prot1">
                <p class="detail1">Vitamin D 2mcg</p>
                <p class="val1">10%</p>
            </article>
            <article class="prot2">
                <p class="detai2">Calcium 260mg</p>
                <p class="val2">20%</p>           
            </article>
            <article class="prot3">
                <p class="detai3">Iron 8mg</p>
                <p class="val3">45%</p>
            </article>
            <article class="prot4">
                <p class="detail4">Potassium 235mg</p>
                <p class="val4">6%</p>
            </article>
        </section>

    <footer > 
        *The % Daily value (DV) tells how much a nutrient in a serving of food contributes to a
        a daily diet. 2,000 calories a day is used for general nutrition advice.
    </footer>    
        </div>
     </body>



</html>

body {
    margin: 10% 15%;
}

.box {
    border: 2px solid black;
    width: 100%;
    max-width: 500px;
    padding: 15px 30px;
    margin: 3px 0;
}

h1 {
    text-align: center;
    border-bottom: 1px solid black;
    margin: 1px;

}




/* serving size and 8 servings ... edits*/
.serving {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 7px solid black;
}


.n {
    text-align: right;
    width: 75.8%;
    padding: none;
}



.item p {
    display: inline-block;
    margin-bottom: 1px;
    margin-top: 0;
}

/* 8 servings ..*/
.per {
    margin: 0;
}



/*this is for calories and amount per serving  */
/*amount per serving  */
.item1 p {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
}



/*calories*/

.item2 p {
    display: inline-block;
    margin: 0;
}

.box1{font-size: 35px;
font-weight: bold;
border-bottom:  4px solid black;
}

.mm {
    text-align: left;
}

.nn{text-align: right;
width: 69%;
max-width: 500px;}


/*daily value*/
.daily{text-align: right;
font-weight: bold;
font-size: 17px;
margin: 0;
border-bottom: 1px solid black;}

/*total fat */
.total{border-bottom: 1px solid black;}

.cont p{display: inline-block;
margin: 0;}

.fat{text-align: left;
font-size: 17px;
font-weight: bold;}

.sm{text-align: left;
    
}

.value{text-align: right;
width: 79.7%;
font-weight: bold;}


/*saturated fat*/
.subtotal{border-bottom: 1px solid black;}

.cont1 p{display:inline-block;
margin-top: 0;
margin-bottom: 0;}

.sat{text-align: left;
    margin-left: 12px; 
}
.sm1{text-align: left;}
.value1{text-align: right;
    width: 72.1%;
    max-width: 500px;
    font-weight: bold;
}
/*trans fat*/
.trans{border-bottom: 1px solid black;}

.txt{text-align: left;
margin: 0 0 0 12px;
}


/*cholesterol*/
.value2{max-width: 500px;
width: 72%;
text-align: right;
font-weight: bold;}


/*sodium*/
.value3{max-width: 500px;
    width: 75.1%;
    text-align: right;
    font-weight: bold;
}


/*Total Carbohydrate*/
.value4{max-width: 500px;
    width: 56.5%;
    text-align: right;
    font-weight: bold;
}

/*sub total carbohydrate, dietary*/

.diet{border-bottom: 1px solid black;
}

.fiber{margin: 0 0 0 12px;
    }

/*sugar*/
.totalsugar p{display: inline-block;
border-bottom: 1px solid black;
margin: 0 0 0 12px;
}

.sugar{text-align: left;
    
}
.value5{text-align: right;;
width: 69.5%;
max-width: 500px;
font-weight: bold;
}

/*added sugar*/
.totalsugar1{ border-bottom: 1px solid black; }
.cont2 p{display: inline-block;
    margin: 0 0 0 24px;

}

.sugar1{text-align: left;}

.value6{text-align: right;
width: 48.7%;
max-width: 500px;
font-weight: bold;}

/*protain*/
.protein{ border-bottom: 7px solid black;}
.protein p{display: inline-block;
margin: 1px 0 0 0;
}
.pro{font-size: 18px;
font-weight: bold;}

/*vitamin*/
.prot1 p{display: inline-block;
margin: 2px 0 0 0;
border-bottom: 1px solid black;}
.detail1{text-align: left;}
.val1{text-align: right;
max-width: 500px;
width: 74.8%;}

/*calcium*/
.prot2 p{display: inline-block;
    margin: 2px 0 0 0;
    border-bottom: 1px solid black;}
    .detail2{text-align: left;}
    .val2{text-align: right;
    max-width: 500px;
    width: 75.8%;
}

/*iron*/
.prot3{border-bottom: 1px solid black;}
.prot3 p{display: inline-block;
    margin: 2px 0 0 0;}
    .detail3{text-align: left;}
    .val3{text-align: right;
    max-width: 500px;
    width: 85.2%;
}

/*potasium*/
.prot4{border-bottom: 4px solid black;}
.prot4 p{display: inline-block;
    margin: 2px 0 0 0;} 
    .detail4{text-align: left;}
    .val4{text-align: right;
    max-width: 500px;
    width: 72.5%;
}


/*footer*/
.finally p{display: inline-block;}
.foot{max-width: 40000px;
text-align:left;}
.footer{text-align: left;}

Picture on the right with the red marking is mine.

So I am taking the freecodeacademy course, responsive web design, I am right now on the topic; learn typography by building nutrition label.

After opening the project, I decided to try my hands on coding the preview before I start the project, the picture above with the red marker coloring on the bottom is
the code I came up with(took three days). I found these major problems.

I couldn’t get the project to move along, when I maximize or minimize the size of my browser window.
I couldn’t get the “nutrition facts” to stretch out(yes, I tried
searching, but did not know exactly what I was looking for)
The ‘total sugar’ part of it has a gap between the margins of the text ‘total sugars 12g’ and margin of the percentage. I tried everything I possibly could by myself, but couldn’t figure it out.
I couldn’t get the footer part to look exactly like it was on the original.

I hope you can check-this-out and give possible pointers for things I missed and bad habits I might have started to pick up. Thank you

ios-man · May 4, 2024, 6:27pm

Hello @KnightCypher,

Welcome! You chose a great place to learn to code, enjoy the experience.

Your enthusiasm is commendable, especially in attempting to code this project from scratch. While appreciating that everyone learns in their own unique way, it might be more efficient, especially at this ‘beginner’ stage, to complete each topic using the instructions and testing each step on the freecodecamp platform.

When you encounter a difficulty, you can request help at the step where you clicked the ‘request help button’ and are experiencing the issue - and the community member will be provided with your code and the step instructions - essentially all the information required to assist you best.

The

referred to above will all be dealt with in the course (which can be completed multiple times of course).

One thing that I can recommend is that you write your code in a consistent style, e.g.:

CSS:

body {
    some-property:  some-value;
}

next-selector {
   some-property:  some-value;
}

It is very good that you make use of comments - they might be very useful when searching for bugs.

Does this help?

Keep up the good progress!

Happy Coding!

KnightCypher · May 5, 2024, 6:57am

yes it does help. thank you

system · November 3, 2024, 6:57pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Stuck in this step help! HTML-CSS	8	391	December 30, 2022
I'm stuck in last <p>, HTML-CSS	6	272	December 18, 2022
Tell me what I am missing HTML-CSS	5	219	December 28, 2022
Learn Typography by Building a Nutrition Label - Step 48 did you see the wrong here realy I don't understand HTML-CSS	2	145	August 16, 2023
Learn Typography by Building a Nutrition Label - Step 65 HTML-CSS	3	141	April 23, 2024

Advice Needed on this begginer html/css coding

Related topics