Czego warto się uczyć odn. layoutu i rozwiązań frontowych?

Cześć,
dopiero od jakiegoś czas wchodzę głębiej w Angulara i zastanawiam się, licząc że jest ktoś z doświadczeniem tutaj :D

Co polecilibyście najbardziej cisnąć jeśli chodzi o naukę layoutu? Do tej pory korzystałem z prostych rozwiązań jak bootstrap. Ale teraz mamy bootstrap5 (nie ma jquery), ng-bootstrap, ngx-bootstrap, SASS&BEM, tailwind etc.

Przyznam sie że chciałbym sie mocno podszkolić w frontendzie, mobile-first-approach etc. ale nie wiem w co powinienem iść najmocniej, czas nie gra roli

Czy znasz czysty HTML & CSS? Czy umiałbyś zrobić responsywny layout używając tylko HTMLa i CSSa?

Jeśli nie, to masz już odpowiedź. Ogólnie te wszystkie nakładki na style i biblioteki layoutów mają sens, ale tylko jak znasz HTML/CSS (ponieważ inaczej to tylko składanie z gotowych klocków. I to działa, dopóki projekt nie ma dużych wymagań pod kątem layoutu i nie trzeba nic customizować).

Ale z drugiej strony to nauka CSSa samego w sobie jest tu najtrudniejsza / najwięcej czasu trzeba poświęcić (te wszystkie dodatki to pikuś przy CSSie). Ale warto, jeśli chcesz iść na poważnie we frontend.

Gridy FTW

W internecie można znaleźć gotowe roadmapy (https://roadmap.sh/frontend), ale jakbym miał zrobić taką mini listę to

przy HTML'u polecałbym poczytać o:

• semantyce,
• podstawach accessibility,
• podstawach seo

Na samym początku pewnie będą problemy ze stosowaniem tego w praktyce, ale wystarczy wiedza, że coś takiego istnieje + walidator, który będzie pilnował żebyśmy nie robili błędów (https://validator.w3.org/#validate_by_input, https://wave.webaim.org/).

Z tematów dotyczących CSS'a to byłoby pewnie:

• rwd,
• flexbox,
• grid,
• css variables

a co do konkretnie layoutu, to tak:

• tutaj masz listę róznego rodzaju layoutów, oraz jak dany layout osiągnąć w HTML/CSS (przykłady kodu): https://web.dev/patterns/layout/
  pochodź sobie jeszcze po tej stronie https://web.dev, bo tam wiele różnych przydatnych rzeczy jest
• wyjaśnienie flexa: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• wyjaśnienie grida: https://css-tricks.com/snippets/css/complete-guide-grid/

No i tu masz o tym, jak tworzyć dostępne komponenty frontendowe https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components

LukeJL napisał(a):

Czy znasz czysty HTML & CSS? Czy umiałbyś zrobić responsywny layout używając tylko HTMLa i CSSa?
...
Ale z drugiej strony to nauka CSSa samego w sobie jest tu najtrudniejsza / najwięcej czasu trzeba poświęcić (te wszystkie dodatki to pikuś przy CSSie). Ale warto, jeśli chcesz iść na poważnie we frontend.

Warto? Chyba jest konieczne

ps. choć to co powszechnie widać w przeglądarce moze potwierdzać twoją @LukeJL wizję dla 90%: po co się uczyć)