• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Proszę o ocenę mojej strony

+8 głosów
428 wizyt
pytanie zadane 10 stycznia w HTML i CSS przez użytkownika lapa19904 Obywatel (1,470 punkty)
Hej,

proszę o ocenę mojej strony oraz o ewentualne wskazówki.

 

http://jakub-lawniczak.com/
1
komentarz 10 stycznia przez użytkownika MatresSzczepcio Nowicjusz (120 punkty)

MEGA!!!surprisewink

1
komentarz 10 stycznia przez użytkownika HaKIM Maniak (67,740 punkty)
Czy tylko mnie tak bardzo kłuje w oczy napis „Javaskript”? :P
komentarz 10 stycznia przez użytkownika lapa19904 Obywatel (1,470 punkty)
poprawione, dzięki! Bardziej skupiałem się na kodzie, mniej na treści :D
komentarz 10 stycznia przez użytkownika Benek Nałogowiec (26,920 punkty)
Nie, właśnie miałem to dodać :)
1
komentarz 10 stycznia przez użytkownika HaKIM Maniak (67,740 punkty)

Lapo, zapomniałeś o zdaniu na dole:

Jednak zdaję sobię sprawę że do dobrej znajomości Java skriptu jeszcze długa droga.

Btw. to: JavaScript. Ta, wiem, czepiam się, ale od razu poważniej wygląda.

To samo z „jQuerry”; piszemy: jQuery.

Miłego.

komentarz 10 stycznia przez użytkownika Marcin2000Xpl Gaduła (3,110 punkty)
"Natrabiam to co zaniedbałem w szkole." Popraw to
komentarz 12 stycznia przez użytkownika shead VIP (120,120 punkty)
Uncaught TypeError: Cannot read property 'prototype' of undefined
    at common.js:48
    at Object._.Va (js:34)
    at a (common.js:48)
    at Dm (common.js:49)
    at common.js:50
    at tm.En (common.js:202)
    at Object.c [as _m7n9js] (common.js:44)
    at maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Fjakub-lawniczak.com%2F&callback=_xdc_._m7n9js&token=80707:1

 

komentarz 12 stycznia przez użytkownika MarioMZ Nowicjusz (170 punkty)
Epicka
komentarz 12 stycznia przez użytkownika Śwież4k Użytkownik (510 punkty)
Świetna strona, nawet mimo tych drobnych błędów. Mogę wiedzieć, czy używałeś tylko HTMLa i CSSa do stworzenia tej strony?
komentarz 12 stycznia przez użytkownika lapa19904 Obywatel (1,470 punkty)
Mobilnie rozwijana navigacja(przy width >767px) i animacje typu fadeIn czy pulse to jQuery.

W trakcie dodawana jest też mapa (maps.js), jednak pracuję na etacie i zacząłem ją wczoraj jednak nie udało mi się skończyć. Dziś o 20:00 mapa z oznaczoną lokalizację mojej HQ powinna być gotowa w divie contact. Myślę że podniesie to trochę atrakcyjność strony. Jest to dopiero druga zrobiona przeze mnie strona stąd tyle błędów. Pomału z nimi walczę :D

9 odpowiedzi

+6 głosów
odpowiedź 10 stycznia przez użytkownika Comandeer Ekspert (332,440 punkty)
wybrane 12 stycznia przez użytkownika lapa19904
 
Najlepsza
<img src="resources/img/logo-white.png" alt="Jakub Ławniczak" class="logo">

To nie powinno być w nawigacji IMO.

<a class="mobile-nav-icon js--nav-icon"><i class="ion-toggle"></i></a>

To powinien być przycisk, ładnie podpięty, z dostępnie zrobioną ikonką i alternatywną treścią tekstową. Przykładowa implementacja.

<i class="ion-social-css3 icon-skill"></i>

Ikonki ozdobniki powinny mieć [aria-hidden=true]. No i powinno się je robić na span. Nie ma żadnego uzasadnienia dla używania i tutaj.

<img src="resources/img/BUDMAR.jpg">

A gdzie się [alt] podział? Jak go dubluje treść nagłówka, to niech będzie pusty.

<ul class="contact-list">
                    <li>Jakub Ławniczak</li>    
                    <li>Poznań</li>    
                    <li>691-149-902</li>    
                    <li>jakub.lawniczak@hotmail.com</li>    
                </ul>

To bynajmniej nie jest lista + można spokojnie otoczyć address.

Hash w adresie się nie uaktualnia przy scrollu, a powinien.

<a class="btn btn-full js--scroll-to-contact" href="#">Napisz do mnie</a>

Tragicznie głupi pomysł. Nie ma jakiegokolwiek uzasadnienia zepsucie linka poprzez podanie całkowicie bezsensownego [href], a mimo wszystko odsyłanie do konkretnej sekcji na stronie.

<div class="col span-1-of-3 box">
                    <img src="resources/img/Okto_kadry31-1030x579.jpg" alt="MBN">
                    <h3>MBN Nadstaga</h3>
                    <div class="job-feature">
                    <i class="ion-calendar icon-small"></i>01.2010 - 06.2013
                    </div>
                    <div class="job-feature">
                    <i class="ion-person icon-small"></i>Specjalista ds. sprzedaży
                    </div>
                    <div class="job-feature">
                    <i class="ion-ios-home icon-small"></i><a href="http://mbn-nadstaga.pl/" target="_blank"> Strona www</a></div>
                </div> 

To wygląda jak typowa lista klucz-wartość:

<section class="col span-1-of-3 box">
	<img src="resources/img/Okto_kadry31-1030x579.jpg" alt="">
	<h3>MBN Nadstaga</h3>
	<dl>
		<dt>
			<span class="ion-calendar icon-small" aria-hidden="true"></span>
			<span class="visuallyhidden">Czas pracy</span>
		</dt>
		<dd>
			<time datetime="2010-01/2013-06">01.2010–06.2013</time>
		</dd>
		<dt>
			<span class="ion-person icon-small" aria-hidden="true"></span>
			<span class="visuallyhidden">Stanowisko</span>
		</dt>
		<dd>Specjalista ds. sprzedaży</dd>
		<dt>
			<span class="ion-ios-home icon-small" aria-hidden="true"></span>
			<span class="visuallyhidden">Strona WWW firmy</span>
		</dt>
		<dd>
			<a href="http://mbn-nadstaga.pl/">MBN-Nadstaga.pl</a>
		</dd>
	</dl>
</section> 

Tak, wstawiłem to w sekcję (bo jest nagłówek) i poprawiłem ikonki. Implementację .visuallyhidden najlepiej wziąć z H5BP.

+3 głosów
odpowiedź 10 stycznia przez użytkownika Benek Nałogowiec (26,920 punkty)
  • Po wyłączeniu JS w przeglądarce niewiele tekstu pozostaje na stronie
  • Zdaje się, że "target=_blank" należy unikać, by zostawić użytkownikowi wybór
  • Istnieje tag <address>
  • Ikony należy wstawiać w znacznik <span class="icon-..."></span>
  • Warto byłoby dać min-width, bo po zwężeniu strony < 300px robi się ona nieczytelna

 Poza tym wizualnie strona bardzo przyjemna.

komentarz 10 stycznia przez użytkownika lapa19904 Obywatel (1,470 punkty)
Starałem się aby po zmniejszeniu width było przejrzyście, mobil-navi, zmiana z inline-block na block. gdzie dokładniej proponujesz zastosować min-width?
1
komentarz 10 stycznia przez użytkownika Benek Nałogowiec (26,920 punkty)

Na swojej stronie zastosowałem coś takiego, że jeśli szerokość okna < 300px, to szerokość strony zostaje ustalona na 300px. Powoduje to, że pojawia się poziomy suwak, ale za to panuję nad całą zawartością strony i nic mi nie ucina. Zauważ, że najmniejsze ekrany urządzeń mobilnych mają zwykle szerokość >= 320px. Moja strona poprawnie przechodzi test responsywności.

+2 głosów
odpowiedź 10 stycznia przez użytkownika radek024 Nałogowiec (47,160 punkty)

UX:

- wstęp bardzo fajny...

- ...ale później bardzo dużo błędów:

Chciałbym pracować jako junior front-end developer, chodź słowo "pracować" wolałbym zamienić na "uczyć się" ;)

Javaskript/jQuerry

do tego dochodzi masa błędów interpunkcjnych :(

  • footer mógłby zawierać linki do sociali na równi z copyrightem, estetyczniej to wtedy wygląda,
  • menu dziwnie przeskakuje na mobilnych, może denerowować, a brak tła sprawia, że zlewa się z napisem "Witaj!..."
  • te przyciski(nie wiem co to, nie patrzyłem jeszcze do kodu :v) się zlewają - margin-top: 3px i będzie git,
  • tekst o angielskim wylewa się poza sekcję - to poważny błąd, tekst jest nieczytelny i strona traci na estetyce,
  • trochę zbyt duże przerwy w adresie na widoku mobilnym - warto je zmniejszyć.

Co do kodu:

  • lang dla html - git, pierwszy utf-8 - git, ale w stylach już zawalone - customowe zawsze na końcu, coby mieć swobodę w edycji pozostałych,
  • napis nie oddaje loga, albo to logo nie oddaje napisu :v (i to jest jednak nagłówek dla nawigacji)
  • brak Bootstrapa - to coś innego istnieje? :D
  • h1 sam w sobie nieco za długi, postaraj się za jego pomocą przedstawić nie siebie, a stronę,
  • patrząc na schemat wyłącznie głową, można uznać, że zarówno podtytuły w "o mnie", jak i "umiejętności", to nagłówki - ja bym tak zrobił, wszak prezentują one jakiś dłuższy tekst - później w doświadczeniu znowu uznajesz nazwy firm, w których pracowałeś za wartościowe,
  • do dat mamy specjalny tag - time,
  • kontaktu nie traktowałbym jako listy,
  • target="_blank" przy socialach - ja wiem, że chcesz utrzymać na stronie jak nadłużej użytkownika, ale nie dość, że jest to jej koniec, to jeszcze utrudniasz poprzez to jej dostępność,
  • strasznie dużo zbędnej przestrzeni na końcu dokumentu HTML,
  • style i skrypt, nawet plik HTML można zminifikować :)

I to chyba tyle ;)

+1 głos
odpowiedź 10 stycznia przez użytkownika Meeto93 Obywatel (1,630 punkty)
Bardzo fajna strona, postarałeś się. Jedyny błąd jaki wyłapałem to błąd ortograficzny - "Tak uwielbiam to!" - powinno chyba być "tak, uwielbiam to!" :D
komentarz 10 stycznia przez użytkownika lapa19904 Obywatel (1,470 punkty)
Dziękuje, już poprawiam.
+1 głos
odpowiedź 10 stycznia przez użytkownika Noemi Gaduła (4,520 punkty)
Mnie też się bardzo podoba, chyba ładniejszej tu nie widziałam! :D
A tak się zastanawiam, czy stosowanie section jest odpowiednie?
Bo mam stronę w podobnym stylu zrobioną i zastanawiałam się, czy właśnie section będzie odpowiednie :P
+1 głos
odpowiedź 10 stycznia przez użytkownika xmentor Nałogowiec (25,920 punkty)

 

Popraw.

Dziwnie ucina.

Co do wszystkich ikon: http://fontawesome.io/accessibility/

Pomyślałbym o zmianie struktury sekcji, zamiast:

<section>
  <h2>Something</h2>
  <p>Ipsum</p>
  <div>
    <h3>Something_</h3>
    <p>Ipsum</p>
  </div>
  <div>
    <h3>Something_</h3>
    <p>Ipsum</p>
  </div>
</section>

na:

<article>
  <h2>Something</h2>
   <p>Ipsum</p>
  <section>
    <h3>Something_</h3>
    <p>Ipsum</p>
  </section>
  <section>
    <h3>Something_</h3>
    <p>Ipsum</p>
  </section>
</article>

U mnie na FF dziwnie zachowują się ikony społecznościowe w stopce, najechanie na dolną część ikony daje dopiero jakąś reakcje.

0 głosów
odpowiedź 10 stycznia przez użytkownika Artur Grochal Użytkownik (550 punkty)
Strona pod względem wizualnym bardzo ładna, jednak przyciski do social media dodałbym w jakieś kwadraty,żeby nie trzeba było celować w małą ikonkę G+i inne, oraz dodał kolor po najechaniu na ikonkę LinkedIn ;)
0 głosów
odpowiedź 12 stycznia przez użytkownika lapa19904 Obywatel (1,470 punkty)
Za wszystkie odpowiedzi bardzo dziękuje. Część błędów udało mi się poprawić(span, alt, margin, hover, address), a nad resztą będę pracował w najbliższych dniach. Nie potrafię sobie jednak poradzić z mobile-nav w header na telefonie. Kiedy jestem w header to mobil-nav otwiera się ładnie jednak odnośniki (Doświadczenie/Kontakt) zlewają się z h1. Są nieczytelne, a do tego nie są aktywne. Background-color nie rozwiązuje problemu, a z-index nic nie zmienia. Jak macie na to jakieś sposoby/pomysły to proszę o pomoc.
0 głosów
odpowiedź 12 stycznia przez użytkownika Makao Nowicjusz (220 punkty)
Bardzo fajnie! Choć rzeczywiście są tam jakieś błędy językowe :)

Podobne pytania

0 głosów
6 odpowiedzi 279 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez użytkownika Konrad Wiktor Nowicjusz (120 punkty)
+8 głosów
12 odpowiedzi 517 wizyt
pytanie zadane 27 marca 2016 w Nasze projekty przez użytkownika Kuba Skoneczny Użytkownik (660 punkty)
+4 głosów
6 odpowiedzi 322 wizyt
pytanie zadane 9 kwietnia 2016 w Nasze projekty przez użytkownika R.orlinski Mądrala (5,190 punkty)
...