• 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
457 wizyt
pytanie zadane 10 stycznia w HTML i CSS przez lapa19904 Obywatel (1,510 p.)
Hej,

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

 

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

MEGA!!!surprisewink

1
komentarz 10 stycznia przez HaKIM Maniak (69,720 p.)
Czy tylko mnie tak bardzo kłuje w oczy napis „Javaskript”? :P
komentarz 10 stycznia przez lapa19904 Obywatel (1,510 p.)
poprawione, dzięki! Bardziej skupiałem się na kodzie, mniej na treści :D
komentarz 10 stycznia przez Benek Nałogowiec (30,390 p.)
Nie, właśnie miałem to dodać :)
1
komentarz 10 stycznia przez HaKIM Maniak (69,720 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 przez Marcin2000Xpl Gaduła (3,210 p.)
"Natrabiam to co zaniedbałem w szkole." Popraw to
komentarz 12 stycznia przez shead VIP (125,440 p.)
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 MarioMZ Nowicjusz (170 p.)
Epicka
komentarz 12 stycznia przez Śwież4k Użytkownik (670 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 przez lapa19904 Obywatel (1,510 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

9 odpowiedzi

+6 głosów
odpowiedź 10 stycznia przez Comandeer Ekspert (346,200 p.)
wybrane 12 stycznia 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 przez Benek Nałogowiec (30,390 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 przez lapa19904 Obywatel (1,510 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 przez Benek Nałogowiec (30,390 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 przez radek024 Maniak (51,060 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 przez Meeto93 Gaduła (3,560 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 przez lapa19904 Obywatel (1,510 p.)
Dziękuje, już poprawiam.
+1 głos
odpowiedź 10 stycznia przez Noemi Pasjonat (17,820 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 przez xmentor Nałogowiec (32,500 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ź 10 stycznia przez Artur Grochal Użytkownik (620 p.)
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 lapa19904 Obywatel (1,510 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 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 298 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Konrad Wiktor Nowicjusz (120 p.)
+8 głosów
12 odpowiedzi 523 wizyt
0 głosów
5 odpowiedzi 364 wizyt
...