HTML & CSS for Beginners | Your First Steps in Web Development

· 14분 읽기 · 수정 Beginner Tutorial
HTML & CSS for Beginners | Your First Steps in Web Development

이 글의 핵심

Hands-on HTML/CSS intro: environment setup, page structure, CSS basics, and a small portfolio example.

Introduction

What are HTML and CSS?

HTML (HyperText Markup Language) defines the structure of a web page. CSS (Cascading Style Sheets) defines its appearance.

HTML = framing (structure)
CSS = interior design (style)
JavaScript = wiring (behavior)

Highlights:

  • HTML: headings, paragraphs, images, links, and other content structure
  • CSS: colors, sizing, layout, animation, and presentation
  • Browsers: Chrome, Firefox, Safari, and others run your pages
  • Simplicity: markup and style—not a general-purpose programming language

1. Development environment

Install VS Code

  1. Download from the official VS Code site
  2. Recommended extensions:
    • Live Server: live reload in the browser
    • HTML CSS Support: better completions
    • Prettier: consistent formatting

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 web page</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Document structure: <!DOCTYPE html> tells the browser this is an HTML5 document. lang="en" helps search engines, accessibility (screen readers), and font selection. meta charset avoids mojibake; viewport sets the baseline for mobile layout.

How to open it:

  1. Save as index.html
  2. Double-click or open in a browser
  3. Or use Live Server from VS Code

2. Basic HTML structure

Required pieces

<!DOCTYPE html>          <!-- HTML5 doctype -->
<html lang="en">         <!-- language -->
<head>
    <!-- metadata -->
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <!-- visible content -->
</body>
</html>

Separation of roles: head holds settings and metadata you do not see on the page; body is what users see. Stylesheets (link rel="stylesheet") and scripts usually go at the end of head or before </body> to control load order.

Common tags

<!-- Headings -->
<h1>Largest heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>

<!-- Paragraph -->
<p>Paragraph text.</p>

<!-- Link -->
<a href="https://example.com">Link text</a>

<!-- Image -->
<img src="image.jpg" alt="Description of the image">

<!-- List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Horizontal rule -->
<hr>

<!-- Line break -->
<br>

3. CSS basics

Ways to add CSS

Option 1: inline styles

<p style="color: red; font-size: 20px;">Red text</p>

Option 2: internal stylesheet

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

Option 3: external stylesheet (recommended)

<!-- index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
/* style.css */
p {
    color: green;
    font-size: 16px;
}

Basic CSS syntax

selector {
    property: value;
    property: value;
}

Example:

/* Tag selector */
h1 {
    color: navy;
    font-size: 32px;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* ID selector */
#header {
    background-color: #333;
    color: white;
}

4. Build a simple page

Project layout

my-website/
├── index.html
├── style.css
└── images/
    └── logo.png

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 portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jane Doe</h1>
        <p>Web developer</p>
    </header>

    <main>
        <section id="about">
            <h2>About</h2>
            <p>Hi! I am Jane, learning web development.</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Email: [email protected]</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Jane Doe. All rights reserved.</p>
    </footer>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    margin-bottom: 2rem;
}

h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

ul {
    list-style-position: inside;
}

li {
    margin: 0.5rem 0;
}

footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

5. Practical examples

Example 1: Business card page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Business card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }

        .card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 400px;
        }

        .card h1 {
            color: #333;
            margin-bottom: 0.5rem;
        }

        .card p {
            color: #666;
            margin: 0.5rem 0;
        }

        .card .email {
            color: #667eea;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Jane Doe</h1>
        <p>Frontend developer</p>
        <p class="email">[email protected]</p>
        <p>Seoul, South Korea</p>
    </div>
</body>
</html>

Example 2: Simple blog post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog post</title>
    <style>
        body {
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            font-family: system-ui, sans-serif;
            line-height: 1.8;
        }

        article {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .meta {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }

        p {
            margin-bottom: 1rem;
        }

        .highlight {
            background-color: #fff3cd;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <article>
        <h1>Getting started with HTML and CSS</h1>
        <div class="meta">March 29, 2026 | Jane Doe</div>
        
        <p>
            <span class="highlight">HTML</span> and 
            <span class="highlight">CSS</span> are the foundation of the web.
        </p>
        
        <p>
            Structure with HTML, style with CSS, and you can ship attractive static pages.
        </p>
        
        <p>
            Mastering these two is enough for many static sites.
        </p>
    </article>
</body>
</html>

6. Developer tools

Chrome DevTools

Open: F12 or Ctrl+Shift+I (Mac: Cmd+Option+I)

Useful panels:

  • Elements: inspect and tweak HTML/CSS live
  • Console: run JavaScript snippets
  • Network: inspect requests
  • Sources: debug scripts

Workflow:

  1. Right-click an element → Inspect
  2. Edit styles in the Elements panel
  3. Click color values to open the color picker

Summary

Takeaways

  1. HTML: structure (tags)
  2. CSS: presentation (rules)
  3. Environment: VS Code + a browser
  4. Skeleton: <!DOCTYPE html> → <html> → <head> + <body>
  5. CSS placement: inline, internal, or external (prefer external)

Next steps

  • HTML basics: tags
  • CSS selectors and properties
  • Layout fundamentals
  • HTML/CSS series overview
  • HTML basics | text, links, images, lists
  • CSS basics | selectors, properties, color, fonts
  • CSS box model | margin, padding, border