Moja pierwsza strona.

Question

Witam,

od jakiegoś czasu zaintresowały mnie technologie webowe. Narazie uczę się Html, oraz Css i planuje zacząc nauke Javascriptu. Poniżej prezęntuje swoją pierwszą stronę internetową. Proszę o rzeczową ocenę, oraz wskazówki, które móbłbym użyć przy tworzeniu kolejnych projektów.

Ps: przy tworzeniu korzystałem z jQuery, lecz posłużylem się gotowym skryptem i tylko go lekko przerobiłem.

Strona/Portfolio: https://adim1248.github.io/webdesign/

Kod strony: https://github.com/adim1248/webdesign/tree/gh-pages

Pozdrawiam.

Answer 1

mamy ocenić zarówno kod, jak i wygląd? boo jeśli tak too...

Co do wyglądu:

• ogólnie całkiem ładny, przejrzysty
• dla tej pierwszej sekcji dałabym chyba height na 100vh, bo ucina u mnie część przycisku
• fajnie by było jakby ten właśnie przycisk miał jakiś efekt hover, np tło białe + napis czarny i do razu widać że coś się dzieje;)
• przy najechaniu na któryś element z menu powiększa się przy okazji header, daj dla elementu li border-bottom: 2px solid transparent, wtedy przy hoverze nie będzie zamieniało tylko kolor. Chyba, że to był efekt zamierzony...to i tak rozprasza trochę, więc mimo wszystko bym zmieniła;)
• sekcja "o nas" ma za dużo tekstu, może lepiej by to było rozbić na kilka <p> z odstępami?
• w portfolio też by się przydał jakiś efekt dla przycisków

Co do kodu:

• nie styluj po tagach, od tego masz klasy, więc nadawaj każdemu elementowi odpowiednią klasę i ją wykorzystuj w CSS
• standardowo sposób na poprawne wstawianie ikonek

<div class="text">Tworzymy dla was</div>

to powinno być nagłówkiem i w tym wypadku raczej <h2>

• brakuje Ci altów dla <img>

<div class="image">
          <a href="#">
              <img src="img/2.jpg">
              <div class="middle">
                  <p>Strona restuaracji wykonana technologii</p>
                  <i class="icon-html5-alt"></i>
                  <i class="icon-css3"></i> 
                  <i class="icon-javascript"></i>
                  <i class="icon-php-alt"></i>
                  <a href="#" class="button">Zobacz!</a>
              </div>
          </a>
</div>

masz jeden link w drugim, więc ten wyżej chyba jest zbędny

• inputy muszą mieć label, ale jeśli nie chcesz żeby on był widoczny na stronie to po prostu ukryj go w CSS
• unikaj target="_blank" - pozwól użytkownikowi zdecydować, w której karcie chce otworzyć link
• linki do portali społecznościowych wypadałoby dać w listę, bo to jednak lista :P

Nie jest tak źle, powodzenia dalej! :P

Answer 2

Pod względem estetycznym bardzo mi się podoba. Ładna, prosta, przejrzysta, czytelna. W kwestii technicznej się nie wypowiem, bo jako początkujący nie czuję się kompetentny.

Answer 3

na i padzie naglowek "o nas" jest po prawej a reszta wysrodkowana. + nie jest wystylizowany tak samo (besz tej kreski poziomej) to samo na i padzie pro. Edit: nie tylko na ipadzie tak jest wszedzie :) imo naglowki kazdej sekcji powinny wygladac tak samo :)
na i padzie pro rozjezdza sie napis na zdjeciu u samej gory  przyklejony do krawedzi nie wyglada najlepiej.

Dodalbym jakis slider ktory by cofal na sama gore/dol w zaleznosci gdzie jestesmy.
Po za tym bardzo ladnie schludnie sam bym takiej nie zrobil :)

Rozumiem ze klikanie w ikonki mediow spolecznosciowych w stopce (pod napisame you can find us ) bedzie przekierywowalo do kont w tych mediach a nie tak jak teraz do tej samej strony ? Przynajmniej tak by bylo intuicyjnie :)

Comments

Tak, zapomniałem o podlinkowaniu, jeszcze te ikony miały się podswietlać w kolorach z którymi są kojarzone.

---

bardzo dobry pomysl mozesz sprowac tez zrobic na odwrot tj: zeby byly kolorow z ktorymi sa kojarzone i po najechaniu zmieniac kolor imo to bedzie lepszym rozwiazaniem bo intyuicyjnie bedzie wiadomo ze sa interaktywne ( ale musisz sprawdzic czy bedzie to ladnie wygladalo)

---

A i jeszcze przycisk "submit" jest po prawej a moim zdaniem powinen byc wysrodkowany :)

Co do ikonek mediow tez po najechaniu minimalnie bym je powiekszyl :)

edit :na iphonie 5  tekst przykleja sie do prawej krawedzi
PS: jesli chcesz zebym dokladnie pobawil sie w testera napisz priw bo nie chce spamowac w temacie

Answer 4

Strona bardzo ładna ale mam ale :)

1. Do przycisku dodałbym jakąś ładną interakcje np. że cały staje się biały a napis czarny

2. Przy najechaniu na link brzydko się powiększa manu sticky

3. Ciekawie wyglądało by na zdj. dodać efekt parallax

4. I po najechaniu na obrazek z stroną kancelarii, restauracji, itd. odczuwa się dziwne wrażenie.

 

Więc tak punkt 1 i 3 to kwestia gustu ale 2 i 4 bym poprawił delikatnie :)

Answer 5

Dziękuje wszystkim za cenne porady. Za jakiś czas postaram się stworzyć kolejną stronę. W sumie jeszcze nie wiem o jakiej tematyce ;p