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

How's this code? Is there any way to improve it?

Here is my code, I need some suggestions on how to improve it to make my site faster, etc.

<!DOCTYPE HTML> <html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ColdCodr | Home - $29 Web Design - Live Support</title>
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Hind:400,300,600,500,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<!-- SEO Help -->
  <meta name="Description" content="ColdCode designes websites Quickly, effectively and efficiently. Web Design Starting at $29" />
<meta name="keywords" content="home, professional web design, programmer, cheap, web designer, fast web desing, fast, smart, simple web design, unique
web design, advanced web design, login system, supported, simple, underdog, coldcodr, PHP, HTML, Javascript, Images, Logos, Hosting, tutorials, teaching
web design" />
  <meta property="og:url" content="https://www.apple.com/" />


<!-- Bootstrap & Styles -->
<base href="https://coldcodr.com" />
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/block_grid_bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet" />
<link href="css/jquery.circliful.css" rel="stylesheet" />
<link href="css/slicknav.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<!-- End of Bootstrap & Styles -->

</head>

<body> <!-- My LiveChat --> <script type="text/javascript"> var __lc = {}; __lc.license = 5790161;

(function() { var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true; lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s); })(); </script> <!-- End of My LiveChat -->

<!-- Top Bar-->
<div class="top">
    <div class="row">
        <div class="col-sm-3">
            <div class="logo">
                <a href="https://coldcodr.com/home/"><img src="images/logo.png" alt="" />
                </a>
            </div>
        </div>
        <div class="col-sm-9">

            <nav id="desktop-menu">
                <ul class="sf-menu" id="navigation">
                    <li class="current"><a href="https://coldcodr.com/home/">Home</a></li>
                    <li><a href="https://coldcodr.com/pricing/">Pricing</a>
                    </li>
                    <li><a href="https://www.coldcodr.com/careers/open-postitions/">Careers</a>
                    </li>
                    <li><a href="#">Pages</a>
                        <ul>
                            <li><a href="https://www.coldcodr.com/pages/about/">About</a>
                            </li>
                            <li><a href="https://www.coldcodr.com/pages/faq/">FAQ</a>
                            </li>
                            <li><a href="https://www.coldcodr.com/pages/features/">Features</a>
                            </li>
                            <li><a href="https://www.coldcodr.com/pages/how-it-works/">How it Works</a>
                            </li>
                            <li><a href="https://www.coldcodr.com/tutorials/">Tutorials</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="https://www.coldcodr.com/contact/">Contact</a>
                    </li>
                    <li><a href="https://www.coldcodr.com/login/">Login</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!-- End of Top Bar-->

<!-- Content -->

<!--  Features -->
<section class="features">
    <div class="row">
        <div class="col-sm-12">
            <h2>We offer exeptional service</h2>
            <span>our agents & developers work passionately for our customers, and yours.</span>
        </div>
    </div>

    <div class="row spacing-70">
        <div class="col-sm-4">
            <div class="feature wow zoomIn" data-wow-delay="0.2s">
                <img src="images/rocket.png" alt="" />
                <h4>Speedy Developers</h4>
                <p>We'll design your site within 1 week, or half off!</p>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="feature wow zoomIn" data-wow-delay="0.4s">
                <img src="images/ssd.png" alt="" />
                <h4>Fully Customizable</h4>
                <p>Everything fits you, and your customers needs</p>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="feature wow zoomIn" data-wow-delay="0.6s">
                <img src="images/secure.png" alt="" />
                <h4>Highest Security</h4>
                <p>We guarentee top-notch security for you and your customers</p>
            </div>
        </div>

    </div>
</section>
<!-- End of Features -->


<!--  Call to Action -->
<section class="calltoaction">

    <div class="row wow zoomIn" data-wow-delay="0.2s">
        <div class="col-sm-10 com-md-8 center-block">

            <div class="row no-gutter cta-content">
                <div class="col-sm-3">
                    <div class="offer wow fadeInUp" data-wow-delay="0.5s">
                        <span>GET</span>
                        <h2>30%</h2>
                        <span>OFF</span>
                    </div>
                </div>
                <div class="col-sm-9">

                    <div class="offerdescription wow fadeInUp" data-wow-delay="0.7s">
                        <h2>GET STARTED TODAY</h2>
                        <p>what type of site are you looking for?</p>
                    </div>
                </div>
            </div>

            <div class="wow fadeInUp" data-wow-delay="0.9s">
                <form class="form-inline domainsearch" method="post" action="#">
                    <div class="row no-gutter">
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="sld" onfocus="if (this.value == 'Enter your name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your name';}" value="Enter your name" />
                        </div>
                        <div class="col-sm-2">
                            <select name="tld" class="form-control">
                                <option>Personal</option>
                                <option>Business</option>
                                <option>Enterprise</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <button type="submit" class="btn btn-primary" style="width:100%">Get Started</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

</section>
<!-- End of Call to Action -->

<!--  Pricing Tables -->
<section class="pricingtables">
    <div class="row">
        <div class="col-sm-12">
            <h2>Most Popular Design Plans</h2>
            <p>choose from flexable, affordable <a href="https://coldcodr.com/pricing/">plans</a> designed just for you</p>
        </div>
        <br>
    </div>

    <div class="row">

        <div class="col-sm-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Personal</h3>
                </div>
                <div class="panel-body text-center">
                    <h4>$29</h4>
                    <span class="per">ONE TIME PAYMENT</span>
                </div>
                <ul class="text-center">
                    <li>Includes up to 5 Pages</li>
                    <li>One Design Concept</li>
                    <li>Complete Custom Website Design</li>
                    <li>Responsive, Mobile Friendly Website Layout</li>
                    <li>Unique Design</li>
                    <li>Search Engine Friendly Site</li>
                    <li>Customer Contact Form</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-pricetable" href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_flow&SESSION=l7PLkjKGXhA91hvzDtLv-KyigY06ZFKqmApBClVQelo52Kmh-EqHQPO6Ify&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b081984ae437d023107361d4fe9244fda54de7">ORDER NOW</a>
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Business</h3>
                </div>
                <div class="panel-body text-center">
                    <h4>$99</h4>
                    <span class="per">ONE TIME PAYMENT</span>
                </div>
                <ul class="text-center">
                  <li>Includes up to 10 Pages</li>
                  <li>Two Design Concepts</li>
                  <li>Includes eCommerce Store</li>
                  <li>Includes Personal Plan Features</li>
                  <li>Purchase Tracking System</li>
                  <li>Newsletter System</li>
                  <li>Premium Support (even after launch)</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-pricetable" href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_flow&SESSION=l1hWpG7XjgHtrnQoyBEEtYCQe2bdTwxGDdvSpI0cPCWF8IzviM5ntn3pj2O&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b081984ae437d023107361d4fe9244fda54de7">ORDER NOW</a>
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="text-center">Enterprise</h3>
                </div>
                <div class="panel-body text-center">
                    <h4>$297</h4>
                    <span class="per">ONE TIME PAYMENT</span>
                </div>
                <ul class="text-center">
                    <li>Includes up to 30 Pages</li>
                    <li>Five Design Concepts</li>
                    <li>Includes Business Plan Features</li>
                    <li>Advanced Login System</li>
                    <li>Advanced Admin Dashboard</li>
                    <li>Includes Livechat Support System</li>
                    <li>Premimum Support (even after launch)</li>
                </ul>
                <div class="panel-footer">
                    <a class="btn btn-lg btn-pricetable" href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_flow&SESSION=XGlKgIdiL_9bfTphU1QZ1jNYZN_F6i39Xmpkg5JfoDPITSy4dNjGyCj310C&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b081984ae437d023107361d4fe9244fda54de7">ORDER NOW</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- End of Pricing Tables -->

        </div>
    </div>
</div>

<!-- Content -->
<div class="needsupport">
    <div class="row">
        <div class="col-sm-12">

            <h3 class="badge">OUR WORK!</h3>
            <small><center><h4>We design only the best of sites</h4></center></small>

            <div class="block-grid-xs-1 block-grid-sm-4 block-grid-md-4 supportchannels">

                <div class="block-grid-item wow zoomIn" data-wow-delay="0.2s">
                    <a href="http://merendinolaw.net"><img src="images/merendino.png"></i></a>
                </div>
                <div class="block-grid-item wow zoomIn" data-wow-delay="0.2s">
                    <a href="http://food4rs.com"><img src="images/food4rs.png"></i></a>
                </div>
                <div class="block-grid-item wow zoomIn" data-wow-delay="0.2s">
                    <a href="#"><img src="images/pizza.png"></i></a>
                </div>
                <div class="block-grid-item wow zoomIn" data-wow-delay="0.2s">
                    <a href="http://www.haynesboone.com/"><img src="images/boone.jpg"></i></a>
                </div>
            </div>
          </div>
        </div>
        <br><br>
        <center><button type="button" class="btn btn-default"><a href="https://coldcodr.com/portfolio/">See More</a></button></center>

        <br><br><br>
<!--Support -->
<div class="needsupport">
    <div class="row">
        <div class="col-sm-12">

            <h3 class="badge">DO YOU NEED SUPPORT?</h3>
            <small><center><h4>Use our award winning support system!</h4></center></small>

            <div class="block-grid-xs-1 block-grid-sm-4 block-grid-md-4 supportchannels">

                <div class="block-grid-item wow zoomIn" data-wow-delay="0.2s">
                    <a href="https://www.coldcodr.com/ect/support/livechat/"><i class="fa fa-comments-o"></i></a>
                    <h6>Live Chat</h6>
                    <p>Chat live with one of our professional agents</p>
                </div>

                <div class="block-grid-item wow zoomIn" data-wow-delay="0.4s">
                    <a href="https://www.coldcodr.com/ect/support/createticket/"><i class="fa fa-pencil-square-o"></i></a>
                    <h6>Support Tickets</h6>
                    <p>Create a ticket, for more elaborate matters</p>
                </div>

                <div class="block-grid-item  wow zoomIn" data-wow-delay="0.6s">
                    <a href="https://www.coldcodr.com/ect/support/call/"><i class="fa fa-phone"></i></a>
                    <h6>24X7 Call Center</h6>
                    <p>Feel free to call us, we're always here</p>
                </div>

                <div class="block-grid-item  wow zoomIn" data-wow-delay="0.8s">
                    <a href="https://twitter.com/ColdCodr"><i class="fa fa-twitter"></i></a>
                    <h6>Social Media</h6>
                    <p>We love twitter, tweet us!</p>
                </div>

            </div>

        </div>

    </div>
</div>

<!-- End of Support -->

<!--  Footer -->
<div class="social">
         <div class="row">

             <div class="col-sm-6">
                 <ul>
                     <li><a href="https://www.facebook.com/profile.php?id=100009259751467" title="facebook" target="_blank"><i class="fa fa-facebook"></i></a>
                     </li>
                     <li><a href="https://twitter.com/coldcodr" title="twitter" target="_blank"><i class="fa fa-twitter"></i></a>
                     </li>
                     <li><a href="https://github.com/ColdCodrr" title="github" target="_blank"><i class="fa fa-github"></i></a>
                     </li>
                 </ul>
             </div>

        <div class="col-sm-6">

            <div id="mc_embed_signup">
                <form class="form-inline validate" action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&amp;id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
                    <div class="row no-gutter">
                        <div class="col-sm-9">
                            <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Subscribe to our newsletter" required>
                            <div style="position: absolute; left: -5000px;">
                                <input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe">
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<section class="footer">
    <div class="row">
        <div class="col-sm-3">
            <h4>Pages.</h4>
            <ul>
                <li><a href="https://www.coldcodr.com/login.php/">Login</a>
                </li>
                <li><a href="https://www.coldcodr.com/pages/faq/">FAQ</a>
                </li>
                <li><a href="https://www.coldcodr.com/pricing/">Pricing</a>
                </li>
                <li><a href="https://www.coldcodr.com/pages/how-it-works/">How it Works</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-3">
            <h4>Get Support.</h4>
            <ul>
                <li><a href="https://www.coldcodr.com/contact/">Contact Us</a>
                </li>
                <li><a href="https://www.coldcodr.com/support/tickets/">Submit a Ticket</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-3">
            <h4>Start.</h4>
            <ul>
                <li><a href="https://coldcodr.com/pricing/personal/">Personal Web Design</a>
                </li>
                <li><a href="https://coldcodr.com/pricing/business/">Business Web Design</a>
                </li>
                <li><a href="https://coldcodr.com/pricing/enterprise/">Enterprise Web Design</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-3">
            <h4>Ask.</h4>
            <ul class="questions">
                <li><i class="fa fa-phone"></i> 1+ 713-320-1749</li>
                <li><a href="https://coldcodr.com/contact"><i class="fa fa-envelope"></i> E-MAIL US</a>
                </li>
            </ul>
        </div>
    </div>
</section>
<!--  End of Footer -->

<a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/custom.js"></script>

<script>
/* Home Page Slider

========================================================================== */ $(document).ready(function() {

var sync1 = $("#mainslider");
var sync2 = $("#mainslider-nav");

sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
paginationSpeed: 800,
navigation: false,
pagination:false,
autoPlay:7500,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});

sync2.owlCarousel({
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [979,4],
itemsTablet : [768,4],
itemsMobile : [479,2],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});

function syncPosition(el){
var current = this.currentItem;
$("#mainslider-nav")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#mainslider-nav").data("owlCarousel") !== undefined){
center(current)
}
}

$("#mainslider-nav").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});

function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}

if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}

});

/* Τestimonials ========================================================================== */ $(document).ready(function() { $("#testimonials-carousel").owlCarousel({ items: 1, autoPlay: 5000, itemsDesktop: [1199, 1], itemsDesktopSmall: [979, 1], itemsTablet: [768, 1

    });
});

// ______________ STATS

jQuery(document).ready(function() { $('.statistics').waypoint(function() {

$('#myStat1').circliful(); $('#myStat2').circliful(); $('#myStat3').circliful(); $('#myStat4').circliful();

}, { offset: 800, triggerOnce: true }); });

</script>

</body>

</html>

1 Answer

Just a few tips on making the site faster....

Reduce your (css) href link tags to one href link tag and reduce your href script tags to one href script tag (less hrefs during load time results in less load time). If any of the hrefs are available on an external site, like bootstrap, use the external site's link, rather than loading it from your own. Commonly used external href links, from Bootstrap for example, are likely to be cached in the user's browser and thus will load faster.

Also, on a side note, though perhaps not relevant in your case, make sure unnecessary extensions are turned off in your browser; these could potentially affect the speed of your browser.

I hope this helps