Strona wizytówka do oceny

pytanie zadane 8 maja 2017 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
edycja 9 maja 2017 przez gremlin

Witam złowieszczo.

Stworzyłem prostą stronę wizytówkę i zwracam się do Was z prośbą o ocenę kodu oraz wyglądu.

Bez zbędnego gadania.

Użyte technologie: html, css, js

Link do strony: https://nilmergomino.github.io/1-wizytowka/

Link do projektu na githubie: https://github.com/NilmergOmino/1-wizytowka

Dziękuję za wszystkie komentarze, dziś wprowadziłem poprawki do strony więc powinno być odrobinę lepiej. Pozdrawiam :)

komentarz 8 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Ciekawa tematyka ;)

Ten zielony po bokach rzeczywiście trochę razi po oczach.

Trochę bez sensu z tym menu skoro to jest strona wizytówka gdzie wszystko mieści się na całym ekranie i nie trzeba nawet w dól przewijać.

No i trochę ubogo jak dla mnie ale to pewnie kwestia gustu.

7 odpowiedzi

odpowiedź 8 maja 2017 przez Comandeer Guru (600,810 p.)

.header__h1, .header__a → dość dziwna kombinacja. Czemu nie .header__heading, .header__link?
Przycisk do rozsuwania powinien działać jak przycisk menu – ustawiać odpowiednie atrybuty ARIA.
Linki w stopce z powodu poziomu nagłówka stały się podsekcjami "Kontaktu".

<header class="main__article-header"><h2>Moje doświadczenie</h2></header>

W takim wypadku zostawiłbym sam nagłówek, bez header.

.aside__section-social-media h3 – jak już kulasz takie nazwy klas, to właśnie po to, by nie było odniesień do czystych tagów ;)

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

Dzięki za odpowiedź i cenne uwagi. :)

Te nazwy to faktycznie jeszcze mi średnio wychodzą, muszę to dopracować.

odpowiedź 8 maja 2017 przez xmentor Nałogowiec (49,520 p.)

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/fontello/css/fontello.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">

Można połączyć pliki, zminifikować i zalinkować jeden plik ze stylami.

<span class="icon-facebook" aria-label="facebook">

Niby okej, ale poczytaj jeszcze tu: https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html#bardziej-dost%C4%99pne-sposoby

<header><h3>Social media</h3></header>
[...]
<header class="main__article-header"><h2>O mnie</h2></header>

Itp. - Znaczniki header są tutaj zbędne.

<span class="main__phone-number">111 222 333</span

Czemu nie:

<a href="tel:111222333" class="main__phone-number">111 222 333</a>

<label for="email">Twój adres e-mail</label><br>

br'y wyrzuć i zastąp margin-bottom.

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

O tym z numerem telefonu najzwyczajniej nie słyszałem, dzięki wielkie za wskazówki. :)

odpowiedź 8 maja 2017 przez Benek Szeryf (90,870 p.)
edycja 8 maja 2017 przez Benek

Oczki bolą, zbyt zielony ten zielony. Zwróć uwagę, że masz Lorem ipsum na stronie.

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

Lorem ipsum był celowym zapychaczem. Dzięki za opinię w sprawie kolorystyki.

odpowiedź 8 maja 2017 przez niezalogowany

odpowiedź 8 maja 2017 przez jpacanowski VIP (101,940 p.)

Jeśli chodzi o sprawę techniczną (nie będę oceniał wyglądu strony, bo uważam, że treść jest ważniejsza) to daję 5+... Nie miałem do czego się przyczepić. I jeszcze dodatkowy duży plus za materialize.css oraz za brak jQuery ;)

komentarz 8 maja 2017 przez Shaoi Mądrala (7,020 p.)

O mnie

Na imie mam Zenon Brzoza, mam 42 lata i od 8 lat zajmuje się profesjonalnym łapaniem dzikich bądź nieproszonych zwierząt.

Już na początku jest o co się przyczepić.

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

oo, dziękuje bardzo :)

komentarz 8 maja 2017 przez Shaoi Mądrala (7,020 p.)

I kolejny błąd ortograficzny. ;[

1	komentarz 8 maja 2017 przez Assasz Nałogowiec (30,460 p.) Grammar Nazi? ;)

komentarz 8 maja 2017 przez Comandeer Guru (600,810 p.)

Jak już się tak serio czepiać, to raczej "nazywam się X Y" niż "mam na imię X Y" :P

odpowiedź 8 maja 2017 przez Piotrinformatyk Początkujący (340 p.)

Zbyt zielone. Nie lepiej niebieski? Polecę tobie 2 strony które mogą się tobie przydać :) profilki.pl i blonparia.blogspot.com(instrukcje ->blogowe(design))

Myślę, że się tobie przydadzą. Dzięki temu udało mi się zrobić fajne menu :) Ja sobie tak zrobiłem: https://piter-bloger.blogspot.com

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

Niebieski nie pasował mi tematycznie do wymyślonego zawodu wymyślonej postaci. Ale masz rację, że chyba zły odcień wybrałem, muszę nad tym popracować. Dzięki za linki :)

komentarz 11 maja 2017 przez Piotrinformatyk Początkujący (340 p.)

Spoko Jeżeli nadal chcesz zielony to zmień do na ciemny i "matowy", ale albo tło albo reszta strony zielona. W/g mnie tak najlepiej będzie wyglądać z zielonym. Drugi kolor może być dowolny, ktory współgra z tym zielonym.

odpowiedź 8 maja 2017 przez niezalogowany

Jak pisali poprzednicy: zielony pali w oczy i ja (ale to już takie moje "zboczenie") zrobiłbym zaokrąglone brzegi divów, bo te ostre kąty trochę też mnie kłują. Popracuj nad responsywnością strony: na telefonach z matrycą FHD i wyżej marnuje się sporo miejsca, a stronę można "przesuwać" na boki
FHD

1440

Z kolei na tych, które mają "tylko" 720 strona nie mieści się na ekranie:

720

Dodałbym pływający button, dzięki któremu można szybko wrócić na górę strony (jak to zrobić, jest na jednym z kursów Pasji Informatyki na yt), żeby nie przewijać scrollem.

komentarz 8 maja 2017 przez gremlin Dyskutant (7,600 p.)

Dzięki za podpowiedzi. Zdziwiłeś mnie trochę z tą responsywnością przy 720, bo u mnie normalnie się mieści i nawet na telefonie nic nie ucina.

komentarz 8 maja 2017 przez niezalogowany

Faktycznie, coś ta emulacja na Operze nie "zatrybiła" odpowiednio, bo otworzyłem drugi raz i na boki nie dało się przewijać, ale i tak na dużych rozdzielczościach marnuje się miejsce na tło.