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

Strona do oceny.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
467 wizyt
pytanie zadane 18 grudnia 2017 w Nasze projekty przez adim1248 Początkujący (450 p.)
Witam,

wrzucam do oceny  kolejną stronę, którą udało mi się stworzyć podczas nauki technologii front-endowych. Jak zwykle proszę o rzeczową ocenę kodu jak  i estetyki. Niestety kod jquery i js jeszcze nie jest stworzony przeze mnie, a został jedynie dopasowany pod moją stronę, jednakże jestem w trakcie nauki js i mam nadzieję, że w następnym projekcie uda się stworzyć parę swoich skryptów napisanych od podstaw.

Strona: https://adim1248.github.io/photo_studio/

Github: https://github.com/adim1248/photo_studio

Pozdrawiam.

3 odpowiedzi

+6 głosów
odpowiedź 18 grudnia 2017 przez radek024 Szeryf (77,160 p.)
wybrane 18 grudnia 2017 przez adim1248
 
Najlepsza

Kod:

  • bałagan w head - style własne zawszą idą na koniec
<img class="logo" src="img/logo3.svg" alt="logo artphotography">
<h2>Art photography</h2>
  • gdzie tutaj to jeszcze można przyjąć to...
<div class="image">
  <img src="img/1.jpg" alt="fotografia sportowa">
   <div class="wrapper_text" data-aos="fade-up">
     <h2>Fotografia sportowa</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus arcu sed sodales ultricies.
       Duis scelerisque, ex sit amet tempus Maecenas purus eros, aliquam non pellentesque nec, hendrerit ut.
      </p>
   </div>
 </div>

już niekoniecznie. Obrazek tutaj to wyłącznie dekoracja i nie potrzebuje atrybutu alt.

<section id="projectSection">
  • nie wiesz do końca co będzie na tej stronie - ta część może się zmienić. Nazwami klas nie należy sugerować zawartości contentu. Jeżeli chcesz to robić, to specyficzne dla danego contentu rzeczy umieść za pomocą usadzenia drugiej klasy.
  • czy galeria to nie lista zdjęć?
<h2 class="title_top">Nasi klienci</h2>
<h3 class="title_bottom">Oto najwięksi partnerzy naszej firmy</h3>
  • znowu sugerowanie nazwami klas,
<li class="item">
 <img src="img/wektor.svg" alt="firma x">
  <h2>Firma X</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus nibh et nulla fermentum, ac porta erat scelerisque. Nullam quis libero efficitur eros facilisis facilisis vitae a nulla.</p>
</li>
  • tutaj nie dokońca to wygląda ok. Przedewszystkim nie widzę tego jako listy, może bardziej artykuł wraz z sekcjami? Ponad img mogłoby mieć lepiej wypełniony alt.
  • footer ewidentnie za wcześnie. Nie jestem pewny, ale footer chyba nie może zawierać jakichkolwiek nagłówków - a Twój posiada. To byłoby dobre section.  
<div class="rectangle_team">
 <li class="team_item"><img class="circle" src="img/person2.jpg"></li>
 <p>Zofia Kowalska</p>
 <p>zofia.k@art.com</p>
 </div>
  • mały zawał serca - czy ul może działać w taki sposób że ul > div > li?  Ponadto fajnie by było gdyby kontakt mailowy był interaktywny - można wykorzystać mailto oraz znacznik a.
  • extra_links_li - sugerujesz element w kodzie html,
<p class="copy">Wszelkie prawa zastrzeżone &copy; 2017 Dziękuje za wizyte!</p>
  • to byłby footer. No i ja dziękuję, a on dziękuje ;)\
<button onclick="topFunction()" class="click"><span class="textInside">top</span></button>
  • onclick to zła praktyka - ale ok, z JSem różnie :P Nazwa klasy też jest średnia, czy span jest potrzebny? Poza tym mało mówiący komunikat "top" - pierwsza myśl jaka mnie napotkała to "chyba nie załadowała mi się grafika.." 

W CSS:

.foto1{
    grid-row: 1/3;
}

.foto6{
    grid-column: 1/3;
    height: 400px;
}
  • skoro używasz kolumn, to dlaczego nie zastosujesz również wierszy? 
.circle{
    border-radius: 50%;
}
  • Klasa znowu lekko niesemantyczna - nie lepiej coś na styl rounded-img
  • używasz float: left oraz float: right, ale nie widzę abyś je czyścił. Warto o tym pamiętać, ponieważ później mogą wystąpić ewentualne problemy z layoutem.

Podsumowywując: do poprawy :P Zostawiasz również dużo zbędnego miejsca w pliku, warto to czyścić. Ponadto musisz nieco logiczniej używać nazw klas, wtedy Twój plik CSS może stać się chudszy.

komentarz 18 grudnia 2017 przez radek024 Szeryf (77,160 p.)
No i formularz też słabo wypada, bodajże Comandeer robił kiedyś film gościnny u kodu.je - myślę że powinien wystarczyć, abyś mógł go poprawić.
komentarz 18 grudnia 2017 przez adim1248 Początkujący (450 p.)
Dzięki za tak szczegółowy kod review.
0 głosów
odpowiedź 18 grudnia 2017 przez PaulGilbert Gaduła (3,280 p.)
Błąd w cytacie na końcu - dwa razy "nie".
0 głosów
odpowiedź 18 grudnia 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
Widzę że Radek wskazał wiele rzeczy do poprawy i jak najbardziej się z nim zgadzam. Dodam tylko od siebie że wrzucenie "style" w twoim przypadku w <p> który ma u Ciebie robić jako footer to straszna praktyka. Polecam wrzucić wszystko to w footer i w css ostylować footer p span{xxx};

Ok chyba będziesz już wiedział co jest do poprawienia w kodzie.

Jeśli chodzi o stronę wizualną to muszę przyznać że jest bardzo ok! Używanie filtrów css3 na img to bardzo fajna sprawa, jeszcze dość młoda i rzadko spotykana (przynajmniej Ja nie widuje jej za wiele). Jedyne do czego mogę się przyczepić to "oferta". Moim zdaniem sekcja ta wygląda bardzo nieczytelnie, te zdjęcia mają zbyt dużą kolorystykę aby mogło wyglądać to dobrze. Myślę że czarny linear-gradient z opacity na 0.7-0.8 może załatwić sprawę. Pamiętaj że to tylko propozycja ;)
komentarz 18 grudnia 2017 przez adim1248 Początkujący (450 p.)
Też właśnie mysłałem nad tym, aby zmienić to sekcję, bo mi także ona do końca się nie podoba, lecz nie miałem  pomysłów. Myśle, że niedługo ją kompletnie przebuduje. Dzięki za ocenę strony.

Podobne pytania

+2 głosów
1 odpowiedź 407 wizyt
pytanie zadane 18 września 2017 w Nasze projekty przez Pecet48 Użytkownik (500 p.)
0 głosów
2 odpowiedzi 755 wizyt
pytanie zadane 16 września 2017 w Nasze projekty przez beginner93 Nowicjusz (220 p.)
+4 głosów
1 odpowiedź 358 wizyt
pytanie zadane 18 sierpnia 2017 w Nasze projekty przez niko404 Użytkownik (910 p.)

93,163 zapytań

142,174 odpowiedzi

321,912 komentarzy

62,490 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 453p. - dia-Chann
  2. 453p. - Marcin Putra
  3. 447p. - Łukasz Piwowar
  4. 443p. - CC PL
  5. 431p. - Łukasz Eckert
  6. 428p. - rafalszastok
  7. 423p. - Michal Drewniak
  8. 423p. - Adrian Wieprzkowicz
  9. 418p. - rucin93
  10. 410p. - Piotr Aleksandrowicz
  11. 408p. - ksalekk
  12. 402p. - Mariusz Fornal
  13. 401p. - Dawid128
  14. 383p. - Hubert Chęciński
  15. 340p. - ssynowiec
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...