Develop

[kmarchlewicz]

Zadanie Miami -> landing page B&O B&O
Projekt https://kmarchlewicz.github.io/layout_miami/

Hej.

• Na początku miałem projekt w odrębnej lokalizacji i musiałem przekopiować pliki do tej, która została późiej stworzona poprzez git clone z zadania. Aktualna wersja to jest etap prac na jakieś 50 filmików z zadania póki co, czyli wersja mobilna wstępna. (większość wytycznych z wypunktowań będzie później dodana myślę).

• Generalnie się zastanawiam czy powinienem dany widok robić na gridzie. Figma ma tę funkcję pokazuywania kolumn layoutu. To powinno się zawsze tak odzwierciedlać w projekcie później?

• Raz miałem problem z odstępami elementu. Bo na elemencie

  dałem paddingi, żeby odtworzyć przestrzeń wokół głównych sekcji. Jednak na dole strony w sekcji ze zdjęciem na 100% szerokości strony musiałem wymyślić coś innego i tam zobaczysz dodatkowy div bez paddingów. Wewnątrz zdjęcie będzie na całą szerokość a element poniżej już dostanie paddingi, żeby naśladować te, któe posiadał powyżej cały element . Jak Ty to widzisz? Może jest lepszy sposób na osiągniecie tego?

• Niektóre elementy nazwałem trochę, jak czułem np. picks - później dodając linki w nawigacji zastanawiałem się, czy je przemienić, żeby te klasy bardziem im odpowiadały. Póki co nie ruszałem już, bo musiał bym zmieniać reguły css też. Daj znać proszę, bo może jednak ytrzeba zmienić.

Będę wdzięczny generalnie za uwagi, to naniosę zmiany.

Poniżej jeszcze mam parę pytań:

• Nie do końca rozumiem jeszcze nazewnictwo elementów w bem. np. w elemencie header mamy klasę header. Wewnątrz jest element nagiation z klasą navigation. Czy on powinien mieć klasę header__navigation? Tak samo div class="menu" i wewnątrz niego jest nav class="navigation". Podobnie, czy w elemencie address, gdzie wewnątrz mamy div o klasie address__data, a wewnątrz jego h3 o klasie title. Czy tutaj nazewnoctwo powino być inne dla elementów?

• Kiedy można lub nie można dodawać marginesów dla elementów? Zastanawiam się, jak to łatwo zrozumieć.

• Czy w zamian można zawsze dodawać padding do elementu?

[natalia-klonowska]

Zadanie Miami -> landing page B&O B&O Projekt https://kmarchlewicz.github.io/layout_miami/

Hej.

• Na początku miałem projekt w odrębnej lokalizacji i musiałem przekopiować pliki do tej, która została późiej stworzona poprzez git clone z zadania. Aktualna wersja to jest etap prac na jakieś 50 filmików z zadania póki co, czyli wersja mobilna wstępna. (większość wytycznych z wypunktowań będzie później dodana myślę).
• Generalnie się zastanawiam czy powinienem dany widok robić na gridzie. Figma ma tę funkcję pokazuywania kolumn layoutu. To powinno się zawsze tak odzwierciedlać w projekcie później?
• Raz miałem problem z odstępami elementu. Bo na elemencie dałem paddingi, żeby odtworzyć przestrzeń wokół głównych sekcji. Jednak na dole strony w sekcji ze zdjęciem na 100% szerokości strony musiałem wymyślić coś innego i tam zobaczysz dodatkowy div bez paddingów. Wewnątrz zdjęcie będzie na całą szerokość a element poniżej już dostanie paddingi, żeby naśladować te, któe posiadał powyżej cały element . Jak Ty to widzisz? Może jest lepszy sposób na osiągniecie tego?
• Niektóre elementy nazwałem trochę, jak czułem np. picks - później dodając linki w nawigacji zastanawiałem się, czy je przemienić, żeby te klasy bardziem im odpowiadały. Póki co nie ruszałem już, bo musiał bym zmieniać reguły css też. Daj znać proszę, bo może jednak ytrzeba zmienić.

Będę wdzięczny generalnie za uwagi, to naniosę zmiany.

Poniżej jeszcze mam parę pytań:

• Nie do końca rozumiem jeszcze nazewnictwo elementów w bem. np. w elemencie header mamy klasę header. Wewnątrz jest element nagiation z klasą navigation. Czy on powinien mieć klasę header__navigation? Tak samo div class="menu" i wewnątrz niego jest nav class="navigation". Podobnie, czy w elemencie address, gdzie wewnątrz mamy div o klasie address__data, a wewnątrz jego h3 o klasie title. Czy tutaj nazewnoctwo powino być inne dla elementów?
• Kiedy można lub nie można dodawać marginesów dla elementów? Zastanawiam się, jak to łatwo zrozumieć.
• Czy w zamian można zawsze dodawać padding do elementu?

z tak wieloma pytaniami najlepiej przyjść na QnA więc jeśli niedostatecznie ci odpowiem to najlepiej z resztą pytań zapisz się na najbliższe QnA :)

• Generalnie się zastanawiam czy powinienem dany widok robić na gridzie. Figma ma tę funkcję pokazuywania kolumn layoutu. To powinno się zawsze tak odzwierciedlać w projekcie później?

Grid pokazany w figma służy głównie do łatwiejszego planowania i zachowania proporcji. W praktyce przy implementacji rzadko trzyma się go dokładnie bo często można zmniejszyć liczbę kolumn lub w ogóle zrezygnować z grida bo w wielu przypadkach prostsze i wygodniejsze jest użycie samego flexa. ostateczna decyzja czego użyjesz zależy od ciebie :)

• Raz miałem problem z odstępami elementu. Bo na elemencie dałem paddingi, żeby odtworzyć przestrzeń wokół głównych sekcji. Jednak na dole strony w sekcji ze zdjęciem na 100% szerokości strony musiałem wymyślić coś innego i tam zobaczysz dodatkowy div bez paddingów. Wewnątrz zdjęcie będzie na całą szerokość a element poniżej już dostanie paddingi, żeby naśladować te, któe posiadał powyżej cały element . Jak Ty to widzisz? Może jest lepszy sposób na osiągniecie tego?

wyjście poza sekcję aby nie wpływały na nią paddingi nie jest złym rozwiązaniem ale jeśli chcesz zobaczyć jak inaczej można do tego podejść to tutaj masz przykłady:
https://css-tricks.com/full-width-containers-limited-width-parents/?utm_source=chatgpt.com
https://florianbrinkmann.com/en/let-images-go-beyond-the-content-area-3428/?utm_source=chatgpt.com
ogólnie najprościej myślę że byłoby nadać szerokość 100vw i negatywny margines o wartości paddingu

• Niektóre elementy nazwałem trochę, jak czułem np. picks - później dodając linki w nawigacji zastanawiałem się, czy je przemienić, żeby te klasy bardziem im odpowiadały. Póki co nie ruszałem już, bo musiał bym zmieniać reguły css też. Daj znać proszę, bo może jednak ytrzeba zmienić.

Myślę że dobrze abyś pozmieniał te nazwy tak aby zachować spójność i od razu pousuwać zbędne modyfikatory

• Nie do końca rozumiem jeszcze nazewnictwo elementów w bem. np. w elemencie header mamy klasę header. Wewnątrz jest element nagiation z klasą navigation. Czy on powinien mieć klasę header__navigation? Tak samo div class="menu" i wewnątrz niego jest nav class="navigation". Podobnie, czy w elemencie address, gdzie wewnątrz mamy div o klasie address__data, a wewnątrz jego h3 o klasie title. Czy tutaj nazewnoctwo powino być inne dla elementów?

W bem bloki powinny być niezależne czyli że możesz skopiować taki blok i wstawić go w innym miejscu w kodzie a będzie wyglądał tak samo. Jeśli blok znajduje się wewnątrz innego bloku często będzie miał style które nie definiują jego bezpośrednio tylko to np. jak jest położony względem innych elementów.

Przykład: masz blok w gridzie (grid jest blokiem nadrzędnym). Style definiujące jego pozycję w gridzie nie powinny należeć do samego bloku bo jeśli użyjesz go w innym miejscu gdzie nie ma grida to te style nie będą potrzebne lub mogą nawet przeszkadzać. Dlatego do takiego bloku dodaje się klasę elementu dla bloku grida dzięki czemu można stosować te style tylko w kontekście tego konkretnego gridu

• Kiedy można lub nie można dodawać marginesów dla elementów? Zastanawiam się, jak to łatwo zrozumieć.
• Czy w zamian można zawsze dodawać padding do elementu?

padding jest częścią elementu więc powiększa jego wnętrze a margines nadaje odstęp na zewnątrz. Nie zawsze można używać marginesów np. elementy inline nie przyjmują marginesów pionowych a marginesy bloków mogą się zlewać (margin collapse). Padding natomiast działa zawsze ale trzeba mieć na uwadze że jest częścią elementu oraz że border jest dopiero za paddingiem

[natalia-klonowska]

Niektóre elementy nie dostosowują się do zmiany szerokości przeglądarki

[kmarchlewicz]

** Niestety widzę teraz dopiero, że mam horyzontalny scroll też, może coś tam rozszerza stronę? Miałą byś może jakiś pomysł, co to mogłoby być?

Hej,

1. W nawigacji na ikonie telefonu jest hover, który wyświetla span z numerem. Mam trudność, żeby wypozycjonować go dla najmniejszego ekranu -> dopiero od pewnej szerokości okna numer pojawia się w całości. Zastanawiałem się, czy pokazywać go tylko na desktopie, a na mobilnych go ukryć.

2a. Zdjęcia produktów w sekcji Recommended ustawiłem jako 'kwadratowe obrazy', jak pokazano w filmiku 50/69. Zastanawiam się, czy trzeba to zmodyfikować - w odniesieniu do ich rozmiaru na ekranach pomiędzy mobilnym a desktopem.
2b. Zdjęcia produktów w sekcji jest podobnie, aczkolwiek tam mam problem bo w Figmie zdjęcia produktów są bardziej szerokie - nie są kwadratami. DO tego przy ekranie pomiędzy mobilnym a desktopem zdjęcia są bardzo małe.

3. Czy nastepny media querry mam zrobić dla 744px, jak w figmie? (W Filmiku byl tylko mobilny i desktop)

4. Zastanawiam się, jakiej wielkości obrazki mam wgrać na poszczególne elementy:

• dla headera
• dla produktów
• dla sekcji contact-us

Czy przygotować np. po 2 wersje: najmniejszą dla mobilnego i największa dla pozostył ekranów?

4. Z listy to-do https://github.com/mate-academy/layout_miami/blob/master/checklist.md nie zrobiłem punktu 17 -> nie byłem pewien, czy on dotyczy mojego landing page\a. Próbowałem zmniejszać okienko, nawet poniżej 320px i moje elementy menu sączytelne. No chyba, że źle to zrozumiałem?

Proszę o uwagi, wskazówki :)

[danon321]

Pierwsze zrób zeby ładnie wyglądało
2. usun skrola na desktopie

[kmarchlewicz]

Hej, dzięki za odpowiedź. Wprowadziłem następujące zmiany.

1. Mam nadzieję, że chodziło o style dotyczące czcionki.
2. Wygląda, że ustawienie 100vw powodowało pojawienie się horyzontalnego scrollbara, ponieważ szerokość nie brała pod uwagę obecności wertykalnego scrollbara. W związku z tym, ustawiana była wielkość powiększona o szerokość tego scrollbara.
   Znalazłem rozwiązanie przy użyciu samego CSS. Narzuciłem na element body właściwość container-type: inline-size, która sczytuje jego szerokość z pomniejszeniem o werykalny scrollbar. Następnie elementowi o klasie about-us dodałem właściwość width: 100cqw, która przypisuje mu szerokość kontenera. Zazwyczaj jest pobierana wartość z kontenera, który jest najbliższym przodkiem elementu, ale tutaj (mam nadzieje, że poprawnie) wskazałem o który konkretnie kontener nam chodzi (page). Poprzednią właściwość 100vw jako fallback zostawiłem za radą z artyjkułu. Co myślisz o takim rozwiązaniu? Coś byś zmienił? A moze zupełnie inne podejscie mam poszukać?
   Żródło

Proszę o odpowiedź i dalszą pomoc :)

[Zibi95]

Uzywanie 100vw nie jest bezpiecznie, bo wlasnie powoduje ten horyzontalny scroll. Pamietaj, zeby sprawdzic jak to wyglada z wsparciem dla nowszych funkcjonalnosci. https://caniuse.com/css-container-query-units .

[Zibi95]

Do poprawy

• moge scrollowac kiedy nav menu jest otwarte
• tylko sekcja recommended jest plynna jeseli chodzi o szerokosc. Dziwnie to wyglada na tle innych przy szerokości powyzej 700px

[kmarchlewicz]

edit: mam trudność w ustawieniu właściwej ścieżki do main.js, który jest w src/scripts/
edit 2: przeniosłem main.js do głównego folderu. Wyczytałem, gdzieś, że może folder src jest ignorowany i nie wgrywany? (Ale jak by działały obrazki wtedy...?)

Ma ktoś jakiś pomysł, co robię źle, że nie mogę wgrać tego .js?

Hej,

1. Poprawiłem blokowanie scrollowania poprzez dodanie container: none, gdy element o klasie page ma także dodaną klasę page--with-menu.
2. Zedytowałem mixin grid, który na mobilnych nakładał 2 kolumny po 130px -> na -> 2, minmax(130px, 1fr)

[Zibi95]

Odpal komende npm run build. I znajdz miejsce gdzie laczy sie skrypt i zobacz jak link wyglada. Cos czuje, ze to wina zmiay bundlera.

[kmarchlewicz]

OK, otrzymałem komunikat "<script src="main.js"> in "/index.html" can't be bundled without type="module" attribute". Internet podpowiedział, aby dodać type="module" do tagu script. Wgrałem pliki i wygląda, że już działa.

[Zibi95]

Welll done!

[kmarchlewicz]

Super.

1. Mam jeszcze pytanie wcześniejsze:

A. Czy nastepny media querry mam zrobić dla 744px, jak w figmie? (W Filmiku byl tylko mobilny i desktop)

B. Zastanawiam się, jakiej wielkości obrazki mam wgrać na poszczególne elementy:

• dla headera
• dla produktów
• dla sekcji contact-us

Czy mam stosować inne wielkości dla mobilnego widoku i inną wersję dla desktopu?

2. To może wybrał bym teraz drugi projekt z listy i go przerobił?