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

Strona do oceny.

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
+1 głos
337 wizyt
pytanie zadane 18 grudnia 2017 w Nasze projekty przez adim1248 Początkujący (460 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

+7 głosów
odpowiedź 18 grudnia 2017 przez radek024 Szeryf (77,500 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,500 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 (460 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,590 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 (460 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

+3 głosów
1 odpowiedź 270 wizyt
pytanie zadane 18 września 2017 w Nasze projekty przez Pecet48 Użytkownik (510 p.)
+1 głos
2 odpowiedzi 470 wizyt
pytanie zadane 16 września 2017 w Nasze projekty przez beginner93 Nowicjusz (230 p.)
+5 głosów
1 odpowiedź 281 wizyt
pytanie zadane 18 sierpnia 2017 w Nasze projekty przez niko404 Użytkownik (940 p.)

89,787 zapytań

138,394 odpowiedzi

309,539 komentarzy

59,688 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1244p. - Argeento
  2. 1186p. - nidomika
  3. 1172p. - rucin93
  4. 1171p. - Michal Drewniak
  5. 1165p. - Łukasz Eckert
  6. 1142p. - Mikbac
  7. 1121p. - TheLukaszNs
  8. 1106p. - JMazurkiewicz
  9. 1106p. - adrian17
  10. 1060p. - Mawrok
  11. 1052p. - overcq
  12. 991p. - Adam Salamon
  13. 945p. - Jarosław Roszyk
  14. 941p. - Hubert Chęciński
  15. 859p. - 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! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...