PSD do HTML/CSS Ocena jakości kodu.

Odpowiedz Nowy wątek
2017-02-09 15:42

Rejestracja: 3 lata temu

Ostatnio: 3 lata temu

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/dzl[...]1460/CudaPortfolio_ykqvvl.jpg

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

Pozostało 580 znaków

2017-02-09 16:15

Rejestracja: 9 lat temu

Ostatnio: 7 godzin temu

Lokalizacja: Grudziądz/Bydgoszcz

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


It's All About the Game.

Pozostało 580 znaków

2017-02-09 16:18

Rejestracja: 5 lat temu

Ostatnio: 9 godzin temu

Lokalizacja: Piwnica

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 :)


Pozostało 580 znaków

2017-02-09 20:11

Rejestracja: 5 lat temu

Ostatnio: 3 lata temu

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.
Pokaż pozostałe 4 komentarze
No czasami się nie da, jak dostajesz od klienta listę które przeglądarki i od której wersji mają byś wspierane ;P - OverMorda 2017-02-09 20:40
Wiadomo, dlatego napisałem, że jeżeli nie ma wyraźnego chciejstwa z góry to nie ma co nawet odpalać IE na Browserstacku do testów :P - Pietruch 2017-02-09 20:41
@Pietruch: ja pisałem flexa i ie 11 łapało bez problemu, a ie 10 z drobnymi sztuczkami także flex jak najbardziej można używać - mr_jaro 2017-02-09 20:59
@mr_jaro: no widzisz, ja natomiast kilka miesięcy temu robiłem w apce, gdzie klient chciał wsparcia dla IE11 a flex powodował drobne błędy w niektórych miejscach. Nic specjalnie wielkiego, ale jego grafik o to sapał. - Pietruch 2017-02-09 23:43
@Pietruch: to miałeś pecha - mr_jaro 2017-02-09 23:45

Pozostało 580 znaków

2017-02-10 10:06

Rejestracja: 5 lat temu

Ostatnio: 2 miesiące temu

Lokalizacja: Warszawa

0

A jakąś walidację na formularzu kontaktowym planujesz?

Pokaż pozostałe 3 komentarze
@czysteskarpety: np. to, że jeżeli będzie szukać pierwszej pracy i wrzuci tą stronę do portfolio to nikt mu nie powie "ale tu nawet nie ma walidacji po stronie klienta, żadnej zaślepki do późniejszego podpięcia". - Pietruch 2017-02-10 11:15
@czysteskarpety: to, że natychmiast jest pokazany błąd i nie można wysłać formularza dopóki nie jest poprawny tym samym leci do api jedynie request który ma na 99,9% poprawne dane i nie wróci nam 422. Podsumowując - user od razu wie, że ma złe dane wpisane, backend jest odciążony. Przetestuj to https://material.angularjs.org/latest/demo/input - mr_jaro 2017-02-10 11:16
@Pietruch: co nie zmienia faktu, że contact form i tak nie działa :) myślę że do klepania formatek taki skill spokojnie wystarczy - czysteskarpety 2017-02-10 11:18
@czysteskarpety: nie działa, ale przynajmniej widać, że koleś wie, że walidacja jest potrzebna i potrafi się za nią zabrać od strony frontu. Nie jest to coś wielkiego, ale zawsze lepiej to wygląda jak walidacja jest niż jak jej nie ma. Do klepania formatek to raczej wymagają większych umiejętności ;) Przynajmniej takie odnoszę wrażenie gdy przeglądam oferty pracy. - Pietruch 2017-02-10 11:23
zależy ile chcesz zarobić, tak ogólnie to powinno starczyć, na zasadzie "zahaczyłem się, będzie z tego kasa więc uczę się dalej" - czysteskarpety 2017-02-10 11:25

Pozostało 580 znaków

2017-02-10 10:33

Rejestracja: 3 lata temu

Ostatnio: 3 lata temu

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.

edytowany 1x, ostatnio: mrk09, 2017-02-10 10:35

Pozostało 580 znaków

2017-02-10 11:08

Rejestracja: 9 lat temu

Ostatnio: 10 godzin temu

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ść :)


edytowany 1x, ostatnio: mar-ek1, 2017-02-10 11:08

Pozostało 580 znaków

2017-03-30 11:27

Rejestracja: 3 lata temu

Ostatnio: 3 lata temu

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/dzl[...]/v1490864772/elena_ov1one.jpg

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

Pozostało 580 znaków

2017-03-30 11:39

Rejestracja: 12 lat temu

Ostatnio: 4 dni temu

Lokalizacja: Warszawa

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 #!

edytowany 1x, ostatnio: axelbest, 2017-03-30 11:42

Pozostało 580 znaków

2017-03-30 12:49

Rejestracja: 5 lat temu

Ostatnio: 9 godzin temu

Lokalizacja: Piwnica

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


Pozostało 580 znaków

2017-04-05 13:56

Rejestracja: 3 lata temu

Ostatnio: 11 miesięcy temu

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

Pozostało 580 znaków

Odpowiedz

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