JS:
- zdarzenia podpinamy przez addEventListener
- skrypty przenieś przed </body>
- jak już przeniesiesz to onload='odliczanie()' jest zbędne
- setTimeout("odliczanie()",1000); nie przekazuj funkcji jako stringa -> setTimeout(odliczanie,1000);
HTML:
- Nie rozumiem tego:
<header class="page-header">
<h1 class="invisible-section-name">Page header</h1>
<div class="header-logo"><a href="index.html">Kamil Bałdys <span class="logo-caption">programista web-dev</span></a><div id="header-clock"></div>
</div>
</header>
Page header? Nic mi to nie mówi. Tutaj zamiast tego div-a powinien być h1.
- Zadeklarowałeś lang=pl, więc czemu:
<h2 class="invisible-section-name">Page nav</h2>
Menu/Nawigacja, to wystarczy.
- Gdzie się podział znacznik ol/ul dla itemów listy? Ogólnie niestandardowe menu na karuzeli.
- Poczytaj o dostępności ikonek https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html
-
<ol class="carousel-indicators">
<li data-target="#nav-carousel" data-slide-to="0" class="active"></li>
<li data-target="#nav-carousel" data-slide-to="1"></li>
<li data-target="#nav-carousel" data-slide-to="2"></li>
<li data-target="#nav-carousel" data-slide-to="3"></li>
</ol>
Jakoś pusto tu, ta lista nie niesie za sobą żadnej treści.
- Czemu masz dwa razy zduplikowane "opcje menu"?
-
<a class="carousel-control left" href="#nav-carousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#nav-carousel" data-slide="next">
<span class="icon-next"></span>
</a>
Tutaj też pusto. Przydałaby się treść, bo w tej chwili czytnik np. NVDA przeczyta: "link" i nic więcej. O ikonach wspominałem. Boostrap przecież ma przykłady z implementacją karuzeli:
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
https://getbootstrap.com/examples/carousel/
-
<aside>
<h3 class="invisible-section-name">Border break</h3>
<div class="border-break"></div>
</aside>
No nie chcę się wymądrzać, ale dodawać znacznik aside z nagłówkiem, który nic mi nie mówi sensownego oraz pustym elementem żeby zrobić jedynie linie na mniejszych ekranach? Wystarczył border-botom(dla nav lub -top dla main) lub coś podobnego zrobić na :before/:after.
- <p>Kim jestem</p> powinno być h2.
- style="cursor: pointer;" nie widze tutaj potrzeby stylowania inline, wszystko możesz wrzucić do pliku ze stylami.
-
onclick="window.open('https://www.facebook.com/k44m1l', '_blank');"
O podpinaniu eventu już wspomniałem wcześniej - tutaj nie musiałeś nawet tego robić, do href wystarczyło wrzucić link i dodać atrybut target, ale o targecie=_blank poczytaj tutaj: https://kornel.ski/pl/target , te elementy są puste.
-
<h4 class="invisible-section-name">Footer</h4>
Stopka nie wymaga nagłówka.
-
<div class="page-content-text">
<p>Najprościej jest się ze mną skontaktować za pomocą:</p>
<p>E-mail: kamil.baldys21@gmail.com <a href="mailto:kamil.baldys21@gmail.com"><span class="contact-clickme">(Przejdź)</span></a></p>
<p>Facebook: Kamil Bałdys <a href="https://www.facebook.com/k44m1l" target="_blank"><span class="contact-clickme">(Przejdź)</span></a></p>
<p>LinkedIn: Kamil Bałdys <a href="https://www.linkedin.com/in/kamil-b-504929142/" target="_blank"><span class="contact-clickme">(Przejdź)</span></a></p>
</div>
Użyj tu listy dl.
- <p>Kontakt ze mną</p> to też powinno być w h2.
Skorzystaj czasem z tego narzędzia: https://validator.w3.org/nu wraz z zaznaczoną opcją "outline".
