How do you build a simple personal webpage with HTML and CSS?

Build a small personal webpage with plain HTML and CSS

For a beginner Dreamweaver assignment, make one normal HTML file, one CSS file, and a small images folder. HTML gives the page structure; CSS controls spacing, color, and layout. MDN’s guides to HTML content and CSS styling are good references for that split.

Example file structure

personal-site/
  index.html
  css/style.css
  images/avatar.jpg

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alex Chen - Personal Page</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main class="page">
    <section class="hero">
      <img src="images/avatar.jpg" width="160" height="160" alt="Portrait placeholder for Alex Chen">
      <div>
        <h1>Alex Chen</h1>
        <p>Front-end beginner learning HTML and CSS.</p>
      </div>
    </section>

    <section>
      <h2>About me</h2>
      <p>I enjoy web design, photography, and simple user interfaces.</p>
    </section>

    <section>
      <h2>Skills</h2>
      <table>
        <tr><th>Skill</th><th>Level</th></tr>
        <tr><td>HTML</td><td>Beginner</td></tr>
        <tr><td>CSS</td><td>Beginner</td></tr>
      </table>
    </section>
  </main>
</body>
</html>

css/style.css

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 Arial, sans-serif;
  color: #1f2937;
  background: #f3f6fb;
}
.page {
  width: min(920px, calc(100% - 32px));
  margin: 32px auto;
  padding: 24px;
  background: white;
  border-radius: 16px;
}
.hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.hero img {
  flex: 0 0 auto;
  max-width: 160px;
  height: auto;
  border-radius: 50%;
}
h1, h2 { margin: 0 0 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #d8dee9; text-align: left; }
@media (max-width: 520px) {
  .page { margin: 16px auto; padding: 16px; }
  .hero { flex-wrap: wrap; }
  .hero img { width: 120px; }
}

Alex Chen and the portrait file are teaching placeholders, not a real customer profile. Replace the name, text, and image with your own materials. Keep the width and height attributes on the image so the browser can reserve space before the image loads.

This example uses one semantic <main> inside the full HTML file and real <h1>/<h2> headings in the code sample. The wrapper width, box-sizing, and mobile wrapping keep the page usable on narrow screens such as 320px phones.