Taking your very first step into web development is exciting! The absolute best place to start is with HTML (HyperText Markup Language), because it is the foundational skeleton of every single page on the internet.
You don’t need any expensive software or complex configurations to begin. Let’s write your very first webpage right now.
Step 1: Write Your First Code
Open up a basic text editor on your computer (like Notepad on Windows, TextEdit on Mac, or a free code editor like Visual Studio Code). Paste the following lines of code into it:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first step into web development.</p>
<a href="https://developer.mozilla.org">Learn more on MDN Docs</a>
</body>
</html>
Step 2: Save and View It
-
Save the file with the name
index.html(make sure it doesn’t accidentally save as a.txtfile). -
Double-click the saved file. It will automatically open in your web browser (Chrome, Safari, Edge, or Firefox).
Congratulations! You have just built and rendered your first webpage locally from scratch.
Step 3: Understand What You Just Wrote
Every HTML document uses tags (words wrapped in angle brackets < >) to tell the browser how to display content:
-
<!DOCTYPE html>: Tells the browser this is a modern HTML5 document. -
<html>: The root container that holds all the content on the page. -
<head>: Contains background information (metadata) like the page title that appears on the browser tab. -
<body>: Contains all the visible content—everything users actually see on the screen. -
<h1>: A main heading tag. HTML has heading tags from<h1>(biggest) down to<h6>(smallest). -
<p>: A paragraph tag for standard blocks of text. -
<a href="...">: An anchor tag used to create clickable hyperlinks to other pages.
Your Immediate Next Steps
Now that you’ve dipped your toes in, here is how you should map out your practice over the next few days:
-
Experiment: Change the text inside the
<h1>and<p>tags, save the file, and refresh your browser to see the changes instantly. -
Learn Basic CSS: Once you are comfortable with HTML structure, look into CSS to add colors, change fonts, and design layouts.
-
Use Free Interactive Platforms: Check out beginner-friendly platforms like freeCodeCamp or Scrimba to practice writing code interactively right in your browser.
