Prośba o ocenę kodu - strona www

pytanie zadane 13 września 2016 w HTML i CSS przez Kamil Naja Nałogowiec (27,410 p.)

Cześć, poproszę o ocenę kodu strony https://kamilnaja.github.io/Mogo/. Strona stworzona na podstawie darmowego szablonu psd z sieci. Pozdrawiam

komentarz 14 września 2016 przez KariK-02 Mądrala (6,030 p.)

Kod jest dobry. A strona jest przepiękna.

2	komentarz 14 września 2016 przez xmentor Nałogowiec (49,520 p.) Kod jest dobry Kłóciłbym się.

komentarz 14 września 2016 przez Kamil Naja Nałogowiec (27,410 p.)

Chętnie zapoznam się z konstruktywną krytyką, właśnie po to została stworzona strona.

6 odpowiedzi

odpowiedź 16 września 2016 przez jpacanowski VIP (101,940 p.)

		<section class="container services" id="work">
			<div class="row">
				<div class="col-md-12">
					<h2 class="title">We work with</h2>
					<h3 class="subtitle">Amazing Services</h3>
					<hr class="spacer">
				</div>
			</div>
			<div class="row our-service">
				<div class="col-md-4">
					<img src="img/budzik.png" alt="budzik">
					<h2>Photography</h2>
					<p class="service-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A neque nostrum excepturi.</p>
				</div>

Poplątany outline dokumentu masz... Nagłówek sekcji to H2, a Photography to też H2 ?? Photography dałbym jako H3, jednocześnie zastanawiając się czy Amazing Services to ma być nagłówek...

<p class="post-date">Jan 9 2016</p>

Istnieje taki tag jak <time>

<img src="img/small-blog1.jpg" alt="miniature">

Piękny alternatywny opis...

To: https://cdn.pbrd.co/images/3VJH3xUyI.png oprzyj na liście, dodatkowo używając tagu <article>. Coś w tym stylu:

<section>
    <ul>
        <li>
            <article>
                <h4>...</h4>
                <time>...</time>
            </article>
        </li>
        <li>
            <article>
                <h4>...</h4>
                <time>...</time>
            </article>
        </li>
        <li>
            <article>
                <h4>...</h4>
                <time>...</time>
            </article>
        </li>
    </ul>
</section>

odpowiedź 14 września 2016 przez CzlowiekSkrypt Nałogowiec (26,340 p.)
edycja 14 września 2016 przez CzlowiekSkrypt

Bootstrap...

http://adventurega.me/bootstrap/

Nie mówię że strona jest zła, po prostu widziałem już setki podobnych i jest to dla mnie nużące :)

komentarz 14 września 2016 przez Kamil Naja Nałogowiec (27,410 p.)

Nie ma innego wyjścia, skoro 99% pracodawców wymaga znajomości Bootstrapa w pracy :)

komentarz 14 września 2016 przez jpacanowski VIP (101,940 p.)

Nie 99%

odpowiedź 13 września 2016 przez nauwalis Mądrala (7,350 p.)

odpowiedź 16 września 2016 przez FuruArt Nowicjusz (180 p.)

odpowiedź 17 września 2016 przez Miszo Bywalec (2,100 p.)

Na czym ty tą stronie postawiłeś? github daje jakiś darmowy hosting?

komentarz 17 września 2016 przez FuruArt Nowicjusz (180 p.)

Istnieje coś takiego jak Github Pages :) Polecam się rozejrzeć, dobra sprawa.

komentarz 17 września 2016 przez Kamil Naja Nałogowiec (27,410 p.)

Wrzucasz repo na githuba i w ustawieniach szukasz github pages z brancha master (albo innego), super metoda.

odpowiedź 17 września 2016 przez tarnasm Gaduła (3,030 p.)

1.Co do wizualki:

-Strzałkę "go to top" zdecydowanie bym poprawił, za duza, oraz ma zbedne Transitions.

- Responsywne menu po najechaniu ma brzydki Hover: zamien żółty border-bottom na jakis inny bardziej stonowany kolor. Poza tym najechanie na pozycje z menu robi pewne przeskoki. Poniewaz na .class:hover , masz border, ustawiony na ok 3 px a przed najechaniem go nie ma i renderuje sie w trakcie. Jezeli chcesz zachowac ten efekt to dodaj border przed Hoverem na tyle pikseli ile jest po najechaniu, ale kolor zdefiniuj na transparent.

- numerki (happy client, cup o tea etc) na rozdzielczosci okolo tabletowej ukladaja ci sie pokolei w jednej kolumnie, masz parzysty uklad wiec proponuje ustawic je parami 1/2 3/4 5/6, tak samo obrazy przy w skecji "SOME OF OUR WORK" ulozyłbym parami na tabletach.

- na moje oko masz za duzy odstep pomiedzy " amazing services " a pierwszym headerem "photography".

- proponuje zwiekszyc padding przy Cytacie Jon Doe - tak do 15/20 px oraz sekcji "WHAT PEOPLE SAY" (tutaj bardziej bym zwiekszyl margin left i right) jak również "MoGo" - jest za ciasno. (w MoGo dla sekcji Blogs dodalbym delikatne wcięcie.)

- sekcja "Story About Us" - te 3 zdjecia na poziomie ok 1088 brzydko się rozsypuja. 2 obrazki zostaja na gorze i jeden spada na dol, tak samo jest przy "LATEST BLOG" (wycentruj moze 3 modul lub dodaj czwarty)

2.Code:

-jezeli juz nadajesz kazdej sekcji dodatkowa klase to proponuje semantyke: .uniqueClassName .container-fluid

pomaga to zwiekszyc czytelnosc kodu. U Ciebie raz jest klasa BS3 a raz nazwa sekcji. Fakt, ze jest to container czy container-fluid jest drugorzedna.

-nazwy plikow, klas - tylko w jezyku angielskim. To konieczna praktyka.

-jezeli juz uzywasz sekcji to dzialaj konsekwentnie. Czyli navbar oraz members wrzuc w sekcje.

Ogolnie to same kosmetyczne sprawy.