- Autor:
- Długość
- liczba lekcji: 88, czas trwania: 08:29:03
- Ocena
Kurs video
Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych Łukasz Krawczyk
- Autor:
- Łukasz Krawczyk
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 8 godz. 29 min.
- Technologia:
- Popper.js, Bootstrap 5.3, Bootstrap Icons
- Ocena:
Spis lekcji kursu video
-
1. Bootstrap w kontekście innych technologii 00:23:21
- 1.1. Wprowadzenie 00:05:47
- 1.2. Podział na frontend oraz backend 00:02:42
- 1.3. Framework - jak go rozumieć? 00:01:53
- 1.4. Wytyczne dotyczące dostępności stron internetowych (WCAG) 00:03:53
- 1.5. Geneza i historia frameworka Bootstrap 00:02:32
- 1.6. Nowości we frameworku Bootstrap 5 oraz 5.3.x 00:06:34
-
2. Język CSS - tryb wyświetlania Flexbox (Flexible Box) 00:15:35
- 2.1. Modele layoutów dostępne w języku CSS 00:03:45
- 2.2. Fleksowy pojemnik (ang. flex container) oraz elementy fleksowe (ang. flex items) 00:01:36
- 2.3. Fleksowy pojemnik - właściwość flex-direction 00:02:00
- 2.4. Fleksowy pojemnik - właściwość justify-content 00:01:46
- 2.5. Fleksowy pojemnik - właściwość align-items 00:01:54
- 2.6. Elementy fleksowe - właściwość order 00:01:53
- 2.7. Przydatne zasoby w Internecie 00:02:41
-
3. Język programowania JavaScript - najważniejsze elementy standardu ECMAScript 6 (2015) 00:17:16
- 3.1. Standard ECMAScript i jego różne wersje 00:03:28
- 3.2. Stałe, a właściwie... zmienne (słowa kluczowe const oraz let) 00:02:23
- 3.3. Funkcje strzałkowe (ang. 'fat arrow' functions) 00:04:01
- 3.4. Interpolacja literałów łańcuchowych (ang. template literals) 00:02:06
- 3.5. Wstęp do funkcji wyższego rzędu (ang. higher-order functions) (ECMAScript 3-6) 00:01:48
- 3.6. Metoda .forEach() przetwarzająca każdy element kolekcji z osobna (ECMAScript 3) 00:03:30
-
4. Rozpoczęcie przygody z Bootstrapem 00:45:24
- 4.1. Visual Studio Code - darmowy edytor kodu źródłowego z kolorowaniem składni 00:05:47
- 4.2. Nowoczesne formaty plików graficznych - WebP (od Google) oraz SVG (od W3C) 00:03:16
- 4.3. Stworzenie dokumentu HTML5 00:05:23
- 4.4. Dodanie znaczników meta 00:07:10
- 4.5. Dodanie ikony witryny (ang. favicon) 00:06:34
- 4.6. Podpięcie Bootstrapa - plik CSS, plik JavaScript, biblioteka Popper oraz Bootstrap Icons 8 00:08:22
- 4.7. Oficjalna dokumentacja Bootstrapa w wersji 5.3.x 8 00:08:52
-
5. Nagłówek 00:43:49
- 5.1. Struktura nagłówka, a właściwie... belki nawigacyjnej (ang. navbar) 00:12:22
- 5.2. Miejsce na logo (ang. brand) 00:10:32
- 5.3. Umieszczenie poszczególnych elementów w jednym wspólnym menu 00:13:25
- 5.4. Przełącznik nawigacji mobilnej - menu hamburgerowe (ang. hamburger menu) 00:04:57
- 5.5. Przyklejenie nagłówka 00:02:33
-
6. Sekcja hero, czyli... slider (karuzela) 00:46:31
- 6.1. Struktura slidera pod postacią karuzeli (ang. carousel) 00:03:41
- 6.2. Pojedynczy slajd - obrazek w tle pojemnika zamiast zwykłego obrazka (plik hero.css) 00:11:16
- 6.3. Pojedynczy slajd - podpis (ang. caption) 00:11:22
- 6.4. Wskaźniki nawigacyjne (ang. indicators) identyfikujące poszczególne slajdy 00:08:07
- 6.5. Nawigacja pomiędzy kolejnymi slajdami - slajd poprzedni, slajd następny 00:08:11
- 6.6. Zmiana sposobu przechodzenia slajdów oraz autouruchamianie slidera (karuzeli) 00:03:54
-
7. Sekcja 'Cytat' 00:12:51
-
8. Sekcja 'Platformy sprzętowe' 00:32:30
- 8.1. Struktura oraz rozstrzelony i wyśrodkowany nagłówek (plik varia.css) 00:09:13
- 8.2. Kolumny oraz pliki SVG w pojemnikach z białym tłem, obrysem i zaokrąglonymi rogami 00:08:52
- 8.3. Grupa przycisków (ang. button group) 00:06:44
- 8.4. Przycisk 'Czytaj więcej' oraz rozwijanie i zwijanie zawartości (ang. collapse) 00:07:41
-
9. Sekcja 'Nowości' 00:35:31
-
10. Sekcja 'Bestsellery' 00:31:54
- 10.1. Struktura pojedynczej karty (ang. card) - ciało, stopka 00:09:04
- 10.2. Obrazek wyróżniający w karcie i wymuszenie na nim proporcji 16:9 00:05:54
- 10.3. Równa wysokość kart... a właściwie ich ciała 00:01:34
- 10.4. Automatyczne przycinanie zbyt długiego tekstu do jednej linijki 00:04:25
- 10.5. Podpowiedź (ang. tooltip) dla potencjalnie przyciętego tekstu (plik bs-tooltip.js) 00:10:57
-
11. Sekcja 'Najczęściej zadawane pytania (FAQ)' 00:24:29
-
12. Sekcja 'Zwiastun' 00:10:49
-
13. Sekcja 'Formularz kontaktowy' 00:44:01
- 13.1. Struktura formularza kontaktowego 00:07:46
- 13.2. Pływające etykiety pól formularza (ang. floating labels) 00:05:03
- 13.3. Dostosowanie wysokości obszaru tekstowego (plik varia.css) 00:04:14
- 13.4. Wybór preferowanej formy kontaktu (przyciski opcji) 00:07:27
- 13.5. Załączanie pliku (wielu plików) do wysyłanej przez użytkownika wiadomości 00:03:37
- 13.6. Akceptacja polityki prywatności (przycisk wyboru) 00:04:33
- 13.7. Aktywacja walidacji formularza domyślnie dostarczanej przez Bootstrap (plik bs-form.js) 00:11:21
-
14. Stopka 00:28:03
- 14.1. Struktura stopki 00:03:09
- 14.2. Odnośnik do polityki prywatności docelowo wyświetlanej w oknie modalnym 00:02:30
- 14.3. Informacja o roku powstania, źródle informacji oraz prawach autorskich 00:05:08
- 14.4. Linki zewnętrzne odsyłające do mediów społecznościowych 00:09:03
- 14.5. Zastrzeżenie (ang. disclaimer) dotyczące wykorzystanych na stronie zasobów 00:03:22
- 14.6. Suplement - przyklejony do dołu ekranu przycisk umożliwiający powrót na samą górę 00:04:51
-
15. Okno modalne 01:02:57
- 15.1. Idea działania okna modalnego 00:02:25
- 15.2. Struktura i zawartość okna modalnego (ang. modal) - nagłówek, ciało, stopka 00:10:22
- 15.3. Otwieranie okna modalnego 00:04:34
- 15.4. Zamykanie okna modalnego 00:02:37
- 15.5. Okno modalne z prawdziwego zdarzenia, czyli jego statyczna odmiana (ang. static backdrop) 00:04:25
- 15.6. Okno modalne z możliwością przewijania 00:02:57
- 15.7. Okno modalne wyśrodkowanie w pionie 00:01:50
- 15.8. Domyślny rozmiar okna modalnego i jego rozmiary opcjonalne 00:03:16
- 15.9. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.1 00:08:45
- 15.10. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.2 00:16:22
- 15.11. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.3 00:05:24
-
16. Niespodzianka - tryb ciemny (nowość!) 00:34:02
- 16.1. Określenie trybu kolorystycznego dla całej witryny albo tylko dla wybranych komponentów 00:03:31
- 16.2. Dostosowanie wyglądu niektórych elementów w trybie ciemnym (plik theme.css) 00:11:39
- 16.3. Umieszczenie w nagłówku kontrolki (przełącznika) do aktywacji trybu ciemnego 00:06:30
- 16.4. Aktywacja trybu ciemnego po kliknięciu w kontrolkę (przełącznik) (plik theme.js) 00:08:18
- 16.5. Zapamiętywanie aktywowanego przez użytkownika trybu ciemnego (plik theme.js) 00:04:04
Opis
kursu video
:
Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych
Obierz kurs na... budowanie nowoczesnych stron internetowych
Mimo intensywnego rozwoju mediów społecznościowych, a co za tym idzie – nowego modelu kontaktu z klientami i „followersami”, zapotrzebowanie na profesjonalne, nowoczesne strony WWW nie maleje. Firmy i osoby prywatne wciąż poszukują twórców witryn w pełni responsywnych i maksymalnie interaktywnych, po których poruszanie się będzie dla użytkownika przyjemne na tyle, by zechciał on pozostać na nich dłużej, a w przyszłości – powrócić. By tworzyć tego typu strony, programiści sięgają po rozmaite narzędzia. Wśród nich ostatnimi laty pozytywnie wyróżnia się Bootstrap, najpopularniejszy, a do tego bezpłatny framework HTML/CSS, dzięki któremu – przy odrobinie chęci i zaangażowania – można stworzyć responsywną stronę internetową na bazie predefiniowanych komponentów dostarczanych przez piątą wersję tej uznanej frontendowej technologii.
Ten kurs video ma za zadanie przybliżyć Bootstrap od strony praktycznej – poprzez tworzenie responsywnej strony internetowej poświęconej tematyce gier wideo. W trakcie pracy uczestnik szkolenia skorzysta z HTML5, CSS3 i JavaScriptu, czyli trzech fundamentalnych języków webowych, a także z ekosystemu najpopularniejszego frameworka HTML/CSS, czyli Bootstrapu. To on zagwarantuje projektowi pełną responsywność, pozwoli bowiem precyzyjnie dostosować wygląd witryny do aktualnej szerokości ekranu urządzenia końcowego. Co więcej, znacząco przyspieszy i ułatwi pracę z językami interpretowanymi po stronie przeglądarki: HTML, CSS i JavaScriptem.
Co Cię czeka podczas naszego profesjonalnego szkolenia
Podczas nauki z naszym kursem video:
- Poznasz framework Bootstrap i opanujesz wiele zagadnień związanych z korzystaniem z tej technologii, takich jak front-end i back-end czy wytyczne dotyczące dostępności stron internetowych (WCAG)
- Będziesz operować w języku CSS – w tym przybliżysz sobie dostępne w nim modele layoutów, fleksowy pojemnik i elementy fleksowe, najważniejsze (z punktu widzenia Bootstrapa rzecz jasna) właściwości języka CSS związane z trybem wyświetlania Flexbox (Flexible Box)
- Przypomnisz sobie język programowania JavaScript – standard ECMAScript i jego różne wersje, najważniejsze elementy standardu ECMAScript 6 (2015), stałe/zmienne, funkcje strzałkowe, interpolację literałów łańcuchowych, wstęp do funkcji wyższego rzędu, metodę .forEach()
- Zrozumiesz, czym jest responsywność, a także jak działa filozofia mobile-first – w tym przyswoisz takie kwestie jak idea i ogólne założenia, charakterystyka, zasady stosowania, system 12-kolumnowej siatki, punkty przegięcia dostępne w Bootstrapie 5 a punkty przegięcia dostępne w poprzedniej wersji tego frameworka
- Zbudujesz od zera kompletną stronę internetową – skorzystasz przy tym z najważniejszych komponentów i funkcjonalności Bootstrapa 5.3.x, takich jak menu hamburgerowe, karuzela, grupy przycisków, karty, akordeon, pływające etykiety pól formularza, walidacja formularza domyślnie dostarczana przez Bootstrap
- Przekonasz się, jak funkcjonuje okno modalne – od idei działania, poprzez strukturę, otwieranie i zamykanie, statyczną odmianę okna modalnego, okno modalne z możliwością przewijania, okno modalne wyśrodkowane w pionie, rozmiary okna modalnego, po dynamiczną podmianę jego zawartości
- Przyjrzysz się nowemu w wersji Bootstrapa, z której będziesz korzystać, trybowi ciemnemu – określisz tryb kolorystyczny, umieścisz kontrolkę (przełącznika) do aktywacji trybu ciemnego, aktywujesz go po kliknięciu w kontrolkę (przełącznik), aktywowany przez użytkownika tryb ciemny zapamiętasz w obiekcie localStorage
Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych jest adresowany do osób w miarę obytych z zagadnieniami związanymi z tworzeniem stron internetowych w HTML, CSS3 i JavaScripcie. Dobrze, by uczestnik szkolenia poruszał się sprawnie w dowolnym darmowym edytorze kodu źródłowego z kolorowaniem składni (najlepiej Visual Studio Code, ewentualnie Notepad++). Posiadanie bazowej wiedzy z zakresu responsywności także jest wskazane.
Szkolenie kończy się na poziomie średnio zaawansowanym/zaawansowanym. Po jego odbyciu będziesz w stanie świadomie i w pełni samodzielnie tworzyć strony internetowe oparte na najbardziej popularnym frameworku HTML/CSS. Chodzi o odpowiedzialne i efektywne korzystanie z ogromu potencjału, jaki kryje w sobie ta technologia w najnowszej odsłonie, tj. w wersji 5.3.x. Dodatkową wartością może być też umiejętność wzbogacenia i uzupełnienia standardowych możliwości Bootstrapa o własne rozwiązania programistyczne, na przykład pod postacią skryptów języka JavaScript zgodnych ze specyfikacją ECMAScript 6 (2015).
Webmasterem być
Wiedza zdobyta podczas kursu nie tylko może się przełożyć na wzmocnienie Twojej pozycji zawodowej w aktualnej pracy, ale również skłonić Cię do poszukania nowego zajęcia, na przykład jako webmaster z prawdziwego zdarzenia lub front-end web developer. Co równie istotne, praktyczna znajomość ekosystemu Bootstrapa pozwala w sposób szybki i bezkompromisowy odnaleźć się w zupełnie innych frameworkach HTML/CSS, jak ZURB Foundation czy Skeleton, działających na podobnych zasadach. Świadomość podziału technologii webowych na front-end i back-end, wiedza o frameworku, jak również umiejętność jednoznacznego umiejscowienia w tym wszystkim Bootstrapa z pewnością przełożą się na Twoje postrzeganie Internetu. Nawet jeśli jesteś zwykłym użytkownikiem, będziesz wiedzieć, jak działa sieć, jak jest zbudowana i na czym się opiera.
Wybrane bestsellery
Videopoint - inne kursy
Dzięki opcji "Druk na żądanie" do sprzedaży wracają tytuły Grupy Helion, które cieszyły sie dużym zainteresowaniem, a których nakład został wyprzedany.
Dla naszych Czytelników wydrukowaliśmy dodatkową pulę egzemplarzy w technice druku cyfrowego.
Co powinieneś wiedzieć o usłudze "Druk na żądanie":
- usługa obejmuje tylko widoczną poniżej listę tytułów, którą na bieżąco aktualizujemy;
- cena książki może być wyższa od początkowej ceny detalicznej, co jest spowodowane kosztami druku cyfrowego (wyższymi niż koszty tradycyjnego druku offsetowego). Obowiązująca cena jest zawsze podawana na stronie WWW książki;
- zawartość książki wraz z dodatkami (płyta CD, DVD) odpowiada jej pierwotnemu wydaniu i jest w pełni komplementarna;
- usługa nie obejmuje książek w kolorze.
Masz pytanie o konkretny tytuł? Napisz do nas: sklep@helion.pl
Książka drukowana
Oceny i opinie klientów: Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych Łukasz Krawczyk (1) Weryfikacja opinii następuję na podstawie historii zamówień na koncie Użytkownika umieszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniające do uzyskania rabatu w ramach Programu Punktowego.
(1)
(0)
(0)
(0)
(0)
(0)