Zaawansowana ścieżka HTML 5, CSS 3, Bootstrap 5

Witam, opanowałem kursy html i css pana Zelenta w całości oraz nauczyłem się bootstrapa z dokumentacji oraz tworząc własne strony. Oceniam, że mój poziom to średniozaawansowany. Co mogę więcej się nauczyć by dobić do zaawansowanego? Jakie są ważne zagadnienia, które dobrze by było umieć?

odkurzaczyk napisał(a):

Witam, opanowałem kursy html i css pana Zelenta w całości oraz nauczyłem się bootstrapa z dokumentacji oraz tworząc własne strony. Oceniam, że mój poziom to średniozaawansowany. Co mogę więcej się nauczyć by dobić do zaawansowanego? Jakie są ważne zagadnienia, które dobrze by było umieć?

• Mobile first, responsywność strony od małego telefonu do dużego komputera
• Umiejętność zrobienia RTL
• Dodanie darkmode oraz przełączanie go bez odświeżania strony
• Płynna paleta kolorów
• Mały zestaw odstępów i rozmiarów czcionek używanych w całej aplikacji (np 5, 10, ale na pewno nie tak że każdy div ma inny margines)
• Odpowiedni kontrast między różnymi elementami, rozumienie "głębi" aplikacji (głębi, perspektywy, z-axis, zwał jak zwał)
• Elementy interfejsu użytkownika ostylowane na :hover oraz :active
• Nie dodawanie niepotrzebnie modalów i innych elementów z position:fixed.
• Mam nadzieje że masz zminifikowany .css oraz .js?

To tak na szybko, pewnie są inne rzeczy.

Na dzisiejsze standardy tego co się wymaga w firmach to jeśnie nie znasz żadnego popularnego frameworka (angular, vue, react) to ty nadal początkujący jesteś, a do średniego to się nawet nie zbliżyłeś.

Riddle napisał(a):

odkurzaczyk napisał(a):

Witam, opanowałem kursy html i css pana Zelenta w całości oraz nauczyłem się bootstrapa z dokumentacji oraz tworząc własne strony. Oceniam, że mój poziom to średniozaawansowany. Co mogę więcej się nauczyć by dobić do zaawansowanego? Jakie są ważne zagadnienia, które dobrze by było umieć?

• Mobile first, responsywność strony od małego telefonu do dużego komputera
• Umiejętność zrobienia RTL
• Dodanie darkmode oraz przełączanie go bez odświeżania strony
• Płynna paleta kolorów
• Mały zestaw odstępów i rozmiarów czcionek używanych w całej aplikacji (np 5, 10, ale na pewno nie tak że każdy div ma inny margines)
• Odpowiedni kontrast między różnymi elementami, rozumienie "głębi" aplikacji (głębi, perspektywy, z-axis, zwał jak zwał)
• Elementy interfejsu użytkownika ostylowane na :hover oraz :active
• Nie dodawanie niepotrzebnie modalów i innych elementów z position:fixed.
• Mam nadzieje że masz zminifikowany .css oraz .js?

To tak na szybko, pewnie są inne rzeczy.

Oczywiście nie zaszkodzi ale skąd akurat taki zbiór wytycznych? Wygląda mi na całkowicie przypadkowe pomysły i co w nich zaawansowanego?
Dlaczego nie np. stylowanie :nth-child zamiast :active czy :hover?
Dlaczego nie znajomość pseudoklasy :aftrt lub :before?
Dlaczego nie znajmość JavaScript?
Dlaczego akurat "darkmode" a nie tworzenie paralaksy?
Z czym wiążą, się te nadzieje zminifikowanego css i js szczególnie w kontekście HTTP/2 ?

katakrowa napisał(a):

Oczywiście nie zaszkodzi ale skąd akurat taki zbiór wytycznych? Wygląda mi na całkowicie przypadkowe pomysły i co w nich zaawansowanego?
Dlaczego nie np. stylowanie :nth-child zamiast :active czy :hover?
Dlaczego nie znajomość pseudoklasy :aftrt lub :before?
Dlaczego nie znajmość JavaScript?

Bo to są szczegóły implementacyjne, a nie faktyczny requirement. Pisząc o :active i :hover nie miałem na myśli tego konkretnego zastosowania, tylko UX, czyli to żeby strona wydawała się bardziej "żywa", kiedy korzystamy z kontrolek - podświetlenie po najechanu myszką i kliknięciu.

Dlaczego akurat "darkmode" a nie tworzenie paralaksy?

Niby może być; ale każda większa popularna aplikacja ma darkmode, a paralaxa to chyba taka zaszłośc z 2015 i z czasów kiedy stawał się popularny CSS3.

Z resztą napisałem: To tak na szybko, pewnie są inne rzeczy.

Riddle napisał(a):

katakrowa napisał(a):

Oczywiście nie zaszkodzi ale skąd akurat taki zbiór wytycznych? Wygląda mi na całkowicie przypadkowe pomysły i co w nich zaawansowanego?
Dlaczego nie np. stylowanie :nth-child zamiast :active czy :hover?
Dlaczego nie znajomość pseudoklasy :aftrt lub :before?
Dlaczego nie znajmość JavaScript?

Bo to są szczegóły implementacyjne, a nie faktyczny requirement. Pisząc o :active i :hover nie miałem na myśli tego konkretnego zastosowania, tylko UX, czyli to żeby strona wydawała się bardziej "żywa", kiedy korzystamy z kontrolek - podświetlenie po najechanu myszką i kliknięciu.

Dlaczego akurat "darkmode" a nie tworzenie paralaksy?

Niby może być; ale każda większa popularna aplikacja ma darkmode, a paralaxa to chyba taka zaszłośc z 2015 i z czasów kiedy stawał się popularny CSS3.

Z resztą napisałem: To tak na szybko, pewnie są inne rzeczy.

1. Myślę, że by nazwać się nawet średniozaawansowanym to znajomość wszystkich pseudoklas to elementarz szczególnie, że wiele ich nie ma:
   https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
2. Znajomość JavaScript to też podstawa jeśli chcemy robić sensowne strony https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectorslla.org/en-US/docs/Web/CSS/CSS_Selectors oraz funkcje do swobodnego manipulowania drzewem DOM to także elementarz.
3. Znajomość struktury elementów HTML możliwych kombinacji zagnieżdżania i ich znaczenia to także elementarz.

wiem ze bootstrap ma zminifikowany CSS i tylko tyle wiem na ten temat co jeszcze dobrze wiedziec

odkurzaczyk napisał(a):

wiem ze bootstrap ma zminifikowany CSS i tylko tyle wiem na ten temat co jeszcze dobrze wiedziec

Swoje style również można zminifikować.

odkurzaczyk napisał(a):

wiem ze bootstrap ma zminifikowany CSS i tylko tyle wiem na ten temat co jeszcze dobrze wiedziec

ok, więc nie jesteś nawet na poziomie początkującego, ty raczkujesz, nie wiem skąd ten średniozaawansowany ci się wziął. Temat do zapoznania: webpack, ewentualnie vite bo dziś zaczyna zastępować webpacka.

Riddle napisał(a):

odkurzaczyk napisał(a):

wiem ze bootstrap ma zminifikowany CSS i tylko tyle wiem na ten temat co jeszcze dobrze wiedziec

Swoje style również można zminifikować.

co to znaczy?

odkurzaczyk napisał(a):

Riddle napisał(a):

odkurzaczyk napisał(a):

wiem ze bootstrap ma zminifikowany CSS i tylko tyle wiem na ten temat co jeszcze dobrze wiedziec

Swoje style również można zminifikować.

co to znaczy?

Że jeśli skończysz pisać swoją witrynę, to w plikach .css które stworzyłeś na potrzeby tej aplikacji jest sporo znaków, które zwiększają czytelność ale nie są konieczne do pokazania strony; więc można się ich pozbyć - na przykład w momencie umieszczania takiej strony na serverze.

Są program które mogą zminifikować .css, tzn sprowadzić go do prostszej formy, mającej również mniejszy rozmiar; ale zachowujących się w podobny sposób, tyle że już niezdatnych do edycji przez swoją niską czytelność.

Oprócz tego co napisał @Riddle to dziś piszę się kod nie w css a scss i buduje do css. Idąc dalej W aplikacji nie robisz wszystkiego w jednym pliku tylko masz czasem kilkadziesiąt plików css i js i powinno sie je budować w jak najmniejszą liczbę, najlepiej w 1-2 pliki.

odkurzaczyk napisał(a):

Jakie są ważne zagadnienia, które dobrze by było umieć?

Możesz skorzystać z roadmapy (https://roadmap.sh/frontend, https://roadmap.sh/javascript), żeby znaleźć coś ciekawego do nauki

ehhhhh napisał(a):

Oprócz tego co napisał @Riddle to dziś piszę się kod nie w css a scss i buduje do css. Idąc dalej W aplikacji nie robisz wszystkiego w jednym pliku tylko masz czasem kilkadziesiąt plików css i js i powinno sie je budować w jak najmniejszą liczbę, najlepiej w 1-2 pliki.

Tak jak kolega pisze css to niby podstawa ale w robocie często jedzie się na SCSS, LESS - tam już możesz funkcje pisać i to dopiero jest "advanced" poziom
Ze swojej strony jeszcze mogę dodać opanowanie umiejętności tworzenia choćby prostych animacji na początek (loader- dobra opcja , na 80% stron jest)

odkurzaczyk napisał(a):

Witam, opanowałem kursy html i css pana Zelenta w całości oraz nauczyłem się bootstrapa z dokumentacji oraz tworząc własne strony. Oceniam, że mój poziom to średniozaawansowany. Co mogę więcej się nauczyć by dobić do zaawansowanego? Jakie są ważne zagadnienia, które dobrze by było umieć?

Pytanie, co już umiesz. I pytanie, w czym się czujesz średniozaawansowany?

W samym Bootstrapie? To żadna filozofia.

W HTML/CSS? Umiałbyś np. zrobić coś tak, żeby się nie rozjechało ani na mobilce(wliczając w to zarówno iPhone jak i Android) ani na kompie? Znasz flexa? Wiesz, jak działa specifity? Słyszałeś o z-index stacking context? Pracowałeś z animacjami i efektami przejścia? Stylowałeś elementy w SVG? Umiesz robić maski w CSS? Pracowałeś z gradientami? Nie wszystko z tego jest równie ważne czy równie trudne (np. wiedza o specifity i umiejętność RWD będą ważniejsze niż jakieś tam gradienty), ale chodzi o określenie jakiegoś zakresu tego, co faktycznie umiesz.

We frontendzie? Jak już zostało wspomniane, do pełnej znajomości frontendu potrzebna jeszcze jest znajomość JavaScriptu. I jeśli chcesz iść dalej, to może to być dobry kierunek. A robiąc coś w JS dalej możesz szlifować HTML/CSS.