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

Strona do oceny

VPS Starter Arubacloud
+9 głosów
775 wizyt
pytanie zadane 23 czerwca 2016 w Nasze projekty przez szmq Pasjonat (22,770 p.)
edycja 23 czerwca 2016 przez event15

Witam,

Napisałem nowe portfolio i zachęcam do oceny całego projektu. Wszelkie uwagi, propozycje zmian mile widziane. Potraktujcie stronę z punktu widzenia pracodawcy/klienta/developera, dzięki ;) 
http://szymon-ryczek.pl/

5 odpowiedzi

+2 głosów
odpowiedź 24 czerwca 2016 przez niezalogowany
  • Strona dostępna pod 4 adresami.  www, non-www, index.html, non- index.html. Wypadałoby ujednolicić adres. Unikasz wtedy duplikowania treści i problemów z Same Origin Policy. No i jest porządek : )
  • <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>

    Od HTMLa 4. atrybut type jest niepotrzebny

  • <div class="blur"></div>

    Mam wrażenie, że to można zakodować w nawigacji, unikając tym samym niepotrzebnego diva.

  • <a class="anchor" id="sprawdz"></a>

    Dodawaj id / kotwice bezpośrednio do odpowiednich sekcji. W ten sposób unikasz tworzenia pustych elementów.

  • <a href="#sprawdz" title="Brand" class="brand">Szymon Ryczek</a>

    Tak na moje oko artrybit title nie powinien brzmieć Brand : d

  • Menu nie da się korzystać z poziomu klawiatury, przez co jest kompletnie niedostępne. Powinno być również widoczne, gdy wyłączy się JavaScript ( to samo tyczy się elementów portfolio )

  • Te nieklikalne ikonki (puste elementy!) w menu .. to już pominę : D

  • W animacji tła, skakanie kadru o kilka pixeli w lewo i prawo - parę razy na sekundę - jest drażniące.

  • Logicznie - nie pasuje mi aktualny outline dokumentu. Głównym nagłówkiem w tym przypadku powinno być Twoje imię i nazwisko.

  • <h1>Nowoczesne i szybkie <span class="block">strony internetowe</span></h1>
    <hr>

    Zamiast <hr> border-bottom dla h1 - lub stworzenie linii na pseudo-elemencie. <hr> ma swoje semantyczne znaczenie: 

    The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section).

  • <div class="poster">
           <img src="assets/images/header-background.jpg" alt="">
    </div>
    

    Co nie niesie ze sobą żadnej treści - wywal do CSSa.

  • To samo tutaj

    <img src="assets/images/mrgeek.png" alt="">

    Swoją drogą na tekście w obrazku - jest zdecydowanie za mały kontrast.

  • Całkiem ładnie zrobiona sekcja "Umiejętności" : )

  •  <div class="gap"></div>
     <div class="gap"></div>
    

    Co to, po co i do czego? Z pewnością, da się bez tego.

  • <a href="http://musicfreekz.com">Sprawdź</a>

    Treść linków powinna jednoznacznie wskazywać na element docelowy. Technologie asystujące tworząc dodatkowe menu z linków na stronie, stworzą kilka pozycji o nazwie Sprawdź.. ok..ale co mam sprawdzić?

  • Obowiązkowo dodaj label do inputów w formularzu.

  • <input class="button-send" type="submit" value="Wyślij">

    Sam oznaczyłeś ten element jako button (button-send) - jeśli coś wygląda jak button - w kodzie też powinno być buttonem.

    Pro-tip: Jeśli w formularzu występuje tylko jeden button, domyślnie jest on submitem, a atrybut type="submit" można pominąć.

  • <footer>
    <hr>
    

    Znów hr : d

  • Nie filtrujesz danych. Po wysłaniu formularza bez podania maila wyskakuje komunikat, że mail został wysłany. 

  • Co do SweetAlert - denerwuje mnie znikanie scrollbara - cały układ strony zaczyna skakać.

  • Na mobile, rozdzieliłbym inputy - jeden input w jednej linii - robi się tam teraz bardzo ciasno.

  • Wypadałoby przypisać CSS hoverów do CSSa focusów. W wielu miejscach focus jest zbyt mało widoczny.

  • Focus nie powinien znikać gdzieś w otchłań, podczas przeglądania sekcji Portfolio.

  • Page Speed Insights - tam jeszcze kilka porad ( jak dla mnie wynik 90 to minimum )

Ogólnie całkiem ładna strona. Wiele rzeczy zostało poprawnie zrealizowanych.

Praca, praca! - łap lajka na fb i powodzenia! : )

komentarz 24 czerwca 2016 przez szmq Pasjonat (22,770 p.)
Wow, dzięki wielkie za taki review :) Z tym filmem ciężko będzie uzyskać 90, a co do reszty to odpowiem w tym poście jutro bo jestem zmęczony, a mam kilka pytań :)
+1 głos
odpowiedź 23 czerwca 2016 przez Ivan Maniak (60,650 p.)
  • "Witam, zajmuję się tworzeniem stron internetowych. Dobrze dopasowuję ofertę do wymagań klienta, zapraszam." Opis słabo zbudowany. Przynajmniej, mnie taki opis ani trochę by nie przyciągnął
  • Powinieneś wybrać jeden styl pisania dokumnetu. Albo używasz " przy argumentach, albo '. Nie obu.
  • Wiele zdjęć, ma pusty atrybut alt. A na przykład logo powinno mieć atrybut alt
  • <a class="anchor" id="sprawdz"></a> Pusty element... po co? Wiem, że w tym przypadku jest on do nawigacji, ale o ile się nie mylę to można po prostu dać "#". Albo nadać najwyższemu elementowi id i do niego wysyłać użytkownika
  • Hamburger stworzony chyba w jeden z gorszych sposobów. Po pierwsze, cztery puste elementy. Jeżeli chcesz stylizować coś takiego jak hamburger, użyj selektorów :before, :after w CSS. Po drugie, jest on w ogóle nie klikalny z poziomu klawiatury. A to oznacza, że jest on niedostępny.
  • znacznik hr, który rozdziela dwie listy (Przynajmniej to powinny być to listy), chyba nie do tego został on stworzony. A zamiast niego można użyć np. border-bottom/top
  • Social media, powinny być listą. Tak samo jak menu.
  • Ponownie hr, który rozdziela h1 oraz p pod nim.
  • Nie wiem jak to jest z tymi video i audio, bo nie używam ich. Ale każdy z nich powinien mieć swój włącznik i wyłącznik.
  • div.clear, następny pusty element. Do tego typu operacji, wykorzystuj :before, :after
  • Kolejny pusty element a.anchor. Dlaczego po prostu nie możesz nadać id znacznikowi section?
  • Lista projektów, jest na divach. No właśnie LISTA
  • INPUT MUSI MIEĆ ETYKIETĘ CZYLI LABEL.
  • Po co otwierasz x razy script. Skoro pod nim znów go otwierasz.
komentarz 23 czerwca 2016 przez szmq Pasjonat (22,770 p.)
edycja 24 czerwca 2016 przez szmq
  • Fakt, logo nie ma alt, ale reszta zdj, które nie mają to elementy dekoracyjne
  • Tak jest łatwiej stylować hamburgera i myślę, że powinien być zrobioby w ten sposób. Bootstrap, PureCSS robią indentycznie.
  • W tym przypadku video ma zostać widoczne w taki sposób jaki jest
  • Lsty sa w kontenerach majacych np. naglowki.
  • Oddzielam skrypty zeby nie robic syfu

Reszta do poprawienia, dzięki :) 

+1 głos
odpowiedź 23 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
komentarz 23 czerwca 2016 przez szmq Pasjonat (22,770 p.)
edycja 23 czerwca 2016 przez szmq
  • Nie miałem siły szukac ikon, ale true. Zdjęcie w tle mysle, że jest ok. Nie pomyslalem o wczesniej gladzi :D
  • true
  • korzystam z GA
  • tudno uzyskać lepsze wyniki przez video, ale staram się dostosować do wypisanych tam rad :) 
komentarz 23 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
Faktycznie, nie wiedziałem że mój adblock blokuje też GA :D
0 głosów
odpowiedź 23 czerwca 2016 przez Boshi VIP (100,240 p.)
Po co piszesz sklep na jednej ze stron, skoro to ze sklepem nie ma nic wspólnego ? bo trzymanie w sesji danych to nie jest na pewno sklep.
komentarz 23 czerwca 2016 przez szmq Pasjonat (22,770 p.)
Jest to szablon sklepu :))
0 głosów
odpowiedź 23 czerwca 2016 przez event15 Szeryf (93,790 p.)

Jak zawsze u Ciebie, nie podoba mi się oczojebistość niektórych dobranych kolorów laugh

 

komentarz 23 czerwca 2016 przez manjaro Nałogowiec (37,390 p.)
Mnie się podoba. Prostata i elegancja. Co bym zmienił to wyjustowanie tekstu bo obecnie jest tak byle jak.
komentarz 23 czerwca 2016 przez szmq Pasjonat (22,770 p.)
Z tekstem się zgodzą, a dodam nawet, że miałem to zrobić :) event15, pewnie masz na myśli #FF004A :P Coz dla mnie jest ok

Podobne pytania

+1 głos
1 odpowiedź 386 wizyt
pytanie zadane 7 listopada 2017 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
+9 głosów
5 odpowiedzi 610 wizyt
pytanie zadane 15 marca 2018 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
+8 głosów
8 odpowiedzi 1,086 wizyt
pytanie zadane 30 czerwca 2017 w Nasze projekty przez Assasz Nałogowiec (30,460 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 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!

...