Essential Tools for Web Development
-
Code Editor: Visual Studio Code
Download from https://code.visualstudio.com
Install these extensions:
-
Live Server (for local development)
-
Prettier (code formatting)
-
Auto Rename Tag (HTML efficiency)
-
Bracket Pair Colorizer (code readability)
-
Web Browser: Chrome Developer Tools
-
Press F12 to open Developer Tools
-
Elements Tab: Inspect HTML and CSS
-
Console Tab: Run JavaScript commands
-
Network Tab: Monitor web requests
-
Version Control: Git
Install Git from https://git-scm.com
Verify installation:
git --version
-
Node.js and npm
Download from https://nodejs.org
Verify installation:
node --version
npm --version
Your First Development Setup
Step 1: Create Your Project Folder
mkdir my-first-website
cd my-first-website
Step 2: Create Your First HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first website!</p>
</body>
</html>
Step 3: Open in Browser
-
Right-click the HTML file and choose “Open with” → your browser
-
Or use the Live Server extension in VS Code
Pro Development Tips
File Organization
my-first-website/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
Naming Conventions
-
Use lowercase with hyphens: my-awesome-page.html
-
Be descriptive: contact-form.html instead of form.html
-
Keep it short: about.html instead of about-our-company-history.html
Project 1: Personal Portfolio Website
Project Overview
Build your first website — a personal portfolio that introduces who you are and what you’re learning.
What You’ll Build
-
A homepage with your name and photo
-
An “About Me” section
-
A “Skills” section highlighting what you’re learning
-
A “Contact” section with your details
Step-by-Step Instructions
Step 1: Project Setup
mkdir portfolio-website
cd portfolio-website
touch index.html
mkdir css js images
touch css/style.css
touch js/script.js
Step 2: HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Web Developer</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Aspiring Web Developer</p>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Write a short paragraph about yourself here.</p>
</section>
<section id="skills">
<h2>Skills I'm Learning</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Email: your.email@example.com</p>
</section>
</main>
</body>
</html>
Step 3: Basic CSS Styling
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
header {
text-align: center;
background-color: #333;
color: white;
padding: 20px;
margin-bottom: 20px;
}
section {
background-color: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f4f4f4;
padding: 10px;
margin: 5px 0;
border-radius: 3px;
}
Project Checklist
-
HTML file created and structured
-
CSS file linked and styled
-
Personal info added
-
Website opens in browser
-
All sections visible and readable
Bonus Challenges
-
Add your profile photo
-
Include social media links
-
Add sections like “Projects” or “Education”
-
Experiment with colors and fonts
-
Make it mobile-friendly
Module 1 Summary
Key Takeaways
-
Web development blends creativity and logic
-
The web runs on client-server communication
-
Setting up your dev tools correctly makes a big difference
-
Your first website marks the start of your coding journey
What’s Next
In Module 2, you’ll explore HTML in detail and learn how to structure web pages like a pro.
Pro Tips for Success
-
Code a little every day
-
Don’t fear mistakes—they teach you
-
Use browser DevTools to experiment
-
Join developer communities
-
Build projects that inspire you
Ready to keep going? Let’s build something awesome.
