Ocena strony!

pytanie zadane 13 listopada 2016 w Nasze projekty przez ReksetoDev Gaduła (4,530 p.)

Witajcie od pewnego czasu bawie sie HTML CSS JS PHP i robie sobie takie o stronki wiec zaczalem robic portfolio i oto sa pierwsze wyniki http://www.hcold.pl/portfolio/ Staram sie trzymac jakis dostepnosci ale wiem ze napewno mozna zrobic cos lepiej a JS to moj debiut bo niby rozumiem ale czesto mam problem z przyjzywczajaniem sie do tego jezyka Wszystko co tu mam nie bylo templatem ani niczym takim sam to zaprojektowalem i napisalem bez pomocy poradnikow no czasem sie pytalem co do JS'a bo mi wredny nie dziala :3. Dziekuje za wszystkie oceny ktore tu znajde. I wiem ze QueryLoader.js to po prostu bajer a nie prawidziwy preloader ale po prostu chcialem zobaczyc jak to bedzie wygladac jak juz napisze preloader i to jest tymczasowe

7 odpowiedzi

odpowiedź 13 listopada 2016 przez Sinnley Stary wyjadacz (12,810 p.)

Proponowałbym zrezygnować z tej animacji ładowania strony podczas poruszania się po zakładkach, bo tylko spowalnia to korzystanie z witryny i może jest bajeranckie, ale uciążliwe.

Zamiast tego możesz wrzucić lekkie przejście, np. zanikanie i pojawianie się nowej tresci, do tego co sie zmienia czyli napisu na dole.

Co do góry, proponowałbym to troche przeskalować. Miejsce pod zakładkami w banerze, w porównania do masy pustego miejsca nad napisem "Nowe pokolenie programistów" jest po prostu nieproporcjonalne i niepotrzebne. Sam baner jest po prostu zbyt duży, a już na pewno ładniej wyglądałoby to, gdyby był mniejszy niż sama treść, bo na ten moment, jak dla mnie, wygląda to trochę groteskowo.

komentarz 13 listopada 2016 przez Sinnley Stary wyjadacz (12,810 p.)

Przy okazji, przyciski byłyby wygodniejsze gdyby były klikalne w całości, a nie tylko jako tekst.

odpowiedź 13 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

<br/>

To raczej nie jest najlepszy pomysł żeby robić odstęp od elementów - użyj margin-bottom/top.

<li><a href=""><i alt="link to my github" class="entypo-github"></i></a></li>
            <li><a href=""><i alt="link to my facebook" class="entypo-facebook-squared"></i></a></li>

fontawesome.io/accessibility/

Dwa razy ładujesz plugin 'queryLoader.js' - w headzie i przed </body>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Też warto przenieś przed zakończeniem ciała.

Jakieś akapity by się przydały w tych artykułach.

komentarz 13 listopada 2016 przez ReksetoDev Gaduła (4,530 p.)

Ten br to gdzie :)? ten skrypt QueryLoader i tak wywale z JQuery bo to syf ktory mi sie nie przydaje a chcialem tylko zobaczyc jak to bedzie z prawdziwym preloaderem

komentarz 13 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

21, 41 linia

odpowiedź 13 listopada 2016 przez niezalogowany

odpowiedź 13 listopada 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Mi się podoba. Na wersję mobilną poprawiłbym Projects - wycentrował obrazek i ustawił lepiej tekst.

Daj więcej line-height pomiędzy wierszami. Za dużo wolnej przestrzeni pod tekstem na mobile.

Pojawia się pusta przestrzeń pod stopką.

Kod wydaje się w miarę ok, ale dlaczego dałeś tekst jako ul? I to do tego figcaption. Obrazek jest tutaj ozdobnikiem a nie główną treścią. I tak masz stronę z jednym obrazkiem, a nie z treścią + ilustracja.

komentarz 13 listopada 2016 przez mowmiheniek Stary wyjadacz (11,900 p.)

Jeszcze jedno łączenie google czcionek robi się za pomocą %7C zamiast |.

odpowiedź 13 listopada 2016 przez ThePatrykOOO Dyskutant (8,400 p.)

Strona całkiem ładnie wygląda, lecz trochę długo się ładuje. Fajnie by było gdybyś oszczędził trochę tych bajerów sobie. Mam dla ciebie kilka porad, jak mógłbyś poprawić wygląd swojej witryny:

Umieść link na divach, nie w środku
Popraw swoją stopkę, bo nie wygląda to za ładnie http://screenshot.sh/mKN2iFd1tOvNW
Zmniejsz ilość animacji, przez co strona będzie się szybciej ładować.

komentarz 13 listopada 2016 przez ReksetoDev Gaduła (4,530 p.)

O jezu co to za potwor :O dzieki nie widzialem tego.. Wywale queryloadera.. dzieki za ocenke :P

odpowiedź 13 listopada 2016 przez Tom_Ja Dyskutant (7,970 p.)

odpowiedź 13 listopada 2016 przez GhostZoombie Użytkownik (640 p.)
edycja 13 listopada 2016 przez GhostZoombie

Tak jak inni wymieniali, jest dużo miejsca które potrzebuje wypełnienia. Jeden mały tekst na 850px, nie wygląda to za ciekawie.

Może kilka mniejszych divów ułożona w "Z"? Z-Layout in Web Design.

Widzę brak <meta name="viewport" content="width=device-width, initial-scale=1.0">. Jest to ważna rzecz jeśli stawiasz na responsywność. Responsive Web Design - The Viewport O autorze nie zapomniałeś więc nie zapominaj i o tym :)

Chyba nie ma sensu nadawania klasy znacznikowi main i to w dodatku o tej samej nazwie. Kurs HTML - MAIN. Co do header'a to nie jestem pewien, w końcu można mieć ich kilka na stronie. Ale nadal można się do nich dostać używając m.in. selektora potomka Kurs HTML - Selektor potomka. Np. nav ul li a{} i możemy stylować link w naszym menu. Można dzięki temu uniknąć wielu niepotrzebnych klas.

W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN. Element ten nie może być również umieszczony wewnątrz: ARTICLE, ASIDE, FOOTER, HEADER ani NAV.

Nie wiem czy to zamierzony efekt ale między MAIN a FOOTER tworzy mi się biała przerwa w zależności od wysokości okna przeglądarki.

A już tak kończąc. Poprzeglądaj sobie portfolia innych ludzi, poczytaj o czym oni tam piszą. Pomyśl również o wypełnieniu strony, może na potrzeby projektowania użyj lorem ipsum ale nie w pojedynczym akapicie. Mam nadzieje że rozwiniesz trochę swoje portfolio, nadasz mu wyrazu i przesłania. Z miłą chęcią zobaczę końcowy efekt.

EDIT #1: "Every Fucking Bootstrap Website Ever" - Tak dla śmieszków