Personal project using html css javascript

 

Mashruuca: Web Page Personal Profile

Ujeeddo: Abuuri bog internet oo shakhsiyeed oo muujinaya macluumaadkaaga iyo sawirkaaga, oo leh qaab dhismeed sahlan iyo isdhexgal fudud.

Personal project using html css javascript
Personal project using html css javascript

File: index.html

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Profile</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Magacaaga</h1>
        <p>Halkan waxaad ku qori kartaa dulmar kooban oo ku saabsan naftaada.</p>
    </header>
    
    <section class="profile">
        <img src="profile.jpg" alt="Sawirkaaga" class="profile-img">
        <h2>Macluumaadkaaga</h2>
        <p><strong>Magaca:</strong> Magacaaga</p>
        <p><strong>Da'da:</strong> Da'daada</p>
        <p><strong>Shaqada:</strong> Shaqadaada</p>
    </section>

    <footer>
        <p>&copy; 2024 Magacaaga. Dhamaan xuquuqda way xafidan tahay.</p>
    </footer>
</body>
</html>

2. CSS - Qurxinta Bogga

File: styles.css

css

/* Style guud */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

/* Style header */
header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
}

header h1 {
    margin: 0;
}

/* Style profile section */
.profile {
    background-color: white;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
    text-align: center;
}

.profile-img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

/* Style footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

3. JavaScript - Is-dhexgalka Fudud

File: script.js

javascript

// Tani waa koodh fudud oo JavaScript ah si loo muujiyo fariin marka bogga la furayo
window.onload = function() {
    alert("Kusoo dhawoow boggaaga shakhsiyeed!");
}

Hagitaan:

  1. Abuur faylasha: Samee saddex fayl: index.html, styles.css, iyo script.js.

  2. Ku qor koodhka faylasha: Ku dheji koodhka kor ku xusan faylasha ku habboon.

  3. Sawirka: Ku dar sawirkaaga profile.jpg galkaaga mashruuca si aad u aragto sawirkaaga bogga.

  4. Fur bogga: Ka fur faylka index.html biraawsarkaaga si aad u aragto boggaaga shakhsiyeed oo leh qaabeynta iyo is-dhexgalka fudud.

Gunaanad:

Mashruucani waa mid fudud oo bilowga ah, laakiin wuxuu kuu ogolaanayaa inaad barato aasaaska HTML, CSS, iyo JavaScript. Waxaad ku tababaran kartaa abuurista bogga shakhsiyeed oo leh qaabeynta asaasiga ah iyo fariimo is-dhexgal ah. Marka aad fahamto koodhkan, waxaad awoodi doontaa inaad ku darto astaamo cusub iyo qaabeyn dheeraad ah si aad u horumariso xirfadahaaga web development.

Tags
Previous Post Next Post