Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

HOw would you refactor this post header?

            <article class="post">

                <iframe class="post__video" width="560" height="315" src="https://www.youtube.com/embed/xvXvtDB2cHA" frameborder="0" allowfullscreen></iframe>


                <section class="post__body">

                    <header class="post__header">
                        <section class="post__author__section">
                        <span class="post__author__img">
                            <img src="https://yt3.ggpht.com/-WNsUz1Wlbjw/AAAAAAAAAAI/AAAAAAAAAAA/KDtU5G_T9p8/s48-c-k-no-mo-rj-c0xffffff/photo.jpg">
                        </span>
                        By
                        <span class="post__author">
                            <a href="">Aurelian Spodarec</a>
                        <span>
                            on
                        </section>
                        <section class="post__date">
                            <span class="post__date__day">23</span>
                            <span class="post__date__month">May</span>
                            <span class="post__date__year">2016</span>
                        </section>
                    </header>

                    <h1 class="post__title">Initial steps - Take Action</h1>
                    <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    <br><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    <br><br>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </section>

            </article>

1 Answer

Miguel de Luis Espinosa
Miguel de Luis Espinosa
41,279 Points
Miguel de Luis Espinosa
Miguel de Luis Espinosa
41,279 Points

First of all, I don't really think that you need classes for every bit of content.

Second those <br> are redundant, to separate different paragraphs just use <p>whatever</p> <p>something else</p>

Moreover, even if you have to use <br>, you'd normally use CSS to adjust the white space, so don't use multiple <br>

Third, why the h1 is out of the post header?

Also, you could use more semantic tags, img needs an alt atribute and so forth.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

That's a good though!

Those br is just for the time of testing the prototype.

Well, in the header you have author and date, i don't know, should I put the h1 in header? and then live the paragraph out?

So how would you code that header?