od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
Część w tej lekcji opowiem o prefekta Prefektury jest to bardzo ciekawy temat.
Generalnie po co komu refleksje
refleksje są po to ponieważ różne przeglądarki implementacją
faktyczne właściwości CSS a w różnym tempie w różny sposób.
Zwłaszcza jeżeli dane elementy nie są jeszcze w specyfikacji albo w specyfikacji
jest pole do popisu w cudzysłowie bądź po prostu twórcy przeglądarek chcą
jakby wpłynąć na to co w tej specyfikacji się znajdzie na końcowym etapie.
W związku z czym składnia specyficzne dla danej przeglądarki są projektowane tak aby
deweloperzy tak naprawdę korzystali z nich z rozwagą.
To się często nie dzieje i dlatego też musimy po prostu pojedyncze banki jako
frontem deweloperzy naprawiać dla danych przeglądarek
a my tak naprawdę korzystamy z rozwiązań które nam automatycznie preferują nasz kod
w kodzie źródłowym tak naprawdę piszemy w składni takiej jaka powinna być mniej
więcej docelowa a kod jest później automatycznie procedowany przez tzw.
auto prefektury i zmieniane
tak by korzystać z niego w wersji produkcyjnej naszego kodu.
Najłatwiej to będzie przedstawić
faktycznie korzystając z jakiegoś darmowego auto fightera.
Ja tutaj mam już link auto XL git.
Możemy też rzeczywiście go
sobie wyszukać i jak sobie te reguły razem z lektorem no bo to generalnie auto XL i.
Post CSS o którym też będę wspominał troszkę później w tym samym dziale.
No i widzimy że takie nam
skrypty się wygenerowały czy jeżeli sobie teraz to komentujemy to zobaczymy że dużo
właściwości czy wartości jest projektowana w kontekście gnida.
Prawdopodobnie tylko Internet Explorer ma refleks.
Zwłaszcza że tutaj mamy refleks MS który jest skrótem od Microsoft.
No i generalnie auto graficy dają nam tyle
że mamy większe szanse na to że nasz kot będzie wyglądał tak jak chcemy.
W każdej przeglądarce na pozycyjnym styki które to pozwala nam
umieszczać element przykleja się do jego góry gdy wyjeżdżamy poza
nim czyli jeżeli te reklamy byśmy sobie przyjęli jako styki no to ona teraz byłaby
tam gdzie jest ale jeżeli by już zaczęła się chować w Top no to by się przykleić do
góry co kiedyś na przykład rozwiązaliśmy przy pomocy skryptu.
Teraz możemy to.
Robić przywołał swastyki ale przez bardzo długi czas prawdopodobnie nawet teraz
część przeglądarek nie wspiera styki tak dobrze więc po styki musi być Graphics.
I umówmy się nie powinniśmy pisać ręcznie naprawdę.
Pisanie tekstów ręcznie to jest nieodpowiednie praktyka.
Przede wszystkim dlatego że my jako deweloperzy możemy pisać kod.
Intencją realnie a
model Bandery ta skanery czyli narzędzia które my jako komuniści
sobie stworzyliśmy mogą nam to automaty zabrać i robić to za nas
czyli tak jak ja tutaj napisałem ja bym zostawił tą wersję kodu jeśli.
Pracował był naprawdę na środowisku.
Deweloperskim w prawdziwej firmie a narzędzia z których korzystam
automatycznie zamieniły by mi to na ten syn.
Tak aby w przeglądarce.
Kot wyglądał w ten sposób a nie ten
i tak naprawdę możemy testować czy te efekty dają coś czy nie.
Korzystając z innych narzędzi takich jak np.
Brothers tak które to pozwala nam testować.
Nasze strony internetowe na różnych przeglądarkach.
Ja tutaj nie polecam. Konkretnie taka jest to dobre rozwiązanie.
Natomiast jest ich bardzo dużo.
Jest alternatywa jako Crosby Mauser string.
Tych rozwiązań jest bardzo dużo natomiast
warto wiedzieć że są tam po prostu bo tak działa rynek przeglądarek.
Wojny przeglądarek mamy już co prawda za
sobą natomiast dalej gdzieś tam za nami są i ponownie może więcej kodu jest.
Dostarczane na nasze produkcyjne środowiska.
Natomiast ja bym się tym osobiście nie
przejmował ponieważ tak jak wspominałem kompresji agresji czy bronili spokojnie da
sobie radę z takimi różnicami zwłaszcza że syn tak tak czy siak jest mniej więcej
podobny w kolejnej lekcji opowiem o klauzuli Support która to tak naprawdę
jest jeszcze jedną warstwą powyżej Polbank style i prefektury
dzięki której możemy sprawdzać czy Przeglądarka wspiera dany Wicher.
Jeśli tak to dostarczać jej odpowiedni ciąg kodu.