HTML ve CSS'te ödev için yardım

N

Naberdostum

Hectopat
Katılım
25 Mart 2022
Mesajlar
159
Çözümler
1
Daha fazla  
Cinsiyet
Erkek


Hocam gördüğünüz gibi ödev bu. Yardım edebilecek biri var mı? Anlatarak yaparsak çok iyi olur. Yarına kadar. CSS ve HTML kullanılacak. Kullandığım uygulama Visual Studio Code.
 
Kendi yazdığınız kodları atar ve nerelerde takıldığınızı söylerseniz daha iyi olur diye düşünüyorum, ayrıca yazılar çok küçük.
 
Böyle bir şeyi componentlere bölüp yapmak daha kolay olur. Ama bunu yapmak için de React, vue veya Angular bilmeniz gerekir.
 
11. sınıfım. Yazılım geliştirme okuyorum meslek lisesi. CSS ve HTML ile birlikte yapıyoruz bunları.






Şu ana kadar bunları yaptım devamını getireceğim.
 
Logo ve banner için ID kullanın. Nav içine alabilirsiniz.

Sıktı. Şu tarz bir şeyler yaparsınız artık. Her şeyi kafama göre verdim. Anlayan birisi çok daha düzgün ve güzel şekilde yapacaktır.
İç elementler için class falan eklersiniz.
Evet, her şeye flex kullanınca güzel oluyor bence.

Kod: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Okullar</title>
    <link rel="stylesheet" type="text/css" href="okullar.css">
</head>

<body>
    <nav>
        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path></path>
        </svg>
        <img id="banner" src="technopat.webp" alt="Elma">
    </nav>

    <aside>
        <a href="">
            <span>Okullar</span>
        </a>
        <a href="">
            <span>Dersler</span>
        </a>
    </aside>

    <main>
        <div>A okulu</div>
        <div>B okulu</div>
        <div>C okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
        <div>D okulu</div>
    </main>
</body>

</html>
Kod: 
* {
    border: 1px black solid;
   
}

body {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

nav {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px;
    width: 100%;
    height: min-content;
}

aside {
    width: 25%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex: 1;
    padding: 20px;
}

div {
    height: 100px;
    width: 100px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo {
    height: 32px;

    & > path {
        d: path("M174 417c-6 0-12-2-17-7l-110-110c-9-9-9-25 0-34 9-9 25-9 34 0l93 93 257-257c9-9 25-9 34 0 9 9 9 25 0 34l-274 274c-5 5-11 7-17 7z");
    }
}

span {
    font-size: 32pt;
}
 
Son düzenleme:
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…