Crafting an Engaging Homepage
Designing your home page can make or break your success online. Some home pages are filled with too much content or are too difficult to navigate or the design is circa 2001. It’s this balance between the need to present an overview of content and a way to engage your website visitor that ultimately drives much of the frustration in creating an effective homepage.
It’s helpful to think of your homepage as merely a collection of different sections each with a specific content subject. Within these sections, it’s key to have your content highly focused and with accompanying call-to-actions links.
This tutorial provides a modern yet simple homepage design you can make your own. Below is the HTML, CSS, and JavaScript required.
Step 1 — homepage.html
Add the HTML below to your web page
<div class="jumbotron">
<div class="vertical-center">
<div class="jumbotron-tab jumbotron-tab-centered">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<h1 class="newjumbotron">Big Data.</h1>
<h4>The data is there, you just have to mine it.</h4>
<a href="#" class="btn btn-primary top-buffer bottom-buffer">LEARN MORE</a>
</div>
</div>
</div>
</div>
</div><section class="shade-brand">
<div class="container">
<div class="row col-md-10 col-md-offset-1 text-center bottom-pad">
<h1>The WebCorpCo Advantage</h1>
</div>
<div class="row text-center">
<div class="col-sm-3">
<i class="fa fa-database" aria-hidden="true"></i>
<h3>Big Data.<br />Realtime Insight.</h3>
<p>Leverage your data, improve marketing, and increase sales.</p>
</div>
<div class="col-sm-3">
<i class="fa fa-cloud" aria-hidden="true"></i>
<h3>Disrupting<br />Industries</h3>
<p>WebCorpCo is at the forefront of all things digital and web.</p>
</div>
<div class="col-sm-3">
<i class="fa fa-users" aria-hidden="true"></i>
<h3>Moving<br />Business Forward</h3>
<p>Learn how WebCorpCo can take your business to the next level.</p>
</div>
<div class="col-sm-3">
<i class="fa fa-mobile" aria-hidden="true"></i>
<h3>Managing<br />Content</h3>
<p>See the critical factors when choosing a CMS platform.</p>
</div>
</div>
</div>
</section><section id="services-section">
<div class="container">
<div class="row col-md-10 col-md-offset-1 text-center">
<h1>A Suite of Services</h1>
</div>
</div>
<div class="container">
<div class="row bottom-buffer top-buffer">
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-user-circle" aria-hidden="true"></i></div>
<p class="service-title">Marketing</p>
<p class="service-overview">Market to the right person, at the right time, at the place.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-money" aria-hidden="true"></i></div>
<p class="service-title">Sales</p>
<p class="service-overview">Improve sales through the use of Big Data and Analytics.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-paint-brush" aria-hidden="true"></i></div>
<p class="service-title">Design</p>
<p class="service-overview">Benefit from award winning mobile responsive design.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-code" aria-hidden="true"></i></div>
<p class="service-title">Programming</p>
<p class="service-overview">No need to program. WebCorpCo does all of the coding for you.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-life-ring" aria-hidden="true"></i></div>
<p class="service-title">Support</p>
<p class="service-overview"> We offer 24/7 365 global support for all enterprise customers.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-laptop" aria-hidden="true"></i></div>
<p class="service-title">Training</p>
<p class="service-overview">Benefit from webinars and training sessions offered regularly.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-users" aria-hidden="true"></i></div>
<p class="service-title">Network</p>
<p class="service-overview">Companies are looking to do business with other great companies.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
<div class="service-role col-sm-3 col-xs-6">
<div class="icon-container"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
<p class="service-title">Analyze</p>
<p class="service-overview">Get the fundamentals to understanding your data collection.</p>
<p><a href="#" class="btn btn-link">more</a></p>
</div>
</div>
</div>
<div class="top-pad buffer-top">
<a href="#" target="_blank" class="btn btn-border-white">view all services</a>
</div>
</section><section class="shade-brand page-bottom">
<div class="container">
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<h1>Get Started Today</h1>
<div class="row text-center">
<div class="col-sm-5 col-sm-offset-1">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<h3>Watch a demo video.</h3>
<a href="#" class="btn btn-primary bottom-buffer">watch demo</a>
</div>
<div class="col-sm-5">
<i class="fa fa-phone" aria-hidden="true"></i>
<h3>Get a live demo.</h3>
<a href="#" class="btn btn-primary request-demo bottom-buffer">talk to sales</a>
</div>
</div>
</div>
</div>
</div>
</section>
A key concept that is reinforced with the above html is the clear distinction between the different sections. As a visitor scrolls the page, they are presented with more information which all cumulates in an effective call-to-action.
Step 2 — homepage.css
Download the CSS below and include it in your web page
Step 3 — Add the includes below to your web page
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="homepage.css">When building sites, we tend to start with the homepage because it will clearly be the most visible portion of a site. Because of this importance, it’s necessary to give a great deal of thought and planning into the page itself.
In this article, Solodev showed you how to craft a sleek, modern homepage. Customize the homepage with some HTML and CSS, add a Header/Footer, and make it your own!
Originally Posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
