HTML and CSS template

Simon Leung
Simon Leung used Ask the Experts™
on
Is there any HTML and CSS layout template that I can follow to start building my website ?

Thx.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Developer
Distinguished Expert 2018
Commented:
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 :

https://www.free-css.com/free-css-templates
https://templated.co/
https://www.tooplate.com/
Rikin ShahMicrosoft Dynamics CRM Consultant

Commented:
Hi,

I think you should go for bootstrap themes-
https://bootstrapmade.com/

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

https://www.w3schools.com/bootstrap/bootstrap_templates.asp

Author

Commented:
Need to look for a pure HTML and CSS technique only, ... as a base for my course assignment...
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

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

Commented:
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>
<html>
<head>
<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" />
<style>
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;
}
</style>
</head>
<body>
<div class="container">
   <header>
           <h1>Heading for your page</h1>
           <nav>
              <ul class="nav-fill">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
              </ul>
        <span class="nav-right">
        <a href="#">Help</a>
        </span>
           </nav>
   </header>
   <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>
   </section>
   <footer>
       <p class="small-text text-right">Copyright &copy;2019</p>
   </footer>
</div>
</body>
</html>

Open in new window

You can see it working here
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

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial