- Autor:
- Długość
- liczba lekcji: 88, czas trwania: 8:29:03
- Ocena
Kurs video
Bootstrap. Kurs video. Tworzenie interaktywnych i responsywnych stron internetowych
- Wydawnictwo:
- Videopoint
- Wersja:
- Online
- Czas trwania:
- 8:29:03
- Technologia:
- Popper.js, Bootstrap 5.3, Bootstrap Icons
- Ocena:
Spis lekcji kursu video
-
1. Bootstrap w kontekście innych technologii 23:21
-
2. Język CSS - tryb wyświetlania Flexbox (Flexible Box) 15:35
- 2.1. Modele layoutów dostępne w języku CSS 3:45
- 2.2. Fleksowy pojemnik (ang. flex container) oraz elementy fleksowe (ang. flex items) 1:36
- 2.3. Fleksowy pojemnik - właściwość flex-direction 2:00
- 2.4. Fleksowy pojemnik - właściwość justify-content 1:46
- 2.5. Fleksowy pojemnik - właściwość align-items 1:54
- 2.6. Elementy fleksowe - właściwość order 1:53
- 2.7. Przydatne zasoby w Internecie 2:41
-
3. Język programowania JavaScript - najważniejsze elementy standardu ECMAScript 6 (2015) 17:16
- 3.1. Standard ECMAScript i jego różne wersje 3:28
- 3.2. Stałe, a właściwie... zmienne (słowa kluczowe const oraz let) 2:23
- 3.3. Funkcje strzałkowe (ang. 'fat arrow' functions) 4:01
- 3.4. Interpolacja literałów łańcuchowych (ang. template literals) 2:06
- 3.5. Wstęp do funkcji wyższego rzędu (ang. higher-order functions) (ECMAScript 3-6) 1:48
- 3.6. Metoda .forEach() przetwarzająca każdy element kolekcji z osobna (ECMAScript 3) 3:30
-
4. Rozpoczęcie przygody z Bootstrapem 45:24
- 4.1. Visual Studio Code - darmowy edytor kodu źródłowego z kolorowaniem składni 5:47
- 4.2. Nowoczesne formaty plików graficznych - WebP (od Google) oraz SVG (od W3C) 3:16
- 4.3. Stworzenie dokumentu HTML5 5:23
- 4.4. Dodanie znaczników meta 7:10
- 4.5. Dodanie ikony witryny (ang. favicon) 6:34
- 4.6. Podpięcie Bootstrapa - plik CSS, plik JavaScript, biblioteka Popper oraz Bootstrap Icons 8 8:22
- 4.7. Oficjalna dokumentacja Bootstrapa w wersji 5.3.x 8 8:52
-
5. Nagłówek 43:49
- 5.1. Struktura nagłówka, a właściwie... belki nawigacyjnej (ang. navbar) 12:22
- 5.2. Miejsce na logo (ang. brand) 10:32
- 5.3. Umieszczenie poszczególnych elementów w jednym wspólnym menu 13:25
- 5.4. Przełącznik nawigacji mobilnej - menu hamburgerowe (ang. hamburger menu) 4:57
- 5.5. Przyklejenie nagłówka 2:33
-
6. Sekcja hero, czyli... slider (karuzela) 46:31
- 6.1. Struktura slidera pod postacią karuzeli (ang. carousel) 3:41
- 6.2. Pojedynczy slajd - obrazek w tle pojemnika zamiast zwykłego obrazka (plik hero.css) 11:16
- 6.3. Pojedynczy slajd - podpis (ang. caption) 11:22
- 6.4. Wskaźniki nawigacyjne (ang. indicators) identyfikujące poszczególne slajdy 8:07
- 6.5. Nawigacja pomiędzy kolejnymi slajdami - slajd poprzedni, slajd następny 8:11
- 6.6. Zmiana sposobu przechodzenia slajdów oraz autouruchamianie slidera (karuzeli) 3:54
-
7. Sekcja 'Cytat' 12:51
-
8. Sekcja 'Platformy sprzętowe' 32:30
- 8.1. Struktura oraz rozstrzelony i wyśrodkowany nagłówek (plik varia.css) 9:13
- 8.2. Kolumny oraz pliki SVG w pojemnikach z białym tłem, obrysem i zaokrąglonymi rogami 8:52
- 8.3. Grupa przycisków (ang. button group) 6:44
- 8.4. Przycisk 'Czytaj więcej' oraz rozwijanie i zwijanie zawartości (ang. collapse) 7:41
-
9. Sekcja 'Nowości' 35:31
-
10. Sekcja 'Bestsellery' 31:54
- 10.1. Struktura pojedynczej karty (ang. card) - ciało, stopka 9:04
- 10.2. Obrazek wyróżniający w karcie i wymuszenie na nim proporcji 16:9 5:54
- 10.3. Równa wysokość kart... a właściwie ich ciała 1:34
- 10.4. Automatyczne przycinanie zbyt długiego tekstu do jednej linijki 4:25
- 10.5. Podpowiedź (ang. tooltip) dla potencjalnie przyciętego tekstu (plik bs-tooltip.js) 10:57
-
11. Sekcja 'Najczęściej zadawane pytania (FAQ)' 24:29
-
12. Sekcja 'Zwiastun' 10:49
-
13. Sekcja 'Formularz kontaktowy' 44:01
- 13.1. Struktura formularza kontaktowego 7:46
- 13.2. Pływające etykiety pól formularza (ang. floating labels) 5:03
- 13.3. Dostosowanie wysokości obszaru tekstowego (plik varia.css) 4:14
- 13.4. Wybór preferowanej formy kontaktu (przyciski opcji) 7:27
- 13.5. Załączanie pliku (wielu plików) do wysyłanej przez użytkownika wiadomości 3:37
- 13.6. Akceptacja polityki prywatności (przycisk wyboru) 4:33
- 13.7. Aktywacja walidacji formularza domyślnie dostarczanej przez Bootstrap (plik bs-form.js) 11:21
-
14. Stopka 28:03
- 14.1. Struktura stopki 3:09
- 14.2. Odnośnik do polityki prywatności docelowo wyświetlanej w oknie modalnym 2:30
- 14.3. Informacja o roku powstania, źródle informacji oraz prawach autorskich 5:08
- 14.4. Linki zewnętrzne odsyłające do mediów społecznościowych 9:03
- 14.5. Zastrzeżenie (ang. disclaimer) dotyczące wykorzystanych na stronie zasobów 3:22
- 14.6. Suplement - przyklejony do dołu ekranu przycisk umożliwiający powrót na samą górę 4:51
-
15. Okno modalne 1:02:57
- 15.1. Idea działania okna modalnego 2:25
- 15.2. Struktura i zawartość okna modalnego (ang. modal) - nagłówek, ciało, stopka 10:22
- 15.3. Otwieranie okna modalnego 4:34
- 15.4. Zamykanie okna modalnego 2:37
- 15.5. Okno modalne z prawdziwego zdarzenia, czyli jego statyczna odmiana (ang. static backdrop) 4:25
- 15.6. Okno modalne z możliwością przewijania 2:57
- 15.7. Okno modalne wyśrodkowanie w pionie 1:50
- 15.8. Domyślny rozmiar okna modalnego i jego rozmiary opcjonalne 3:16
- 15.9. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.1 8:45
- 15.10. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.2 16:22
- 15.11. Suplement - dynamiczna podmiana zawartości okna modalnego (plik bs-modal.js) - cz.3 5:24
-
16. Niespodzianka - tryb ciemny (nowość!) 34:02
- 16.1. Określenie trybu kolorystycznego dla całej witryny albo tylko dla wybranych komponentów 3:31
- 16.2. Dostosowanie wyglądu niektórych elementów w trybie ciemnym (plik theme.css) 11:39
- 16.3. Umieszczenie w nagłówku kontrolki (przełącznika) do aktywacji trybu ciemnego 6:30
- 16.4. Aktywacja trybu ciemnego po kliknięciu w kontrolkę (przełącznik) (plik theme.js) 8:18
- 16.5. Zapamiętywanie aktywowanego przez użytkownika trybu ciemnego (plik theme.js) 4: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
Łukasz Krawczyk - pozostałe produkty
Videopoint - inne książki
Dzieki 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[at]helion.pl.
Książka, którą chcesz zamówić pochodzi z końcówki nakładu. Oznacza to, że mogą się pojawić drobne defekty (otarcia, rysy, zagięcia).
Co powinieneś wiedzieć o usłudze "Końcówka nakładu":
- usługa obejmuje tylko książki oznaczone tagiem "Końcówka nakładu";
- wady o których mowa powyżej nie podlegają reklamacji;
Masz pytanie o konkretny tytuł? Napisz do nas: sklep[at]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)