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

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Any comments tomy HTML

HI,

What do you think about my HTML structure? any comments? is it good? bad? would you hire me as HTML writer? : p

I have in mind the class names, nesting, id's and the strucutre itself.

<?php 
    $companyName = "Lotus Hair & Beauty";
?>
<!DOCTYPE html>
<html lang="en">
    <head>

        <title></title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

        <!-- Seo meta -->
        <meta name="keywords" content="" />

        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="includes/css/styles.css">
        <link rel="stylesheet" href="fonts/font-awesome.min.css">

        <!-- Ajax & Bootstrap -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>

        <!-- Header -->
        <header id="header">
            <div class="top-header">
                <div class="container">
                    <div class="header-contact-details">
                        <span class="glyphicon glyphicon-phone">07938 937732</span>
                        <span class="glyphicon glyphicon-envelope">Email: lotus_hairandbeauty@hotmail.co.uk</span>
                        <span class="button-book-online pull-right">Book Online</span>
                    </div><!-- /header-contact-deatails-->
                </div><!-- /container -->
            </div><!-- top-footer -->

            <div class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="container">
                        <!-- Brand & Mobile -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="main-navbar" arial-expanded="false"></button>
                            <a class="navbar-brand" href=""><?php echo $companyName; ?></a>
                        </div><!-- /navbar-header -->

                        <!-- Navbar -->
                        <div class="collapse navbar-collapse" id="main-navbar">
                            <ul class="nav navbar-nav pull-right">
                                <li><a href="">Home</a></li>
                                <li><a href="">About</a></li>
                                <li><a href="">Services</a></li>
                                <li><a href="">Team</a></li>
                                <li><a href="">Services & Price</a></li>
                                <li><a href="">Contact</a></li>
                            </ul><!-- /navbar-nav -->
                        </div><!-- /main-navbar -->
                    </div><!-- /container -->
                </div><!-- /container-fluid -->
            </div><!--/ navbar navbar-inverse -->
        </header>

        <!-- Index Carousel -->
        <div class="row" id="index-carousel">

        </div><!-- /index-carousel -->

        <!-- Index News -->
        <div class="row" id="index-news">

        </div><!-- /index-news  -->

        <!-- Footer -->
        <footer class="row" id="footer">
            <div class="container">
                <div class="col-xs-12 col-md-4">
                    <h5>Links</h5>
                    <ul class="unstyle">
                        <li>Home</li>
                        <li>About</li>
                        <li>Services</li>
                        <li>Team</li>
                        <li>Services & Price</li>
                        <li>Contact</li>
                    </ul>
                </div><!-- /col-xs-12 col-md-4 -->

                <div class="col-xs-12 col-md-4">
                    <h5><?php echo $companyName; ?></h5>
                    <p>85a Sibson Road</p>
                    <p>Bristall Leicester LE4 4NB</p>
                    <p>Phone: 0116 367 7095</p>
                    <p>Mobile: 07938 937732</p>
                    <p>Email: lotus_hairandbeauty@hotmail.co.uk</p>
                </div><!-- /col-xs-12 col-md-4 -->

                <div class="col-xs-12 col-md-4">
                    <h5>Openning</h5>
                </div><!-- /col-xs-12 col-md-4 -->
                <div class="bottom-footer">
                    <div class="clear">
                         <div class="clear">
                               <p> &copy; Copyright <?php echo date('Y'); ?> <?php echo $companyName ?> All Rights Reserved.</p>
                    </div>
                    </div>
                </div><!-- /bottom-footer -->
            </div><!-- /container -->
        </footer>

    </body>
</html>

1 Answer

Christian Andersson
Christian Andersson
8,712 Points

Hi Konrad,

your HTML file looks pretty clean and solid, good indentations as well. There are however a couple of things I'd like to comment on:

1) You are echoing out the company through php as a variable, is there a reason for this? Why not just hard-code it in HTML (no php)?

2) On row 102 you are opening a php section twice. While this is not wrong it's a bit unecessary. I'd do it like this (provided you don't want to hard-code the company name):

   <p> &copy; Copyright <?php echo date('Y') . " " . $companyName; ?> All Rights Reserved.</p>

3) You don't have a title set in your header. Don't forget that :)

Other than that, I think you have a very good structure and the spacing makes it easy to read and you never get confused with all the comments. Keep up the good work!

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I did a little bit changes , not many. Im making the site for someone else but as well, im learning PHP so i want to use PHP to make it all dynamic. Also, never know, maybe the framework im doing will server later one .

I also want to make the title dynamic, you know, every page different name like Home | Shop Name, About | Shop Name etc..

Rightttt xd i havent though about this, concatinating its called i believe . Ill do thath the next time when the PHP tags will be close and it wil be better case to do it.

Thats great! :D Now the harder part , clearn CSS xd

I did a prototype of the site frist ,it was messy , very messy. Now im re-doing it and im doing it as best as i can think of it . I think my CSS is pretty clean, but not perfect and a bit more thinking on it could be better i think.

I believe, more practice in CSS, makes it easier and easier, liek anything else.

I know on what im up to at least :D good to know the strucutre is solid and easy to read :D means i improved i beleive. Last time i had few comments about my strucutre beeing a bit less clean and a bit harder to read.

Thank you for your answer.