Mashruuca Gabagabada

Casharkaan (kii ugu dambeeyay ee koorsada CSS), waxaan isku dhejin doonaa dhammaan waxa aad baratay si aad u dhisto mareeg dhamaystiran oo qurux badan.

Haddafyada Mashruuca

Dhis bog “portfolio” oo shaqsiyeed ah oo muujinaya:

Magacaaga iyo cinwaanka
Qayb “Ku saabsan” (About)
Qayb “Adeegyada” (Services) — 3 karti oo aad leedahay
Qayb “Xiriir” (Contact) — foom fudud
Naqshad responsive ah (moobil + desktop)

HTML-ka (Qaab-dhismeedka)

<!DOCTYPE html>
<html lang="so">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio — Magacaaga</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container header-inner">
            <h1 class="logo">Magacaaga</h1>
            <nav class="nav">
                <a href="#about">Ku saabsan</a>
                <a href="#services">Adeegyada</a>
                <a href="#contact">Xiriir</a>
            </nav>
        </div>
    </header>

    <main>
        <section id="hero" class="hero">
            <div class="container">
                <h2>Ku soo dhawaow</h2>
                <p>Waxaan ahay horumariye mareegaha.</p>
            </div>
        </section>

        <section id="about" class="about">
            <div class="container">
                <h2>Ku saabsan aniga</h2>
                <p>Qoraal kooban oo kugu saabsan...</p>
            </div>
        </section>

        <section id="services" class="services">
            <div class="container">
                <h2>Adeegyada</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <h3>Naqshadda Web</h3>
                        <p>Sharaxaad...</p>
                    </div>
                    <div class="service-card">
                        <h3>Horumarin</h3>
                        <p>Sharaxaad...</p>
                    </div>
                    <div class="service-card">
                        <h3>SEO</h3>
                        <p>Sharaxaad...</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2>Xiriir</h2>
                <form class="contact-form">
                    <input type="text" placeholder="Magacaaga">
                    <input type="email" placeholder="Emaylka">
                    <textarea placeholder="Fariintaada"></textarea>
                    <button type="submit">Soo gudbi</button>
                </form>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2026 Magacaaga. Dhammaan xuquuqaha waa la dhawray.</p>
        </div>
    </footer>
</body>
</html>

CSS-ga (Qurxinta)

/* ── CSS Variables ────────────────────────── */
:root {
    --color-primary: #0a0a0a;
    --color-accent: #00d97e;
    --color-bg: #faf8f4;
    --color-card: #ffffff;
    --color-text: #333333;
    --color-muted: #666666;
    --font-body: 'DM Sans', sans-serif;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --radius: 8px;
    --max-width: 1100px;
}

/* ── Reset iyo Guud ──────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Header ──────────────────────────────── */
.header {
    background: var(--color-primary);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: white;
    font-size: 1.5rem;
}

.nav {
    display: flex;
    gap: 24px;
}

.nav a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.nav a:hover {
    color: var(--color-accent);
}

/* ── Hero ────────────────────────────────── */
.hero {
    padding: 100px 0;
    text-align: center;
    background: var(--color-primary);
    color: white;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

/* ── Sections ───────────────────────────── */
section {
    padding: 80px 0;
}

section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
}

/* ── Services Grid ──────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--color-card);
    padding: 32px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.service-card h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

/* ── Contact Form ───────────────────────── */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 16px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
}

.contact-form button {
    padding: 12px 24px;
    background: var(--color-accent);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.contact-form button:hover {
    opacity: 0.9;
}

/* ── Footer ─────────────────────────────── */
.footer {
    background: var(--color-primary);
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 24px 0;
    font-size: 0.875rem;
}

/* ── Responsive: Tablet ─────────────────── */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h2 {
        font-size: 2rem;
    }

    .nav {
        gap: 16px;
    }
}

/* ── Responsive: Mobile ─────────────────── */
@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .header-inner {
        flex-direction: column;
        gap: 12px;
    }

    .hero {
        padding: 60px 0;
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    section {
        padding: 50px 0;
    }
}

Tallaabooyinka

Abuur laba fayl: index.html iyo style.css.
Koobi ku qor HTML-ka sare gudaha index.html.
Koobi ku qor CSS-ga sare gudaha style.css.
Ku beddel “Magacaaga” magacaaga dhabta ah.
Ku beddel qoraalka qayb kasta sida aad rabto.
Hubi in boggaagu u shaqeeyo moobilka iyo desktop-ka.

Gabagabada Koorsada

Hadda waxaad baratay dhammaan aasaaska CSS-ka:

Hordhaca CSS (saddexda hab)
Xulayaasha (element, class, ID)
Midabada iyo gadaasha
Hanaanka qoraalka iyo farta
Qaabka sanduuqa (Box Model)
Meelaynta walxaha (Positioning)
Flexbox
CSS Grid
Naqshadda isku-beddesha (Responsive Design)
Beddelayaasha CSS (CSS Variables)
Mashruuca gabagabada

Waa maxay tallaabada xigta? Hadda oo aad taqaan HTML iyo CSS, waxaad bilaabi kartaa JavaScript ama koorsooyin kale!

Hambalyo! Koorsadii Aasaaska CSS way dhammaatay. Si wadashada barashadaada!

Haddafyada Mashruuca

HTML-ka (Qaab-dhismeedka)

CSS-ga (Qurxinta)

Tallaabooyinka

Gabagabada Koorsada

Ready to learn something new?

Ready to learn
something new?