ODBIERZ TWÓJ BONUS :: »

Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych

Podstawowe informacje:
Czas trwania: 08:29:03
Poziom: podstawowy
Autor: Łukasz Krawczyk
Liczba lekcji: 88
Technologia: Popper.js, Bootstrap Icons, Bootstrap 5.3
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
118,30 zł 169,00 zł (-30%)
39,90 zł najniższa cena z 30 dni Dodaj do koszyka
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 ebookpoint.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: gpsr@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
118,30 zł
Dodaj do koszyka
Płatności obsługuje:
Ikona płatności Alior Bank Ikona płatności Apple Pay Ikona płatności Bank PEKAO S.A. Ikona płatności Bank Pocztowy Ikona płatności Banki Spółdzielcze Ikona płatności BLIK Ikona płatności Crédit Agricole e-przelew Ikona płatności dawny BNP Paribas Bank Ikona płatności Google Pay Ikona płatności ING Bank Śląski Ikona płatności Inteligo Ikona płatności iPKO Ikona płatności mBank Ikona płatności Millennium Ikona płatności Nest Bank Ikona płatności Paypal Ikona płatności PayPo | PayU Płacę później Ikona płatności PayU Płacę później Ikona płatności Plus Bank Ikona płatności Płacę z Citi Handlowy Ikona płatności Płacę z Getin Bank Ikona płatności Płać z BOŚ Ikona płatności Płatność online kartą płatniczą Ikona płatności Santander Ikona płatności Visa Mobile