Ocena projektu - CodeReview

Question

Cześć, jestem uczniem 1 klasy technikum i stworzyłem stronę dla projektu organizowanego przez moją szkołę "Z ulicy krańcowej po krańce stratosfery". Proszę o ocenę kodu, wyglądu, semantyki html, UI itd - zależy mi na każdej uwadze, ponieważ chce poprawić swoje błędy :) .

Kod na githubie jest nie aktualny bo drobnych zmian na stronie dokonała inna osoba

http://zsz2.ostrzeszow.pl/stratosfera/

https://github.com/Smokolisz/zs2sonda

Zachęcam też do zainteresowania się projektem - 15 marca o 11:00 zostanie wypuszczona sonda stratosferyczna z kamerą i czujnikami. Zespół szuka pomocy finansowej.

Comments

Może uda Wam się udowodnić że Ziemia jest płaska, bo zdarzają się niewiernicy, może ich to przekona.

Answer 1

Wygląd strony na plus, ale kod można jeszcze poprawić ;)

Flexbox - genialnie że go stosujesz

Bardzo dobrze że stosujesz tagi gita,

RWD też na plus

Dobrze by było gdybyś korzystał z gulpa lub webpacka, wtedy masz wersję produkcyjną(np. skompresowany kod) i developerską

1) standardy PSR - https://www.php-fig.org/psr/

Pierwsze co rzuca się w oczy, to mieszanie warstwy logiki php, z warstwą prezentacji. Mógłbyś zastosować tu albo jakiś freamwork albo chociaż jakąś libkę do routingu.

2) nazwy katalogów powinny być po angielskiemu ;)

3) w js'ie - zmienna navHtml, poczytaj o fragmentach

4) no i tu raczej nie będzie problemu ze zmiennymi globalnymi ale przy większych projektach może się porobić sajgon ;) więc IIFE

5) w folderze fonts masz bardzo dużo czcionek, czy na pewno tyle jest potrzebne?

6) CSS - trochę długi ten plik, może można by go podzielić na kilka części? No i poczytaj o autoprefixerach, pomogło by ci to np. w linii 105. W linii 93 i 111 natomiast idealny przykład gdzie można zastosować preprocesor css'a np sass.

Comments

Dzięki za rady :)

Testowałem strone na różnych czcionkach i potem zapomniałem je usunąć.

Answer 2

Bardzo ładnie i schludnie wykonana strona, Gratuluję. Wiele osób które prosi o oceny ma tak zwane ziemniaki a nie strony, wielkie brawa. Do kodu co prawda nie zaglądałem, ale po widoku strony mogę uznać że też jest bardzo schludny ;)

Comments

Dziękuję! Mam nadzieje, że zostaną mi także pokazane moje błędy, bo strona idealna na pewno nie jest :)

Answer 3

Strona wygląda ładnie, jednak trochę boli czarny tekst na białym tle.

Polecam dobrą alternatywę, a mianowicie każda sekcja "O projekcie", "O nas" itd. mogłaby naprzemiennie mieć tło białe i inne, np style="background-color: lightyellow;", myślę, że przyjemniej się na to patrzy

W dodatku urządzenia znajdujące się na pokładzie sondy wrzuciłbym do sekcji "Sonda"

Answer 4

Na szybko:

<div class="top-left">

• co znaczy klasa .top-left? Nie można tak nazywać obiektów, ponieważ nazwa sugeruje lokację elementu na stronie. Powinno być bardziej ogólnie, a najlepiej skalowalnie - czyli tak, aby po uznaniu że element wygląda lepiej po prawej stronie nie było wymogu zmiany klasy.

 <h1 class="header-h1">Z ulicy Krańcowej po Krańce Stratosfery</h1>

• podobny błąd. Tym razem nie sugerujesz położenia, a element który stylizujesz. Co jeżeli uznasz że potrzebujesz takiego stylowania także w h2? Nazwa klasy trochę wprowadza w błąd. I - może trochę niesłusznie - ale tytuł moim zdaniem powininen być zwięzły, ten jakoś tak mi nie pasuje :D
• dużo tego rodzaju błędów masz na stronie w sumie,  

<div class="team-element">
 <div class="top-team"><span class="img-description">Uczniowie z prof. Grzegorzem Szałkowskim</span></div>
</div>

• To nie powinno być tak zrobione. Doskonale nadałby się tu znacznik figure. Kwestia tylko znalezienia sposobu jak to zakodować w CSS :)

<div class="gallery">
   <a href="img/miniatury/team.jpeg" data-lightbox="galeria"><img src="img/miniatury/team-min.png" alt="Grupa ludzi"/></
   <a href="img/miniatury/photo1.jpeg" data-lightbox="galeria"><img src="img/miniatury/photo1-min.png" alt="Grupa ludzi"/></a>
   <a href="img/miniatury/photo2.jpeg" data-lightbox="galeria"><img src="img/miniatury/photo2-min.png" alt="Odbiorniki"/></a>
</div>

• czy galeria przypadkiem to nie lista? 

<h2 class="center">Aktualności</h2>

• o tym już było :D

<li class="team-li"><span class="team-span">prof. Grzegorz Szałkowski</span></li>

• czy te spany są konieczne potrzebne?

<a href="img/miniatury/team.jpeg" data-lightbox="galeria"><img src="img/miniatury/team-min.png" alt="Grupa ludzi"/></a>
<a href="img/miniatury/photo1.jpeg" data-lightbox="galeria"><img src="img/miniatury/photo1-min.png" alt="Grupa ludzi"/></a>

• warto dokładniej opisywać w alt. Konferencja zrzeszająca ludzi dot. prawdziwości płaskiej Ziemi oraz egzamin podczas sesji to grupy ludzi - ale po samym określeniu "grupa ludzi" trudno to stwierdzić :)