0
\$\begingroup\$

Ignoring the text inside, what is there to be improved?

This is supposed to be a poster for my Food Technology homework, but after getting some review from the informational side, I'd like some review from the coding side.

/*Basic Format*/

body 
{
    background-color: #FF1493;
    font-family: 'Cooper Black';
    min-width: 750px;
}

h1,h2,h3,h4,h5,h6
{
    text-align: center;
    text-decoration: underline;
}

.white 
{
    color: #FFFFFF;
}

.black{
    color: #000000
}

h2 
{
    font-size: 24px;
    text-decoration: underline;
    font-weight: bold;
}

/*Title*/

#title {
    border: 5px solid red;
    width: 75%;
    padding: 25px;
    margin-left: 10%;
    margin-right: 10%;
}

/*Five Nutrients*/

.typebox
{
    padding: 15px;
    margin: 10px;
    text-align: center;
    position: static;
}

#fat 
{
    width: 46%;
    border: 4px solid black;
    top: 350px;
    left: 35%;
    float: left;
}

#carbs 
{
    border: 4px solid yellow;
    top: 500px;
    right: 0%;
    width: 45%;
    float: right;
}

#proteins
{
    border: 6px solid red;
    top: 500px;
    right: 0;
    width: 49%;
    float: left;
    
}

#vitmin
{
    width: 100%;
    border: 0px hidden;

}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link type="text/css"
        rel="stylesheet"
        href="Styles.css" />
    <title>Vitamins and nutrients</title>
</head>
<body>
    <script type="text/javascript">
        <!--
        if (screen.width <= 699) {
        document.location = "MobileVitamins.html";
        }
        //-->
    </script>

    <h1 id="title" class="white">NUTRIENTS</h1>
    <p class="white">There are five major types of nutrients:</p>

    <div class="typebox" id="fat">
        <h2>FAT</h2>

        <p>Fat is a vital nutrient that is vital for our bodies. Is it commonly known that too much fat causes many diseases, but there is a certain amount of fat we need in order to maintain bodily functions.  They store energy, keep us warm, and helps protect vital organs, such as our heart. Fats help proteins carry out their jobs, and supports other aspects of our basic metabolism.</p>

        <p>We carry out a cycle of making, breaking, storing and using fats everyday, and it is this cycle that controls our release of energy. An imperfection in any step of the process makes your body subject to disease, like heart disease or stroke, from clogged arteries.</p>
        <p>In addition, fats can help to accumulate certain nutrients. "Fat-soluable" vitamins such as Vitamins A , D , E and K are dissolved and stored in the fatty tissues of the liver. </p>
    </div>

    <div class="typebox" id ="carbs">
        <h2>CARBOHYDRATES</h2>

        <p>Carbohydrates our basic form of energy intake. Almost all energy we use comes from this. There are two forms: Simple carbohydrates, and complex carbohydrates. They are both made out of sugars called glucose. It is how they are arranged that give them their characteristics.</p>
        
        <h4> Simple Carbohydrates:</h4>
        
        <p> These are mainly found in the form of sugars. When they are taken in the body, glucose is absorbed by the body very quickly - about 15-30 minutes. This usually results to high glucose concentration in blood, which is bad for people who are diagnosed with diabetes. However, for those who are not diagnosed with diabtetes, this can be a good thing, as eating a bar of chocolate before an event can boost energy levels in the body, which improves their performance. Any unused sugars are stored in the liver. </p>
        
        <p> Examples include: glucose, fructose, sucrose, lactose and maltose. Glucose is the main one here, because it is the most important sugar for respiration. Without it, we cannot do anything. </p>
        
        <h4> Complex Carbohydrates: </h4>
        
        <p> Bread, and other starchy foods are the main form of complex carbohydrates. They are made up of many glucose molecules stuck together. These are our main sugar sources. They do the same thing as simple carbohydrates, except they take longer to digest (a few hours) but when they do, they also provide important vitamins and minerals. </p>
        
        <p> Sources include bread - as mentioned - , pasta, wheat, lentils, potatoes and more.</p>
        
        <p>But why do we need glucose? Glucose is required for it to turn it into energy. When we breathe in, we take in oxygen (O<sub>2</sub>), and this reacts with glucose (C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>) which produces carbon dioxide (CO<sub>2</sub>), water (H<sub>2</sub>O) and energy.</p>

        <p>6(O<sub>2</sub>) + C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>&#8658;6(CO <sub>2</sub>) + 6(H<sub>2</sub>O)</p>

    </div>

    <div id="proteins">
        <h2>PROTEINS</h2>

        <p>Protein is a complex substance present in most living organisms. Each molecule of protein is very long, and one organism may contain multiple types, each specific to a certain organ. All of them are made from a long chain of amino acids stuck together. At the moment, we know that there at 22 amino acids that are vital to life. </p>
        <p>Even though they are vital to life, like fats, we cannot produce some types (9 of them) ourselves. There are called &#39;vital&#39;. Our main source for these vital amino acids are originates from plants, which we obtain from the food chain. Foe example, cows eat grass, which produces proteins, and then when we eat beef, we gain some amino acids from the meat. </p>

        <p>When we digest protein, our digestive juices break down the proteins into amino acids, then out bodies rearrange them into proteins that we can use. </p>
        <p>The best way to gain protein (most people need about 60 grams a day) is to eat animal products such as milk, cheese, meat and eggs. Unfortunately, if you are vegetarian, you are massively reducing your ease of taking enough protein a day, and have to rely on things like milk and vegetables sources. Being vegan limits this even more, restraining you to only have vegetable sources meaning that eating enough beans. </p>
    </div>

    <div id="vitmin" class="typebox">
        What about the last two sources, you may be asking. They are:
        <div id ="vit">VITAMINS</div>
        <div id ="min">MINERALS</div>
    </div>
    
</body>
</html>

\$\endgroup\$
2
\$\begingroup\$

Your use of all caps ("NUTRIENTS", "FAT" etc.) seems to be decorative. In that case, you should use CSS instead:

text-transform: uppercase;

You should not skip heading levels. So your h4 elements should be h3.


It’s recommended to use sectioning elements explicitly. Each h2-h6 and the content belonging to it should be placed in its own section.

And your last div (#vitamin) should be a section, too, although it doesn’t have a heading. Currently, its content would be in scope of the previous heading/section ("PROTEINS"), which would be wrong.


You could use a ul for the list of the two last sources.


So this would give you:

<h1>Nutrients </h1>

<section id="fat">
  <h2>Fat</h2>
</section>

<section id="carbs">
  <h2>Carbohydrates</h2>

  <section>
    <h3>Simple Carbohydrates</h3>
  </section>

  <section>
    <h3>Complex Carbohydrates</h3>
  </section>

</section>

<section id="proteins">
  <h2>Proteins</h2>
</section>

<section id="vitmin">
  <p>What about the last two sources, you may be asking. They are:</p>
  <ul>
    <li id="vit">Vitamins</li>
    <li id="min">Minerals</li>
  </ul>
</section>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.