Develop websites using HTML

Leave a Comment / Learn / By

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):

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

Image Editors

Video Editors

If you prefer to build responsive websites from scratch, you can explore the following online tools:

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>hi@example.org<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.

Leave a Comment

Shopping Cart