If you’ve ever wanted to build your own website from scratch, you’re in the right place. HTML, CSS, and JavaScript are the three core technologies that power the web. In this guide, we’ll walk you through the basics of each, and show you how to organize a local folder for your project.
What Are HTML, CSS, and JavaScript?
Before we dive into folder structure, let’s break down the trio:
• HTML (HyperText Markup Language): The skeleton of your webpage. It defines the structure—headings, paragraphs, images, links, etc.
• CSS (Cascading Style Sheets): The stylist. CSS controls how your HTML looks—colors, fonts, layout, spacing.
• JavaScript: The brain. JavaScript adds interactivity—click events, animations, form validation, and more.
Setting Up Your Local Folder
You don’t need fancy tools to start coding. Just create a folder on your computer and add your files. Here’s a simple structure:
my-website/
│
├── index.html
├── about.html
├── flowers.html
├── images/
│ └── logo.png
You can name your folder anything you like. Inside it, you’ll place your .html files and any assets like images.
Since you’re not using separate .css or .js files, you’ll write your styles and scripts directly inside your HTML files.
Writing Your First HTML Page
Here’s a basic index.html file with embedded CSS and JavaScript:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My First Website</title>
<!– Embedded CSS –>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 50px;
}
h1 {
color: #333;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
How to View Your Page
1. Open your folder.
2. Double-click on index.html.
3. Your default browser will open and display your page.
That’s it! You’re officially coding.
Adding More Pages
You can create additional HTML files like about.html or flowers.html and link them together:
<a href="about.html">About</a>
<a href="flowers.html">Flowers</a>Each page can have its own embedded <style> and <script> sections, or you can copy and paste from index.html.
