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

Strona do oceny.

VPS Starter Arubacloud
0 głosów
365 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,180 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,180 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ź 300 wizyt
pytanie zadane 18 września 2017 w Nasze projekty przez Pecet48 Użytkownik (500 p.)
0 głosów
2 odpowiedzi 571 wizyt
pytanie zadane 16 września 2017 w Nasze projekty przez beginner93 Nowicjusz (220 p.)
+4 głosów
1 odpowiedź 309 wizyt
pytanie zadane 18 sierpnia 2017 w Nasze projekty przez niko404 Użytkownik (910 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...