W dzisiejszych czasach coraz więcej osób przegląda strony WWW za pomocą różnych urządzeń mobilnych. Praktycznie każdy nowoczesny telefon i tablet umożliwia korzystanie z Internetu. Jako projektant musisz zadbać o to, aby zapewnić takim osobom jak najłatwiejszy dostęp do treści i funkcjonalności swojej witryny. Prawidłowe dostosowanie strony do urządzeń mobilnych sprawi, że szerokie grono osób będzie mogło ją wygodnie przeglądać.

Projektowanie stron na przeglądarki mobilne nie jest łatwym zadaniem. To złożony temat, który obejmuje zarówno aspekty wizualne jak i funkcjonalne. Z pomocą przyjdzie Ci kurs Responsive Web Design.

Oglądając po kolei rozdziały kursu szybko opanujesz najważniejsze techniki responsywne, czyli takie, które pozwolą Ci dostosować witrynę do różnych urządzeń.

Na początku kursu poznasz podstawowe zasady tworzenia witryn responsywnych, dowiesz się jak wykorzystać możliwości Media Queries oraz jak stworzyć płynny układ kolumn. Poznasz przydatne rozwiązania, które pozwolą dostosować typowe elementy strony jak: obrazki, tabele oraz menu do mobilnych przeglądarek.

Kolejna część kursu zapozna Cię z niezwykle popularnym frameworkiem Bootstrap. Oferuje on szeroki zestaw klas i skryptów, które pozwolą Ci łatwo i szybko stworzyć responsywną strukturę witryny, dodać style oraz różne przydatne funkcjonalności. Przy okazji poznasz także alternatywy dla Bootstrap, zobaczysz jak projektować stronę w Photoshopie na bazie tzw. siatki oraz sposoby testowania witryny w różnych rozdzielczościach.

Kolejny etap kursu poświęcony jest na omówienie kompletnego projektu responsywnej strony. To doskonała okazja, aby przetestować w praktyce zdobytą wiedzę. Poznasz wiele ciekawych rozwiązań: pluginy Mobilemenu oraz FlexSlider, autorzy pokazują jak wykorzystać w praktyce możliwości Bootstrap i wiele więcej. Warto w tym miejscu dodać, że do kursu dołączone są wszystkie pliki, wykorzystane podczas kursu.

Informacje o kursie

Ilość filmów: 51

Czas trwania: 5,5 godziny

Język: polski

Spis treści:

Podstawowe koncepcje

• Wstęp (1m 25s)
• Responsywne witryny - przykłady (5m 45s)
• Wprowadzenie do Media Queries (7m 24s)
• Media Queries - przykład użycia (6m 43s)
• Fluid grid - płynny układ (8m 31s)

Przydatne rozwiązania

• Nawigacja typu Select (5m 49s)
• Responsywne wideo (4m 38s)
• Tabele - plugin Footable (9m 00s)
• Responsywne obrazki (5m 59s)
• Tekst oparty na jednostkach relatywnych (6m 57s)

Framework Bootstrap

• Omówienie i pobieranie plików (5m 12s)
• Tworzenie projektu opartego na Bootstrap (5m 50s)
• Użycie układu kolumnowego (7m 20s)
• Bootstrap - typografia (9m 13s)
• Przyciski i formularze (6m 42s)
• Obrazki oraz ikony (6m 58s)
• Style elementów nawigacyjnych (5m 39s)
• Elementy funkcjonalne (5m 36s)

Pozostałe frameworki i narzędzia

• Alternatywy dla Bootstrap (3m 35s)
• Omówienie frameworku Skeleton (7m 09s)
• Projektowanie w programie Photoshop (6m 25s)
• Testowanie witryny responsywnej (8m 26s)

Praktyczny projekt - struktura HTML

• Główne założenia projektu (3m 41s)
• Tworzenie struktury plików (5m 15s)
• Logo i nawigacja (5m 01s)
• Flexslider (8m 51s)
• Sekcja portfolio (6m 06s)
• Sekcja usługi (5m 14s)
• Sekcja najnowsze prace (4m 50s)
• Sekcja social (4m 12s)
• Sekcja klienci (4m 04s)
• Formularz kontaktowy (9m 20s)
• Struktura stopki (5m 10s)

Projekt - style CSS

• Podstawowe style witryny (3m 28s)
• Ogólne style dla nagłówków (5m 36s)
• Menu główne (8m 16s)
• Formatowanie slidera (8m 54s)
• Slider - nadpisywanie wbudowanych reguł (4m 23s)
• Ogólne style zawartości (7m 10s)
• Style sekcji usługi (6m 49s)
• Pozostałe style dla treści (7m 45s)
• Ostylowanie sekcji social (7m 36s)
• Mapy - ostylowanie (3m 40s)
• Style formularza (10m 00s)
• Style stopki (8m 12s)

Projekt - elementy responsywne

• Elementy responsywne - wstęp (6m 27s)
• Dostosowanie witryny do średnich szerokości (10m 53s)
• Maksymalna szerokość 767px - nagłówek (7m 12s)
• Maksymalna szerokość 767px - treść (10m 34s)
• Wyświetlanie na mniejszych urządzeniach (6m 57s)
• Dodatkowe menu dla urządzeń mobilnych (10m 31s)