We help IT Professionals succeed at work.

HTML and CSS template

Simon Leung
Simon Leung asked
1 Endorsement
Last Modified: 2019-04-08
Is there any HTML and CSS layout template that I can follow to start building my website ?

Watch Question

Analyst Developer
Distinguished Expert 2018
This one is on us!
(Get your first solution completely free - no credit card required)
Rikin ShahMicrosoft Dynamics CRM Consultant


I think you should go for bootstrap themes-

Why Bootstrap?
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! - https://www.w3schools.com/bootstrap/default.asp



Need to look for a pure HTML and CSS technique only, ... as a base for my course assignment...
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Take a look to https://templatemo.com/ too, most of the templates are Pure HTML/CSS.
Most Valuable Expert 2017
Distinguished Expert 2019

Need to look for a pure HTML and CSS technique only,
Bootstrap is a pure CSS framework.

Your question is not clear.
Here is a basic HTML boilerplate
<!doctype html>
<title>Title of your webpage here</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
body, html {
  height: 100%;
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 100%;
a {
  text-decoration: none;
.container {
  width: 1180px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
nav {
  background: gray;
.main-content {
  flex-grow: 1;
nav {
  display: flex;
  padding-right: 1rem;
  padding-left: 1rem;
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
nav ul li {
  display: inline-block;
nav a {
  color: white;
  padding: 1rem;
  display: block;
nav a:hover {
  background: white;
  color: gray;
nav .nav-fill {
  flex-grow: 1;
.small-text {
  font-size: .75rem;
.text-right {
  text-align: right;
<div class="container">
           <h1>Heading for your page</h1>
              <ul class="nav-fill">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <span class="nav-right">
        <a href="#">Help</a>
   <section class="main-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae semper magna, a interdum sapien. Duis at urna arcu. Sed et neque ultrices, laoreet arcu in, mattis ligula. Mauris efficitur facilisis tellus, sit amet pulvinar nisl tristique et. Pellentesque in auctor sem, at finibus massa. Duis sodales odio et consectetur malesuada. Aenean mollis, risus sit amet mollis viverra, quam felis ultrices ligula, non malesuada urna nibh eget velit. Cras ornare ornare dui vel tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    <p>Aliquam at enim quam. Praesent eu odio ipsum. Ut tristique congue libero vel mattis. Curabitur sem tellus, finibus sed luctus eget, mollis euismod ante. Morbi convallis nibh eget tortor gravida aliquet. Vivamus iaculis urna in augue malesuada, pharetra gravida ante maximus. Fusce pharetra purus enim, vulputate viverra diam maximus ac. Donec malesuada ipsum ut posuere imperdiet. Vestibulum ut ligula dolor. In hac habitasse platea dictumst. Fusce at tempus est. Proin porta commodo ipsum, in lacinia purus egestas at. Duis egestas dolor vel ligula scelerisque consequat. Sed convallis tempus vulputate. Quisque id arcu nec sem vehicula condimentum. Aliquam arcu leo, viverra eu mollis ut, pulvinar eget elit.</p>
    <p>Ut sit amet lorem sapien. Curabitur euismod enim massa, eu scelerisque augue congue eget. In nisl purus, maximus a nisl aliquet, rhoncus viverra risus. Ut porttitor purus in iaculis condimentum. Ut et sagittis nibh. Nam id justo at mi efficitur facilisis. Donec fermentum dolor vitae dui semper molestie.</p>
    <p>Nullam vulputate lacinia finibus. Nam id ornare dui. Proin blandit lobortis tortor vel consequat. Vestibulum vehicula nibh sed purus semper eleifend. Vestibulum libero dolor, faucibus sed nisi in, pulvinar viverra ante. Suspendisse potenti. Nulla at ligula at felis ullamcorper sagittis quis a augue. Aliquam tortor metus, feugiat quis iaculis sed, dictum eget nibh. Maecenas at urna vel eros rhoncus pretium ac a leo. Morbi lectus lacus, congue eu lorem ac, consequat fringilla ligula. Quisque volutpat tellus at turpis scelerisque lacinia. Ut tincidunt lacus sed leo auctor, tincidunt tempor velit egestas. Integer vel tincidunt nunc. In feugiat orci vel elit tempus vestibulum. Nunc eleifend suscipit velit, et varius nunc aliquet a.</p>
    <p>Morbi at elit ut velit porttitor placerat. Maecenas sed sem accumsan, rutrum lorem id, cursus lectus. Cras ullamcorper purus at blandit tempor. Nam commodo vestibulum libero vitae gravida. Mauris sem est, euismod eu dolor ut, tincidunt hendrerit enim. Cras in interdum odio. Nam augue est, pellentesque a justo vel, sagittis facilisis leo. Morbi blandit odio ut feugiat ultrices. Curabitur pretium urna massa, euismod scelerisque augue vestibulum sit amet.</p>
       <p class="small-text text-right">Copyright &copy;2019</p>

Open in new window

You can see it working here
Loganathan NatarajanLAMP Developer

These days , we create templates using "CSS Frameworks" like Bootstrap and its responsive as well.

Are you looking for very basic HTML, CSS way to create Templates?

In that case, You need to go here https://www.experts-exchange.com/questions/29141311/HTML-and-CSS-template.html#a42833663
Robert PerezFront-end Developer

I love using: https://html5up.net/ for HTML5 / CSS3 website templates. These sites have great free templates as long as you give them credit for their work. If you just want to look at the templates to see what has been done where that's a good place to start.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.