Projekt strony. Ocena.

Question

Witam!

Na codzień nie zajmuję się webdevem, ale postanowiłem się trochę przyuczyć frontendu. Poniżej wysyłam linka do jednego z moich pierwszych frontendowych projektów i proszę o ocenę designu strony i kodu. Jestem gotowy na konstruktywną krtykę ;)

https://madrussianhacker.github.io/PdEngineWebsite/index.html

Pozdrawiam!

Answer 1

Na pewno bym ściaśnił te menu bo od lewa do prawa trochę trzeba nalatać myszką ;p

Answer 2

Fajna tylko nad RWD popracuj i będzie git :)

Answer 3

Oglądam na tablecie.  Tutaj proporcje elementów w stosunku do ekranu są  dobre. Strona wyświetla się prawidłowo, choć z jednym, istotnym mankamentem. W układzie pionowym tytuł strony"Palladium engine" wyświetla się zbyt małą czcionką - mniejszą od pozostałych napisów, i nie jest wyśrodkowany. W układzie poziomym jest wszystko w porządku.

Od strony forhendu witryna wygląda ładnie - schludnie, poważnie, porządnie.

Answer 4

jeśli chodzi o kod to zerkaj sobie od razu tutaj: https://validator.w3.org/nu/?doc=https%3A%2F%2Fmadrussianhacker.github.io%2FPdEngineWebsite%2Findex.html

<h2><a href="https://www.libsdl.org/license.php">[SDL license]</a></h2>

to raczej nie ma sensu, wystarczy sam link

<nav id="hornav">
            <a href="index.html">Home</a>
            <a href="license.html">License</a>
            <a href="#">Download</a>
            <a href="docs.html">Documentation</a>
            <a href="#">Tutorials</a>
            <a href="javascript:void(0);" class="icon" onclick="toggleResponsiveMenu()">&#9776;</a>
</nav>

to tak czy inaczej powinna być lista <ul>

<span class="scrollToTop fixed" onclick="scrollToTop()"><i class="icon-up-open"></i></span>

kliknij sobie jakiś przycisk a nie <span> :D tutaj akurat powinien też być link + nie stosuj onclick tylko nasłuchuj na zdarzenia za pomocą addEventListener

<div style="padding: 10pt;">
                <i>"Spreading the idea of freedom is a big job — it needs your help."</i> ~ Richard Stallman
</div>

serio przypisujesz tak style? zapewne nie przeglądałeś ocen innych stron na forum? a bardzo to polecam :D i dlaczego tam jest znacznik <i> ?

• standardowo odsyłam do artykułu o poprawnym wstawianiu ikonek
• oraz do najczęstszych błędów

I serio przejrzyj projekty innych osób, bo błędy się powtarzają :)

Powodzenia dalej!

Answer 5

Parę sugestii jeśli chcesz iść we front webowy:

1. zapoznaj się z webpack (np. na blogu nafrontendzie.pl kolega Bartek ma kilka artykułów wprowadzających w tajniki webpack). Ewentualnie inne, gulp itp. ale polecam webpack bo sam z nim pracuję, a innych za dokładnie nie znam.
2. skrypty JS ładuj na końcu, przed zamknięciem </body>. Nie ma sensu wstrzymywać wczytywania strony na ładowanie skryptów. Ewentualnie poczytaj o atrybutach async/defer.
3. Docelowo zapoznaj się z minifikatorami kodu css i js, np. w formie pluginów do wspomnianego już webpacka.
4. Do takiego projektu jQuery spoko, może być, ale jeśli chciałbyś coś poważniej myśleć o pracy fronta to musisz poznać czysty JS. Ale to już zależy do jakich celów się uczysz "webu".
5. Nie stosuj onClick w HTML tylko poczytaj o addEventListener i rozdziel treść/semantykę w HTML od interakcji/zdarzeń w JS.
6. "href="javascript:void(0);"" na ikonce... a czemu nie po prostu element <button> skoro to de facto jest przycisk? Ostatecznie np. <div>, ale w pierwszej kolejności lepiej rozważyć button.
7. "<div style="padding: 10pt;">" od tego jest CSS. Nie stosuj css inline. Osobiście dopuszczam to tylko sporadycznie np. do background-image ale to na prawdę ostrożnie i rzadko. 
8. Nie stosuj w CSS jednostek PT. Polecam raczej rem/em, vw/vh i procenty, a w ostateczności px, ale to z ostrożnością ze względu na RWD.

To tak na szybko, gdyby coś było nie jasne to pisz.

Pozdrawiam