PSD do HTML/CSS Ocena jakości kodu.

0

Witam wszystkich :)
Od pewnego czasu próbuję ogarniać front end i mam prośbę, abyście ocenili jakość mojego kodowania. Chodzi o to czy używam prawidłowych tagów w HTML i selektorów w css, czy responsywność zakodowałem w dobry sposób itd itp :)
Stronę robiłem na podstawie darmowego PSD.

Github: https://github.com/mrk09/CUDA

Gotowa stronka: http://79.170.44.83/cuda-portfolio.com/

Jpg z PSD: http://res.cloudinary.com/dzlirbtzm/image/upload/v1486031460/CudaPortfolio_ykqvvl.jpg

PS. Wiem, że hamburger nie działa zbyt dobrze, chciałem coś wypróbować ale nie do końca wyszło.

0

Dodałbym jakieś animacje tutaj ale tak ogólnie źle nie wyglada no może poza tym co screenie pokazuje, te przyciski bym wyrównał

screenshot-20170209161529.png

0

jak dla mnie w porządku stronka na luzie, jedynie na mobile dodałbym hamburgera od rozwijania menu jako sticky headera, bo w połowie strony nie ma jak wrócić, ale tak to spoko, możesz iść w świat z błogosławieństwem forum :)

0

No, całkiem spoko :)

Kilka uwag/rad ode mnie:

  • nie używaj selektorów elementów ani id. Pierwsze są niewygodne, bo wystarczy, że zmieni się struktura elementów i już jest dupa. Drugie bo id może być tylko jedno oraz tworzy to silniejszy selektor, który trudniej nadpisać. Klasy są wygodne bo łatwiej nadać gdzieś takie same style;
  • potrzebujesz float? Rozważ użycie fleksa, tylko jakieś g**no w stylu IE tego nie wspiera a jest dużo przyjemniejszy w użyciu. Jeżeli klient nie ma jasnego życzenia, że ma działać na IE to nie warto tego dziadostwa wspierać;
  • czemu masz wcięcia na 8 znaków? Takim trochę standardem są 4, 8 wygląda dziwnie;
  • zaprzyjaźnij się z SASSem, podzielisz pliki na mniejsze części tak aby było Ci wygodniej, znacznie podniesie się czytelność (zagnieżdżanie), możesz używać zmiennych, kilkunastoma liniami wygenerować grid itp. Ogólnie sporo zalet a i tak będzie to pewnie jedno z pierwszych narzędzi jakie poznasz w robocie, więc zawsze lepiej jak już to umiesz ;) Na rozmowie kwalifikacyjnej będą kręcić nosem z innych powodów niż "tylko CSS?";
  • zainteresuj się BEM + SMACSS (lub jakimkolwiek innym "standardem" nazewnictwa), tu masz fajny artykuł wprowadzający do całości i przy okazji wyjaśniający jak uniknąć błędów w nazewnictwie klas. Zaletą tego jest łatwiejsze utrzymanie frontu w przyszłości, większa przejrzystość (wiesz gdzie szukać stylii i na co będą oddziaływać), moment w którym robi się totalny rozpierdziel w stylach jest mocno odsunięty w czasie.
0

A jakąś walidację na formularzu kontaktowym planujesz?

0

Dzięki za uwagi.

@mr_jaro, w sumie jakoś tego nie widziałem, ale teraz faktycznie, wyrównane lepiej by wyglądało.

@czysteskarpety, pomysł był taki żeby całe menu przyklejało się do góry, hamburger zmieniał w X po kliknięciu, ale bez js słabo to działało, a że z js dopiero zaczynam, to zostawiłem jak jest.

@Pietruch, dzięki wielkie za wyczerpującą odpowiedź.
Jeśli chodzi o selektory, to gdzieś wyczytałem, że dążymy do jak najmniejszej ilości znaków w plikach i wyszedłem z założenia, że stylowanie po elementach i id sprawi, że plik html będzie mniejszy. Najwyraźniej coś źle zrozumiałem ;)
O flexie słyszałem, ale w kursach, z których korzystałem nawet o nim nie wspominali, więc myślałem, że to tylko jakiś bajer. Ale po Twojej uwadze sprawdziłem co to tak naprawdę jest i jestem pod wrażeniem :)
Te wcięcia to edytor miał ustawione domyślnie i jakoś nie zwróciłem na nie uwagi.
SASS jest już na liście do nauczenia. O BEM, SMACSS itp. pierwsze słyszę, ale na pewno się zapoznam.

@kiteboarder, nie, chodziło mi tylko o zamianę grafiki na statyczną stronkę, żeby poćwiczyć html i css.

Jeszcze raz dzięki za Wasze spostrzeżenia. Zabieram się za następnego PSD z uwzględnieniem Waszych uwag.

0

Jeśli chodzi o krótkie nazwy to faktycznie wpływają na wielkość strony, ale do tego można wykorzystać np. https://www.npmjs.com/package/gulp-minify-css-names (znalezione na szybko w Google, nie testowałem)
Dzięki temu klepanie stylów będzie nadal przyjemne, a na produkcji może iść wersja lżejsza ;)

BEMa również polecam. W pracy mi zajęło trochę zrozumienie go, ale jak już to się stało to wszystko ma duży sens i poprawia czytelność :)

0

Po dłuższej przerwie wróciłem do kodowania i podsyłam wam do oceny kolejną stronkę.

Github: https://github.com/mrk09/ELENA

Gotowa stronka: http://elena-com.stackstaging.com/

Jpg z PSD: http://res.cloudinary.com/dzlirbtzm/image/upload/v1490864772/elena_ov1one.jpg

Z góry dzięki za poświęcony czas.

0

W tej "Elenie" w html'u troszkę dziwi mnie sposób umieszczania komentarzy z blokami na sam koniec danego bloku. Widząc np <!-- Required meta tags --> dopisywałbym do tego rzeczy poniżej. Jeśli już tak Ci potrzebne te komenty to może <!-- Required meta tags start --> oraz <!-- Required meta tags end --> Aczkolwiek uważam że te komentarze są całkowicie zbędne. Nie wiem jak tam w najnowszych html'ach - ale osobiście uzupełniałbym też puste atrybuty href w linkach jako #. A jeśli boisz się scrollowania czy coś to chyba istnieje coś takiego jak !# albo #!

0

strona luz, chociaż 800 szerokości to raczej zamierzchłe czasy plus tło średnie, brakuje trochę górnej nawigacji, nie ma jak wrócić na górę po wyborze z menu i nie jest to płynne
zasadniczo przy jakimś FW+scrypty miałbyś sporo rzeczy "na wejście" bez zbytniego wysiłku

0

Umiejętności posiadasz.
W tym momencie skupiłbym się na tym, aby dopracować poziom odwzorowywania realizowanych projektów.

Współpracując z profesjonalnymi grafikami będącymi jednocześnie ekspertami w zakresie tworzenia UI, musisz przygotować się na to, że będzie się od Ciebie wymagać, by zaimplementowane przez Ciebie rozwiązania były "pixel perfect" lub co najmniej niemalże "pixel perfect", a że czym skorupka za młodu nasiąknie... ;-)

porównanie

1 użytkowników online, w tym zalogowanych: 0, gości: 1