Prosze o code review mojej strony :)

Question

Cześć, ostatnio podjąłem się wykonania prostej strony http://fx-team.fulara.com/team/adam/malcome/
Proszę o ocenę kodu, wygody użytkowania, estetyki, responsywności itp :)

Większość linków nie działa, one są taką atrapą ;)

Pozdrawiam
 

Answer 1

Skąd taki pomysł na walidację telefonu?

pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"

wg mnie kompletnie bezsensowny pattert na taką walidację... dlaczego wymuszasz taki format?

Dlaczego na wysłanie forma nie tworzy się żaden request?

Wizualnie moim zdaniem słabo... ten formularz szczególnie... jak z przed 10 lat.

Boli mnie też dużo animacji, ja jestem zwolennikiem prostych stron, i animacje ograniczone ewentualnie do jakiś hoverów itp. choć wiem, że wiele osób dzisiaj rajcuje jak wszystko na stronie fruwa i się kręci więc to moje całkowicie subiektywne zdanie.

<button class="contact-submit" type="submit">
    <span>Send </span>
</button>

po co Ci tutaj ten <span>?

Jeśli to ma być strona dla jakieś firmy to nie dawałbym w stopce adresu do GH - jeśli wejdzie tam inny potencjalnie zainteresowany klient to go tylko odstraszysz, przeciętny Kowalski nie ma pojęcia co to GH :)

Za bardzo nie ma tu co oceniać, nie ma tu w sumie nic po za paroma elementami html... ale jak dla mnie to strona jest jakaś jakby pusta.. czegoś mi tu brakuje...

 

Comments

Dzięki za opinie :)

Ten pattern znalazłem gdzieś w necie (pewnie była to starsza strona) i z braku wiedzy pomyślałem, że może tak się powinno robić.

Ten <span> bierze udział w animacji hover

---

Ten <span> bierze udział w animacji hover

eee... a czemu nie może być hover dla buttona po prostu :)?

Ten pattern znalazłem gdzieś w necie (pewnie była to starsza strona) i z braku wiedzy pomyślałem, że może tak się powinno robić.

taka mała rada na przyszłość... nigdy, przenigdy nie bierz w ciemno żadnych regul walidacyjnych bez wiedzy jak one działają :) A to dlatego, że kiedyś się natniesz, dostaniesz zgłoszenie że coś nie przechodzi a powinno i masz problem, bo nawet nie wiesz gdzie szukać :)

Ja zawsze mówię, że z programowaniem to tak jak z budową (to moje nawiążanie do mojego wykształcenia budowlanego :D ):

Najwięcej pracy włóż w to, czego nie widać.

Czyli najwazniejsze jest np. bezpieczeństwo, dobre, efektywne XHR'y, dobry kod abyś potem mógł go rozwijać itp. łatwiej przerobić css czy html niż zbyt nakombinowaną logikę w JS czy API. Tak samo jak z budową... nie warto oszczędzać na tym czego nie widać, na izolacji, materiałach do ścian itp. - farby zawsze mozna zmienić, przemalować, ale izolacji już tak łatwo nie zmienisz :)

---

Trafne porównanie, dzięki za merytoryczną odpowiedź :)
Potrzebuje się zainspirować jakimś formularzem, bo kompletnie nie mam pomysłu co zmienić

---

to popatrz sobie np. jak to wygląda we frameworkach jak bootstrap itp. i spróbuj zakodować samemu :)

Answer 2

1. <li class="m-menu-item"><a href="#top" class="menu-a"><span class="m-span-link">Start</span></a></li>

   Zdecydowanie nie potrzebujesz tutaj tego spana.

2. Gdzie jest menu na mobile?

3. Nie rozumiem w jakim celu użyłeś tabelki przy sekcji tam, gdzie masz ikonki check? Powinna tam być zwykła lista ul.

4. Poczytaj sobie o czymś takim jak flexbox - łatwiej będzie Ci tworzyć layout strony :)

 

Odnośnie wyglądu cóż...wygląda na dość starą stronę. Chyba najlepiej, jak poprzeglądasz projekty innych osób i poszukasz inspiracji (np tutaj https://dribbble.com/)

PS. Wrzucaj kod na Githuba - łatwiej będzie nam go ocenić.

Comments

Dzięki za opinie :)
2. Menu na mobile pojawia się po przescrollowaniu tej pierwszej sekcji kiedy szerokość ekranu jest mniejsza niż 510px

3. Masz racje, tabelkę zamienię na listę