HTML5 i CSS3. Kurs video. Fundamenty frontendu

Promocja

Marcin Pałka

5.9

8 opinii

Podstawowe informacje:

Czas trwania: 10:19:59

Poziom: podstawowy

Autor: Marcin Pałka

Liczba lekcji: 70

Technologia: HTML5, CSS3, Visual Studio Code

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

51,60 zł ~~129,00 zł~~ (-60%)

65,79 zł najniższa cena z 30 dni Dodaj do koszyka

Do przechowalni

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

Czego się nauczysz?

Zaawansowanego wykorzystania HTML5 i CSS3 w tworzeniu stron internetowych
Stosowania nowoczesnych selektorów i pseudo-klas CSS
Budowania responsywnych layoutów z użyciem Flexboxa i Grida
Wdrażania animacji i efektów przejść w CSS
Optymalizacji kodu HTML i CSS pod kątem wydajności i SEO
Organizacji arkuszy stylów w większych projektach webowych
Łączenia HTML i CSS z JavaScriptem w interaktywnych aplikacjach

Spis lekcji

1. Środowisko 00:02:42

1.1. Instalacja VS Code i potrzebnych wtyczek

00:02:42

2. Budowa strony WWW 00:08:18

2.1. Składowe strony: HTML + CSS + JS

00:02:02

2.2. Przeglądarka i narzędzia deweloperskie

00:06:16

3. Wstęp do HTML 00:11:52

3.1. Czym jest HTML i znaczniki

00:02:14

3.2. Szkielet HTML + Hello World

00:06:58

3.3. Nazwa pliku .html i umieszczenie go na serwerze

00:02:40

4. Podstawowe znaczniki HTML 00:51:57

4.1. Wstęp do znaczników, znacznik <p> i <a>

00:08:28

4.2. Dodanie podstrony

00:04:56

4.3. Nagłówki

00:03:15

4.4. Znaczniki formatujące

00:08:17

4.5. Obrazki <img>

00:04:24

4.6. Dodanie filmu z serwisu Youtube, znaczniki <video> i <audio>

00:07:00

4.7. Listy

00:03:57

4.8. Kontener <div>

OGLĄDAJ » 00:07:04

4.9. Prettier

00:04:36

5. Semantyka kodu 00:07:04

5.1. Czym jest semantyka? Jak sprawdzić czy napisny kod jest poprawny?

00:07:04

6. Znaczniki HTML5 00:21:45

6.1. Wstęp i znaczniki <header>, <nav>

00:07:47

6.2. Znaczniki: <main>, <section>, <article>

00:09:36

6.3. Znaczniki: <footer>, <aside>

00:04:22

7. Tabele 00:15:27

7.1. Wstęp i budowa tabeli

00:06:40

7.2. Atrybut rowspan i colspan

00:04:49

7.3. Grupowanie treści tabeli

00:03:58

8. Formularze 00:55:23

8.1. Wstęp

00:04:25

8.2. Pola <input>

00:08:50

8.3. Znacznik <label>

00:06:31

8.4. Atrybuty pól

00:08:36

8.5. Pole <select>

00:03:31

8.6. Pole <textarea>

00:07:11

8.7. Znacznik <fieldset>

00:02:39

8.8. Nowości w HTML5 i podsumowanie

00:13:40

9. HTML - podsumowanie 00:02:57

9.1. Podsumowanie informacji o HTML

00:02:57

10. Wstęp do CSS 00:46:04

10.1. Czym jest CSS i selektory CSS? Umieszczenie stylów w dokumencie HTML

00:07:35

10.2. Kaskadowość oraz !important

00:05:28

10.3. Dziedziczenie oraz specyficzność

00:05:55

10.4. Reset CSS, Normalize CSS

00:06:59

10.5. Selektory cz. 1

00:08:02

10.6. Selektory cz. 2

00:12:05

11. Praca z tekstem 00:26:38

11.1. Cechy tekstu cz. 1 (font-family, font-size, font-weight, font-style)

00:09:11

11.2. Cechy tekstu cz. 2 (color, text-align, text-decoration, line-height)

00:08:34

11.3. Google Fonts

00:08:53

12. Box-model 00:29:07

12.1. Wstęp do modelu pudełkowego, właściwości border i border-radius

OGLĄDAJ » 00:07:24

12.2. Padding i margin

00:08:24

12.3. Box-sizing, container

00:13:19

13. Wyświetlanie i pozycjonowanie 00:40:48

13.1. Display

00:07:17

13.2. Position

00:19:59

13.3. Overflow

00:03:08

13.4. Float

00:10:24

14. Jednostki 00:23:10

14.1. Omówienie jednostek

00:19:26

14.2. Praca z jednostką rem

00:03:44

15. Background 00:20:03

15.1. Właściwości background-color, background-image

00:09:43

15.2. Kolory

00:10:20

16. Pseudoklasy i pseudoelementy 00:27:57

16.1. Pseudoklasy

00:17:54

16.2. Pseudoelementy

00:10:03

17. Flexbox 00:32:59

17.1. Flex contanier

00:20:21

17.2. Flex item, gra Flexbox Froggy

00:12:38

18. Responsive Web Design 00:17:53

18.1. RWD, media queries

00:07:31

18.2. Podejście mobile first

00:07:53

18.3. Podsumowanie części o CSS

00:02:29

19. Projekt 00:21:00

19.1. Wstęp i założenia projektowe

00:06:49

19.2. Szkielet projektu HTML i podstawowe style CSS

00:14:11

20. Page header 00:56:40

20.1. Page header - HTML

00:17:30

20.2. Page header - CSS

00:23:35

20.3. Komponent avatar

00:15:35

21. Kontener main 00:12:55

21.1. Kontener na główną treść

00:12:55

22. Komponent stories 00:14:16

22.1. Komponent stories - HTML/CSS

00:14:16

23. Kontener aside 00:26:49

23.1. Komponenty w konterze aside

00:26:49

24. Komponent post 00:33:22

24.1. Komponent post - HTML

00:16:56

24.2. Komponent post - CSS

00:16:26

25. Page footer 00:12:53

25.1. Page footer - HTML/CSS

00:11:02

25.2. Zakończenie i podsumowanie kursu

00:01:51

Obierz kurs na... fundamenty frontendu

W świecie frontendu mnogość nowoczesnych narzędzi, pluginów i frameworków niejednego przyprawi o zawrót głowy. Zmieniają się standardy języków programowania i można rzec – wszystko płynie. Jednak i w tym świecie bez zawahania da się wymienić dwóch największych graczy – są nimi HTML i CSS. Sięgnijmy do niezbędnej teorii i sprawdźmy, dlaczego. Język znaczników HTML odpowiada za strukturę strony internetowej i określa hierarchię znajdujących się w niej komponentów. Każdy element strony jest zdefiniowany przez kod źródłowy HTML, który następnie zostaje zinterpretowany przez przeglądarkę internetową. Bez właściwej struktury HTML przeglądarka nie odczyta i nie wyrenderuje oczekiwanej zawartości. Stąd wniosek: bez znaczników HTML nie da się stworzyć strony internetowej. No dobrze, a do czego potrzebny jest CSS? Kaskadowych arkuszy stylów CSS używa się do określenia wyglądu dokumentów HTML. Prócz nadawania stylu umożliwiają separację struktury HTML od jej wizualnej prezentacji, co zwiększa przejrzystość kodu. Dzięki znajomości CSS można dostosować rozmiar dokumentu do każdej szerokości ekranu i tworzyć w pełni responsywne, skalowalne projekty. HTML i CSS tworzą duet o ogromnym potencjale i stanowią fundamenty frontendu.

W trakcie naszego profesjonalnego szkolenia:

Poznasz możliwości narzędzi developerskich dostępnych w nowoczesnych przeglądarkach
internetowych
Nauczysz się składni HTML5 i CSS3 na przykładach
Poznasz znaczniki HTML5
Nauczysz się pisać poprawny semantycznie i reużywalny kod
Dowiesz się, jak stworzyć responsywną stronę internetową, zgodną z aktualnymi standardami
Poznasz dobre praktyki pracy z kodem HTML i stylami CSS
Zrozumiesz, jak działa kaskadowość, dziedziczenie i specyficzność w CSS
Nauczysz się pracować z modelem flexbox
Poznasz pseudoklasy i pseudoelementy CSS
Dowiesz się, jak zastosować zdobytą wiedzę do tworzenia profesjonalnych stron internetowych
Opanujesz zasady kompozycji stron WWW, używając CSS box model
Nauczysz się budować komponenty i z nimi pracować
Dowiesz się, czym jest podejście mobile first w projektowaniu i jak je zastosować
Od podstaw stworzysz projekt strony social media

HTML5 i CSS3. Kurs video. Fundamenty frontendu został stworzony z myślą o wszystkich chcących poznać technologie webowe od podstaw. Kurs jest podzielony tematycznie na trzy części: pierwsza obejmuje teorię i przykłady z HTML5, druga analogicznie dotyczy CSS3, a trzecia to projekt końcowy strony internetowej. Na początek zaznajomisz się z budową strony WWW i jej składowymi. Poznasz znaczniki HTML i nowe znaczniki HTML5 jak: header, main, section, footer. Nauczysz się tworzyć tabele i rozbudowane formularze. Gdy kod HTML5 nie będzie mieć już przed Tobą tajemnic, dowiesz się, jak dodać do niego trochę kolorytu. Nauczysz się umieszczać style CSS w dokumencie, a także je resetować i standaryzować dla wszystkich wersji przeglądarek. Poznasz selektory, jednostki, pseudoklasy i pseudoelementy. Dowiesz się, jak pracować z tekstem i jak używać fontów Google Fonts. Zrozumiesz zasadę działania modelu pudełkowego w CSS i poznasz jego najważniejsze elementy (padding, margin, border, container). Znajomość box-model umożliwi Ci pełną kontrolę nad położeniem elementów na stronie. Następnie przećwiczysz właściwości potrzebne do pozycjonowania i wyświetlania elementów (display, position, float, z-index). Aby jeszcze sprawniej tworzyć elastyczne i responsywne strony internetowe, poznasz model flexbox. Za jego pomocą precyzyjnie określisz rozmieszczenie komponentów w pionie i poziomie. W trakcie rozważań o responsywności dowiesz się także, jak projektować strony WWW w podejściu mobile-first, czyli z myślą o urządzeniach mobilnych. Na zakończenie wszystkie nabyte w trakcie kursu umiejętności wykorzystasz w praktyce, tworząc projekt strony zainspirowanej Instagramem. Poznasz podejście stosowane przy prawdziwych projektach informatycznych i nauczysz się budować strony komponent po komponencie.

Wybrane bestsellery

O autorze kursu video

Marcin Pałka – w branży IT pracuje od ponad 10 lat. Frontendem zafascynowany od zawsze, natomiast swoją profesjonalną przygodę zaczynał jako webdesigner i projektował strony internetowe, po godzinach próbując swoich sił z kodowaniem. Z czasem w pełni skoncentrował się na karierze frontend developera, a grafikę pozostawił w sferze hobby. Swoje umiejętności codziennie doskonali w gronie bardzo doświadczonych programistów w dużych firmach IT. Od niemal 4 lat sprawdza się w roli trenera i nauczyciela programowania. Zaczynał od szkoleń w swoim ówczesnym miejscu pracy, a później pojawiły się perspektywy prowadzenia innych szkoleń po godzinach. Obecnie ma na swoim koncie przepracowanych kilkaset godzin jako trener i czerpie ogromną radość z możliwości dzielenia się wiedzą. Prywatnie wielki fan piłki nożnej, sportów siłowych, gier wideo i miłośnik psów.