Developing websites requires knowledge & adequate practice with HTML, CSS and so on. HTML is fun & easy to learn but designing responsive websites (web pages that adapt to different screen resolutions automatically) can take a lot of time, without 3rd party libraries/frameworks. In addition if you need animation effects, you have to learn CSS & JavaScript.
If you prefer to design responsive websites quickly and learn as you go, then you can explore using existing HTML templates developed using the popular bootstrap framework. Here is a list of websites that offer free HTML templates (some of them offer paid templates in addition):
- https://startbootstrap.com/themes
- https://bootstrapmade.com
- https://www.creative-tim.com/bootstrap-themes/free
- https://bootswatch.com
- https://colorlib.com/wp/cat/bootstrap/
- https://bootstraptaste.com
- https://templatemo.com
- https://adminlte.io
- https://onepagelove.com
- https://bootstrapious.com/free-templates
- https://themewagon.com/theme-price/free/
- https://cssauthor.com/free-bootstrap-5-templates/
- https://freehtml5.co
- https://roventhemes.com/categories/html-templates/
- https://uideck.com/bootstrap-5-templates/
- https://graygrids.com/bootstrap-5-templates/
- https://mdbootstrap.com/freebies/
- https://hasthemes.com/free-bootstrap-templates/
- https://www.free-css.com/template-categories/bootstrap
- https://html5up.net
- https://themehunt.com
- https://adminkit.io
- https://www.gridtemplate.com
- https://www.templatemonster.com/free-bootstrap-themes/
- https://beefree.io/templates/
- https://bootstrap24.com/bootstrap-templates
- https://uideck.com/free-bootstrap-templates/
- https://themefisher.com/free-bootstrap-templates/
- https://w3layouts.com/free-responsive-html5-css3-website-templates/
- https://learning-zone.github.io/website-templates/
- https://github.com/website-templates
- https://github.com/kyokidG/html-templates
- https://github.com/toidicode/template
Step 1: Download a template
Step 2: Use a text editor like Notepad or Notepad++
Step 3: Customize images & text
Step 4: Preview and fix errors
Step 5: Publish
You can use the following free editors:
HTML Editors
- https://atom.io
https://notepad-plus-plus.org
https://www.kite.com
https://netbeans.apache.org
https://brackets.io
https://bluefish.openoffice.nl/index.html
Image Editors
- https://www.gimp.org
http://www.photoscape.org
https://inkscape.org
https://getpaint.net
https://www.fotor.com
https://pixlr.com
https://www.canva.com/en_in/photo-editor/
Video Editors
- Windows 10 Video Editor (available on computers with Microsoft Windows 10)
- https://www.openshot.org
https://camstudio.org
https://shotcut.org
https://www.synfig.org
If you prefer to build responsive websites from scratch, you can explore the following online tools:
- https://bootstrap.build/
https://themestr.app/
https://pikock.github.io/bootstrap-magic/
https://www.canva.com
https://designmodo.com
https://bootstrapshuffle.com
https://useaxentix.com
https://pikock.github.io/bootstrap-magic/app
https://bootsnipp.com/builder
https://templatetoaster.com/bootstrap-builder
Example
Here is a simple under construction page:
Step 1: Copy and paste the file in a text editor like notepad, save it as “index.html” (take care of the extension, it should be .htm or .html and NOT .txt).
In this example, we have used the bootstrap 4 framework. We will post more examples soon.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap 4 HTML Template Example</title>
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”Ziksate-1024px-by-1024px-Logo.png”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<!– Google fonts –>
<link href=’https://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’>
<!– Font Awesome –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css” rel=”stylesheet” >
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css” rel=”stylesheet” >
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/solid.min.css” rel=”stylesheet” >
</head>
<body>
<div class=”container-fluid bgimg d-flex”>
<div class=”row justify-content-center align-self-center”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-12″ style=”padding: 15px;”>
<img src=”Ziksate-180px-by-60px-Logo.png” alt=””>
<div class=”text-white” style=”letter-spacing: 3px; padding: 30px;”>
<span class=”fas fa-envelope socialmediafooter”></span>[email protected]<br>
<span class=”fab fa-whatsapp socialmediafooter”></span>+001 000 000 0000<br>
<span class=”fas fa-mobile socialmediafooter”></span>+001 000 000 0000<br>
<span class=”fas fa-fax socialmediafooter”></span>+001 000 000 0000
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Copy and paste the file in a text editor like notepad, save it as “style.css” (take care of the extension, it should be .css and NOT .txt).
/*Set font family & font size*/
body
{
font-family: Roboto;
font-size: .8em;
letter-spacing: 3px;
}
.bgimg
{
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(“background.jpg”);
min-height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
Step 3: Save this image, to the same folder (.html, .css & .jpg must be in the same folder for this example to work).

That’s all folks! Please use your own logo.