HTML & CSS Fundamentals: Building Your First Website

Introduction to Web Development

Welcome to the world of web development! HTML and CSS are the foundation of every website on the internet. In this comprehensive guide, you'll learn how to create your first website from scratch.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of your website.

What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance, colors, fonts, and layout of your HTML elements.

Getting Started

To begin your web development journey, you'll need:

A text editor (VS Code, Sublime Text, or Atom)
A web browser (Chrome, Firefox, or Safari)
Basic understanding of file management

Your First HTML Page

Let's create your first HTML page. Open your text editor and create a new file called `index.html`:

<!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>Welcome to My Website!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Understanding HTML Structure

Every HTML document has a basic structure:

DOCTYPE: Tells the browser which HTML version to use
html: The root element of the page
head: Contains meta information about the page
body: Contains the visible content

Common HTML Elements

Here are the most commonly used HTML elements:

h1-h6: Headings (h1 is the largest)
p: Paragraphs
a: Links
img: Images
div: Container for other elements
span: Inline container

Adding CSS to Your HTML

There are three ways to add CSS to your HTML:

Inline CSS: Style directly in HTML elements
Internal CSS: Style in the <head> section
External CSS: Link to a separate CSS file

Basic CSS Properties

Here are the essential CSS properties every beginner should know:

color: Text color
background-color: Background color
font-size: Text size
font-family: Font type
margin: Space outside elements
padding: Space inside elements

Creating Your First Styled Page

Let's create a simple styled webpage:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first styled HTML page with CSS.</p>
</body>
</html>

Next Steps

Congratulations! You've created your first HTML and CSS page. Here's what to learn next:

More HTML elements and attributes
CSS selectors and specificity
Responsive design with CSS Grid and Flexbox
JavaScript for interactive websites

Conclusion

You've taken your first steps into web development! HTML and CSS are the foundation of web development, and mastering them will set you up for success in your coding journey.

Popular Topics

Stay Updated