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

Prośba o feedback

0 głosów
182 wizyt
pytanie zadane 24 kwietnia 2017 w HTML i CSS przez ulipek Nowicjusz (150 p.)
Witam,

Chciałem poprosić o sprawdzenie jednego z moich projektów.

Chciałbym uzyskać opinie na temat jakości kodu, jego działania oraz informacje co mógłbym jeszcze poprawić w projekcie.

Poniżej link:

https://jrajba.github.io/Bhagaskara-final-project/

https://github.com/jrajba/Bhagaskara-final-project

 

Z góry dziękuję za konstruktywną krytykę

2 odpowiedzi

+5 głosów
odpowiedź 26 kwietnia 2017 przez Comandeer Mentor (454,620 p.)
wybrane 26 kwietnia 2017 przez xmentor
 
Najlepsza
  • Style dla focusa słabo wyglądają.
  • Linki przewijają bez zmiany hasha.
  • Nie wszystkie elementy interaktywne są dostępne z poziomu klawiatury.
  • W portfolio średnio działa filtrowanie (nie zmienia się zaznaczenie aktywnego przycisku).
  • * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Existence, sans-serif;
    }
    

    Lepiej dziedziczyć, a nie wymuszać.

  • .main-title aż się prosi o bycie h1.

  • To h4 poniżej powinno być akapitem, bo podtytułów nie robimy nie nagłówkach.

  • Inna rzecz, że hierarchia treści jest totalnie zmasakrowana i nie ma żadnego sensu.

  • Te ikonki w headerze sstanowią element nawigacyjny, więc powinno to być nav > ul > li a.

  • Pasek nawigacyjny nie powinien być sekcją, ale kolejnym elementem nav. Inna rzecz, że nie bardzo widzę sens w posiadaniu go.

  • Sekcjom brakuje nagłówków opisujących, o czym są.

  • #services h6 nie ma sensu. #services powinien mieć nagłówek h2, a poszczególne wyszczególnione w nim usługi nagłówki h3. A jak już dajemy tu nagłówki, można się pokusić o wydzielanie tego do podsekcji.

  • Dodatkowo ikonki SVG służą tutaj za ozdobniki, więc svg > title jest całkowicie niepotrzebne (czytnik ekranowy nie powinien czytać tych ikonek).

  • <div class="about-header">
                            <img class="main-titles" src="img/heading.png" alt="">
                        </div>

    Ten obrazek zawiera nagłówek sekcji, więc zamiast div powinno być h2, a [alt] powinien zawierać nazwę tej sekcji ("About us"). Polecam przejrzeć zalecenia co do tekstów alternatywnych.

  • <img id="button1" class="button button-container learn_more" src="img/button.png" alt="">

    Przycisk to przycisk (albo link w ostateczności), więc [alt] powinien wskazywać, co dany element robi. No i MUSI być wewnątrz odpowiedniego elementu (button, a).

  • <div class="col-12">
                        <div class="our-team-img"><img class="main-titles" src="img/our_team.png" alt=""></div>
                        <div class="buttons"><img src="img/small_button.png" alt=""><img src="img/small_button_2.png" alt=""></div>
                    </div>

    to powinno wyglądać mniej więcej tak:

    <div class="col-12">
    	<h2 class="our-team-img">
    		<img class="main-titles" src="img/our_team.png" alt="Our team">
    	</h2>
    	<div class="buttons">
    		<button>
    			<img src="img/small_button.png" alt="Previous team members">
    		</button>
    		<button>
    			<img src="img/small_button_2.png" alt="Next team members">
    		</button>
    	</div>
    </div>
  • <a href="http://www.facebook.com" target="_blank"><img src="img/Social_icon_1.png" alt=""></a>

    [alt]!!!!!!!!!!!! + warto poczytać o [target].

  • Nie krzycz w nazwiskach członków zespołu, jest text-transform: uppercase. Dodatkowo h5 tu nie pasuje, powinno być h3.

  • Skille aż się proszą o prezentację przy pomocy listy dl.

  • Tak samo jak te liczniki w sliderze poniżej. h1 nie ma tam najmniejszego sensu.

  • <div class="col-12 slider-section slider2-section" data-days="350" data-succes="95%" data-fails="7" data-costumers="1788">
                                <div class="person-img"><img src="img/deviantart.png" alt=""></div>
                                <p>“Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, est non commodo luctus, nisi erat ”</p>
                                <h5>LESALE CHRISTOPER, PINTEREST1</h5>
                                <div class="social-img">
                                    <a href="http://www.facebook.com" target="_blank"><img src="img/Social_icon_1.png" alt=""></a>
                                    <a href="http://www.plus.google.com" target="_blank"><img src="img/Social_icon_2.png" alt=""></a>
                                </div>
                            </div>

    to powinno wyglądać mniej więcej tak:

    <figure class="col-12 slider-section slider2-section" data-days="350" data-succes="95%" data-fails="7" data-costumers="1788">
    	<div class="person-img"><img src="img/deviantart.png" alt=""></div>
    	<blockquote>
    		<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, est non commodo luctus, nisi erat</p>
    	</blockquote>
    	<figcaption>
    		<cite>LeSale Christoper, Pinterest1</cite>
    		<span class="visuallyhidden">Find him on social media:</span>
    		<ul class="social-img">
    			<li>
    				<a href="http://www.facebook.com">
    					<img src="img/Social_icon_1.png" alt="Facebook">
    				</a>
    			</li>
    			<li>
    				<a href="http://www.plus.google.com">
    					<img src="img/Social_icon_2.png" alt="Google+">
    				</a>
    			</li>
    		</ul>
    	</figcaption>
    </figure>
  • .visuallyhidden możesz sobie poczytać w H5BP + skopiować z ich kodu.
  • Przyciski do przełączania widoku portfolio winny być przyciskami.
  • W formularzu powinien być label.
  • Socjalki na samym końcu to lista (może nawet nawigacyjna), a [alt] powinien wskazywać na konkretne portale społecznościowe.
  • Walidacja formularza to dłuższy temat, niemniej od razu mogę powiedzieć, że jest zrobiona w niedostępny sposób.

Ogólnie to polecam zapoznać się z podstawami semantyki w HTML-u i dostępności.

komentarz 26 kwietnia 2017 przez ulipek Nowicjusz (150 p.)
Dziekuje za feedback.

Nie sądziłem, że jest aż tak źle.

Biorę sie za poprawianie. Jeśli będę miał jakieś pytania pozwole sobie zapytać.

Pozdrawiam
+1 głos
odpowiedź 26 kwietnia 2017 przez vasquez Początkujący (480 p.)
Myślę że jest ok. Dałabym tylko jakiś przycisk, żeby można było wrócić do góry, żeby nie skrolować. Ikonki Google plusa i Facebooka są trochę nie wyraźne jakby miały jakąś pikselozę.

Podobne pytania

0 głosów
0 odpowiedzi 69 wizyt
pytanie zadane 4 stycznia 2018 w HTML i CSS przez Sumer Nowicjusz (140 p.)
+1 głos
1 odpowiedź 42 wizyt
pytanie zadane 5 lutego w JavaScript, jQuery, AJAX przez Pogix Nowicjusz (170 p.)
0 głosów
2 odpowiedzi 140 wizyt
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

63,369 zapytań

109,637 odpowiedzi

229,050 komentarzy

44,353 pasjonatów

Przeglądających: 264
Pasjonatów: 13 Gości: 251

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

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

...