Planning Your First Website
Before you start coding, planning is essential. A well-planned website is easier to build and maintain. Let's walk through building a complete website from scratch using an HTML editor.
Choosing Your Website Type
For your first website, start simple. Good beginner projects include:
- Personal Portfolio - Showcase your work and skills
- Landing Page - Single page promoting a product or service
- Simple Blog - Share your thoughts and articles
- Business Card Site - Digital version of your business card
Step-by-Step: Building a Portfolio Website
Step 1: Create the HTML Structure
Start with a basic layout. Every website needs these sections:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>John Doe - Web Developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Hi, I'm John Doe</h1>
<p>A passionate web developer</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>Your bio goes here...</p>
</section>
</main>
<footer>
<p>© 2026 John Doe</p>
</footer>
</body>
</html>Step 2: Add CSS Styling
Create a new file called "style.css" and add styling:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: white;
padding: 1rem;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 3rem;
}Adding Content to Your Website
Hero Section
The hero section is the first thing visitors see. Make it impactful:
<section class="hero">
<h1>Welcome to My Portfolio</h1>
<p>I create beautiful, functional websites</p>
<a href="#projects" class="cta-button">View My Work</a>
</section>About Section
Tell visitors who you are and what you do:
- Brief introduction (2-3 sentences)
- Your skills and expertise
- What makes you unique
- Call to action (contact link)
Projects Section
Showcase your work with project cards:
<section id="projects">
<h2>My Projects</h2>
<div class="project-grid">
<article class="project-card">
<img src="project1.jpg" alt="Project 1">
<h3>E-commerce Website</h3>
<p>Built with HTML, CSS, and JavaScript</p>
<a href="#">View Project</a>
</article>
</div>
</section>💡 Design Tip
Use a consistent color scheme throughout your site. Pick 2-3 main colors and stick with them. This creates a professional, cohesive look.
Making Your Website Responsive
Ensure your site looks good on all devices:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
.project-grid {
grid-template-columns: 1fr;
}
}Testing Your Website
Before publishing, test thoroughly:
- Check on different screen sizes (desktop, tablet, mobile)
- Test all links to ensure they work
- Verify images load correctly
- Check spelling and grammar
- Test loading speed
Publishing Your Website
Once satisfied, export your project from HCODX and deploy it to:
- GitHub Pages - Free hosting for static sites
- Netlify - Easy deployment with drag-and-drop
- Vercel - Fast deployment with global CDN
- Traditional Hosting - Upload via FTP to your host
Maintaining Your Website
A website is never truly "finished". Keep it fresh by:
- Adding new projects regularly
- Updating your skills section
- Refreshing your bio
- Fixing broken links
- Responding to feedback