Bang & Olfusen

[QmilQrek]

[DEMO LINK] https://QmilQrek.github.io/layout_miami/

raczej co jestem w stanie to zrobiłem mam problem tylko z zaimplementowaniem tych punktów:
prosił bym o naprowadzenie

15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
    jak wchodzę na strone to poprostu nie wiem na co tak naprawde mam zwrócić uwagę i gdzie do wkleić

16. Fix menu for small screens (if there is not enough space for all the menu items)

    .menu {
      /* Move these rules from .menu__content */
      box-sizing: border-box;
      height: 100vh;
      padding: 24px 0;
    
      background-color: #0075ff;
    
      /* Add this rule to add scroll when there is not enough space */
      overflow-y: auto;
    
      ...

17. To disable page scrolling under the menu add the next code

    .page__body--with-menu {
      overflow: hidden;
    }

    window.addEventListener('hashchange', () => {
      if (window.location.hash === '#menu') {
        document.body.classList.add('page__body--with-menu');
      } else {
        document.body.classList.remove('page__body--with-menu');
      }
    });

[natalia-klonowska]

[DEMO LINK] https://QmilQrek.github.io/layout_miami/

raczej co jestem w stanie to zrobiłem mam problem tylko z zaimplementowaniem tych punktów: prosił bym o naprowadzenie

15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
    jak wchodzę na strone to poprostu nie wiem na co tak naprawde mam zwrócić uwagę i gdzie do wkleić

16. Fix menu for small screens (if there is not enough space for all the menu items)

    .menu {
      /* Move these rules from .menu__content */
      box-sizing: border-box;
      height: 100vh;
      padding: 24px 0;
    
      background-color: #0075ff;
    
      /* Add this rule to add scroll when there is not enough space */
      overflow-y: auto;
    
      ...

17. To disable page scrolling under the menu add the next code

    .page__body--with-menu {
      overflow: hidden;
    }

    window.addEventListener('hashchange', () => {
      if (window.location.hash === '#menu') {
        document.body.classList.add('page__body--with-menu');
      } else {
        document.body.classList.remove('page__body--with-menu');
      }
    });

15. tutaj trzeba użyć js więc możesz pominąć ten podpunkt. a jeśli chcesz wskazówki to:

• kod musisz zamieścić w pliku js albo tagu script.
• na formularz dodać event listener nasłuchujący na submit i tam umieścić preventDefault() i od razu możesz też reset() aby wyczyścić pola. tutaj masz całkiem dobrze wytłumaczone i przykład z formularzem:
  https://wesbos.com/javascript/05-events/prevent-default-and-form-events#preventdefault-method

16. co dokładnie jest tutaj dla ciebie niejasne? aktualnie zobacz że jeśli zmniejszysz ekran tak że elementy menu się nie mieszczą to nie masz sposobu by scrollem do nich przejść.

17. tutaj jest pokazany sposób z wykorzystaniem js ale jesteś w stanie wykorzystać w css :has() oraz :target by uzyskać ten sam efekt (overflow hidden dla body jeśli menu jest aktywne)

[natalia-klonowska]

• podczas nawigacji do categories elementy nachodzą na menu:

• użyj zdjęcia w lepszej jakości w sekcji Recommended bo w wersji tabletowej są na tyle duże że źle to wygląda:

• layout nie jest responsywny tylko fixed z breakpointami przez co pomiędzy wersją mobile a tablet pojawiają ci się bardzo duże marginesy. to nie marginesy powinny się zwiększać tylko elementy powinny się dostosowywać
  tutaj masz porównanie layoutu responsywnego z fixed a tutaj możesz zobaczyć jak powinien zachowywać się layout responsywny z breakpointami

[QmilQrek]

okej popraiłem większość błędów został mi tylko problem z tym

16 Fix menu for small screens (if there is not enough space for all the menu items)

.menu {
/* Move these rules from .menu__content */
box-sizing: border-box;
height: 100vh;
padding: 24px 0;

background-color: #0075ff;

/* Add this rule to add scroll when there is not enough space */
overflow-y: auto;

...

i niejasne dla mnie jest jak to ma wyglądać finalnie, zobaczyłem jak wygląda to u innych uczniów i czy generalnie chodzi o to by to wyglądało mniej wiecej w taki sposób?

Gdy jest miejsce na stronie

gdy nie ma miejsca na stronie

[natalia-klonowska]

okej popraiłem większość błędów został mi tylko problem z tym

16 Fix menu for small screens (if there is not enough space for all the menu items)

.menu { /* Move these rules from .menu__content */ box-sizing: border-box; height: 100vh; padding: 24px 0;

background-color: #0075ff;

/* Add this rule to add scroll when there is not enough space */ overflow-y: auto;

...

i niejasne dla mnie jest jak to ma wyglądać finalnie, zobaczyłem jak wygląda to u innych uczniów i czy generalnie chodzi o to by to wyglądało mniej wiecej w taki sposób?

Gdy jest miejsce na stronie

gdy nie ma miejsca na stronie

tutaj nie chodzi o nawigację tylko o menu oraz gdy content nie mieści się w pionie zamiast poziomie. czyli menu normalnie nie ma mieć scrolla pionowego chyba że linki z menu nie będą się mieścić wtedy scroll powinien się pojawiać aby użytkownik miał możliwość przejść w dół strony do pozostałych linków z menu

[natalia-klonowska]

za każdym razem jak commitujesz zmiany to musisz zaktualizować demo link jeszcze raz odpalając komendę npm run deploy