• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

css i html - Czy ktos mogby sprawdzic moj projekt i dac mi wskazowki jak byc lepszym.

Aruba Cloud - Virtual Private Server VPS
0 głosów
190 wizyt
pytanie zadane 22 listopada 2021 w HTML i CSS przez castor_fiber Użytkownik (800 p.)
edycja 22 listopada 2021 przez castor_fiber

Witam, od jakiego czasu ucze sie html i css. Czy ktos z ogarniaczy moglby zerknac na moje wypociny i podpowiedzec mi co robie zle, co wymaga poprawy, a w czym jestem ok? Chcialbym byc lepszy w tym co robie dlatego potrzebuje kogos kto powie mi co wymaga pracy.

Projekt dal mi za zadanie odtworzyc layout strony:

 https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png

+ info o fontach i kolorach :

https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/colors_and_stuff.png

Strona nie miala byc konfigurowana pod urzadzenia mobilne.

Nie otrzymalem konkretnych wartosci paddingow i marginesow.

Poniej moj kod:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PROJECT-LANDING-PAGE</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
    <div class="logo">Header Logo</div>
    <div class="linki">
    <ul>
        <li><a href="google.com">header link one</a></li>
        <li><a href="google.com">header link two</a></li>
        <li><a href="google.com">header link three</a></li>
    </ul>
    </div>
</div>
<div class="a">
    <div class="alewa">
        <div class="awesome">This wbesite is awesome</div>
        <div class="this">This website has some subtext that goes here under the main title. It's a smaller font and the colour is lower contrast</div>
        <button class="p1">Sign up</button>
    </div>
    <div class="aprawa">
        <img src="https://images.pexels.com/photos/8971225/pexels-photo-8971225.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" width="460px" height="100%" alt="orange wall">
    </div>
</div>
<div class="b">
    <div class="bnaglowek">Some random information.</div>
    <div class="breszta">
        <div class="oir">
            <img src="https://images.pexels.com/photos/9597452/pexels-photo-9597452.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"  alt="leaf">
            <div class="opis">this is subtext under ilustration or image</div>
        </div>
        <div class="oir">
            <img src="https://images.pexels.com/photos/10205573/pexels-photo-10205573.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="kwiatki">
            <div class="opis">this is subtext under ilustration or image</div>
        </div>
        <div class="oir">
            <img src="https://images.pexels.com/photos/10023690/pexels-photo-10023690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="leafs">
            <div class="opis">this is subtext under ilustration or image</div>
        </div>
        <div class="oir">
            <img src="https://images.pexels.com/photos/9677208/pexels-photo-9677208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="chamomile">
            <div class="opis">this is subtext under ilustration or image</div>
        </div>
    </div>
</div>
<div class="c">
    <div class="maksyma">Jeśli wytniesz z siebie wszystko po kolei to któregoś dnia osiągniesz wolność absolutną, staniesz się niczym huragan El Nino, absolutnie wolny, absolutnie nieosiągalny, absolutnie nieprzewidywalny. . . - ale przestaniesz być człowiekiem.</div>
    <div class="autor">- Zentsu</div>
</div>
<div class="d">
    <div class="d0">
    <p class="d1">Call to action! It's time!</p>
    <p class="d2">Sign up for this product by clicking that button right over there!</p>
    </div>
    <button class="p2">Sign up</button>
</div>
<div class="footer">
    Copyright © Maciej Dabrowski 2021
</div>
</body>
</html>

 

CSS:

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.header {
    display: flex;
    background-color: #1f2937;
    justify-content: space-between;
    padding: 20px 190px 150px 190px;
}

.logo {
    font-size: 24px;
    color: #F9FAF8;
    font-weight: bold;
}

ul {
    list-style-type: none;
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;

}

a  {
    text-decoration: none;
    font-size: 18px;
    color: #e5e7eb;
}

.a {
    background-color: #1f2937;
    display: flex;
    padding: 0 190px;
   justify-content: center;
    gap: 80px;
    padding-bottom: 150px;

}

.alewa {
    width: 460px;
    height: auto;
}



.awesome {
    font-size: 48px;
    font-weight: bolder;
    color: #F9FAF8;
}
.this {
    font-size: 18px;
    color: #e5e7eb
}

.p1 {
    background-color: #3882f6;
    color: #e5e7eb;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 10px;
    border-style: none;
}

.b {
    text-align: center;
}

.oir {
    max-width: 130px;
   }

.oir img {
    width: 130px;
    height: 130px;
    border-style: solid;
    border-top-color: #3882f6;
    border-bottom-color: #3882f6;
    border-left-color: #3882f6;
    border-right-color: #3882f6;
    border-radius: 10px;
    margin-bottom: 6px;
}

.bnaglowek {
    margin: 30px 0;
    font-size: 36px;
    font-weight: bolder;
    color: #1f2937;
}

.breszta {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 70px;
}

.c {
    background-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 70px 190px;
}

.maksyma {
    font-size: 36px;
    font-style: italic;
    font-weight: lighter;
    color: #1f2937;
    margin-bottom: 20px;
}
.autor {
    display: flex;
    color: #1f2937;
    justify-content: end;
    font-size: larger;
    font-weight: bold;
}

.d {
display: flex;
background-color: #3882f6;
margin: 90px 370px;
padding: 20px 50px;
align-content: center;
justify-content: space-between;
}

.d1 {
    font-size: 20px;
    color: #F9FAF8;
    font-weight: bold;
    margin: 0px;
}

.d2 {
    margin: 2px 0 0 0;
    font-size: 14px;
    color: #F9FAF8;
}
.p2 {
background-color: #3882f6;
border: 2px solid #F9FAF8;
padding: 5px 30px;
border-radius: 10px;
color: #F9FAF8;
}

.footer {
    background-color: #1f2937;
    padding: 30px 0;
    text-align: center;
    color: #F9FAF8;
}

 

Z gory dziekuje za uwagi i poswiecony czas.

1 odpowiedź

+2 głosów
odpowiedź 22 listopada 2021 przez Comandeer Guru (606,550 p.)

Na pewno warto popracować nad wykorzystaniem elementów HTML. Obecnie wykorzystujesz na dobrą sprawę głównie divy, a jest o wiele więcej znaczników, np. .maksyma z podpisem mogłaby być jako figure > blockqoute. Zdecydowaną większość divów w projekcie można zastąpić innymi elementami.

Warto też popracować nad nazewnictwem, np. .a nie mówi absolutnie nic o tym, do czego taki element służy.

komentarz 22 listopada 2021 przez castor_fiber Użytkownik (800 p.)
Czesc, dzieki za odpowiedz zapomnialem dodac, ze projekt jest podsumowaniem rozdzialu flex-boxa. Na obecnym etapie nauki operuje jedynie divami paragrafami i listami nie poznalem jeszcze bardziej zaawansowanych elementow html. Postaram sie lepiej nazywac clasy - teraz chcialem poprostu skonczyc projekt wiec robilem go pod siebie ale rozumiem co masz na mysli i bede trzymal sie praktyk cleancode.

Podobne pytania

0 głosów
2 odpowiedzi 265 wizyt
pytanie zadane 10 października 2015 w C i C++ przez gab123 Mądrala (5,230 p.)
0 głosów
0 odpowiedzi 256 wizyt
+4 głosów
1 odpowiedź 348 wizyt
pytanie zadane 6 czerwca 2018 w Nasze projekty przez Zuber Nowicjusz (230 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...