Mashruuca Gabagabada — Bogga HTML oo Buuxa

Casharkaan waa kii ugu dambeeyay ee koorska HTML. Waxaan dhisnaa bog HTML oo dhammaystiran — bog shakhsi ah (portfolio/CV) oo leh:

Cinwaanka bogga iyo nav-bar
Qayb “Ku saabsan”
Liiska xirfadaha
Jadwalka khibradda
Foom xiriirka
Footer

Isticmaal dhammaan waxa aad baratay 19-ka cashar ee hore.

Qaab-dhismeedka Mashruuca

portfolio/
├── index.html        ← bogga ugu weyn
├── qaabka.css        ← qurxinta
└── sawirrada/
    └── profile.jpg   ← sawirkaaga

Tallaabo 1 — Qaab-dhismeedka Aasaasiga

Fur VS Code ama Notepad, samee file cusub index.html:

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Bogga Shakhsiyeed — Axmed Faarax, Injineerka Software">
  <title>Axmed Faarax — Portfolio</title>

  <style>
    /* ── Dib u habaynta aasaasiga ── */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f9f7f4;
      color: #1a1a1a;
      line-height: 1.7;
    }

    a { color: #00a860; text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ── Nav ── */
    nav {
      background: #0a0a0a;
      padding: 14px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav .magaca-nav {
      color: #00d97e;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 24px;
    }

    nav ul a {
      color: #aaa;
      font-size: 0.9rem;
      font-weight: 500;
    }

    nav ul a:hover { color: #fff; text-decoration: none; }

    /* ── Qayb kasta ── */
    section {
      max-width: 860px;
      margin: 0 auto;
      padding: 60px 20px;
    }

    section h2 {
      font-size: 1.6rem;
      font-weight: 700;
      color: #0a0a0a;
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    .xariiq-xidid {
      width: 40px;
      height: 3px;
      background: #00d97e;
      border-radius: 2px;
      margin-bottom: 28px;
    }

    /* ── Hero ── */
    #hero {
      background: #0a0a0a;
      max-width: 100%;
      padding: 80px 20px;
      text-align: center;
      color: white;
    }

    #hero .weelka {
      max-width: 700px;
      margin: 0 auto;
    }

    #hero img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid #00d97e;
      object-fit: cover;
      margin-bottom: 20px;
    }

    #hero h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 8px;
    }

    #hero .xirfada {
      color: #00d97e;
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 16px;
    }

    #hero p {
      color: #777;
      font-size: 1rem;
      max-width: 500px;
      margin: 0 auto 28px;
    }

    .badhanka {
      display: inline-block;
      padding: 12px 28px;
      background: #00d97e;
      color: #0a0a0a;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 0.95rem;
      transition: background 0.2s;
    }

    .badhanka:hover { background: #00f090; text-decoration: none; }

    .badhanka-labaad {
      display: inline-block;
      padding: 12px 28px;
      border: 1.5px solid rgba(255,255,255,0.2);
      color: #aaa;
      border-radius: 9999px;
      font-weight: 600;
      font-size: 0.95rem;
      margin-left: 12px;
      transition: border-color 0.2s, color 0.2s;
    }

    .badhanka-labaad:hover {
      border-color: white;
      color: white;
      text-decoration: none;
    }

    /* ── Ku saabsan ── */
    #ku-saabsan { background: #f9f7f4; }

    .nuxurka-labo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }

    @media (max-width: 600px) {
      .nuxurka-labo { grid-template-columns: 1fr; }
    }

    .warqad-faahfaahin {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .warqad-faahfaahin .xog-line {
      display: flex;
      gap: 12px;
      font-size: 0.9rem;
    }

    .xog-line span:first-child {
      font-weight: 700;
      color: #555;
      min-width: 90px;
    }

    /* ── Xirfadaha ── */
    #xirfadaha { background: #f0fdf8; }

    .xirfadaha-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
    }

    .xirfada-kaadhka {
      background: white;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px;
      padding: 18px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .xirfada-kaadhka:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .xirfada-kaadhka .summad { font-size: 2rem; margin-bottom: 8px; }
    .xirfada-kaadhka h3 { font-size: 0.95rem; color: #0a0a0a; margin-bottom: 4px; }
    .xirfada-kaadhka p  { font-size: 0.8rem; color: #999; }

    /* Xadka Xirfada */
    .xad-xirfada {
      height: 6px;
      background: #eee;
      border-radius: 99px;
      margin-top: 8px;
      overflow: hidden;
    }

    .xad-xirfada div {
      height: 100%;
      background: #00d97e;
      border-radius: 99px;
    }

    /* ── Khibradda ── */
    #khibradda { background: #f9f7f4; }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    thead { background: #0a0a0a; color: white; }

    th, td {
      padding: 14px 16px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    tbody tr:nth-child(even) { background: #fafafa; }
    tbody tr:hover { background: rgba(0,217,126,0.05); }

    .calaamad {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 99px;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .calaamad-cagaar { background: rgba(0,217,126,0.12); color: #00a860; }
    .calaamad-jaalle { background: rgba(249,115,22,0.12); color: #c05c0a; }

    /* ── Xiriir ── */
    #xiriir { background: #0a0a0a; max-width: 100%; padding: 80px 20px; }
    #xiriir .weelka { max-width: 600px; margin: 0 auto; }
    #xiriir h2 { color: white; text-align: center; }
    #xiriir .xariiq-xidid { margin: 6px auto 32px; }

    .foom-xiriir {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .foom-xiriir input,
    .foom-xiriir textarea {
      width: 100%;
      padding: 14px;
      background: rgba(255,255,255,0.07);
      border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      color: white;
      font-size: 0.95rem;
      font-family: inherit;
    }

    .foom-xiriir input::placeholder,
    .foom-xiriir textarea::placeholder { color: #555; }

    .foom-xiriir input:focus,
    .foom-xiriir textarea:focus {
      border-color: #00d97e;
      outline: none;
    }

    .badhan-gudbi {
      padding: 14px;
      background: #00d97e;
      color: #0a0a0a;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }

    .badhan-gudbi:hover { background: #00f090; }

    /* ── Footer ── */
    footer {
      background: #0a0a0a;
      border-top: 1px solid rgba(255,255,255,0.06);
      text-align: center;
      padding: 24px;
      color: #444;
      font-size: 0.85rem;
    }

    footer span { color: #00d97e; }
  </style>
</head>
<body>

  <!-- ══════════════════════════════════════════
       NAV
  ══════════════════════════════════════════ -->
  <nav>
    <span class="magaca-nav">Axmed Faarax</span>
    <ul>
      <li><a href="#ku-saabsan">Ku saabsan</a></li>
      <li><a href="#xirfadaha">Xirfadaha</a></li>
      <li><a href="#khibradda">Khibradda</a></li>
      <li><a href="#xiriir">Xiriir</a></li>
    </ul>
  </nav>

  <!-- ══════════════════════════════════════════
       HERO
  ══════════════════════════════════════════ -->
  <div id="hero">
    <div class="weelka">
      <img src="sawirrada/profile.jpg" alt="Sawirka Axmed Faarax">
      <h1>Axmed Faarax</h1>
      <p class="xirfada">Injineerka Software &amp; Macallin HTML</p>
      <p>
        Waxaan dhisaa websiteyada qurxoon oo faa'iido leh. Waxaan bartay
        HTML, CSS, iyo JavaScript isticmaalaya <a href="https://ereyle.com"
        style="color:#00d97e;">Ereyle</a>.
      </p>
      <a href="#xiriir" class="badhanka">Nala Xiriir</a>
      <a href="#khibradda" class="badhanka-labaad">Arag Khibraddayda</a>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
       KU SAABSAN
  ══════════════════════════════════════════ -->
  <section id="ku-saabsan">
    <h2>Ku saabsan</h2>
    <div class="xariiq-xidid"></div>

    <div class="nuxurka-labo">
      <div>
        <p>
          Waxaan ahay <strong>injineer software</strong> ku nool Muqdisho, Soomaaliya.
          Khibraddayda waxay dhaafaysaa <strong>5 sano</strong> oo dhismaha websiteyda
          iyo app-yada mobile-ka ah.
        </p>
        <br>
        <p>
          Hadafkaygu waa in aan <strong>aqoonta teknoolajiyada</strong> u fududeeyo
          dhalinyarada Soomaalida — Af-Soomaali ah, bilaash ah, si buuxda oo online ah.
        </p>
      </div>

      <div class="warqad-faahfaahin">
        <div class="xog-line">
          <span>Magaca:</span>
          <span>Axmed Faarax Xasan</span>
        </div>
        <div class="xog-line">
          <span>Da'da:</span>
          <span>28 sano</span>
        </div>
        <div class="xog-line">
          <span>Magaalada:</span>
          <span>Muqdisho, Soomaaliya</span>
        </div>
        <div class="xog-line">
          <span>Luqadaha:</span>
          <span>Soomaali, Ingiriisi, Carabi</span>
        </div>
        <div class="xog-line">
          <span>Email:</span>
          <span><a href="mailto:axmed@example.com">axmed@example.com</a></span>
        </div>
        <div class="xog-line">
          <span>Helitaanka:</span>
          <span>
            <span class="calaamad calaamad-cagaar">Shaqo diyaar</span>
          </span>
        </div>
      </div>
    </div>
  </section>

  <!-- ══════════════════════════════════════════
       XIRFADAHA
  ══════════════════════════════════════════ -->
  <section id="xirfadaha">
    <h2>Xirfadaha Farsamada</h2>
    <div class="xariiq-xidid"></div>

    <div class="xirfadaha-grid">

      <div class="xirfada-kaadhka">
        <div class="summad">🌐</div>
        <h3>HTML5</h3>
        <p>Semantic, Accessibility</p>
        <div class="xad-xirfada"><div style="width:95%"></div></div>
      </div>

      <div class="xirfada-kaadhka">
        <div class="summad">🎨</div>
        <h3>CSS3</h3>
        <p>Flexbox, Grid, Animation</p>
        <div class="xad-xirfada"><div style="width:90%"></div></div>
      </div>

      <div class="xirfada-kaadhka">
        <div class="summad">⚡</div>
        <h3>JavaScript</h3>
        <p>ES6+, DOM, Fetch API</p>
        <div class="xad-xirfada"><div style="width:80%"></div></div>
      </div>

      <div class="xirfada-kaadhka">
        <div class="summad">⚛️</div>
        <h3>React</h3>
        <p>Hooks, Components</p>
        <div class="xad-xirfada"><div style="width:70%"></div></div>
      </div>

      <div class="xirfada-kaadhka">
        <div class="summad">🗄️</div>
        <h3>SQL</h3>
        <p>MySQL, PostgreSQL</p>
        <div class="xad-xirfada"><div style="width:75%"></div></div>
      </div>

      <div class="xirfada-kaadhka">
        <div class="summad">🔧</div>
        <h3>Git &amp; GitHub</h3>
        <p>Version Control, CI/CD</p>
        <div class="xad-xirfada"><div style="width:85%"></div></div>
      </div>

    </div>
  </section>

  <!-- ══════════════════════════════════════════
       KHIBRADDA — JADWAL
  ══════════════════════════════════════════ -->
  <section id="khibradda">
    <h2>Khibraddayda Shaqada</h2>
    <div class="xariiq-xidid"></div>

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Shirkadda</th>
          <th>Xilka</th>
          <th>Waqtiga</th>
          <th>Magaalada</th>
          <th>Heerka</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td><strong>Ereyle Learning</strong></td>
          <td>Macallin Sare &amp; Qore</td>
          <td>2023 – Hadda</td>
          <td>Muqdisho</td>
          <td><span class="calaamad calaamad-cagaar">Hadda</span></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Hormuud Telecom</td>
          <td>Injineerka Web</td>
          <td>2021 – 2023</td>
          <td>Muqdisho</td>
          <td><span class="calaamad calaamad-jaalle">Dhammaatay</span></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Dahabshiil Group</td>
          <td>Horumariyaha Frontend</td>
          <td>2019 – 2021</td>
          <td>Hargeysa</td>
          <td><span class="calaamad calaamad-jaalle">Dhammaatay</span></td>
        </tr>
        <tr>
          <td>4</td>
          <td>Freelance</td>
          <td>Naqshadeeye Websiteyda</td>
          <td>2017 – 2019</td>
          <td>Online</td>
          <td><span class="calaamad calaamad-jaalle">Dhammaatay</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"><strong>Wadarta Khibradda</strong></td>
          <td colspan="3"><strong>8+ sano</strong></td>
        </tr>
      </tfoot>
    </table>

    <!-- Liiska Waxbarashada -->
    <br>
    <h3 style="margin-bottom:16px;">Waxbarashadeyda</h3>
    <ol style="padding-left:20px; display:flex; flex-direction:column; gap:8px;">
      <li>
        <strong>BSc Computer Science</strong> — Jaamacadda Muqdisho (2013–2017)
      </li>
      <li>
        <strong>Full-Stack Web Development</strong> — Udemy Online (2018)
      </li>
      <li>
        <strong>React &amp; Node.js</strong> — Coursera / Meta (2021)
      </li>
    </ol>
  </section>

  <!-- ══════════════════════════════════════════
       FOOM XIRIIRKA
  ══════════════════════════════════════════ -->
  <div id="xiriir">
    <div class="weelka">
      <h2>Nala Xiriir</h2>
      <div class="xariiq-xidid"></div>

      <form class="foom-xiriir" onsubmit="gudbiFoom(event)">
        <input
          type="text"
          name="magac"
          placeholder="Magacaaga"
          required
          minlength="2"
        >
        <input
          type="email"
          name="email"
          placeholder="Email-kaaga"
          required
        >
        <input
          type="text"
          name="mawduuca"
          placeholder="Mawduuca farriin-ta"
          required
        >
        <textarea
          name="farriin"
          rows="5"
          placeholder="Farriintaada halkan ku qor..."
          required
          minlength="10"
        ></textarea>
        <button type="submit" class="badhan-gudbi">
          Soo Dir Farriinta →
        </button>
      </form>

      <p id="gudbinta-xaaladda" style="display:none; text-align:center; margin-top:20px;
         color:#00d97e; font-weight:600;">
        ✓ Farriintaada waa la helay! Waanu kuu soo jawaabi doonaa.
      </p>
    </div>
  </div>

  <!-- ══════════════════════════════════════════
       FOOTER
  ══════════════════════════════════════════ -->
  <footer>
    <p>
      &copy; 2025 Axmed Faarax — Waxaa lagu dhisay
      <span>HTML</span>, <span>CSS</span>
      &amp; aqoon laga bartay <a href="https://ereyle.com"
      style="color:#00d97e;">Ereyle Learning</a>
    </p>
  </footer>

  <!-- ══════════════════════════════════════════
       JAVASCRIPT
  ══════════════════════════════════════════ -->
  <script>
    // Foom xiriirka — muuji fariin guusha
    function gudbiFoom(event) {
      event.preventDefault();
      const foomka   = event.target;
      const xaaladda = document.getElementById('gudbinta-xaaladda');
      foomka.style.display   = 'none';
      xaaladda.style.display = 'block';
    }

    // Nav link-yada firfircoon
    const navLinks = document.querySelectorAll('nav ul a');
    const qaybaha  = document.querySelectorAll('section, #xiriir');

    window.addEventListener('scroll', () => {
      let hadda = '';
      qaybaha.forEach(qayb => {
        if (window.scrollY >= qayb.offsetTop - 80) {
          hadda = qayb.id;
        }
      });
      navLinks.forEach(link => {
        link.style.color = link.getAttribute('href') === '#' + hadda
          ? '#00d97e'
          : '#aaa';
      });
    });
  </script>

</body>
</html>

Tallaabooyinka Marka Xigta

Waxaad haysaa bog HTML oo dhammaystiran. Hadda:

1. Bedel Macluumaadkaaga

Ku baddal Axmed Faarax magacaaga
Ku dar sawirkaaga sawirrada/profile.jpg
Wax ka baddel xirfadaha iyo khibraddada

2. Ku Dar Koorska CSS-ka

Koorska HTML waa dhammaatay — billow CSS Basics si aad xiriirrada, muuqaallada, iyo naqshadeynta qoto-dheer u barato.

3. Sharee Online

Furaha bilaashka ah ee online-ka:

Netlify Drop — app.netlify.com/drop — jiid folder-kaaga
GitHub Pages — sharee GitHub markiiba
Vercel — vercel.com

Waxa Aad Baratay Koorskaan Oo Dhan

Tani waa liiska dhammaan waxa aad baratay 20-ka cashar:

#	Casharka	Waxa La Bartay
1	Waa Maxay HTML	Tags, browser, structure
2	Bogga Koowaad	DOCTYPE, html, head, body
3	Qoraalka & Cinwaannada	h1–h6, p, br, hr, pre
4	Liisaska	ol, ul, dl, li
5	Xiriirrada & Foomamka	a, form, input, select
6	Sawirrada & Warbaahinta	img, video, audio
7	Jadwalka Xogta	table, tr, th, td
8	Foomamka	input types, textarea
9	HTML5 Semantic	header, nav, main, article, footer
10	Hab-dhaqanka Fiican	Accessibility, SEO, validation
11	Xiriirrada Horumarsan	href types, target, mailto
12	Sawirrada Horumarsan	src, alt, responsive, formats
13	Muuqaallada & Maqallada	video, audio, iframe, source
14	Sifooyinka	id, class, style, data-*, boolean
15	Faallada & Astaamaha	comments, < > &
16	Div & Span	block vs inline, layout
17	Meta Tags	charset, viewport, SEO, OG
18	Foomamka Horumarsan	validation, fieldset, datalist
19	Jadwallada Horumarsan	colspan, rowspan, thead/tbody/tfoot
20	Mashruuca Gabagabada	Bog dhammaystiran

Talooyin Raadinta Mustaqbalka

Buugga la taaban karo: MDN Web Docs — warqad tixraaca ugu fiican
Tijaabi online: CodePen.io — ku tijaabi koodka browser-ka
Xiriirka W3Schools: w3schools.com/html — casharro dheeraad ah
Koorska xigta: CSS Basics — billow maanta Ereyle

Hambalyo! Waxaad dhammaystirtay koorska Aasaaska HTML. Hadda waxaad awood u leedahay inaad dhisto bog HTML oo xeel-dheer. Koorska xigta waa CSS — billow maanta! 🎉