Psd to html code Code Review

pytanie zadane 8 stycznia 2019 w HTML i CSS przez Stoprocent Użytkownik (930 p.)

Witam, proszę o pomoc w znalezieniu największych baboli w kodzie, pominąć fakt pustych altów w zdjęciach i kodu js . ps. (cały kod mojego autorstwa również z js, bez wklejek zaznaczam że to moja druga strona w całości i celem było sprawdzenie co potrafię po zamknięciu przysłowiowych tutków i co mogę zrobić sam, mam za sobą 5 msc codziennej przygody z kodem wiec nie jestem jeszcze obyty[ nie wiem dlaczego z-index mi nie chciał zadziałać na header aby nie było widac jak zmienia pozycje lista z linkami])

Live

kod

1 odpowiedź

odpowiedź 8 stycznia 2019 przez imklau Nałogowiec (42,090 p.)
wybrane 8 stycznia 2019 przez Stoprocent

Najlepsza

```
<button class="btn btn-primary"><a href="#portfolio">Viev Portfolio</a></button>
```
Dlaczego tak to zagnieździłeś? Sam link wystarczy, możesz mu nadać klasy te do przycisku przecież :)

<h2 class="section-heading">Professional Services</h2>
<h3 class="subheading">Proin iaculis purus consequat cure.</h3>

Ten subheading jest zwykłym tekstem, użyj tutaj znacznika <p>

<div class="services-points section-padding-big">
                <div class="services-points-box">
                    <img src="./img/heart.png" alt="heart icon">
                    <h4>beautiful designs</h4>
                    <p class="small-text">Proin iaculis purus consequat sem cure
                        digni ssim. Donec porttitora entum suscipit
                        aenean rhoncus posuere odio in tincidunt.</p>
                </div>
                <div class="services-points-box">
                    <img src="./img/mobile.png" alt="heart icon">
                    <h4>responsive web</h4>
                    <p class="small-text">Proin iaculis purus consequat sem cure
                        digni ssim. Donec porttitora entum suscipit
                        aenean rhoncus posuere odio in tincidunt.</p>
                </div>
                <div class="services-points-box">
                    <img src="./img/graph.png" alt="heart icon">
                    <h4>marketing tools</h4>
                    <p class="small-text">Proin iaculis purus consequat sem cure
                        digni ssim. Donec porttitora entum suscipit
                        aenean rhoncus posuere odio in tincidunt.</p>
                </div>
</div>

Wrzuciłabym to w listę + jako że wcześniej powinieneś usunąć <h3> to właśnie tutaj wypadałoby tego użyć zamiast <h4>

<div class="portfolio-project-list">
                    <div class="portfolio-project-list-item">
                        <h5>E-Commerce Ready</h5>
                        <p class="medium-text">Proin iaculis purus consequat sem cure digni ssim.</p>
                    </div>
                    <div class="portfolio-project-list-item">
                        <h5>Powerful SEO Features</h5>
                        <p class="medium-text">Proin iaculis purus consequat sem cure.</p>
                    </div>
                    <div class="portfolio-project-list-item">
                        <h5>Secure Encryption</h5>
                        <p class="medium-text">Proin iaculis purus consequat sem cure iaculis purus.</p>
                    </div>
</div>

Nawet w nazwie klasy masz słowo "list" - to powinno być listą ul.

Dane kontaktowe powinieneś wrzucić w znacznik <address>
Latest posts i latest tweets powinny byś listą.
Te ikonki do mediów społecznościowych też powinny być listą.
```
header {
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

header .logo {
    cursor: pointer;
}
```
Nie styluj po znacznikach i nie zagnieżdżaj tak elementów. Dodatkowo nie ustawiaj sztywnej wysokości - powinna ona zależeć od zawartości + możesz zawsze nadawać górny i dolny padding.

Ogólnie to są takie drobne rzeczy, ale kod w porządku.

Ja na Twoim miejscu robiłabym już kolejny projekt przy pomocy Sassa (chyba, że bardzo chcesz jakiś inny preprocesor) i z wykorzystaniem jakiejś konkretnej metodologii CSS.

komentarz 8 stycznia 2019 przez Stoprocent Użytkownik (930 p.)

a znacznik main na takiej stronie powinien się znajdować i zamykać wszystkie sekcje jak body np, nastepnym razem użyje Sassa, czyli nie przejmować sie że jest sporo mieszaniny w kodzie po prostu robić dalej i dalej ??

komentarz 9 stycznia 2019 przez imklau Nałogowiec (42,090 p.)

Ja ogólnie to sekcję z tym głównym napisem "Creative Digital Solutions" to bym potraktowała jako <header>, a kolejne hmm 5 sekcji wrzuciła w <main>.

Nie to, że się nie przejmować.
Popraw sobie to, co wypisałam i bierz się za kolejny projekt przy użyciu np BEM i Sass. Oczywiście postaraj się nie popełniać już tych samych błędów, a później możesz znowu tutaj kod pokazać, ocenimy i nakierujemy ;)