A Beginner’s Guide to HTML and CSS: Building Your First Web Page

Posted on Updated on by Robert ElliottCategories:Web Development, CSS, HTML, Educational

January 2025 - Building Foundations

1. Introduction

Welcome to the exciting world of web development! HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for building websites. While HTML provides the structure and content, CSS is responsible for the visual appeal and layout. This beginner’s guide will take you through the basics of HTML and CSS and show you how to create your first web page from scratch.

2. Tools You’ll Need

Before diving into code, let’s gather the essential tools:

  • Text Editor: Use a code editor like Visual Studio Code, Sublime Text, or even Notepad++ to write HTML and CSS.
  • Web Browser: Choose a browser like Chrome, Firefox, or Edge to view your web page.
  • Optional: Explore online platforms like CodePen or JSFiddle for experimenting with code.

3. Understanding HTML Basics

HTML Structure

Every HTML document follows a basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>

Essential Tags

  • Headings: Used to define headings of different levels.
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is the lowest heading</h6>
  • Paragraphs: Used to add blocks of text.
<p>This is a paragraph of text.</p>
  • Links: Used to navigate to other pages or websites.
<a href="https://example.com">Visit Example</a>
  • Images: Used to add visual elements.
<img src="image.jpg" alt="Description of the image">
  • Lists: Used to create ordered or unordered lists.
<ul> 
   <li>First item</li> 
   <li>Second item</li> 
</ul>

4. Introduction to CSS

What is CSS?

CSS styles your HTML content, making it visually appealing. It can be added:

  • Inline: Directly within an HTML tag.
  • Internal: Inside a <style> tag in the <head>.
  • External: Linked through a separate file.

CSS Syntax

A CSS rule consists of:

selector {
  property: value;
}

Example:

body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}

Common CSS Properties

  • Text Styling: color, font-size, font-family.
  • Box Model: margin, padding, border.
  • Backgrounds: background-color, background-image.

5. Building Your First Web Page

Follow these steps to create your first web page:

Step 1: Create the HTML Structure

Save the following code in a file named index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is my first attempt at web development!</p>
    <a href="https://example.com">Visit Example</a>
  </body>
</html>

Step 2: Create the CSS File

Save the following code in a file named styles.css:

body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  color: #333;
  text-align: center;
}

h1 {
  color: #00509e;
}

a {
  color: #ff4500;
  text-decoration: none;
}

Step 3: Open in Browser

Open index.html in your web browser to see your web page in action.

6. Testing and Debugging

Testing

  • View your page in multiple browsers to ensure compatibility.
  • Use responsive tools to check how it looks on different screen sizes.

Debugging

  • Right-click on your page and select “Inspect” to use developer tools.
  • Check the console for errors and fix any issues in your code.

7. Where to Go from Here

Recommended Learning Resources

Next Steps

  • Learn JavaScript to add interactivity.
  • Explore responsive design with CSS media queries.
  • Experiment with frameworks like Bootstrap for faster development.

8. Conclusion

Congratulations on building your first web page! This is just the beginning of your journey in web development. With practice and persistence, you’ll be able to create more complex and dynamic websites. Keep learning, experimenting, and creating!

Series Navigation<< Faith in the Digital Age: Balancing Spiritual Life and TechnologyHow to Stay Grounded in Faith Amidst a Busy Tech Career >>

Robert Elliott