Ta strona korzysta z plików cookie, abyśmy mogli zapewnić jak najlepszą obsługę. Informacje o plikach cookie są przechowywane w przeglądarce i wykonują takie funkcje, jak rozpoznawanie cię po powrocie do naszej witryny i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.
W tym kursie nauczysz się od podstaw tworzyć nowoczesne i responsywne strony WWW w najpopularniejszym front-endowym frameworku czyli Bootstrap.
Kurs przeprowadzi Ciebie krok po kroku od absolutnych podstaw do tematów zaawansowanych włączając w to:
– kontenery
– praca z kolumnami w wierszach, dzielenie treści strony i tworzenie layoutu witryny
– system GRID Bootstrapa z użyciem responsywnych punktów granicznych dzięki czemu strony www dostosowują się do szerokiej gamy urządzeń od telefonów, przez tablety do laptopów i komputerów stacjonarnych
– typografia, stylowanie tekstu, gutters, tabele w Bootstrapie, użycie flexbox etc
– alert – komponent informacji dla użytkownika
– badges – komponent odznak np ilość nieprzeczytanych maili obok przycisku odbioru poczty
– breadcrumb – komponent ścieżki nawigacji użytkownika na stronie
– buttons – przyciski w bootstrapie
– button group – zaawansowana grupa przycisków tworząca jedną całość
– card – komponent kart np do sklepu, gdzie prezentują produkt
– karuzela slajdów – zaawansowany komponent prezentujący obrazki wraz z przypisami
– collapse – komponent do ukrywanie treści
– menu dropdown – komponent łączony np z navbar
– okna modalne – zaawansowany komponent szczególnie użyteczny w aplikacjach na bazie bootstrapa np do otrzymania informacji od użytkownika odnośnie decyzji np potwierdzenie skasowania rekordu w bazie danych itd
– list group – komponent stylowanych list w bootstrapie
– navs – komponent nawigacji
– navbar – zaawansowany komponent z menu, również z dropdown menu oraz hamburgerem dla urządzeń mobilnych co zapewnia pełną responsywność i prostotę nawigacji
– paginacja – komponent prezentujący ilość elementów np w bazie jak ilość podstron etc
– popover – komponent informacji prezentowanych obok przycisków itd
– progress – pasek postępu
– scrollspy – nawigacja aktualizująca na żywo pozycję na stronę wraz z aktywnym elementem w menu
– spinner – komponent animacji ładowania
– toast – komponent notyfikacji, które mogą być układane w stos
– tooltips – komponent podpowiedzi
– tworzenie gotowych aplikacji i stron w Bootstrap
Uwaga kurs wymaga znajomości: Html, CSS oraz podstaw JavaScript. Jeżeli dopiero zaczynasz przygodę z nauką tworzenia stron WWW zapraszam do moich innych kursów, które uczą tej tematyki od absolutnych podstaw.
Bootstrap 5 - Wprowadzenie
Grid - siatka Bootstrapa oraz Projekt nr 1 - Blog
Kolumny w Bootstrap
-
6Grid - system siatkowy do tworzenia layoutów w Bootstrap
-
7Grid - prosty blog w bootstrap
-
8Prosty blog - header
-
9Prosty blog - top menu
-
10Prosty blog - artykuły
-
11Prosty blog - sidebar i footer
-
12Grid jako responsywna siatka Bootstrapa
-
13Grid jako responsywna siatka Bootstrapa - ćwiczenie
-
14Miksowanie kolumn Bootstrapa dla zapewnienie pełnej responsywności
-
15Miksowanie kolumn - ćwiczenie
-
16Prosty blog - miksowanie kolumn
Gutters marginesy i dopełnienia
Projekt 2 - Kalkulator
Komponenty w Bootstrap
Projekt 3 - Generator hasła
-
35Alert - informacje dla użytkownika
-
36Alert utworzony w JavaScript
-
37Badges - odznaki
-
38Breadcrumb - ścieżka nawigacji
-
39Buttons - przyciski
-
40Button group - grupa przycisków
-
41Button group - menu rozwijane
-
42Card - karty
-
43Card - responsywny layout zkartami
-
44Card - obrazek jako wypełnienie i horyzontalna karta
-
45Karuzela slajdów
-
46Karuzela slajdów - dodatkowe opcje
-
47Collapse - ukrywanie i pokazywanie elementów
-
48Dropdown to menu z różnymi opcjami wyboru
-
49Okno modalne
-
50List group
-
51Navs - nawigacja w bootstrapie
-
52Navbar - zaawansowana nawigacja w bootstrapie
-
53Navbar - brand jako nazwa lub logo firmy
-
54Navbar z formularzem
-
55Paginacja
-
56Popover - prosty komunikat
-
57Progress - pasek postępu
-
58ScrollSpy
-
59ScrollSpy z nawigacją w lewej kolumnie
-
60Spinner - informacja o ładowaniu treści
-
61Toast - proste notyfikacje
-
62Tooltips - podpowiedzi
Tabele w Bootstrap
Flexbox z bootstrap
-
71Formularze w Bootstrap - prosty formularz logowania
-
72Fieldset
-
73Color picker - wybór koloru
-
74Select
-
75Checkbox
-
76Pole radio
-
77Pole wyboru pliku oraz rozmiary kontrolek
-
78Pole range - zakres wyboru
-
79Floating labels - pływające opisy kontrolek
-
80Input group - grupy kontrolek
-
81Input group z dropdown i select
-
82Layout formularzy z wykorzystaniem grid i gutters
-
83Formularz rejestracji z responsywnym grid
-
84Formularz horyzontalny
-
85Wielkość kontrolek i labeli
-
86Validacja formularzy z js
-
87Validacja formularzy po stronie serwera