Chcesz tworzyć nowoczesne responsywne witryny?

Potrzebujesz narzędzi, które pozwolą ci skupić się na projekcie i uwolnią cię konieczności tworzenia każdego fragmentu kodu CSS i HTML od podstaw?
Chcesz dowiedzieć się jak za pomocą Bootstrapa stworzyć od podstaw kompletną witrynę
Potrzebujesz praktycznej wiedzy na temat aktualnych trendów i rozwiązań w web designie?

Czego się nauczysz z kursem?

Responsywny layout strony
Z tym szkoleniem poznasz tajniki tworzenia nowoczesnych stron opartych na frameworku Bootstrap. Co ważne w kursie omawiamy nie tylko podstawy Bootstrapa, ale również pokazujemy jak wykonać krok po kroku kompletny projekt responsywnej strony. To nie wszystko: dowiesz się także jak korzystać z niezwykle popularnej i przydatnej technologii LESS, która bardzo ułatwia pracę z rozbudowanymi arkuszami stylów.

Jak to działa?
Responsywny layout strony
Kurs zawiera ponad 60 filmów instruktażowych prowadzonych przez lektora doświadczonego programistę i webdesignera. Oglądając filmy błyskawicznie opanujesz wszystkie zagadnienia i będziesz w stanie zastosować zdobytą wiedzę w praktyce. Wszystkie niezbędne pliki zostały dołączone do kursu zarówno pliki z ćwiczeniami jak i gotowe projekty. Po obejrzeniu filmów możesz więc od razu przystąpić do pracy. Do plików możesz się także odwołać w razie wystąpienia jakichkolwiek problemów.
w pełni responsywny układ, który działa poprawnie na każdym urządzeniu,
karuzela na stronie frontowej z automatyczną zmianą zdjęć,
responsywne obrazki,
nowoczesny design w stylu Flat,
przejrzysta struktura kodu umożliwiająca łatwą rozbudowę strony,
nowoczesna i przejrzysta nawigacja w oparciu o komponenty frameworku Bootstrap,
efekty i animacje z użyciem CSS,
nowoczesne i przyjazne dla użytkownika formularze.

Tworzenie stron w Bootstrap
javascript w Bootstrapie
javascript w Bootstrapie
Bootstrap posiada ciekawy zestaw pluginów, za pomocą których możesz łatwo dodać do strony przydatne funkcjonalności. Pokażemy ci kilka bardzo ciekawych i jednocześnie praktycznych przykładów użycia tej technologii. Dowiesz się jak stworzyć menu harmonijkowe, panel z zakładkami, oraz okienka podpowiedzi (tzw. tooltipsy?). Po za tym opanujesz tworzenie karuzeli zdjęć oraz okien modalnych.

LESS w Bootstrapie
Technologia LESS
LESS to tzw. preprocesor CSS czyli takie rozszerzenie dla kaskadowych arkuszy stylów umożliwiające użycie zmiennych, funkcji itp. W praktyce pozwala to na wygodniejsza pracę, zwłaszcza podczas tworzenia bardziej rozbudowanych witryn. LESS jest bardzo powszechnie używany i jego znajomość może być bardzo przydatna. Dlatego w ostatnim rozdziale rightu poznasz najważniejsze zagadnienia dotyczące użycia tej niezwykle ciekawej technologii.

Responsywny layout strony

Elementy Bootstrap
Duża liczba predefiniowanych stylów dla każdego elementu strony pozwoli ci to nie tylko przyspieszyć twoją pracę ale również zapewni spójny wygląd dla całej witryny. Dlatego w tym rozdziale opowiemy ci m.in. o wstawianiu przycisków, ikonek, tabel, galerii itp. Dowiesz się również jak przygotować responsywne obrazy.
Nawigacja na stronie
Duża ilość przejrzystych i łatwych w użyciu elementów nawigacyjnych jest kolejną istotną zaletą Bootstrapa. Oglądając filmy w tej części szkolenia szybko dowiesz się jak dodać na swojej witrynie menu w różnych wariantach oraz pasek typu breadcrumb?.
Formularze
Formularze to kolejny element, który można bardzo łatwo przygotować oraz ostylować dzięki Bootstrapowi. Ten rozdział pozwoli ci szybko opanować najważniejsze zagadnienia związane z tworzeniem formularzy, użyciem pól tekstowych oraz dodawaniem ciekawych efektów.

Rozbudowany projekt
Responsywny layout strony
Ten rozdział obejmuje aż 28 filmów, które pokażą ci jak wykonać krok po kroku komplety projekt nowoczesnej witryny. To doskonała okazja do podsumowania dotychczasowej wiedzy oraz do zdobycia nowych przydatnych umiejętności.

Co jeszcze znajduje się w kursie?
Wstęp
Pierwszy rozdział to doskonała okazja aby zapoznać się lektorem, dowiedzieć się jak korzystać z plików dołączonych do kursu oraz poznać edytor używany w dalszych rozdziałach.

Konfiguracja środowiska
Na tym etapie rozpoczniemy pracę z frameworkiem Bootstrap. Dowiesz się skąd pobrać niezbędne komponenty, jak przygotować je do dalszej pracy oraz jak podłączyć pliki CSS oraz javascript.

Podstawowe funkcje
Ten rozdział pozwoli ci szybko zapoznać się z kluczowym elementem frameworku czyli z tzw. siatką która pełni rolę szkieletu strony. W kilku filmach pokażemy ci m.in. jak zdefiniować układ kolumn, jak te kolumny przesuwać, jak dynamicznie zmieniać ich kolejność i jak zagnieżdżać elementy siatki. To bardzo ważna wiedza bez której ciężko przejść do kolejnych etapów.

Co jeszcze warto wiedzieć
HTML5, CSS3, Bootstrap
Kurs kompatybilny z wersjami 3.X. Do komfortowej pracy przydatna będzie podstawowa znajomość HTML oraz CSS. Do tworzenia kodu użyty został edytor Sublime Text 2 ale nic nie stoi na przeszkodzie, aby go zastąpić dowolnym innym programem edycyjnym.
1 Wprowadzenie
Wstęp 0m 23s
Instalacja Sublime Text 4m 19s
Jak korzystać z plików? 2m 35s

2 Konfiguracja srodowiska
Bootstrap - co to jest? 5m 20s
Instalacja frameworku Bootstrap 5m 01s
Dołączenie plików CSS 4m 40s
Dołączenie plików JS 6m 01s

3 Podstawowe funkcje
Układ siatki 14m 28s
Korzystanie z układu siatki 11m 49s
Offset - zmiana kolumn 10m 03s
Push-Pull - dynamiczna zmiana kolejności kolumn Podgląd 4m 55s
Zagnieżdżanie siatki 7m 31s
Jumbotron 3m 35s

4 Elementy frameworku Bootstrap
Znaczniki blockquote i small 5m 58s
Responsywne ukrywanie elementów na stronie 4m 50s
Przyciski 6m 16s
Zdjęcia responsywne 7m 01s
Ikony glyphicon 3m 36s
Galeria zdjęć 12m 54s
Tabele 7m 31s
Własny plik CSS 6m 02s
5. Nawigacja na stronie
Nawigacja i INFOrmacja 5m 14s
Proste menu 5m 24s
Rozbudowane menu 11m 59s
Rozwijane menu Podgląd 4m 29s

6. javascript w frameworku Bootstrap
javascript - zakładki 13m 23s
Menu harmonijkowe 11m 28s
javascript - podpowiedzi 6m 15s
Efekt karuzeli zdjęć 11m 03s
Okna modalne 10m 54s

7. Formularze
Pola tekstowe w formularzach 7m 51s
Elementy formularza 9m 27s
Dodatkowe efekty w formularzach 7m 40s

8. Rozbudowany Projekt
Wstęp 3m 36s
Projekt menu górnego 17m 53s
Dodanie efektu karuzeli 8m 51s
Użycie menu harmonijkowego 15m 11s
Miniaturki zdjęć 13m 29s
INFOrmacja w zakładkach 15m 53s
Szybka stylizacja zdjęć Podgląd 7m 37s
Formatowanie okien modalnych 11m 03s
Ikony z przezroczystym tłem 5m 27s
Rozmieszczenie elementów na siatce 5m 29s
Własne kafelki 6m 06s
Użycie formularza 12m 09s
Formatowanie stopki strony 3m 31s
Walidacja i poprawa błędów 12m 31s
Własny plik CSS 4m 26s
Typografia w CSS 6m 50s
Zmiana wyglądu menu górnego 14m 06s
Pełnoekranowy efekt karuzeli 8m 17s
CSS w menu harmonijkowym 11m 09s
Stylizacja miniaturek 4m 54s
Ciekawe efekty CSS 6m 38s
Przebudowa zakładek 9m 38s
Stylizacja okien modalnych 11m 07s
Dwukolorowe kafelki 12m 31s
Ulepszenie formularzy 4m 44s
Animacje na stronie 11m 22s
Dopasowywanie strony do rozdzielczości 12m 54s
javascript - animacja menu górnego 5m 02s

9. LESS
LESS, czyli zmienne w CSS 4m 59s
Instalacja niezbędnych narzędzi 3m 28s
Praca z LESS 3m 32s
Własny plik LESS 6m 33s
Domieszki - mixins 3m 04s