Develop

[ani-wska]

DEMO LINK

[natalia-klonowska]

większość problemów z ostatniego review nie została rozwiązana:

• numer nadal nie jest poprawnie wycentrowany

• scroll nie powinien pojawiać się gdy otwarte jest menu

• od szerokości 1020px pojawia się scroll poziomy przez grid w sekcji contacts oraz psuje się layout innej sekcji

• wycentruj oraz elementy powinny dostosowywać się do zmiany szerokości przeglądarki

[natalia-klonowska]

• ikony w nawigacji nie są poprawnie wycentrowane oraz powinny mieć takie samo położenie co przy otwartym menu

• w tym miejscu masz dwa razy nałożone boczne marginesy (na main i na sekcję) ale żadne z nich ostatecznie nie wpływają na zdjęcia. odległości między tytułami a zdjęciami też są błędne i dobrze byłoby je uprościć aby nie były zależne zarówno od wartości poszczególnych elementów oraz gap ustawionego dla całej sekcji

• popraw odległości oraz font-weight

• sekcja contact us ma zbyt duże marginesy boczne

• nadal jest scroll przy otwartym menu

[ani-wska]

Poprawiłam mam nadzieję już wszystkie błędy. Jedyny problem jest taki, że u mnie nie ma scrolla, nie był on już wcześniej widoczny więc myślałam, że jest w porządku - dodałam kod z checklisty :) Proszę też o łaskawsze podejście do sprawdzania - w zadaniu było powiedziane że stronka nie musi być wykonana pixel perfect :)

[natalia-klonowska]

jeszcze raz użyj komendy npm run deploy aby zaktualizować demo

Poprawiłam mam nadzieję już wszystkie błędy. Jedyny problem jest taki, że u mnie nie ma scrolla, nie był on już wcześniej widoczny więc myślałam, że jest w porządku - dodałam kod z checklisty :) Proszę też o łaskawsze podejście do sprawdzania - w zadaniu było powiedziane że stronka nie musi być wykonana pixel perfect :)

Projekt nie musi być wykonany pixel perfect ale różnice w odległościach między elementami są na tyle duże i częste że widać je od razu przy porównaniu z designem. szczególnie że problemem nie jest nawet sama wartość odstępów tylko brak spójności. marginesy i paddingi z różnych elementów nakładają się na siebie w chaotyczny sposób przez co brakuje konsekwencji w ich nadawaniu

[ani-wska]

zaktualizowałam demo

[natalia-klonowska]

zaktualizowałam demo

nadal ostatni deploy jest sprzed 2 dni. jak już demo będzie poprawnie działać to oznacz pr do ponownego sprawdzenia

[natalia-klonowska]

• przy 1020px pojawia się scroll poziomy

• nadal nawigacja nie jest poprawnie wycentrowana. ma dodatkowy padding z prawej strony oraz logo ma dodatkowy margines z lewej

• lepiej będzie wyglądać jeśli tekst pozostanie wycentrowany razem ze zdjęciem

• tekst pod zdjęciami jest przesunięty za bardzo w prawo

• pozycja ikon z nawigacji powinna być taka sama dla otwartego i zamkniętego menu aby całość wyglądała bardziej spójnie

https://www.loom.com/share/e6c465794f924a70834c54941ccc8874

[ani-wska]

Poprawiłam niektóre rzeczy, natomiast co do np nawigacji czy niektórych wcięć to są one zrobione zgodnie z projektem w trzech różnych wariantach ekranowych. Nie było napisane że layout musi się zgadzać od 320 do 1260, tylko 320, 744, 1260. W checkliście również nie jest to ujęte. W filmach instruktażowych np przy budowaniu nawigacji widać przeskok między mniejszym a większym ekranem w ikonach itd.

[natalia-klonowska]

Poprawiłam niektóre rzeczy, natomiast co do np nawigacji czy niektórych wcięć to są one zrobione zgodnie z projektem w trzech różnych wariantach ekranowych. Nie było napisane że layout musi się zgadzać od 320 do 1260, tylko 320, 744, 1260. W checkliście również nie jest to ujęte. W filmach instruktażowych np przy budowaniu nawigacji widać przeskok między mniejszym a większym ekranem w ikonach itd.

design zawsze pokazuje konkretne breakpointy a zadaniem developera jest stworzenie responsywnej strony która będzie w spójny sposób dostosowywać się do każdego rozmiaru ekranu. na każdej wersji w figmie widać że ikony zamykania i otwierania menu są w tym samym miejscu więc tak też powinno pozostać niezależnie od szerokości okna przeglądarki

• uprość zmieniając kolumnę na której powinna się kończyć nawigacja zamiast używać translate to dodatkowego przesunięcia ikon. dodatkowo powielasz paddingi dodając je jednocześnie na header i nav

• nadal pojawia się scroll poziomy przy 1020px

• marginesy boczne powinny być spójne dla całej strony

[tbsikora]

Hi Anita, I'm sorry, I opened your solution by mistake, please push your solution one more time.

[ani-wska]

Mogę prosić o sprawdzenie?

[natalia-klonowska]

ostatnie poprawki:

• wycentruj nawigację tak aby marginesy boczne były takie same

• marginesy boczne powinny być spójne dla całej strony.

• dodaj transition dla efektów hover aby przejścia były bardziej płynne oraz button "View all" nie powinien powodować przesunięcia innych elementów

https://www.loom.com/share/8c76d53ed9f440aaa1ad3be89623e18f

[ani-wska]

Mogę prosić o pomoc przy buttonie? Nie mam pojęcia dlaczego powoduje on przesunięcie poniższego fragmentu. Marginesów też nie udało mi się idealnie wyrównać.

[ani-wska]

Zaktualizowałam demo

[natalia-klonowska]

pamiętaj aby oznaczać zadanie do ponownego sprawdzenia jeśli chcesz aby twoje komentarze zostały odczytane inaczej nie mam informacji że coś się zmieniło.
button przesuwa elementy poniżej ponieważ zwiększa rozmiar gdy nadajesz mu border więc wystarczy dodać mu box-sizing border-box.