Pierwszy raz z Bootstrapem, Code-review.

Question

Hej, od jakiegoś tygodnia staram się nauczyć Bootstrapa,scss,bem. Postanowiłem zrobić prostą stronę za pomocą tych narzędzi aby zobaczyć jak to wygląda w "projekcie", niestety okazało się że mam bardzo ubogą wiedzę i umiejętności pomimo obejrzenia kilku tutoriali, prosił bym o sprawdzenie kodu i wyłapanie największych baboli oraz może jakieś rady ,które pomogą mi przyswoić wiedzę.

kod

live

1. strona robiona z zamysłem mobile first

- w dalszym procesie był plan aby dodać jakąś galerie,efekty skew itp.

ps. dziękuje z góry za pomoc, mam nadzieje że uda mi się napisać jeszcze raz wszystko korzystając z lepszych praktyk. Pozdrawiam

 

Answer 1

Hej, oto co wyłapałem:

HTML:

Dlaczego ustawiłeś lang="en" kiedy cała strona jest kierowana do polskojęzycznego grona odbiorców?

Brakuje  <meta name="description">

Czy jest sens pobierać cały plik font awesome kiedy potrzebujesz zaledwie 7 ikon? Znajdź jakąś paczkę icon fontów (na przykład icomoon.io) lub jeszcze lepiej ikonki w wersji svg. +dostępność.

Jak już będziesz miał logo - ustaw faviconkę.

Linki z google fonts przeniósłbym ponad linki z plikami CSS. Dodatkowo jeden i drugi font możesz pobierać jednocześnie. Google wygeneruje link w którym oddzieli je znakiem "|". Ps. ten "Luckiest Guy" totalnie mi tutaj nie pasuje.

Rozumiem, że tekst "logo" to tylko taki placeholder, więc Ci nie powiem, że kolor hovera mi się nie podoba 

id które służą jako odnośniki w nawigacji powinny być po polsku - jak reszta strony.

Po kliknięciu numeru telefonu oczekiwałbym innego zachowania... spróbuj z <a href="tel:48504761688"> 504-761-688</a>

Hover numeru telefonu i "Odwiedź nas" słabo kontrastuje z tłem moim zdaniem.

Nie wiem dlaczego te alty przy zdjęciach są puste, ja bym uzupełnił...

CSS:

Szare tło w "sosy/napoje" wygląda mi bardziej jakby coś przestało działać w pliku css niż jako oferta specjalna. + słabo widoczne.

W h1 masz " REUBEN PASTRAMI" - dlaczego nie napiszesz tego normalnie i nie nadasz "text-transform: uppercase"?

Selektory: ".menu .single-menu img" i "p.lead" ...więc stosujesz BEM czy nie stosujesz? Cała metodologia sprowadza się do nie stosowania tego typu selektorów. Napisz stronę bez Bootstrapa i podeślij do oceny. Stosowanie BEM-a nadpisując jednocześnie style Bootstrapa to ciężka przeprawa.

Bootstrap sam ustawia box-sizing: border-box

JS:

Może zaaplikuj jakiegoś scrollspy lub usuń to podświetlenie dla "Start"? Ten link ciągle się świeci i jest jakby aktywny mimo, że jestem już w sekcji footer + nie ma dla niego hovera.

Comments

Dziękuję, trochę zmieniłem ,daj znać jak będziesz miał chwile czy jest lepiej. Pozdrawiam