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

Strona do oceny!

VPS Starter Arubacloud
+6 głosów
726 wizyt
pytanie zadane 27 września 2017 w Nasze projekty przez imklau Nałogowiec (42,090 p.)

Jak w temacie - proszę o ocenę kodu strony.

A najbardziej proszę o wskazówki dotyczące BEM i Sass, bo z tym nie miałam za bardzo do tej pory do czynienia ;)

Podgląd strony

Kod strony

1
komentarz 28 września 2017 przez radek024 Szeryf (77,180 p.)

Na szybko: w menu masz treść visuallyhidden, która jest po polsku - strona jest oznaczona po angielsku. 

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)
o faktycznie, dzięki ;p

6 odpowiedzi

+2 głosów
odpowiedź 28 września 2017 przez JayJay Mądrala (6,020 p.)

W Sass dobrze byłoby zastosować placeholder'y (zamiast mixin'ów i/lub stworzyć placeholder'y z części mixin'ów, które nie zmieniają wartości), aby zmniejszyć trochę rozmiar wynikowego Css'a, np.

@mixin flex($justify) {
  dispaly: flex;
  justify-content: $justify;
  align-items: center;
}

.socials {
  @include flex(flex-start);
}

.header {
  @include flex(center);
}

.footer {
  @include flex(flex-end)
}

Można zamienić na:

%flex {
  dispaly: flex;
  align-items: center;
}

@mixin flex-justify($justify) {
  justify-content: $justify;
}
.socials, .header, .footer {
  @extend %flex;
}

.socials{
  @include flex-justify(flex-start);
}

.header {
  @include flex-justify(center);
}

.footer {
  @include flex-justify(flex-end)
}

Przykład nie jest idealny, ale wydaję mi się, że pokazuje samą ideę wykorzystywania placeholder'ów. Kod CSS będzie trochę prostszy i bez duplikatów tych samych własności.

Artykuł z porównaniem mixin, placeholder, extend:

http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)
nie używałam takiego czegoś jeszcze, dziękuję! ;)
+1 głos
odpowiedź 27 września 2017 przez bicnet Gaduła (4,800 p.)

 

Czy to na pewno powinno tak być?

komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

:o popsułeś mi stronę laugh

a tak serio to dobrze, że zauważyłeś. Kontakt jest zrobiony nie po bożemu ;d

Dzięki, to będzie poprawione!

komentarz 27 września 2017 przez bicnet Gaduła (4,800 p.)
Nie ma problemu , powodzenia :D
+1 głos
odpowiedź 28 września 2017 przez Dzemtenjem Bywalec (2,660 p.)

Po pierwsze, bardzo ładnie napisana stronka. :)

A teraz to co rzuciło mi się w oczy:

- wszystkie sekcje powinny mieć nagłówki

<h2 class="section-header investments__header">

- użyłbym raczej section-heading, bo słówko header może sugerować, że jest to element <header>

- wydaje mi się, że w niektóre <section> możnaby śmiało zastąpić <article>, np. taką <section class="services"> zastąpiłbym <article> które zawierałoby 3 sekcje zamiast listy (ale jest to pewnie kwestia dyskusyjna)

- użyłbym również elementu <main> otaczając nim wszystko poza głównym headerem i footerem

Sam pewnie napisałbym gorszy kod, więc na wszelki wypadek nie traktuj mojego komentarza jak wypowiedzi specjalisty :) pozdrawiam

komentarz 28 września 2017 przez imklau Nałogowiec (42,090 p.)

- wszystkie sekcje powinny mieć nagłówki

Widziałam to jako błąd i się nad tym zastanawiałam...czyli mam dawać nagłówek do sekcji i jeśli nie potrzebuje mieć go widocznego na stronie to ukryć go w CSS?

- użyłbym raczej section-heading, bo słówko header może sugerować, że jest to element <header>

nad klasą .header .heading zawsze się waham :< chyba faktycznie lepsze rozwiązanie podajesz ;p

- wydaje mi się, że w niektóre <section> możnaby śmiało zastąpić <article>, np. taką <section class="services"> zastąpiłbym <article> które zawierałoby 3 sekcje zamiast listy (ale jest to pewnie kwestia dyskusyjna)

Masz rację mogłoby być tak.

- użyłbym również elementu <main> otaczając nim wszystko poza głównym headerem i footerem

main użyłam w dwóch podstronach, a o reszcie zapomniałam :D

 

Baaardzo fajnie, że chciało Ci się przejrzeć kod, błędy poprawię ;)
Dziękuję!

0 głosów
odpowiedź 27 września 2017 przez Wiciorny Ekspert (269,120 p.)
Na pierwszy rzut oka- co mnie razi " piszę mnie, dlatego że wiem - że może ktoś inny nie zwróci  uwagi, ale długość strony - skrolując w dół. Naprawdę, jeśli kontent miałby do mnie trafić- miało mnie coś zaciekawić etc, to na starcie już byłbym zniechęcony z samego faktu przewijania na dół strony.

Mdła kolorystka strony, ani nie jest to taka 'lekka- ażeby napisać dobra, że nie wali kolorami', ale chyba aż za  bardzo i brakuje w niektórych momentach wyrazistości.

Tekst mało-czytelny, przy obrazkach, mało wyrazisty, powoduje męczenie przy przeglądnieciu.

Ciut za dużo obrazków.

_____________

Analiza kodu zajmie mi trochę to ewentualnie edytuje i też coś powiem ( oczywiście bierz to jako konstruktywną krytykę, sugestie - a nie hejt )
komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)

Tekst mało-czytelny, przy obrazkach, mało wyrazisty, powoduje męczenie przy przeglądnieciu.
 

Hmm to dobra wskazówka!

Co do reszty do nie bez powodu prosiłam o ocenę kodu, bo strona była tworzona na podstawie PSD, więc wyglądu sama nie ustalałam ;)

0 głosów
odpowiedź 27 września 2017 przez zgrybus Pasjonat (24,860 p.)
JS - czemu gotowy plugin, czemu jQuery? :)
komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)
temu, że JS poznałam już na jakimś tam poziomie i mogę sobie w czystym JS pisać różne pierdoły w celu nauki tego języka, ale jeśli dostałabym zlecenie stworzenia takiej strony (w sensie za pieniądze ;d) to nie bawiłabym się w moje rozwiązania, bo często łatwiej skorzystać z tych gotowych ;)

Najbardziej zależy mi na ocenie tego, jak wygląda mój HTML i klasy BEM ;)
komentarz 27 września 2017 przez zgrybus Pasjonat (24,860 p.)
A w tym Ci nie pomogę. Kod HTML zawsze jakoś mało mnie interesował a BEMa nie używam :)
komentarz 27 września 2017 przez imklau Nałogowiec (42,090 p.)
no oki ;p
komentarz 27 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
A po co ma pisać rzeczy od początku, które są gotowe, łatwo dostępne i dobrze działają?
1
komentarz 27 września 2017 przez zgrybus Pasjonat (24,860 p.)
No nie wiem, może dlatego, aby się czegoś nauczyć, ale co ja tam wiem. Dawajta, korzystajmy z gotowców, na pewno znajdziemy pracę, jak będziemy umieli zakodzić jakiś click event na zmianę klasy. No tak, przecież jeszcze umiemy pobrać GOTOWĄ, ŁATWO DOSTĘPNĄ I DOBRZE DZIAŁAJĄCA BIBLIOTEKĘ.
Ironicznie, ale może do Ciebie dotrze :)
0 głosów
odpowiedź 28 września 2017 przez niezalogowany
Śliczna strona, estetyczna i taka... wydaje się solidna hmm z wizualnego punku widzenia.

W kod nie zaglądałem :)

tylko szkoda, że pluginy masz, zamiast własnego JavaScriptu :(

Podobne pytania

0 głosów
0 odpowiedzi 222 wizyt
pytanie zadane 26 lutego 2021 w HTML i CSS przez CSSoup Mądrala (6,460 p.)
0 głosów
0 odpowiedzi 103 wizyt
pytanie zadane 10 stycznia 2019 w HTML i CSS przez misza1597 Nowicjusz (190 p.)
+1 głos
0 odpowiedzi 304 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Napromieniowany Użytkownik (570 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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!

...