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

Proszę o ocenę mojej strony

VPS Starter Arubacloud
+8 głosów
713 wizyt
pytanie zadane 10 stycznia 2017 w HTML i CSS przez lapa19904 Stary wyjadacz (11,560 p.)
Hej,

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

 

http://jakub-lawniczak.com/
1
komentarz 10 stycznia 2017 przez MatresSzczepcio Nowicjusz (120 p.)

MEGA!!!surprisewink

1
komentarz 10 stycznia 2017 przez HaKIM Szeryf (87,590 p.)
Czy tylko mnie tak bardzo kłuje w oczy napis „Javaskript”? :P
komentarz 10 stycznia 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
poprawione, dzięki! Bardziej skupiałem się na kodzie, mniej na treści :D
komentarz 10 stycznia 2017 przez Benek Szeryf (90,690 p.)
Nie, właśnie miałem to dodać :)
1
komentarz 10 stycznia 2017 przez HaKIM Szeryf (87,590 p.)

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 2017 przez Marcin2000Xpl Gaduła (3,250 p.)
"Natrabiam to co zaniedbałem w szkole." Popraw to
komentarz 12 stycznia 2017 przez niezalogowany
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 2017 przez MarioMZ Nowicjusz (170 p.)
Epicka
komentarz 12 stycznia 2017 przez Śwież4k Bywalec (2,570 p.)
Ś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 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
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

8 odpowiedzi

+5 głosów
odpowiedź 10 stycznia 2017 przez Comandeer Guru (599,730 p.)
wybrane 12 stycznia 2017 przez 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 2017 przez Benek Szeryf (90,690 p.)
  • 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 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
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 2017 przez Benek Szeryf (90,690 p.)

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 2017 przez radek024 Szeryf (77,180 p.)

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 2017 przez Marchewka900 Bywalec (2,970 p.)
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 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
Dziękuje, już poprawiam.
+1 głos
odpowiedź 10 stycznia 2017 przez imklau Nałogowiec (42,090 p.)
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 2017 przez xmentor Nałogowiec (49,520 p.)

 

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ź 12 stycznia 2017 przez lapa19904 Stary wyjadacz (11,560 p.)
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 2017 przez Makao Nowicjusz (220 p.)
Bardzo fajnie! Choć rzeczywiście są tam jakieś błędy językowe :)

Podobne pytania

0 głosów
6 odpowiedzi 416 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez niezalogowany
+8 głosów
12 odpowiedzi 669 wizyt
0 głosów
5 odpowiedzi 628 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...