Academy challenge #1

[ctarx]

HTML and CSS only.

[IamMK]

Na początek - nie podoba mi się stylowanie po znaczniku. Używaj klas:

header {
    position: absolute;
    width: 320px;
    height: 50px;
    top: 176px;
    left: 0px;
}

Tak praktycznie cały plik wygląda, co nie jest dobre

[IamMK]

header {
    position: absolute;
    width: 320px;
    height: 50px;
    top: 176px;
    left: 0px;
}

@media (min-width: 768px) {
    header {
        position: absolute;
        width: 768px;
        height: 100px;
        top: 34.96%;
        bottom: 55.27%;
    }
}

header h1 {
    position: absolute;
    top: 0%;
    left: 0%;
    font-weight: 300;
    line-height: normal;
    font-size: 30px;
    width: 100%;
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    mix-blend-mode: normal;
}

@media (min-width: 768px) {
    header h1 {
        position: absolute;
        top: 0%;
        left: 0%;
        padding-top: 50px;
        font-size: 60px;
    }
}

Dwa razy ten sam media querie jest potrzebny?

[ctarx]

Na początek - nie podoba mi się stylowanie po znaczniku. Używaj klas:
Tak praktycznie cały plik wygląda, co nie jest dobre

Mógłbym zastosować klasę dla każdego znacznika, ale uznałem że w projekcie, w którym dany element występuje tylko raz, to będzie to przerost formy nad treścią. W większych projektach jasna sprawa.

[ctarx]

Dwa razy ten sam media querie jest potrzebny?

Tutaj trochę nie rozumiem, bo nie widzę żeby wartości były te same. Chodzi o powtórzenia w position: absolute oraz left:0 i right:0?

[IamMK]

Dwa razy ten sam media querie jest potrzebny?

Tutaj trochę nie rozumiem, bo nie widzę żeby wartości były te same. Chodzi o powtórzenia w position: absolute oraz left:0 i right:0?

Chodzi o powtórzenia kilka razy media query dla danej rozdzielczości

[ctarx]

No tak, bo po każdym elemencie który źle wygląda w danej rozdzielczości zmieniam jego wartości. Tak jest mi łatwiej odnaleźć się w kodzie. Jakie są obowiązujące praktyki?