Portfolio | ocena/wskazówki

pytanie zadane 30 grudnia 2017 w HTML i CSS przez Radek Begej Użytkownik (580 p.)

Cześć,

Poproszę o ocenę , wskazówki dotyczące strony czy dobrze się wyświetla nie ładuje się za długo itd.

radoslawbegej.pl

Dzięki

3 odpowiedzi

odpowiedź 31 grudnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Aspekty techniczne:

Dwa błędy w konsoli
Używasz jakiegoś buildera sporo komenatarzy.
Jakie jest zasotowanie teczhniczne dla pustego before w container i row?
Brak jasnej struktury selektorów CSS, warto się nad tym zastanowić, napewno taki kod lepiej się czyta. -->http://javascript-html5-tutorial.pl/styl-konwencje-i-struktura-css-sass-oocss-bem-rscss-smacss-omg.html
motivation text jest pusty
divicjonizm. Brak jasnej struktury (header,main a nawet mały footer można było osobno odzielić.
Bloczki z strony głównej bym wydzielił na section.
Brakuje jakiegoś h1. Dbaj o ludzi z wolnym interenetem ;)
Fajnie że jest semi-SPA. Ale aż prosi się o routing :).
Za dużo wraperów można łatwiej ;) -->SPA.
klasa "xd"?. To jakieś nowe znaczenie dla SEO?
"abount-content-wraper" Nie planowałeś tam marginesu?
div content wraper spokojnie bym zmienił na article aż się prosi o to.
Burdel z klasami. raz bootstrap , raz animate, raz swoje.
Span-wraper , czy faktycznie uważasz że nie jest istotny czas pracy nad projektem? Btw. to powinna być lista.
Zakładka technologies o wiele lepiej by wyglądała jakby się mieściła w 100vh.
Żle działający link. Muszę kliknąć na opis, a na obrazek już nie działa.
address podajemy jako selektor address, ba a poprawniej możemy użyć dt/dl.
Nie kliklany mail. Nie klikalny telefon.
I to samo co w pozostałych spokojnie byś zmieścił w 100 vh zakładkę contact. I lepiej by to wyglądało
Brak label.
Wrapery....
textaArea a właściwie tekst nie działa jak placeholder.
Brak walidacji. Telefon: "asaassaas" przeszedł spokojnie. echo hello world również.
Teraz zobaczmy jak sobie poradziłeś resposywnością :)
Masz buga biały pasek na mobilce.
Technologies bezsensowny scrolll.
Mobilka ok.
id --> "xdd?"
Dlaczego rendereujesz wszystko jak teraz tego nie potrzebujesz?
Kodu JS nie oceniam bo to gotowce.

UX:

Lepiej jakby się zamknęło w 100vh. Dziwnie to wygląda.
Nie klikalne logo ;/
Nie wszędzie faviicon się wyśwetli. W ramach większej ilości informacji zajrzyj tu --> https://www.creamsoft.com/pl/blog/jak-poprawnie-dodac-do-strony-wlasna-ikone-favicon-dla-przegladarek-oraz-systemow-ios-androida-i-windows-8/
Nie mogę poprawnie cofnąć ;/
Ok znalazłem X jest za mały.
I odprowadza mnie do index.html słabo to wygląda ;/.
A już chciałem pochwalić za semi SPA, a to tylko modal. Tak się nie robi. focus dalej działa na facebook :)
Tabowanie leży ;/
Ogólnie zakładki ładne. kolorystyka ok.
Bezsensowny przewijak w zakładce technologie
Nie dokońca poprawny focus w index.html
Nie działa focus na telefon na address
X dziwnym miejscu w zakładce contact. Chyba zapomniałeś zmienić jego pozycje :).

UI:

Główna sekcja nie jest wyśrodkowana.
Troszeczkę za bardzo główny kontener rzuca mi się w oczy.
Podoba mi się logo :)
Fajna animacja bloczków
Dziwne wypozycjonowany X.

Wydajność i optymalizacja:

Jeżeli już używasz bootstrapa to już oprzyj się na nim, marnujesz zasoby :)
Za dużo masz klas CSS. Musisz ustalić z jakich jednoznacznie bibliotek korzystasz. Mówiąc inaczej projekt przeinżynierowany.
Karny ku* za ukrywanie kodu (sporej ilości) HTML.

Ocena innych projektów:

Strona w portoflio no nawet ładna.
package.wsb? :d. Czyżby na WSB jesteś? Komenty z netBeans serio :D?
GIT obrzydliwie pusty...

komentarz 31 grudnia 2017 przez Radek Begej Użytkownik (580 p.)

O kurczę Nawet nie liczyłem na tak dogłębną analizę. Dzięki wszystko na 100% postaram się poprawić .

odpowiedź 30 grudnia 2017 przez Ivan Maniak (60,650 p.)

Nawigacja po stronie jest "inna" i przez to trochę dziwna.
Skrypty chyba nie w tej kolejności i dwa razy próbujesz ładować jQuery
Brak h1 i h2?
Dostępność... leży
Za bardzo nie wiem do kogo kierowana jest strona, ale technologie nic mi nie mówią jako losowej osobie. Nawet nie są podpisane.
I poza tym podstawowe błędy, które znajdziesz w każdej ocenie stron (brak alt, nagłówki [a raczej ich brak], brak label, puste znaczniki, itd.)

komentarz 30 grudnia 2017 przez Radek Begej Użytkownik (580 p.)

Dzięki za komentarz postaram się to poprawić jak najszybciej o co chodzi z dostepnością ?

komentarz 31 grudnia 2017 przez Bazinga Bywalec (2,120 p.)

https://validator.w3.org/nu/?doc=http%3A%2F%2Fradoslawbegej.pl%2F

komentarz 31 grudnia 2017 przez Ivan Maniak (60,650 p.)

Najprościej: dostępna strona to taka, z której każdy może skorzystać i będzie łatwa do zrozumienia.

Trochę trudno jednoznacznie określić co oznacza dostępna strona bez żadnego przykładu, ale możesz znaleźć masę treści na ten temat w Google (szczególnie po angielsku).

Od siebie mogę polecić A11ycasts oraz A11Y Project. W tym drugim znajdziesz naprawdę masę informacji na temat dostępności.