PSD do HTML/CSS Ocena jakości kodu.

PSD do HTML/CSS Ocena jakości kodu.
M0
  • Rejestracja:około 8 lat
  • Ostatnio:prawie 8 lat
  • Postów:3
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.

mr_jaro
  • Rejestracja:prawie 14 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Grudziądz/Bydgoszcz
  • Postów:5300
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.
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
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 :)


PI
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 7 lat
  • Postów:172
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.
Zobacz pozostałe 4 komentarze
OM
No czasami się nie da, jak dostajesz od klienta listę które przeglądarki i od której wersji mają byś wspierane ;P
PI
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
mr_jaro
@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ć
PI
@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ł.
kiteboarder
  • Rejestracja:ponad 9 lat
  • Ostatnio:prawie 3 lata
  • Lokalizacja:Warszawa
0

A jakąś walidację na formularzu kontaktowym planujesz?

czysteskarpety
czysteskarpety
on jest frontem, to nie :)
mr_jaro
@czysteskarpety: tworząc strone opartą o np angulara i nie zrobienie walidacji we froncie to kpina więc źle mówisz ;)
czysteskarpety
czysteskarpety
a co ci da walidacja bez backendu...
PI
@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".
mr_jaro
@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
czysteskarpety
czysteskarpety
@Pietruch: co nie zmienia faktu, że contact form i tak nie działa :) myślę że do klepania formatek taki skill spokojnie wystarczy
PI
@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.
czysteskarpety
czysteskarpety
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"
M0
  • Rejestracja:około 8 lat
  • Ostatnio:prawie 8 lat
  • Postów:3
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
mar-ek1
  • Rejestracja:prawie 14 lat
  • Ostatnio:około 6 godzin
  • Postów:525
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
M0
  • Rejestracja:około 8 lat
  • Ostatnio:prawie 8 lat
  • Postów:3
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.

axelbest
  • Rejestracja:ponad 17 lat
  • Ostatnio:około 17 godzin
  • Lokalizacja:Warszawa
  • Postów:2251
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
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
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


wisensane
  • Rejestracja:około 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:51
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

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)