• 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
921 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,160 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 (277,460 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 326 wizyt
pytanie zadane 26 lutego 2021 w HTML i CSS przez CSSoup Mądrala (6,460 p.)
0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 10 stycznia 2019 w HTML i CSS przez misza1597 Nowicjusz (190 p.)
+1 głos
0 odpowiedzi 320 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Napromieniowany Użytkownik (570 p.)

93,014 zapytań

141,977 odpowiedzi

321,268 komentarzy

62,355 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...