Responsywność oraz narzędzia usprawniające pracę

Projektujemy strony z Bootstrap tak, aby ich wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany, np. tabletu czy telefonu.

Poznajemy technologie LESS oraz SASS to tzw. preprocesory 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.

Forma zajęć:

Zajęcia prowadzone są przez jednego instruktora, każdy z uczestników pracuje przy jednym laptopie. Kurs trwa 40 godzin lekcyjnych.

Wymagania:

  • Sprawna znajomość obsługi komputera
  • Zdolność logicznego myślenia
  • Podstawowa znajomość języka angielskiego
  • Podstawowa znajomość HTML oraz CSS.

Uczestnicy kursu otrzymują:

  • Imienne certyfikaty sygnowane przez Narodowy Instytut Kształcenia w języku polskim oraz angielskim.
  • Zaświadczenie ukończenia kursu (na podstawie §18 Rozporządzenia Ministra Edukacji Narodowej z dnia 11 stycznia 2012 r. w sprawie kształcenia ustawicznego w formach pozaszkolnych (Dz. U. z 2012 r. poz. 186)).

Narodowy Instytut Kształcenia został wpisany do rejestru Niepublicznych Placówek Kształcenia Ustawicznego prowadzonego przez Powiat Sanocki pod numerem 23. Organem prowadzącym NInK jest Podkarpacka Fundacja Rozwoju Kultury. Wszelkie dochody z tytułu prowadzenia szkoleń i kursów trafiają na wydzielone konto PFRK i są przekazywane na rozwój sektora szkoleniowego co jest wpisane w główne cele statutowe PFRK i NInK.

Pobierz ofertę

Napisz do nas: instytut@nink.pl
Zadzwoń: +48 13 464 03 44 
 

Program kursu:

Część 1 Bootstrap - responsywne strony (16 godz.)

  1. Wprowadzenie
  • Instalacja edytora
  • Jak korzystać z plików?
  1. Konfiguracja środowiska
  • Bootstrap - co to jest?
  • Instalacja frameworku Bootstrap
  • Dołączenie plików CSS
  • Dołączenie plików
  1. Podstawowe funkcje
  • Układ siatki
  • Korzystanie z układu siatki
  • Offset - zmiana kolumn
  • Push-Pull - dynamiczna zmiana kolejności kolumn
  • Zagnieżdżanie siatki
  • Jumbotron
  1. Elementy frameworku Bootstrap
  • Znaczniki blockquote i small
  • Responsywne ukrywanie elementów na
  • Przyciski
  • Zdjęcia responsywne
  • Ikony glyphicon
  • Galeria zdjęć
  • Tabele
  • Własny plik CSS
  1. Nawigacja na stronie
  • Nawigacja i informacja
  • Proste menu
  • Rozbudowane menu
  • Rozwijane menu
  1. Javascript w frameworku Bootstrap
  • Javascript – zakładki
  • Menu harmonijkowe
  • Javascript – podpowiedzi
  • Efekt karuzeli zdjęć
  • Okna modalne
  1. Formularze
  • Pola tekstowe w formularzach
  • Elementy formularza
  • Dodatkowe efekty w formularzach
  1. Rozbudowany projekt
  • Projekt menu górnego
  • Dodanie efektu karuzeli
  • Użycie menu harmonijkowego
  • Miniaturki zdjęć
  • Informacja w zakładkach
  • Szybka stylizacja zdjęć
  • Formatowanie okien modalnych
  • Ikony z przezroczystym
  • Rozmieszczenie elementów na siatce
  • Własne kafelki
  • Użycie formularza
  • Formatowanie stopki strony
  • Walidacja i poprawa błędów
  • Własny plik CSS
  • Typografia w CSS
  • Zmiana wyglądu menu górnego
  • Pełnoekranowy efekt karuzeli
  • CSS w menu harmonijkowym
  • Stylizacja miniaturek
  • Ciekawe efekty CSS
  • Przebudowa zakładek
  • Stylizacja okien modalnych
  • Dwukolorowe kafelki
  • Ulepszenie formularzy
  • Animacje na stronie
  • Dopasowywanie strony do rozdzielczości
Javascript - animacja menu górnego

Część 2 Tworzenie stron z LESS & SASS (16 godz.)

  1. Wprowadzenie
  • Co to jest preprocesor CSS
  • Jak działa LESS/SASS
  • Wybór właściwego edytora
  1. LESS - podstawy
  • Kompilacja za pomocą biblioteki JS
  • Kompilacja za pomocą WinLess
  • Zmienne
  • Mixins – Domieszki
  • Zagnieżdżanie
  • Przydatne operacje
  • Korzystanie z funkcji
  1. LESS - techniki zaawansowane
  • Domieszki z parametrami
  • Dopasowanie do wzorca
  • Zagnieżdżanie – pseudoklasy
  • Pseudoklasa Extend
  1. SASS - podstawy
  • Kompilacja SASS
  • Zmienne w SASS
  • Domieszki w SASS
  • Użycie zagnieżdżania
  • Funkcje wbudowane
  1. SASS - zagadnienia zaawansowane
  • Definiowanie funkcji
  • Listy
  • Współdzielenie właściwości - polecenie Extend
  • Placeholder
  • Dyrektywa IF
  • Pętla EACH
  • Pętla FOR
  • Pętla WHILE
  • Import
  • Formatowanie wyjściowego CSS
  1. Kompletna strona z użyciem preprocesora
  • Projekt, który stworzymy i jego podstawowa struktura
  1. Zawartość strony
  • Tworzymy górny pasek
  • Dodajemy zawartość slidera
  • Dodajemy sekcję usługi
  • Tworzymy portfolio
  • Tworzymy kolejną sekcję
  • Dodajemy element wideo
  • Sekcja „Nasze zalety”
  • Statystyki i parallax
  • Sekcja „Nasz zespół”
  • Sekcja „Opinie klientów”
  • Stopka
  1. Struktura stylów
  • Jak wykorzystać możliwości LESS
  • Tworzymy strukturę plików
  • Reset stylów
  • Definiowanie bazowych kolorów
  • Pozostałe kolory
  • Domieszki - pozycjonowanie i widoczność
  • Domieszki - rozmiary i obramowania
  • Domieszki - clearfix, ukrywanie i narożniki
  • Domieszki - przejścia i nakładki
  1. Struktura stylów - kontynuacja
  • Fonty Google
  • Typografia - zmienne i domieszki
  • Typografia - style tekstu
  • Media queries w LESS
  • Semantic GS - podstawa siatki kolumn
  • Układ dla różnych urządzeń
  • Kontener, obrazki oraz odnośniki
  • Pozostałe bazowe style
  • Style przycisków
  1. Style dla nagłówka i slidera
  • Nagłówek - podstawowe style
  • Nagłówek - style dla menu
  • Slicknav - skrypt menu mobilnego
  • Inicjalizacja skryptu menu
  • Nadpisywanie stylów menu
  • bxSlider - główny slider na stronie
  • Ładowanie obrazków do slidera
  • Podstawowe style slidera
  • Slider - ostatnie poprawki
  • Plugin Images loaded - ładowanie obrazków
  1. Sekcja Usługi oraz Portfolio
  • Style dla sekcji „Usługi”
  • Owl Carousel - slider dla portfolio
  • Portfolio - wstępne style, style dla detali
  • Portfolio - dodajemy efekt hover
  1. Środkowa część witryny
  • Najkrótsza część projektu
  • Sekcja „Wideo” - wstępne style
  • Sekcja „Wideo” - nagłówek oraz przycisk
  • Pasek poniżej wideo
  • Sekcja „Nasze zalety” - układ dla urządzeń
  • Sekcja „Nasze zalety” - różne style
  • Statystyki - skrypt (countTo)
  • Statystyki - definiowanie stylów
  • Baner z efektem parallax – wstęp
  • Baner z efektem parallax – style
  1. Style dolnej części strony
  • „Nasz zespół” - ogólne style
  • „Nasz zespół” - style dla profilu
  • „Nasz zespół” - ikony social
  • Konfiguracja slidera z opiniami
  • Slider z opiniami – style
  • Stopka - style podstawowe
  • Stopka - kolumna O nas
  • Stopka - kolumna Nasz blog
  • Stopka - kolumna Galeria
  • Stopka - kolumna Linki
  • Końcowa sekcja "Copyright"
  1. Finalizowanie projektu
  • Nadpisujemy style dla kontrolek slidera
  • Biblioteka Animate - łatwe animacje w CSS
  • Skrypt Viewport Checker
  • Dodawanie animacji do slidera
  • Finalny skrypt animacji
  • Rozwiązanie problemu z kontrolkami slidera
  • Plugin wideo
  • Finalny projekt - kompilacja