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

Ocena strony - design i kod

VPS Starter Arubacloud
0 głosów
369 wizyt
pytanie zadane 7 maja 2017 w Nasze projekty przez czmyk Obywatel (1,100 p.)
Czesc, ostatnio zajalem sie pisanie mojej strony-portfolio. Jest ona responsywna, a wersja mobilna lekko rozni sie od desktopu. Oto ona: https://kamilbaldys.github.io/

Prosze o opinie kodu: https://github.com/kamilbaldys/kamilbaldys.github.io  i o propozycje zmian w designie.
komentarz 7 maja 2017 przez Alex.Ironside Stary wyjadacz (14,880 p.)

Styl jako taki calkiem ok. Ale brakuje takiego rozmieszczenia tego w przestrzeni. upewnij sie ze stopka jest na dole ekranu, nie na srodku. Dodalbym troche odstepu tutaj

Kamil Bałdysprogramista web-dev

Do tego tez troche margin bottom. I mniejsze ikony gthuba, youtube i facebooka. Ale poza tym elegancko i propsy za responzywnosc.

W kontakt moglbys dac formularz.

Poczytaj o uzywaniu whitespace.

Poza tym bardzo elegancko. Podobaja mi sie kolory. Bardzo dobra przejzystosc dobrales

komentarz 7 maja 2017 przez czmyk Obywatel (1,100 p.)
Dzieki, wezme to pod uwage

2 odpowiedzi

+3 głosów
odpowiedź 7 maja 2017 przez xmentor Nałogowiec (49,520 p.)
wybrane 8 maja 2017 przez czmyk
 
Najlepsza

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&nbsp;<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".

komentarz 7 maja 2017 przez czmyk Obywatel (1,100 p.)
Dzieki wielkie :)
0 głosów
odpowiedź 7 maja 2017 przez pysilla Użytkownik (560 p.)
Dla mnie ogólnie też schludnie to wygląda, ale napiszę o czymś czego nie chciałeś poddawać ocenie. Z tego co mi wiadomo to piszemy w "niewielkim mieście". Druga rzecz to "duża ilość kodu". Sama duża ilość kodu nie poprawia twoich umiejętności tylko "PISANIE dużej ilości kodu i czytanie dokumentacji". Nie chce się czepiać, ale tak będzie bardziej po polsku :) , więc też będzie się to milej czytało. Powodzenia! :)

Podobne pytania

0 głosów
2 odpowiedzi 329 wizyt
pytanie zadane 5 lipca 2017 w Nasze projekty przez Matiss Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 256 wizyt
pytanie zadane 30 maja 2017 w Nasze projekty przez Radekol Bywalec (2,880 p.)
+1 głos
3 odpowiedzi 236 wizyt
pytanie zadane 23 marca 2017 w Nasze projekty przez Bakr Mądrala (6,850 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...