Building Your First Website: A HTML/CSS Guide for High Schoolers

Hello Future Web Developers! Your First Website Starts Here

Hey everyone! My name is IbexStem, and I'm a student at Addis Ababa University (AAU). I’m really into tech – coding, gaming, the whole deal. I wanted to write this guide because honestly? I wish someone had explained this to me in high school. I remember being *so* intimidated by the thought of building a website. It seemed like this magical skill only “tech people” possessed! But it’s not, and I'm here to prove it. I started learning web development to build a portfolio for myself when applying for internships, and it's been incredibly empowering. Plus, now I can help my auntie with her small coffee shop's online presence - something she really needed! This post is a beginner-friendly guide using HTML and CSS, geared towards high school students like myself who want to get their feet wet.

What You'll Need: The Basics

Don’t worry, you don’t need expensive software or a super-powerful computer. I built my first few sites on an older laptop! Here's what you really need:

A Text Editor: This is where you’ll write your code. I personally use VS Code (Visual Studio Code) - it's free and has tons of helpful extensions. Notepad++ is also good. Avoid Microsoft Word! It adds hidden formatting that messes things up.
A Web Browser: Chrome, Firefox, Safari… whatever you prefer! You'll use this to view your website.
A little Patience: Things won’t always work the first time. Debugging is part of the process!

HTML: The Structure of Your Website

HTML (HyperText Markup Language) is the foundation of every webpage. It defines the content and its structure. Think of it like the skeleton of a body.

Basic HTML Tags

<html>: The root element of the page. Everything goes inside this.
<head>: Contains meta-information about the HTML document – title, links to CSS, etc. This isn’t *displayed* on the page, but it's important.
<title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
<body>: Contains the visible page content – text, images, videos, etc. This is what people *see*.
<h1> to <h6>: Headings. <h1> is the most important (largest), <h6> the least.
<p>: Paragraphs. For regular text.
<img>: Images. You’ll need the image source (src attribute) and alternative text (alt attribute) for accessibility.
<a>: Links (anchors). Used to link to other webpages or sections within the same page (href attribute).
<ul>, <ol>, <li>: Unordered lists (bullet points), ordered lists (numbered), and list items.

Here’s a simple example:


<html>
<head>
  <title>My First Website!</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
  <img src="my_image.jpg" alt="A cool image">
</body>
</html>

CSS: Styling Your Website

CSS (Cascading Style Sheets) controls the look and feel of your website – colors, fonts, layout, and more. Think of it as the skin and clothing of the body.

Basic CSS Properties

color: Text color. Example: color: blue;
font-family: Font style. Example: font-family: Arial, sans-serif;
font-size: Text size. Example: font-size: 16px;
background-color: Background color. Example: background-color: #f0f0f0;
width: Element width. Example: width: 500px;
height: Element height. Example: height: 200px;

You can apply CSS in three ways:

Inline CSS: Directly within HTML tags (e.g., <p style="color: red;">). Avoid this for larger projects – it’s messy!
Internal CSS: Within a <style> tag in the <head> section of your HTML.
External CSS: In a separate .css file (recommended for bigger projects).

Example (Internal CSS):


<style>
  h1 {
    color: green;
    text-align: center;
  }
  p {
    font-size: 18px;
  }
</style>

My Personal Take: Dealing with Ethiopian Internet Realities

Okay, let's be real. Building a website in Ethiopia comes with its own set of challenges. The internet isn’t always reliable, and data bundles are *expensive*. When I first started, I spent hours trying to load documentation and tutorials, and it was frustrating. What I found really helpful was downloading offline documentation whenever I had access to a stable connection – Libraries like MDN are a lifesaver for this! I also try to use lightweight images and optimize my code to reduce loading times. Every kilobyte counts when you’re on a limited data plan! I actually rely heavily on caching the necessary web pages, even using browser extensions to help with it. It makes a huge difference. Plus, power outages are a thing, so always save your work frequently - and maybe invest in a UPS if you get serious! There's also the issue of getting inspired. Looking at websites built by fellow Ethiopians is really awesome, finding ways to adapt those ideas to your own project is great.

Resources to Get You Started

MDN Web Docs: https://developer.mozilla.org/en-US/ An incredible resource for all things web development.
W3Schools: https://www.w3schools.com/ Another excellent tutorial website.
FreeCodeCamp: https://www.freecodecamp.org/ Interactive coding challenges and projects.

Conclusion: Go Build Something Amazing!

So, there you have it! A basic introduction to HTML and CSS. It might seem like a lot at first, but trust me, it gets easier with practice. Don't be afraid to experiment, make mistakes, and learn from them. As a student, I’ve found that building small projects - like a simple portfolio or a landing page for a school club - is the best way to solidify your understanding. Think of a problem you want to solve or something you're passionate about, and use your new skills to create something cool. We have so much potential here in Ethiopia, and learning web development is a great way to contribute to our growing tech community. Good luck, and happy coding!