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

Strona do oceny!

+7 głosów
563 wizyt
pytanie zadane 27 września 2017 w Nasze projekty przez Noemi Nałogowiec (41,240 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 Maniak (66,100 p.)

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

komentarz 28 września 2017 przez Noemi Nałogowiec (41,240 p.)
o faktycznie, dzięki ;p

6 odpowiedzi

+2 głosów
odpowiedź 28 września 2017 przez JayJay Mądrala (5,960 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 Noemi Nałogowiec (41,240 p.)
nie używałam takiego czegoś jeszcze, dziękuję! ;)
+1 głos
odpowiedź 27 września 2017 przez bicnet Gaduła (4,130 p.)

 

Czy to na pewno powinno tak być?

komentarz 27 września 2017 przez Noemi Nałogowiec (41,240 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,130 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 Noemi Nałogowiec (41,240 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 Maniak (66,480 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 Noemi Nałogowiec (41,240 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,940 p.)
JS - czemu gotowy plugin, czemu jQuery? :)
komentarz 27 września 2017 przez Noemi Nałogowiec (41,240 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,940 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 Noemi Nałogowiec (41,240 p.)
no oki ;p
komentarz 27 września 2017 przez Kamil Łydka Stary wyjadacz (12,870 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,940 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 46 wizyt
pytanie zadane 10 stycznia w HTML i CSS przez misza1597 Nowicjusz (190 p.)
+1 głos
0 odpowiedzi 178 wizyt
pytanie zadane 4 grudnia 2016 w HTML i CSS przez Napromieniowany Użytkownik (570 p.)
+1 głos
1 odpowiedź 263 wizyt
pytanie zadane 12 maja 2017 w Nasze projekty przez Sterczix Początkujący (280 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

66,324 zapytań

113,061 odpowiedzi

239,218 komentarzy

46,589 pasjonatów

Przeglądających: 255
Pasjonatów: 7 Gości: 248

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...