HTML and CSS template

Is there any HTML and CSS layout template that I can follow to start building my website ?

Simon LeungAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Hi Simon,

Yes sure, you can google for "free HTML CSS templates" and you'll find a lot of them.

Here are some of the top websites where you'll find a Live preview (demo) option and the Download option :

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:

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! -
Simon LeungAuthor Commented:
Need to look for a pure HTML and CSS technique only, ... as a base for my course assignment...
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Zakaria AcharkiAnalyst DeveloperCommented:
Take a look to too, most of the templates are Pure HTML/CSS.
Julian HansenCommented:
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 DeveloperCommented:
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
Robert PerezFront-end DeveloperCommented:
I love using: 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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.