html tutorial for beginners
HTML works with tags, which tell the browser how to display content. For example, the <h1> tag creates a main heading, while the <p> tag creates a paragraph.
HTML is usually combined with CSS to add design and JavaScript to add interactivity. Together, these three technologies are used to build modern websites.
Learning HTML is the first step for anyone interested in web development, UI design, or creating their own websites.
Static websites are usually faster, more secure, and easier to host because they do not require a database or server-side processing. They are a great choice for beginners because they help you understand the fundamentals of web design and development.
However, static websites have limitations. Updating content on many pages can be time-consuming, and features like user accounts, real-time updates, or dynamic dashboards require backend technologies.
For beginners, creating static websites is the best way to start learning how websites work and how to turn designs into real web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{
margin:0;
font-family:"Google Sans", sans-serif;
}
.hero{
height:100vh;
display:flex;
align-items:center;
}
.hero-section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: calc(100vh - 50px);
padding-left: 3%;
padding-right: 40px;
box-sizing: border-box;
}
.text-wrapper {
text-align: left;
max-width: 600px;
}
.main-title {
color: #008f39;
font-family: sans-serif;
font-size: 3.5rem;
font-weight: bold;
line-height: 1.1;
margin: 0 0 24px 0;
}
.sub-text {
color: #111111;
font-family: sans-serif;
font-size: 1.1rem;
line-height: 1.5;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
img {
display: block;
margin-left: auto;
margin-right: 12px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1s ease-out forwards;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
button {
padding: 1.3em 3em;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: #fff;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #23c483;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}
button:active {
transform: translateY(-1px);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="hero-section">
<div class="text-wrapper">
<h1 class="main-title">The Future Of<br>Urban Mobility</h1>
<p class="sub-text">
Discover electric bikes built for speed, comfort, and everyday adventures —
designed for a smarter and sustainable future.
</p>
<br>
<button id="learnMoreButton"> Learn More
</button>
<button> Book a Ride
</button>
</div>
<img src="bike.png" alt="Paris" style="width:50%;">
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
background-color: #fff;
margin: 12% auto;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.close-button {
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.close-button:hover {
color: #008f39;
}
</style>
<div id="learnMoreModal" class="modal">
<div class="modal-content">
<span class="close-button" id="closeModal">×</span>
<h2>Learn More</h2>
<p>Explore our electric bikes designed for urban mobility, comfort, and sustainability.</p>
</div>
</div>
<script>
const learnMoreBtn = document.getElementById('learnMoreButton');
const modal = document.getElementById('learnMoreModal');
const closeModal = document.getElementById('closeModal');
learnMoreBtn.addEventListener('click', function() {
modal.style.display = 'block';
});
closeModal.addEventListener('click', function() {
modal.style.display = 'none';
});
window.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});
</script>
</body>
</html>
Static websites are built using basic web technologies like HTML, CSS, and JavaScript. HTML creates the structure of the website, CSS controls the design and appearance, and JavaScript adds simple interactions.
Examples of static websites include:
Personal portfolios
Landing pages
Business websites
Blogs with fixed content
Documentation websites
Limitations of Static Websites
Although static websites are useful, they also have some limitations:
Content updates must be done manually.
Large websites with many pages can become difficult to manage.
Advanced features like user login, payments, and real-time data need backend development.