ODBIERZ TWÓJ BONUS :: »

Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych

Video Player is loading.
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
 
1x
  • subtitles off, selected
Podstawowe informacje:
Czas trwania: 08:29:03
Poziom: podstawowy
Autor: Łukasz Krawczyk
Liczba lekcji: 88
Technologia: Popper.js, Bootstrap 5.3, Bootstrap Icons
Dla firm
Rozwiń umiejętności swoich pracowników dzięki kursom video
Dowiedz się więcej
  • Monitorowanie postępów pracowników. Przejrzyste raporty i imienne certyfikaty ukończenia kursów
  • Atrakcyjne rabaty dla zespołów. Im więcej pracowników liczy zespół, tym większy uzyskasz rabat
  • Doradztwo w wyborze tematyki szkoleń. Mamy setki kursów, dostosujemy program nauczania pod Twój zespół
Indywidualnie
67,60 zł 169,00 zł (-60%)
86,19 zł najniższa cena z 30 dni Dodaj do koszyka Za zakup otrzymasz 67 punktów
Korzyści:
  • Certyfikat ukończenia
  • Materiały dodatkowe do kursu
  • Test online
  • Dożywotni dostęp
  • Dostęp w aplikacji (także offline)
  • Napisy w języku polskim
Ścieżki rozwoju w helion.pl

Czego się nauczysz?

  • Tworzenia nowoczesnych stron WWW z użyciem frameworka Bootstrap 5
  • Projektowania układów w systemie siatki (grid) i stosowania Flexboxa
  • Stosowania filozofii mobile-first i technik responsywnego designu
  • Obsługi komponentów Bootstrap: navbar, karuzele, karty, akordeony, formularze
  • Wdrażania walidacji formularzy i korzystania z pływających etykiet
  • Tworzenia i obsługi okien modalnych oraz dynamicznych treści
  • Implementowania trybu ciemnego i zarządzania stanem w localStorage
  • Łączenia Bootstrap z CSS i JavaScript w projektach webowych

Spis lekcji

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)
OGLĄDAJ » 00:03:54
7. Sekcja 'Cytat' 00:12:51
7.1. Cytat blokowy (ang. blockquote)
00:06:38
7.2. Stopka cytatu blokowego, czyli cytat blokowy z podaniem źródła
00:03:51
7.3. Przekreślenie fragmentu tekstu oraz zaznaczenie (podświetlenie) fragmentu tekstu
00:02:22
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
9.1. Struktura dwóch sekcji naprzemiennych
00:15:23
9.2. Wiadomość alarmująca (ang. alert) i nadanie jej koloru
00:04:33
9.3. Obrazek wyróżniający na całą dostępną szerokość kolumny i z zaokrąglonymi rogami
00:05:40
9.4. Zmiana kolejności kolumn bez zmiany struktury sekcji
00:09:55
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
11.1. Akordeon (ang. accordion) z rozwijającymi się elementami
00:18:52
11.2. Akordeon (ang. accordion) z rozwiniętym tylko jednym elementem
00:03:36
11.3. Zmiana domyślnego koloru tła przycisku rozwijającego dany element
00:02:01
12. Sekcja 'Zwiastun' 00:10:49
12.1. Żółte tło sekcji z przezroczystością
00:03:59
12.2. Umieszczenie filmu YouTube
00:03:37
12.3. Wymuszenie na umieszczonym filmie YouTube proporcji 16:9
00:03:13
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)
OGLĄDAJ » 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

Obierz kurs na... budowanie nowoczesnych stron internetowych z Bootstrap

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 kursu z tworzenia interaktywnych stron internetowych w Bootstrap?

Podczas nauki z naszym szkoleniem 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 video z tworzenia interaktywnych i responsywnych stron w Boostrap 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.

Zobacz także kursy video Node.js dostępne w naszej ofercie.

Wybrane bestsellery

O autorze kursu video

Łukasz Krawczyk - web developer i grafik komputerowy w jednej osobie. Absolwent Katolickiego Uniwersytetu Lubelskiego Jana Pawła II w Lublinie. Ukończył studia magisterskie między innymi z zakresu fizyki (ze specjalizacją nauczycielską) i studia podyplomowe w Instytucie Matematyki, Informatyki i Architektury Krajobrazu. Specjalizuje się w języku programowania JavaScript, JS-owej bibliotece jQuery, frontendowym frameworku Bootstrap i systemie zarządzania treścią (CMS) WordPress. Równocześnie rozwija swoje talenty dydaktyczne, nauczając i prowadząc profesjonalne zajęcia w infoShare Academy — ogólnopolskiej akademii programowania z Gdańska, która do końca sierpnia 2019 roku miała oddział również w Lublinie W wolnym czasie chętnie czyta książki, szlifuje język angielski, gra w gry wideo oraz trenuje na siłowni. Jego oficjalna strona internetowa dostępna jest pod adresem https://lukaszkrawczyk.dev/

Oceny i opinie klientów: Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych Łukasz Krawczyk (1)

Informacja o opiniach
Weryfikacja opinii następuje na podstawie historii zamowień na koncie Użytkownika umiejszczającego opinię. Użytkownik mógł otrzymać punkty za opublikowanie opinii uprawniającej do uzyskania rabatu w ramach Programu Kadr.
6.0
  • 6 (1)
  • 5 (0)
  • 4 (0)
  • 3 (0)
  • 2 (0)
  • 1 (0)
  • Dziekuje, to byla naprawde dobra lekcja. Zestaw lekcji. Nie tylko merytorycznie, do celu, z wytlumaczeniem po kolei niektorych zawilosci, zasad i filozofii bootstrapowych narzedzi, ale i dobry glos, dobra dykcja, ogolnie bardzo dobry poziom. Dziekuje i czekam na wiecej. Poczatkujaca, ale kumata, nowa fanka.

    Rozwiń »
    Opinia: anonimowa Opinia dodana: 2024-03-21 Ocena: 6   
    Opinia potwierdzona zakupem
    Opinia dotyczy produktu: kurs video
    Czy opinia była pomocna:

Szczegóły kursu

Dane producenta » Dane producenta:

Helion SA
ul. Kościuszki 1C
41-100 Gliwice
e-mail: [wyświetl email]@helion.pl
Format: Online
Data aktualizacji: 2023-07-04
ISBN: 978-83-289-0040-0, 9788328900400
Numer z katalogu: 196043

Videopoint - inne kursy

Kurs video
67,60 zł
Dodaj do koszyka