Skip to content
OverviewSolutions
6
Comments
3
Nitr0Skay
@Nitr0Skay

All comments

  • Nitr0Skay•100
    @Nitr0SkayPosted 2 months ago

    Hi. I was looking at Your code and I like the way how you manage your code. It's clean and sterile. Keep it up ;)

    Now, If you don't mind, I want to point you some aspects you can work on.

    1. The main content (in our example it is the Card component) should be placed in the main element

    2. Every page should contain at least main header and h1 title should be used only once on a page. In this example I simply used it like that

    <header class="visuallyhidden">
 <h1>Card component</h1>
</header>

    Visually hidden is a class that allows us to visually hide our content, but it's still accessable to via Screen readers or Search Engine crawlers and other Web Scrappers

    .visuallyhidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
}

    Why we do that you would ask. Just to have the right page outline: https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47

    I have done the same Challenge Recently. My solution is not perfect, but you can just peek and you will see my approach here. If you have any questions about my approach, please feel free to ask me, I will try to answer as quick as I can.

    Once again, good work and keep it up ;)

    Marked as helpful
    1
  • Nitr0Skay•100
    @Nitr0SkayPosted 6 months ago

    It is nice site. Keep it up

    0
  • Nitr0Skay•100
    @Nitr0SkayPosted over 3 years ago

    Witam, panie Chory12. Albo może raczej powinienem odpisać tak jak pan "hejka" :D Mam nadzieję, iż nie obrazi się pan, że napiszę do Pana w naszym ojczystym języku, jeżeli jednak to problem to nie będzie problemu kontynuować naszą konwersację po Angielsku, niestety inne języki nie wchodzą w grę :D

    Do rzeczy. Co do styli to nie wiem co konkretnie mógłbym napisać, każdy korzysta z nich wedle swojego uznania i mówi się, że ile ludzi, tyle opinii co do tego. Jeżeli ma Pan jakieś pytania lub potrzebuje Pan z tym jakieś porady, proszę zapytać, postaram się pomóc.

    Ja natomiast postanowiłem nieco dopomóc Panu z Semantyką. Po pierwsze: dobrze byłoby zachować pewną konsekwencję przy nazewnictwu klas. U Pana występuje mieszanka klas nazywanych raz po Polsku (i po tym stwierdziłem też, że obaj jesteśmy Polakami) i po Angielsku. Dobrze jak wszystkie klasy nazywane są w jednym języku, a najlepiej wszystkie po Angielsku, gdyż składnia zarówno HTML jak i CSS to wszystko Angielski :)

    Po drugie: "<section class="main">" - na co to komu ? Wszak Standard HTML oferuje nam semantyczny element main: https://www.w3.org/TR/html-main-element/

    Po trzecie: "<img src="illustration-hero.svg" alt="">" - Text alternatywny (czyli atrybut alt) nie powinien być pusty. Jako iż ta ilustracja była typowym elementem designu (przynajmniej według mnie), dlatego postanowiłem to wstawić poprzez CSS jako background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image Ta opcja pozwala dodać ten obrazek bez konieczności martwienia się o tekst alternatywny i o to, co tam wpisać :)

    Po czwarte: "<p class="order">Order Summary</p>" - To mi szczerze wygląda na nagłówek sekcji, a nie jak Akapit. Od tego mamy też takie elementy jak h1 do h6. Trzeba tylko z nich korzystać rozważnie ;)

    Po piąte: Pan pozwoli, że przytoczę tutaj pewien wycinek Pańskiego kodu:

    <section class="tekst"> <p class="you">You can now listen to millions of songs,</p> <p class="audio">audiobooks, and podcasts on any device</p> <p class="like">anywhere you like!</p> </section>

    Ogólnie wydaje mnie się, że cały powyższy text można by potraktować, jako jeden spójny akapit i nikt by się raczej nie doczepił. Proszę także zauważyć, że powyższa wypowiedź to jedno zdanie ;)

    Sekcja z klasą "tekst" - po co to w ogóle powstało, skoro element "p" jest rozumiany jako jeden akapit, akapit tekstu ? ;p https://www.w3.org/MarkUp/HTMLPlus/htmlplus_11.html

    Ogólnie jeszcze sporo rzeczy można przytoczyć. Ale chcąc oszczędzić Panu natłoku informacji, na chwilę obecną zostawię Pana z powyższymi poradami. Jeżeli będzie Pan ciekawy, możemy kontynuować :D

    Co do Ligi, to co Pan mainuje i jaką ma pan dywizję ? Tak z ciekawości pytam ;p Życzę Panu miłego dnia :D

    Marked as helpful
    0