5
\$\begingroup\$

I'm writing the HTML for this website: Website I'm trying to code

And this is the HTML I made:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Gustoso</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
        <link rel="stylesheet" href="stylesheet.css">
    </head>

    <body>
        <section id="banner">
            <div class="wrapper">
                <header>
                    <p class="logo">Gustoso</p>

                    <nav>
                        <ul>
                            <li><a href="#welcome">Welcome</a></li>
                            <li><a href="#menu">Menu</a></li>
                            <li><a href="#reservations">Reservations</a></li>
                            <li><a href="#news">News</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>

                <div class="social-icon">
                    <ul>
                        <li class="icon-1"><img src="#" alt="Twitter"></li>
                        <li class="icon-2"><img src="#" alt="Facebook"></li>
                        <li class="icon-3"><img src="#" alt="Instagram"></li>
                    </ul>
                </div>
                </header>

                <div class="content">
                    <h1>Pastry with Love</h1>
                    <h2>We're bringing you fresh ingredients every day in ways you can't resist.</h2>

                    <div class="button-wrapper">
                        <a href="" class="button">Our Menu</a>
                    </div>
                </div>
            </div>
        </section>


        <section id="cakes">
            <div class="cakes-wrapper">
                <header>
                    <p class="title">Art of Cakes</p>
                    <p class="sub-title">We create delicious memories</p>
                </header>

                <p class="regular-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam
                debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro aut eius officiis, voluptas. </p>

                <div class="chef">
                    <h3> Chef Cook</h3>

                    <img src="#" alt="chef's picture">
                    <p> Benito Gaspare </p>

                    <p class="logo quote"><span>"</span>Unique creatins for unite occasions.<span>"</span>
                </div>
            </div>

            <div class="images-wrapper">
                <div class="box">
                    <p>Tastes so Good!</p>
                </div>

                <img src="#" alt="cakes">
            </div>
        </section>


        <section id="pancakes">
            <div class="pancakes-wrapper">
                <header>
                    <p class="title">Tasty pancakes</p>
                    <p class="sub-title">Season Favourite</p>
                </header>

                <p class="regular-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam
                debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro aut eius officiis, voluptas. </p>

                <!-- Carrousel -->
                <div class="slider">
                    <ul class="slides">
                        <li><img src="#" alt="Slide1"></li>
                        <li><img src="#" alt="Slide2"></li>
                        <li><img src="#" alt="Slide3"></li>
                    </ul>
                </div>

                <div class="slides-navigation">
                  <a href="#" class="prev-slides"><img src="#" alt="Arrow Left"></a>
                  <a href="#" class="next-slides"><img src="#" alt="Arrow Right"></a>
                </div>
            </div>

            <div class="time-box">
                <p class="title small-title uppercase">Ready in</p>
                <p><span class="time">40</span>mins</p>
            </div>
        </section>


        <section id="breakfast">
            <div class="breakfast-wrapper">
                <header>
                    <p class="title white-title">Breakfast</p>
                    <p class="sub-title">7am breakfast? We're Open!</p>
                </header>

                <p class="title small">Full Breakfast</p>
                <p>Duis ut tortor, et risus, vulputate pretium</p>
                <p class="price">$12.49</p>

                <p class="title small">Toast and Jam</p>
                <p>Suspendisse, tempus, nterdum</p>
                <p class="price">$4.90</p>

                <p class="title small">Muffins</p>
                <p>Fusce eget dui sodales est</p>
                <p class="price">$3.95</p>
            </div>

            <div id="flair-wrapper">
                <p class="title brown-title">Breakfast</p>

                <p class="regular-tex">Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                Etiam sit amet orci eget eros faucibus tinicudnt. Duis leo.</p>

                <a href="#" class="button ghost">Read</a>
            </div>
        </section>


        <section id="jibarito-sandwich">
            <header>
                <p class="title">The Jibarito Sandwich</p>
                <p class="sub-title">The best sandwaich you've ever tasted!</p>
            </header>

            <div class="food-wrapper">
                <div class="ingredient-1">
                    <header>
                        <img src="#" alt="Ingredient 1">
                        <p class="title small-title">Class aptent</p>
                    </header>
                    <p class="regular-text">Quot alinuem perscuti ut eam, nam ad atqui primis nusqeuam.</p>
                </div>

                <div class="ingredient-2">
                    <header>
                        <img src="#" alt="Ingredient 2">
                        <p class="title small-title">Nulla egget</p>
                    </header>
                    <p class="regular-text">Nullam dictum felis eu pede mollis pretium Integer tincidunt.</p>
                </div>

                <div class="ingredient-3">
                    <header>
                        <img src="#" alt="Ingredient 3">
                        <p class="title small-title">Sed nibh purus</p>
                    </header>
                    <p class="regular-text">Aenam eleifend tellus leo ligula, porttitor eu, consequat vitae.</p>
                </div>
            </div>

            <div class="recipe-result-wrapper">
                <aside>
                    <div class="info-1">
                        <p class="title small-title uppercase">Prep</p>
                        <p><span class="time brown-time">15</span>mins</p>
                    </div>

                    <div class="info-2">
                        <p class="title small-title uppercase">Cook</p>
                        <p><span class="time brown-time">35</span>mins</p>
                    </div>

                    <div class="info-3 time-box">
                        <p class="title small-title uppercase">Ready in</p>
                        <p><span class="time">50</span>mins</p>
                    </div>
                </aside>

                <a href="#" class="button white-button">Full Recipe</a>
            </div>
        </section>


        <footer>
            <p class="logo">Gustoso</p>

            <nav id="footer">

                <ul>
                    <li><a href="#">Our Menu</a></li>
                    <li><a href="#">Galerry</a></li>
                    <li><a href="#">Culture</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Catering</a></li>
                    <li><a href="#">Visit Us</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>

Keep in mind that I know nothing about JS so everything I felt could have any relation to JS has been ignored. Like the slider, I'm not entirely sure I've done it right.

I would love some tips and advices from you guys! I would like to know how to make this code more maintainable and more semantic. Thanks! :)

Improve this question
\$\endgroup\$
2
  • 2
    \$\begingroup\$ Could you post the CSS for this HTML as it's hard to review the HTML without the underlying CSS. \$\endgroup\$
    – Tolani
    Sep 5, 2016 at 8:22
  • 2
    \$\begingroup\$ I was actually expecting some review only for this HTML because I thought it would be a good idea to write a lot of HTML before trying CSS (I have tried already but I was having some trouble with it). \$\endgroup\$
    – SnooDucks299792
    Sep 5, 2016 at 14:55

2 Answers 2

Reset to default
4
\$\begingroup\$

Overall this is quite good, by far not the worst HTML I have seen.

I like that you use alt attributes on all your images, as you should.

I am going to assume that you have replaced all href's with # for the example.

I know you have said that you would prefer not to have any CSS reviewed, but it does cross into HTML with classes and ids so I will make one comment on that.

I have noticed that you have used some ids like <section id="cakes">. This would be fine for in page links or Javascript but should not be used as a CSS selector, no id should. There is no need for that level of specificity in your css.

HTML elements

While your choice of HTML elements is generally quite good I think you are slightly misusing some of the HTML5 elements, particularly section and header. Remember: there is no shame in using div's.

Section

Most of your use of section is fine, the only use I have a problem with is the first one where you include the site nav and social media icons.

From <section> - HTML | MDN:

The HTML element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Navigation and such I wouldn't call a thematic grouping of content, and the content of the header would be better moved to be a child of body. The remainder of the content in the section is, I think, a little to sparse to use a section so I would recommend a div.

Header

Apart from the header at the top of the page used the others incorrectly.

In the example below you seem to be using them in place of a hgroup. hgroup is like a heading element that can contain several elements, but it has been removed from the W3C spec and shouldn't be used.

These should be replaced with suitable header elements and the subtitles should remain p's styled as needed with css.

<section id="jibarito-sandwich">
    <header>
        <p class="title">The Jibarito Sandwich</p>
        <p class="sub-title">The best sandwaich you've ever tasted!</p>
    </header>

    <div class="food-wrapper">
        <div class="ingredient-1">
            <header>
                <img src="#" alt="Ingredient 1">
                <p class="title small-title">Class aptent</p>
            </header>
...

Lists

I have spotted this example, where you list some ingredients. I see this mistake quite often where people use divs instead of ul & li.

It might be helpful to ask yourself when writing this, "What am I doing?". If the answer is anything like "I am showing a list of…", then you know to use a ul or ol.

<div class="food-wrapper">
    <div class="ingredient-1">
    ...
    </div>

    <div class="ingredient-2">
    ...
    </div>
...
</div>

Anchors

I noticed that you are using these social media icons. Typically these would do something. They could be a simple link you the company profile on each site, or if they are some type of sharing button they should still be a link and shouldn't rely on Javascript (see The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media ).

<li class="icon-1"><img src="#" alt="Twitter"></li>
<li class="icon-2"><img src="#" alt="Facebook"></li>
<li class="icon-3"><img src="#" alt="Instagram"></li>

Structure

You should use the heading elements (h1 to h6) to describe the structure of a page. It is helpful to write the structure out as a nested list so you can see it without the distraction of HTML. There are also browser extensions that can do this for you.

At the moment you have:

  • Pastry with Love
    • We're bringing you fresh ingredients every day in ways you can't resist.
      • Chef Cook

And then you seem to abandon headings. As you can see from the list this doesn't make a lot of sense.

Part of this is due to "We're bringing you fresh ingredients every day in ways you can't resist". HTML doesn't support subtitles, so every heading starts a section of related content, for example:

<h1>Pastry with Love</h1>
<!-- Content related directly to the h1 -->
<h2>We're bringing you fresh...</h2>
<!-- Content related to the h1, but more directly related to the h2 -->

If you look in the screen shot you can easily pick out headings like, Art of Cakes, Breakfast, etc. which you do seem to have recognised with the class title.

Improve this answer
\$\endgroup\$
0
\$\begingroup\$

Clear code, I not spot any bigger problems. I will look only on name of class and ID for example you have tag - footer and id - footer also I will use some framework like bootstrap.

now I spot. you use so many in your code.

and I think that's all. not see any more issue.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ I'm curious, the original poster explains he isn't using JavaScript because he doesn't know it, but you are suggestion bootstrap which is a JavaScript library. The source code shows that there are no scripts being used. \$\endgroup\$
    – pacmaninbw
    Sep 7, 2016 at 11:38
  • \$\begingroup\$ To use bootstrap you don't have to know js. It was only suggestion. \$\endgroup\$
    – maw2be
    Sep 7, 2016 at 11:41

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.