Helion


Szczegóły kursu video

HTML5 i CSS3. Kurs video. Fundamenty frontendu

HTML5 i CSS3. Kurs video. Fundamenty frontendu


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:

,
,
,
. 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.

  • 1. Środowisko
    • 1.1. Instalacja VS Code i potrzebnych wtyczek00:02:42
  • 2. Budowa strony WWW
    • 2.1. Składowe strony: HTML + CSS + JS00:02:02
    • 2.2. Przeglądarka i narzędzia deweloperskie00:06:16
  • 3. Wstęp do HTML
    • 3.1. Czym jest HTML i znaczniki00:02:14
    • 3.2. Szkielet HTML + Hello World00:06:58
    • 3.3. Nazwa pliku .html i umieszczenie go na serwerze00:02:40
  • 4. Podstawowe znaczniki HTML
    • 4.1. Wstęp do znaczników, znacznik <p> i <a>00:08:28
    • 4.2. Dodanie podstrony00:04:56
    • 4.3. Nagłówki00:03:15
    • 4.4. Znaczniki formatujące00: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. Listy00:03:57
    • 4.8. Kontener <div>00:07:04
    • 4.9. Prettier00:04:36
  • 5. Semantyka kodu
    • 5.1. Czym jest semantyka? Jak sprawdzić czy napisny kod jest poprawny?00:07:04
  • 6. Znaczniki HTML5
    • 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
    • 7.1. Wstęp i budowa tabeli00:06:40
    • 7.2. Atrybut rowspan i colspan00:04:49
    • 7.3. Grupowanie treści tabeli00:03:58
  • 8. Formularze
    • 8.1. Wstęp00:04:25
    • 8.2. Pola <input>00:08:50
    • 8.3. Znacznik <label>00:06:31
    • 8.4. Atrybuty pól00: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 podsumowanie00:13:40
  • 9. HTML - podsumowanie
    • 9.1. Podsumowanie informacji o HTML00:02:57
  • 10. Wstęp do CSS
    • 10.1. Czym jest CSS i selektory CSS? Umieszczenie stylów w dokumencie HTML00:07:35
    • 10.2. Kaskadowość oraz !important00:05:28
    • 10.3. Dziedziczenie oraz specyficzność00:05:55
    • 10.4. Reset CSS, Normalize CSS00:06:59
    • 10.5. Selektory cz. 100:08:02
    • 10.6. Selektory cz. 200:12:05
  • 11. Praca z tekstem
    • 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 Fonts00:08:53
  • 12. Box-model
    • 12.1. Wstęp do modelu pudełkowego, właściwości border i border-radius00:07:24
    • 12.2. Padding i margin00:08:24
    • 12.3. Box-sizing, container00:13:19
  • 13. Wyświetlanie i pozycjonowanie
    • 13.1. Display00:07:17
    • 13.2. Position00:19:59
    • 13.3. Overflow00:03:08
    • 13.4. Float00:10:24
  • 14. Jednostki
    • 14.1. Omówienie jednostek00:19:26
    • 14.2. Praca z jednostką rem00:03:44
  • 15. Background
    • 15.1. Właściwości background-color, background-image00:09:43
    • 15.2. Kolory00:10:20
  • 16. Pseudoklasy i pseudoelementy
    • 16.1. Pseudoklasy00:17:54
    • 16.2. Pseudoelementy00:10:03
  • 17. Flexbox
    • 17.1. Flex contanier00:20:21
    • 17.2. Flex item, gra Flexbox Froggy00:12:38
  • 18. Responsive Web Design
    • 18.1. RWD, media queries00:07:31
    • 18.2. Podejście mobile first00:07:53
    • 18.3. Podsumowanie części o CSS00:02:29
  • 19. Projekt
    • 19.1. Wstęp i założenia projektowe00:06:49
    • 19.2. Szkielet projektu HTML i podstawowe style CSS00:14:11
  • 20. Page header
    • 20.1. Page header - HTML00:17:30
    • 20.2. Page header - CSS00:23:35
    • 20.3. Komponent avatar00:15:35
  • 21. Kontener main
    • 21.1. Kontener na główną treść00:12:55
  • 22. Komponent stories
    • 22.1. Komponent stories - HTML/CSS00:14:16
  • 23. Kontener aside
    • 23.1. Komponenty w konterze aside00:26:49
  • 24. Komponent post
    • 24.1. Komponent post - HTML00:16:56
    • 24.2. Komponent post - CSS00:16:26
  • 25. Page footer
    • 25.1. Page footer - HTML/CSS00:11:02
    • 25.2. Zakończenie i podsumowanie kursu00:01:51