HTML / Эцсийн төсөл

Эцсийн төсөл — Personal Portfolio

HTML курсын эцсийн төсөлд personal portfolio хуудас бүтээнэ. Энэ нь таны CV-г орлох, ажил горилоход үзүүлэх вэб хуудас юм. Курсын туршид сурсан бүх зүйлийг нэгтгэн ашиглана.

Юу бүтээх вэ?

Нэг файл (index.html) дотор дараах хэсгүүдтэй portfolio хуудас:

Header / Nav — нэр, навигаци холбоос
Hero — товч танилцуулга
Ур чадвар — жагсаалт
Төслүүд — хүснэгт эсвэл картууд
Холбоо барих form
Footer

Файлын бүтэц

код

portfolio/
├── index.html
├── style.css       ← CSS курс дуусгасны дараа дүүргэнэ
└── images/
    └── avatar.jpg

Бүрэн HTML бүтэц

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Болд Баатар — веб хөгжүүлэгч. HTML, CSS, JavaScript." />

    <!-- Open Graph — сошиал медиад хуваалцахад -->
    <meta property="og:title" content="Болд Баатар — Веб хөгжүүлэгч" />
    <meta property="og:description" content="Монголын веб хөгжүүлэгч." />
    <meta property="og:type" content="website" />

    <link rel="stylesheet" href="style.css" />
    <title>Болд Баатар — Веб хөгжүүлэгч</title>
  </head>

  <body>
    <!-- ===== HEADER ===== -->
    <header>
      <nav aria-label="Үндсэн навигаци">
        <a href="#" class="logo">Болд.dev</a>
        <ul>
          <li><a href="#about">Тухай</a></li>
          <li><a href="#skills">Ур чадвар</a></li>
          <li><a href="#projects">Төслүүд</a></li>
          <li><a href="#contact">Холбоо</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <!-- ===== HERO ===== -->
      <section id="about" aria-labelledby="hero-heading">
        <figure>
          <img
            src="images/avatar.jpg"
            alt="Болд Баатарын гэрэл зураг"
            width="150"
            height="150"
          />
        </figure>
        <h1 id="hero-heading">Сайн уу, би Болд!</h1>
        <p>
          Монголын веб хөгжүүлэгч. HTML, CSS, JavaScript-ийг ашиглан
          хэрэглэгчдэд таатай вэб хуудас бүтээдэг.
        </p>
        <a href="#contact">Холбоо барих &darr;</a>
      </section>

      <!-- ===== УР ЧАДВАР ===== -->
      <section id="skills" aria-labelledby="skills-heading">
        <h2 id="skills-heading">Ур чадвар</h2>

        <h3>Фронтэнд</h3>
        <ul>
          <li>HTML5 — Semantic markup, accessibility</li>
          <li>CSS3 — Flexbox, Grid, animation</li>
          <li>JavaScript — DOM, fetch, async/await</li>
        </ul>

        <h3>Хэрэгслүүд</h3>
        <ul>
          <li>Git — Хувилбар удирдлага</li>
          <li>VS Code — Хөгжүүлэлтийн орчин</li>
          <li>Figma — Дизайн харах</li>
        </ul>
      </section>

      <!-- ===== ТӨСЛҮҮД ===== -->
      <section id="projects" aria-labelledby="projects-heading">
        <h2 id="projects-heading">Төслүүд</h2>

        <table>
          <caption>Хийсэн төслүүдийн жагсаалт</caption>
          <thead>
            <tr>
              <th scope="col">Нэр</th>
              <th scope="col">Технологи</th>
              <th scope="col">Холбоос</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ulaanbaatar.app</td>
              <td>Next.js, TypeScript, Supabase</td>
              <td><a href="https://ulaanbaatar.app" target="_blank" rel="noopener">Үзэх &nearr;</a></td>
            </tr>
            <tr>
              <td>Цаг агаар апп</td>
              <td>HTML, CSS, JavaScript, OpenWeather API</td>
              <td><a href="https://github.com/bold/weather" target="_blank" rel="noopener">GitHub &nearr;</a></td>
            </tr>
            <tr>
              <td>Монгол тоолуур</td>
              <td>HTML, CSS, JavaScript</td>
              <td><a href="https://bold.dev/counter" target="_blank" rel="noopener">Үзэх &nearr;</a></td>
            </tr>
          </tbody>
        </table>
      </section>

      <!-- ===== ХОЛБОО БАРИХ FORM ===== -->
      <section id="contact" aria-labelledby="contact-heading">
        <h2 id="contact-heading">Холбоо барих</h2>

        <form action="/send" method="POST" novalidate>
          <fieldset>
            <legend>Мессеж илгээх</legend>

            <div>
              <label for="name">Нэр</label>
              <input
                type="text"
                id="name"
                name="name"
                placeholder="Таны нэр"
                required
                minlength="2"
                autocomplete="name"
              />
            </div>

            <div>
              <label for="email">И-мэйл</label>
              <input
                type="email"
                id="email"
                name="email"
                placeholder="example@mail.com"
                required
                autocomplete="email"
              />
            </div>

            <div>
              <label for="subject">Сэдэв</label>
              <select id="subject" name="subject">
                <option value="">-- Сонгоно уу --</option>
                <option value="job">Ажлын санал</option>
                <option value="collab">Хамтын ажиллагаа</option>
                <option value="other">Бусад</option>
              </select>
            </div>

            <div>
              <label for="message">Мессеж</label>
              <textarea
                id="message"
                name="message"
                rows="5"
                placeholder="Таны мессеж..."
                required
                minlength="10"
              ></textarea>
            </div>

            <button type="submit">Илгээх</button>
          </fieldset>
        </form>
      </section>
    </main>

    <!-- ===== FOOTER ===== -->
    <footer>
      <p>
        &copy; 2024 Болд Баатар &mdash;
        <a href="mailto:bold@example.com">bold@example.com</a>
      </p>
      <nav aria-label="Сошиал холбоос">
        <a href="https://github.com/bold" target="_blank" rel="noopener">GitHub</a>
        <a href="https://linkedin.com/in/bold" target="_blank" rel="noopener">LinkedIn</a>
      </nav>
    </footer>

    <script defer src="main.js"></script>
  </body>
</html>

Шалгах жагсаалт

Төслөө дуусгахын өмнө дараах зүйлсийг шалга:

[ ] <!DOCTYPE html> байгаа
[ ] lang="mn" тохируулсан
[ ] meta charset ба viewport байгаа
[ ] meta description бичигдсэн
[ ] Зураг бүрт alt байгаа
[ ] h1 нэг л удаа хэрэглэгдсэн
[ ] Heading шатлал зөв (h1 → h2 → h3)
[ ] Form-д label ба input холбогдсон (for/id)
[ ] Гадна холбоост rel="noopener" байгаа
[ ] Semantic tag ашигласан (header, nav, main, section, footer)
[ ] HTML validator-аар шалгасан (validator.w3.org)

Цааш хөгжүүлэх

Portfolio-гоо дараах байдлаар сайжруул:

CSS курс дуусгаад стиль нэм
JavaScript-ээр form validation хий
GitHub Pages-д үнэгүй байрлуул (github.com/username/username.github.io)
Google Search Console-д бүртгүүл

Та HTML курсыг амжилттай дуусгалаа! Одоо CSS курс руу шилжиж portfolio хуудсаа гоёмсог болго.

← Өмнөх хичээлHTML шилдэг туршлага