🌐 HTML & CSS

Jifunze kuunda websites kuanzia mwanzo. HTML ni mifupa, CSS ni ngozi na mavazi. Course hii inakufundisha zote mbili.

English / Kiswahili • Beginner to Intermediate • Text + Code Examples

📋 Yaliyomo — Table of Contents

  1. Internet na Webpages — Mtandao na Kurasa za Tovuti
  2. HTML Basics — Muundo wa Msingi
  3. Text Elements — Vipengele vya Maandishi
  4. Links na Images — Viungo na Picha
  5. Lists na Tables — Orodha na Majedwali
  6. Forms na Input — Fomu na Mapokezi ya Data
  7. CSS Basics — Mtindo na Rangi
  8. Box Model na Layout — Sanduku na Mpangilio
  9. Flexbox — Mpangilio Nyumbufu
  10. CSS Grid — Gridi ya CSS
  11. Responsive Design — Tovuti Inayojirekebisha
  12. CSS Transitions na Animations
  13. Project: Personal Portfolio Page

1. Internet na Webpages

Mtandao na Kurasa za Tovuti

🇹🇿 Kiswahili: Internet ni mtandao wa kompyuta zote duniani. Web page ni hati inayoonyeshwa kwenye browser kama Chrome au Safari. HTML (HyperText Markup Language) ndiyo lugha inayotumiwa kuunda web pages. CSS (Cascading Style Sheets) inapamba na kupanga HTML.

🇬🇧 English: The internet is a global network of computers. A web page is a document displayed in a browser. HTML is the language used to create web pages, and CSS styles them.

💡 Analogia: HTML ni mifupa ya mtu, CSS ni ngozi, nguo na mapambo. JavaScript (tutajifunza baadaye) ni misuli — inafanya mambo kusogea.

2. HTML Basics — Muundo wa Msingi

Kila webpage inahitaji mfumo huu

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <title>Ukurasa Wangu</title>
</head>
<body>
    <h1>Habari Dunia!</h1>
    <p>Huu ndio ukurasa wangu wa kwanza.</p>
</body>
</html>

3. Text Elements — Vipengele vya Maandishi

Headers, paragraphs, formatting

<h1>Kichwa Kikubwa</h1>
<h2>Kichwa cha Pili</h2>
<h3>Kichwa cha Tatu</h3>
<p>Hii ni aya ya maandishi. Inaweza kuwa na maneno mengi.</p>
<p><strong>Maandishi mazito</strong> na <em>maandishi ya italiki</em>.</p>
<br> <!-- Mstari mpya (line break) -->
<hr> <!-- Mstari wa kugawanya (horizontal rule) -->
💡 Note: h1 hadi h6 ni vichwa. h1 ndio kikubwa zaidi. Tumia <h1> mara moja tu kwa kila ukurasa (SEO).

4. Links na Images — Viungo na Picha

Kuunganisha kurasa na kuonyesha picha

Links / Viungo

<!-- Link kwa ukurasa mwingine -->
<a href="https://google.com">Nenda Google</a>

<!-- Link kwa ukurasa wako mwenyewe -->
<a href="about.html">Kuhusu Sisi</a>

<!-- Link kwa email -->
<a href="mailto:shbnsemeni@gmail.com">Tuma Email</a>

<!-- Link kwa simu -->
<a href="tel:+255782341709">Piga Simu</a>

<!-- Link kwa sehemu ya ukurasa -->
<a href="#sehemu">Nenda Sehemu</a>

Images / Picha

<img src="picha.jpg" alt="Maelezo ya picha" width="300">

<!-- Picha kutoka mtandaoni -->
<img src="https://example.com/picha.jpg" alt="Picha online" loading="lazy">

<!-- Figure na caption -->
<figure>
    <img src="banner.jpg" alt="Banner">
    <figcaption>Hii ni banner yetu</figcaption>
</figure>
⚡ Tip: alt ni maelezo kwa ajili ya screen readers (upatikanaji) na search engines. Weka daima!

5. Lists na Tables — Orodha na Majedwali

Kupanga data kwa mpangilio

Orodha Zisizo na Mpangilio (Unordered List)

<ul>
    <li>Maziwa</li>
    <li>Mkate</li>
    <li>Sukari</li>
</ul>

Orodha Iliyopangwa (Ordered List)

<ol>
    <li>Amka</li>
    <li>Oga</li>
    <li>Kula</li>
</ol>

Jedwali (Table)

<table>
    <thead>
        <tr>
            <th>Jina</th>
            <th>Umri</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Juma</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

6. Forms na Input — Fomu na Mapokezi ya Data

Kukusanya taarifa kutoka kwa wageni wako

<form action="thank-you.html" method="POST">
    <label for="jina">Jina lako:</label>
    <input type="text" id="jina" name="jina" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="ujumbe">Ujumbe:</label>
    <textarea id="ujumbe" rows="4"></textarea>

    <button type="submit">Tuma</button>
</form>
💡 Input types muhimu: text, email, password, number, tel, url, file, checkbox, radio, date, color.

7. CSS Basics — Mtindo na Rangi

Kupamba HTML yako

🇹🇿 Kiswahili: CSS inaweza kuwekwa kwa njia tatu: inline (ndani ya element), internal (ndani ya <style> kwenye head), au external (faili tofauti .css).

<!-- External CSS (njia bora) -->
<link rel="stylesheet" href="styles.css">

CSS Syntax

h1 {
    color: #D97706;
    font-size: 36px;
    text-align: center;
}

p {
    color: #4B5563;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.special {
    background-color: #FFFBEB;
    padding: 16px;
    border-radius: 8px;
}

#header {
    background: linear-gradient(135deg, #D97706, #F59E0B);
    padding: 40px;
}
⚡ Tip: Rangi unaweza kutumia: jina (red), hex (#FF5733), rgb (rgb(255, 87, 51)), au hsl (hsl(9, 100%, 60%)).

8. Box Model na Layout

Sanduku na Mpangilio

Kila element kwenye HTML ni sanduku. CSS Box Model ina sehemu 4:

.sanduku {
    width: 300px;
    padding: 20px;        /* Nafasi ndani */
    border: 2px solid #D97706;
    margin: 16px;         /* Nafasi nje */
    border-radius: 12px;  /* Pembe za mviringo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
💡 Note: box-sizing: border-box; inafanya padding na border zihesabiwe kwenye upana wa jumla. Tumia daima!

9. Flexbox — Mpangilio Nyumbufu

Panga vitu kwenye mstari au safu kwa urahisi

.container {
    display: flex;
    justify-content: space-between;  /* space-around, center, flex-start, flex-end */
    align-items: center;             /* flex-start, flex-end, stretch */
    gap: 16px;                       /* nafasi kati ya vitu */
    flex-wrap: wrap;                 /* kuruhusu vitu kuvunjika mstari */
}

.item {
    flex: 1;                         /* kila item inachukua nafasi sawa */
    min-width: 250px;
    padding: 20px;
    background: #FFFBEB;
    border-radius: 12px;
}
Kitu 1
Kitu 2
Kitu 3
⚡ Tip: Flexbox ni bora kwa layout za mwelekeo mmoja (safu au mstari). Kwa grid tata, tumia CSS Grid.

10. CSS Grid — Gridi ya CSS

Mpangilio wa safu na nguzo

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* nguzo 3 za ukubwa sawa */
    gap: 20px;
}

.grid-item {
    background: #FFFBEB;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
}

/* Responsive grid */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
💡 Note: 1fr ni sehemu moja ya nafasi iliyobaki. repeat(3, 1fr) ni sawa na 1fr 1fr 1fr.

11. Responsive Design — Tovuti Inayojirekebisha

Tengeneza tovuti inayoonekana vizuri kwa simu, kompyuta, na kila kifaa

🇹🇿 Kiswahili: Responsive design inamaanisha tovuti yako inajirekebisha kulingana na ukubwa wa skrini ya mtumiaji.

Media Queries

/ * CSS kwa simu za mkononi * /
@media (max-width: 768px) {
    .nav-links {
        display: none;  /* Ficha navigation kwenye simu */
    }

    .grid {
        grid-template-columns: 1fr;  /* Grid ya safu moja kwenye simu */
    }

    body {
        font-size: 14px;
    }
}

/ * CSS kwa skrini kubwa * /
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

Mobile-First Approach

/ * Andika kwanza kwa simu, kisha ongeza kwa skrini kubwa * /
.mtindo {
    font-size: 14px;
}

@media (min-width: 768px) {
    .mtindo {
        font-size: 16px;  /* Skrini kubwa zaidi */
    }
}
⚡ Tip: Tumia relative units (em, rem, %, vw, vh) badala ya pixels kwa font size na spacing inayobadilika.

12. CSS Transitions na Animations

Ongeza uhai kwenye tovuti yako

Transitions

.kitufe {
    background: #F59E0B;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;  /* Badiliko la laini */
}

.kitufe:hover {
    background: #D97706;
    transform: scale(1.05);  /* Kitufe kinakua kidogo */
}

Keyframe Animations

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animated {
    animation: bounce 1s infinite;
}
💡 Note: transition ni kwa mabadiliko rahisi (hover, focus). animation ni kwa miondoko changamano inayojiendesha.

13. Project: Personal Portfolio Page

Tengeneza portfolio yako mwenyewe

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Yangu</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #1F2937; background: #F9FAFB; }
        .container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
        nav { background: #1F2937; color: #fff; padding: 16px 0; }
        nav .container { display: flex; justify-content: space-between; align-items: center; }
        nav a { color: #fff; text-decoration: none; margin-left: 16px; }
        .hero { padding: 80px 0; text-align: center; }
        .hero h1 { font-size: 48px; color: #D97706; }
        .skills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .skills span { background: #FFFBEB; padding: 8px 16px; border-radius: 50px; font-size: 14px; }
        .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 40px 0; }
        .card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        footer { background: #1F2937; color: #fff; text-align: center; padding: 24px 0; margin-top: 40px; }
        @media (max-width: 768px) {
            nav .container { flex-direction: column; gap: 8px; }
            .hero h1 { font-size: 32px; }
        }
    </style>
</head>
<body>
    <nav>
        <div class="container">
            <strong>Juma</strong>
            <div>
                <a href="#">Home</a>
                <a href="#">Projects</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </nav>

    <section class="hero">
        <div class="container">
            <h1>Habari, mimi ni Juma!</h1>
            <p>Ni web developer kutoka Tanzania. Ninaunda websites nzuri na zinazofanya kazi.</p>
            <div class="skills">
                <span>HTML</span>
                <span>CSS</span>
                <span>JavaScript</span>
                <span>Python</span>
            </div>
        </div>
    </section>

    <section class="container">
        <h2>Miradi Yangu</h2>
        <div class="projects">
            <div class="card">
                <h3>Project 1</h3>
                <p>Maelezo ya project yako ya kwanza.</p>
            </div>
            <div class="card">
                <h3>Project 2</h3>
                <p>Maelezo ya project yako ya pili.</p>
            </div>
            <div class="card">
                <h3>Project 3</h3>
                <p>Maelezo ya project yako ya tatu.</p>
            </div>
        </div>
    </section>

    <footer>
        <p>© 2026 Juma. Haki zote zimehifadhiwa.</p>
    </footer>
</body>
</html>
⚡ Next Steps: Jaribu kubadilisha rangi, font, mpangilio. Ongeza picha zako. Kisha endelea kwenye JavaScript course kuongeza interactivity!
← Back to All Courses