Kurs Preprocesory CSS

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

16 ocen

Wprowadzenie

Projektuj strony WWW jeszcze szybciej i wydajniej dzięki preprocesorom CSS. Te niezwykle przydatne narzędzia wspomagają proces kodowania witryn internetowych oraz rozszerzania ich o nowe funkcje. W ostatnim czasie Preprocesory CSS stały się obowiązkowym narzędziem każdego webdevelopera a ich nauka nie jest trudna i wymaga jedynie znajomości podstaw CSS!

  1. Praktyczne zastosowania i informacje na temat Preprocesorów CSS, SASS i LESS.
  2. Instalacja i konfiguracja srodowiska pracy i popularnych aplikacji
  3. Przydatne dodatki, które przyspiesza Twoja prace
  4. Praktyczne zastosowania i uzycie Preprocesorów CSS
  5. Rozszerzanie SASS z pomoca frameworka Compass
  6. Wskazówki pod katem efektywnego projektowania stron WWW
  7. Informacje na temat refaktoryzacji kodu

Wprowadzenie do preprocesorów

Na początek dowiesz się czym są preprocesory CSS i jak możesz szybko zacząć z nich korzystać, aby tchnąć w statyczny kod CSS nowe życie. W tym momencie zakładana jest wyłącznie podstawowa znajomość CSS, a tajniki preprocesorów będziemy sukcesywnie zgłębiać od tematów najbardziej podstawowych aż do zaawansowanych. W kursie omówimy najbardziej popularne z narzędzi, czyli LESS i SASS, a w dalszej części również framework Compass, który pomoże nam zaoszczędzić sporo cennego czasu.

Elementy składowe języków LESS i SASS

Praktyczne przykłady

Jeszcze więcej praktyki!

W dziale z praktycznymi przykładami pojawiła się również lekcja bonusowa, w której zobaczysz, jak dzięki edytorowi Sublime Text 2, można w bardzo szybki sposób wystartować z kolejnym projektem, pobierając z serwera wcześniej przygotowaną paczkę nie odrywając przy tym rąk z klawiatury! Dział ten jest wręcz naszpikowany praktycznymi poradami, jak w kreatywny sposób zorganizować oraz refaktoryzować swój kod, aby można było nim łatwo zarządzać oraz dodawać do niego kolejne moduły, dlatego że ogromną zaletą pracy z preprocesorami jest fakt, że raz napisany kod możemy bez trudu wykorzystywać w przyszłości!

Biblioteka Compass

W ostatnim dziale kursu poznasz framework Compass, który jeszcze bardziej rozszerza nasze możliwości pracy z SASS, oferując nam tony gotowego do użycia kodu. Oprócz gotowych rozwiązań, Compass oferuje niesamowicie przydatne narzędzie do generowania CSS Sprites, czyli łączenia wielu obrazków w jeden, a następnie podstawienia go jako tło elementów w kodzie CSS i ustawienia odpowiedniej wartości background-position. Wszystko co właśnie przeczytałeś, zostanie wykonane automatycznie, za pomocą kilku prostych instrukcji. Jak się przekonasz, od teraz tworzenie CSS Sprites będzie bardzo proste i szybkie, a wszystkie zmiany, które naniesiesz w projekcie później, zostaną automatycznie uwzględnione, byś Ty już więcej nie musiał zaprzątać sobie tym głowy.

Kurs, dzięki któremu zaoszczędzisz cenny czas!

Pochłaniając nową wiedzę na temat preprocesorów dowiesz się nie tylko jak poprawnie skonfigurować potrzebne do ich działania aplikacje i jak z nich korzystać, ale również jak korzystać z wiersza poleceń systemu Windows, który na pierwszy rzut oka może odstraszać, a tak naprawdę nie jest niczym skomplikowanym, przynajmniej przy zastosowaniu do naszych potrzeb pracy z SASS czy Compass.Czas jest jedną z najcenniejszych rzeczy, dlatego że nie możemy go kupić. Jeśli zajmujesz się tworzeniem stron internetowych i również cenisz swój czas, to jego inwestycja w przyswojenie wiedzy z tego kursu z całą pewnością będzie dobrą inwestycją. A im więcej czasu spędzasz pisząc kod CSS, tym więcej będziesz mógł go zaoszczędzić i wykorzystać do bardziej przyjemnych zajęć.

Podsumowując, kurs zawiera między innymi:

  • Zbiór informacji na temat Preprocesorów SASS i LESS
  • Instalacja i konfiguracja środowiska pracy i popularnych aplikacji
  • Przydatne dodatki, które przyspieszą Twoją pracę
  • Praktyczne zastosowania i użycie Preprocesorów CSS
  • Rozszerzanie SASS z pomocą frameworka Compass
  • Wskazówki pod kątem efektywnego projektowania stron WWW
  • Informacje na temat refaktoryzacji kodu
  • I wiele, wiele więcej!

Dla kogo jest ten kurs?

Jeśli już tworzysz strony WWW, znasz dobrze HTML oraz CSS i chcesz rozszerzyć swoje serwisy o nowe możliwości Preprocesorów SASS i LESS, które przyspieszą i ułatwią Twoją pracę - ten kurs jest właśnie dla Ciebie! Omówione w nim techniki pracy oraz narzędzia nie tylko pomogą Ci budować efektywne serwisy, ale także będziesz mógł robić to w rekordowo szybkim czasie. Jeśli jeszcze nie masz podstawowych informacji z zakresu HTML, CSS - sprawdź nasze kursy Podstawowe w ramach Specjalizacji WebDevelopment. Niezbędne minimum to Kurs HTML. Szczególnie polecamy także zapoznanie się z Kursem CSS3 oraz Kursem HTML5.

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Autor: Piotr Palarz

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Piotr Palarz

Czas: 6 godzin 19 minut

Wersja: CSS 3

Aktualizacja: 14.05.2020

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp do kursu

  • Wprowadzenie

Wprowadzenie do Preprocesorów

  • Czym są preprocesory?

  • Poprawne kolorowanie składni w Sublime Text 2

  • Poprawne kolorowanie składni w Dreamewaver do CS6*

  • Poprawne kolorowanie skladni w Notepad

  • Wstęp do LESS

  • Wstęp do SASS

LESS i SASS - konstrukcje języka

  • Zagnieżdżone selektory

  • Zmienne

  • Mixiny

  • Instrukcje warunkowe

  • Polecenie extend

  • Pętle

  • Wbudowane funkcje

  • Własne funkcje

  • Funkcje kolorów

  • Importowanie plików

  • Debugowanie kodu

  • Podsumowanie działu

Praktyczne przykłady w SASS

  • CSS3 Selection

  • CSS3 3D Button cz. 1

  • 2CSS3 3D Button cz. 2

  • CSS3 Keyframes - animowane tło

  • BONUS - Zdalne pobieranie projektów w Sublime Text 2

Framework Compass

  • Wstęp do Compass

  • Wiersz poleceń i podstawy Konsoli

  • Tworzenie projektów z linii poleceń i plik config.rb

  • CSS Sprites z Compass cz. 1

  • CSS Sprites z Compass cz. 2

  • Inne frameworki dostępne do pracy z Compass

Zakończenie

  • Dziękuję za uwagę

}