Wybierz w koszyku płatność Twisto, odbierz szkolenie i zapłać w ciągu 21 dni!
Szkolenia
DARMOWE FRAGMENTY
Produktywne tworzenie stron z LESS & SASS
Twórz wspaniałe strony internetowe przy mniejszym nakładzie pracy
89
+890 punktów premium
Zacznij naukę teraz, zapłać w ciągu 21 dni! Shape Created with Sketch.
132 recenzji
12 godzin
113 wykładów
  • Tworzysz strony internetowe i chcesz dowiedzieć się jak drastycznie przyspieszyć pracę nad dowolnym projektem?

  • Masz już dość ciągłego poprawiania i edytowania kiepsko napisanych arkuszy stylów?

  • Chcesz tworzyć nowoczesne strony z użyciem technologii, które są aktualnie na topie, a ich znajomość jest niezbędna praktycznie każdemu webmasterowi?

  • Chcesz zdobyć umiejętności, które sprawią, że zmienisz kompletnie swoje dotychczasowe podejście to tworzenia stron internetowych?

To szkolenie jest właśnie dla Ciebie!

Czego się nauczysz z tym kursem?

Responsywny projekt strony WWW

Jaki projekt wykonamy w kursie?

Struktura projektu
  • W pełni responsywny układ, który dopasowuje się do urządzenia użytkownika.

  • Przejrzysta i łatwa do utrzymania struktura arkusza stylów stworzona w oparciu o preprocesory CSS.

  • Kolory i właściwości tekstu oparte na zmiennych: 30 sekund pracy pozwoli kompletnie zmienić wygląd całej witryny!

  • Mobilne menu uruchamiane automatycznie na mniejszych urządzeniach.

  • Animacje oparte na popularnej i bardzo łatwej w użyciu bibliotece Animate.css

  • dwa różne slidery oparte na darmowych rozwiązaniach (bxSlider oraz Owl Carousel)

  • Modułowa struktura całej strony, która umożliwia łatwą adaptację do różnych celów.

  • Wykorzystanie kilku pomocniczych skryptów, które z pewnością znajdą zastosowania w twoich własnych projektach.

  • Ikony bazujące na Font Awesome

  • Tekst oparty na Google Fonts.

Co zawiera to szkolenie?

  • 12 godzin filmów prowadzonych przez doświadczonego webmastera.

  • Ponad 110 lekcji – więcej niż jakakolwiek inna pozycja na temat LESS/SASS.

  • Wszystkie niezbędne pliki i materiały. Każdą czynność pokazaną przez autora możesz bez problemu powtórzyć oraz przećwiczyć.

  • Kompletny projekt strony, który możesz wykorzystać do nauki albo w dowolnym innym celu.

Kod źródłowy

Co jeszcze powinieneś wiedzieć?

Do komfortowej pracy z kursem potrzebna jest podstawowa znajomość HTML oraz CSS. Do pisania kodu w kursie użyty został program Sublime Text 2 ale można go bez problemu zastąpić innymi edytorami.

HTML5
HTML
CSS3
CSS
LESS
LESS
SASS
SASS
ZOBACZ WIĘCEJ
Program nauczania
1 Wprowadzenie
Powitanie 1m 09s
Jak korzystać z plików 1m 42s
Co to jest preprocesor CSS 7m 16s
Jak działa LESS/SASS 6m 01s
Wybór właściwego edytora 6m 22s
2 LESS - podstawy
Kompilacja za pomocą biblioteki JS 4m 40s
Kompilacja za pomocą WinLess 9m 07s
Zmienne Podgląd 5m 17s
Mixins - Domieszki 4m 29s
Zagnieżdżanie 4m 58s
Przydatne operacje 6m 29s
Korzystanie z funkcji 6m 16s
3 LESS - techniki zaawansowane
Domieszki z parametrami 4m 41s
Domieszki z parametrami - kontynuacja 6m 11s
Dopasowanie do wzorca 4m 20s
Zagnieżdżanie - pseudoklasy 4m 07s
Pseudoklasa Extend 4m 58s
4 SASS - podstawy
Kompilacja SASS 7m 28s
Zmienne w SASS 3m 54s
Domieszki w SASS Podgląd 4m 49s
Domieszki parametryczne 7m 57s
Użycie zagnieżdżania 3m 46s
Funkcje wbudowane 5m 12s
5 SASS - zagadnienia zaawansowane
Definiowanie funkcji 7m 01s
Listy 4m 22s
Współdzielenie właściwości - polecenie Extend 6m 00s
Placeholder 4m 45s
Dyrektywa IF Podgląd 6m 04s
Pętla EACH 6m 23s
Pętla FOR 6m 18s
Pętla WHILE 6m 07s
Import 6m 14s
Formatowanie wyjściowego CSS 4m 52s
6 Kompletna strona z użyciem preprocesora
Projekt, który stworzymy 5m 11s
Podstawowa struktura 3m 37s
7 Zawartość strony
Tworzymy górny pasek 10m 10s
Dodajemy zawartość slidera 7m 45s
Dodajemy sekcję usługi 6m 15s
Tworzymy portfolio 9m 52s
Tworzymy kolejną sekcję 3m 40s
Dodajemy element wideo 6m 04s
Sekcja Nasze zalety 5m 22s
Statystyki i parallax 6m 13s
Sekcja Nasz zespół 6m 44s
Sekcja Opinie klientów 5m 04s
Stopka cz. 1 6m 26s
Stopka cz. 2 5m 18s
8 Struktura stylów
Jak wykorzystać możliwości LESS 4m 44s
Tworzymy strukturę plików 9m 51s
Reset stylów 4m 10s
Definiowanie bazowych kolorów 4m 50s
Pozostałe kolory 7m 00s
Domieszki - pozycjonowanie i widoczność 6m 56s
Domieszki - rozmiary i obramowania 8m 44s
Domieszki - clearfix, ukrywanie i narożniki 6m 10s
Domieszki - przejścia i nakładki 7m 27s
9 Struktura stylów - kontynuacja
Fonty Google 3m 28s
Typografia - zmienne i domieszki 7m 07s
Typografia - style tekstu 6m 59s
Media queries w LESS 5m 39s
Semantic GS - podstawa siatki kolumn 8m 00s
Układ dla różnych urządzeń cz.1 4m 55s
Układ dla różnych urządzeń cz.2 8m 35s
Kontener, obrazki oraz odnośniki 5m 49s
Pozostałe bazowe style 5m 42s
Style przycisków 4m 46s
10 Style dla nagłówka i slidera
Nagłówek - podstawowe style 7m 58s
Nagłówek - style dla menu 9m 18s
Slicknav - skrypt menu mobilnego 7m 00s
Inicjalizacja skryptu menu 11m 26s
Nadpisywanie stylów menu 11m 17s
bxSlider - główny slider na stronie 6m 49s
Ładowanie obrazków do slidera 8m 23s
Podstawowe style slidera 10m 37s
Slider - ostatnie poprawki 5m 02s
Plugin Images loaded - ładowanie obrazków 7m 11s
11 Sekcja Usługi oraz Portfolio
Style dla sekcji Usługi 9m 18s
Owl Carousel - slider dla portfolio 12m 07s
Portfolio - wstępne style 9m 52s
Portfolio - style dla detali 9m 34s
Portfolio - dodajemy efekt hover 7m 19s
12 Środkowa część witryny
Najkrótsza część projektu 3m 13s
Sekcja Wideo - wstępne style 10m 08s
Sekcja Wideo - nagłówek oraz przycisk 5m 07s
Pasek poniżej wideo 7m 17s
Sekcja Nasze zalety - układ dla urządzeń 7m 21s
Sekcja Nasze zalety - różne style 5m 11s
Statystyki - skrypt (countTo) 7m 22s
Statystyki - definiowanie stylów 5m 31s
Baner z efektem parallax - wstęp 7m 38s
Baner z efektem parallax - style 4m 21s
13 Style dolnej części strony
Nasz zespół - ogólne style 5m 27s
Nasz zespół - style dla profilu 4m 25s
Nasz zespół - ikony social 5m 15s
Konfiguracja slidera z opiniami 5m 07s
Slider z opiniami - style 8m 24s
Stopka - style podstawowe 6m 10s
Stopka - kolumna O nas 6m 27s
Stopka - kolumna Nasz blog 6m 51s
Stopka - kolumna Galeria 4m 30s
Stopka - kolumna Linki 5m 36s
Końcowa sekcja "Copyright" 3m 58s
14 Finalizowanie projektu
Nadpisujemy style dla kontrolek slidera cz.1 4m 43s
Nadpisujemy style dla kontrolek slidera cz.2 5m 13s
Biblioteka Animate - łatwe animacje w CSS 6m 03s
Skrypt Viewport Checker 7m 12s
Dodawanie animacji do slidera 5m 03s
Finalny skrypt animacji 10m 08s
Rozwiązanie problemu z kontrolkami slidera 4m 10s
Plugin wideo cz.1 4m 05s
Plugin wideo cz.2 6m 41s
Finalny projekt - kompilacja 4m 57s
Pożegnanie 0m 27s
Ocena uczestników
4.9
92%
7%
0%
0%
0%
Recenzje użytkowników (132)
Grzegorz Kniażuk
Kurs przedstawia techniki pracy zarówno z LESS jak i SASS, różnice pomiędzy nimi jak i zagadnienia zaawansowane. Praktyczny projekt pozwala utrwalić wiedzę teoretyczną i oswoić… Czytaj więcej
Adrian Kukowski
Bardzo długo zwlekałem z przesiadki z css na less i sass, i słowa które są użyte w treści kursu, że po poznaniu tych pre procesorów nie będziesz sobie wyobrażał pracy bez nich są… Czytaj więcej
Michał Czyż
Ten kurs pozwolił mi zgłębić wiedzę na temat kompilacji i produktywne zastosowanie najnowszych technik. Lektor konkretny, profesjonalista. Praktyczne przykłady to właściwie… Czytaj więcej
Karol Szulc
Świetnym pomysłem było przedstawienie najważniejszych aspektów obu preprocesorów CSS w jednym kursie i skonfrontowanie ich ze sobą. Projekt na zakończenie kursu jak zwykle pomaga… Czytaj więcej
Mateusz Krasuski
Bardzo dokładnie omówiono różnicę pomiędzy LESS i SASS. Kurs bardzo dobrze wyjaśnia podstawy tych języków. Bardzo podoba mi się że nawet pokazano jak w praktyce wykorzystać… Czytaj więcej
Ksawery Kargól
Ksawery Kargól
4.9
Produktywne tworzenie stron z LESS & SASS
Informacje o szkoleniu
  • Poziom Średniozaawansowany
  • Możliwość pobrania pliku
  • Nielimitowany dostęp
  • Darmowe aktualizacje
  • Dodatkowe materiały
  • Certyfikat ukończenia
  • Dostęp z urządzeń mobilnych
89
+890 punktów premium
Ten kurs jest częścią ścieżki
4.9
Web Designer
Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony!
862wykładów
6032 uczestników
Dowiedz się więcej
Ścieżka kariery - Web Designer
Group 51 Created with Sketch.
close Created with Sketch.
Tylko teraz możesz odebrać rabat na pierwsze zamówienie
Dlaczego warto?
Shape Created with Sketch. Będziesz regularnie otrzymywał atrakcyjne rabaty
Shape Created with Sketch. Nie przegapisz żadnej z naszych promocji
Shape Created with Sketch. Będziesz informowany o aktualnych konkursach
Shape Created with Sketch. Nie wysyłamy spamu
Nie, dziękuję, kupię bez zniżki
Strefakursów.pl korzysta z plików cookie, aby dostosować usługi do Twoich preferencji. Niektóre pliki cookie są zaś niezbędne do prawidłowego działania witryny. Dzięki nim możemy wyświetlać Ci spersonalizowane oferty i informacje o promocjach, zarówno w witrynach strefakursów.pl, jak i na innych stronach. Oczywiście to Ty decydujesz. Możesz w każdej chwili określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
AKCEPTUJĘ PLIKI COOKIE