Kurs HTML i CSS w praktyce

Kurs HTML i CSS w praktyce

Warsztat z certyfikatem Akademii IT Media

Jako jedyny w Polsce Elitarny Edukacyjny Partner Adobe  mamy zaszczyt zaprosić Cię na Kurs HTML i CSS z certyfikatem Akademii IT Media! Kurs prowadzony jest w formie zajęć stacjonarnych w Warszawie lub zdalnej pracy z domu w dowolnej lokalizacji. Ma charakter praktycznych ćwiczeń warsztatowych z trenerem. Kurs HTML i CSS to pakiet dwóch szkoleń:

I Etap: Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www – 4-8 listopada 2024
II Etap: Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja – 18-22 listopada 2024

Kurs HTML i CSS – profesjonalne tworzenie stron internetowych umożliwia uczestnikom korzystać z nowych możliwości jakie oferuje język HTML5 i CSS3. Do pracy nie używają jednak notatnika, ale produktów firmy Adobe: Photoshop / Illustrator (przygotowanie projektu strony i jej elementów graficznych) oraz Dreamweaver (najlepszy na rynku edytor HTML i CSS), a także licznych dodatków np. zewnętrznych bibliotek JavaScript.

Czego się nauczysz?

Jak wygląda kurs?

Program szczegółowy

Kurs HTML i CSS w praktyce składa się z dwóch szkoleń:

Szkolenie HTML i CSS w praktyce – moduł I: tworzenie stron WWW

I dzień – Rozpoczęcie szkolenia – 8:30

Domena internetowa

• Rodzaje domen
• Gdzie można kupić domenę i na co zwrócić uwagę
• Najważniejsze zagadania jakie obowiązkowo trzeba znać zanim zarejestrujesz nazwę domeny

Hosting www

• Przegląd usług oferowanych w internecie
• Co to jest ftp, Certyfikat SSL, kopia bezpieczeństwa itp.

Wprowadzenie do stron www

• Możliwości i ograniczenia internetu
• Wstępne omówienie wybranych struktur stosowanych w projektach www
• WCAG jest bardzo ważne
• Pamiętaj o SEO serwisu – wprowadzenie
• Znajomość HTML – fundament stron www

Co powinniśmy wiedzieć? Na początek o nowoczesnym projektowaniu stron www

• Mobile first – co to jest?
• Responsive Web Design
• Kim jest potencjalny użytkownik strony www
• Określenie celów jakie ma spełniać serwis www
• Wstęp do UX stron www
• Statystyki nie kłamią – przegląd danych o użytkownikach
• Narzędzia deweloperskie w przeglądarkach internetowych

Przerwa obiadowa – 13:30 – 14.00

Wybór edytora kodu

• Przegląd wybranych narzędzi wykorzystywanych w procesie tworzenia serwisów internetowych
• Konfiguracja środowiska programu Visual Studio Code
• Dodatkowe rozszerzenia ułatwiające pisanie kodu

Zasady projektowania i tworzenia serwisów internetowych

• Rozpoznanie potrzeb Klienta
• Wybór odpowiedniej technologii
• Przygotowanie struktury serwisu
• Omówienie układu i struktury strony internetowej

Zakończenie szkolenia – 16:30

II dzień – Rozpoczęcie szkolenia – 8:30

Standardy budowy stron WWW

• dokument HTML
• Standard HTML5
• CSS
• JavaScript i popularne biblioteki
• Inne technologie

Podstawowe elementy strony WWW

• Tekst
• Grafika
• Style CSS
• Kolor
• Popularne biblioteki JavaScript
• PDF
• Multimedia

Przerwa obiadowa – 13:30 – 14.00

Przygotowanie i budowa optymalnej struktury serwisu WWW

Zasady tworzenie układu strony WWW

• Zasady tworzenie stron w oparciu o znacznik i style CSS
• Zasady użycia semantycznych znaczników HTML5
• Zalety budowy strony w oparciu o znaczniki HTML5 i style kaskadowe

Przegląd layoutów stron WWW

• Przegląd i porównanie wybranych układów stron internetowych
• Zasady budowy layoutu

Zakończenie szkolenia – 16:30

III dzień – Rozpoczęcie szkolenia – 8:30

Arkusze stylów

• Łączenie arkusza ze stroną HTML
• Jak używać stylów CSS?
• Wprowadzenie i przegląd podstawowych właściwości CSS

Tworzenie strony WWW

• Podstawowe informacje o znacznikach HTML5
• Tworzenie strony internetowej w oparciu o znaczniki semantyczne HTML5
• Analiza struktury strony (headrer, footer, section, content, nav i inne elementy)
• Wprowadzenie do: Flexbox i Grid

Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www

• Formatowanie elementów tekstowych
• Rozmiary i stosowane jednostki w CSS
• Nagłówki
• Hiperłącza
• Wykorzystanie list numerowanych i nienumerowanych
• Zdjęcia
• Przygotowanie i stylizowanie pól formularzy (rodzaje stosowanych pól)
• Grafika na stronie www

Zasady użycia stylów CSS

• Zasady tworzenie stylów CSS
• Rodzaje selektorów
• Style typu class, tag, id, selektory złożone, pseudoelementy
• Dziedziczenie właściwości

Hierarchia stylów

• Podstawowe właściwości stylów
• Kształty CSS

Przerwa obiadowa – 13:30 – 14.00

Wprowadzanie treści strony

• Wprowadzanie tekstów
• Wykorzystanie grafiki
• Logiczna struktura strony WWW
• Wykorzystanie listy, akapitów i znaczników nagłówkowych
• Dodawanie elementów nawigacyjnych
• Formatowanie strony i edycja układu strony w oparciu o style CSS

Wykorzystanie różnorodnych selektorów CSS

• Użycie zaawansowanych właściwości CSS do formatowania elementów strony i jej układu
• Tworzenie atrakcyjnej nawigacji
• Wykorzystanie listy do tworzenia nawigacji
• Wykorzystanie stylów CSS do edycji wyglądu menu

Dodawanie łączy

• Efekty specjalne nawigacji (wykorzystanie pseudoklas :hover, :active, :selected)

Zakończenie szkolenia – 16:30

IV dzień – Rozpoczęcie szkolenia – 8:30

Wprowadzenie do optymalizacji strony pod kątem wyszukiwarek internetowych

• Logiczna struktura strony
• Znaczniki w sekcji head
• Zasady tworzenia tytułu i użycia nagłówków
• Teksty alternatywne, nazwy łączy, itp
• Logika strony i stosowanie znaczników HTML

Praca z grafiką

• Zarządzanie wielkością
• optymalizacja grafiki
• Teksty alternatywne
• Dodawanie łączy
• Formatowanie grafiki za pomocą stylów CSS
• Filtry CSS

Przerwa obiadowa – 13:30 – 14.00

Zasady formatowania tekstów na stronie WWW

• Wykorzystanie typografii i stylów CSS
• Formatowanie tekstów za pomocą stylów CSS

Arkusze stylów CSS głębsze spojrzenie

• Formatowanie grafik, list, nagłówków i itp.
• Ostateczne dostosowanie wyglądu strony przy użyciu stylów CSS
• Dostosowanie stylów do poprawnego wyświetlania strony w różnych przeglądarkach

Ciekawe efekty wizualne z użyciem stylów CSS

• Dodawanie tła strony
• Interaktywne elementy nawigacji
• Wykorzystanie CSS3

Wykorzystanie i formatowanie tabel

• Struktura tabeli
• Stylowanie wizualne

Zakończenie szkolenia – 16:30

V dzień – Rozpoczęcie szkolenia – 8:30

Tworzenie galerii zdjęć

• Biblioteka Lightbox
• Przygotowanie grafiki
• Struktura galerii
• Edycja i formatowanie galerii
• Edycja kodu JavaScript

Google Maps

• Rodzaje map
• Osadzenie podstawowej mapy Google na stronie

Wykorzystanie filmów wideo i muzyki na stronie WWW

Testowanie i walidacja strony WWW

• Testowanie poprawności działania strony w różnych przeglądarkach
• Testowanie poprawności kodu HTML i stylów CSS
• Konfiguracja serwera WWW

Strona www online

• Serwer ftp
• Konfiguracja programu klienta ftp
• Publikacja strony online – przesyłanie strony na serwer
• Aktualizowanie strony www na serwerze produkcyjnym

Przerwa obiadowa – 13:30 – 14.00

Tips & Triks

Pamiętaj o SEO

• Wstęp do pozycjonowania
• Optymalizacja plików strony www
• Kompresja grafik
• Wytyczne SEO dla serwisów www

Co dalej

• Serwisy www wykorzysujące CMS
• Dlaczego warto zainteresować się systemem WordPress
• Czy SEO jest dla Ciebie?

Podsumowanie

Zakończenie szkolenia – 16:30

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja

I dzień – Rozpoczęcie szkolenia – 8:30

HTML / CSS – przypomnienie najważniejszych zagadnień

• Techniki resetowania CSS: normalize vs reset
• Model pudełkowy
• Metody wyświetlania elementów na stronie www
• Pozycjonowanie elementów,
• Obsługa właściwości background
• Zarządzanie wielkością tekstu
• Struktura strony
• Tworzenie układów menu

Planowanie struktury strony www pod Responsive Web Design

• Prezentacja treści
• Menu
• Listy uporządkowane i nieuporządkowane
• Grafiki – optymalizacja grafik – wykorzystanie srcset

Przerwa obiadowa – 13:30 – 14.00

Google fonts / webfonts

• Plusy i minusy wykorzystania dodatkowych fontów na stronie www
• Sposoby podłączania zewnętrznych fontów
• Techniki optymalizacyjne

Elastyczne strony www

• Popularne breakpoints w RWD
• Viewport
• Wprowadzenie do Media Queries / Breakpoints
• Orientation: portrait oraz landscape

Zakończenie szkolenia – 16:30

II dzień – Rozpoczęcie szkolenia – 8:30

Pozycjonowanie elementów

• Position: absolute, relative, fixed, sticky
• Przykłady wykorzystania na stronie

Wprowadzenie do metodologii BEM CSS

• Nazewnictwo elementów
• Praktyczne przykłady

Przerwa obiadowa – 13:30 – 14.00

Zastosowanie Flexbox CSS

• Definiowanie kontenera
• Flex-direction i ustawianie elementów w kolumnie
• Właściwość:
  • flex-wrap,
  • justify-content
  • align-items
  • order
• Praktyczne wykorzystanie Flexbox CSS

Wykorzystanie Flex Grid

• Wady i zalety
• Grid Container
• Grid Item
• Grid Line
• Grid Cell
• Grid template columns
• Grid template rows
• Grid template areas

Tworzenie animacji na bazie stylów CSS

• Animacje na stronie www za pomocą stylów CSS
• Wykorzystanie popularnych bibliotek wspierających animacje elementów

CSS – spójrzmy głębiej

• Właściwości: min-max width/height
• Jednostki rem, em, vw, vh

Zakończenie szkolenia – 16:30

III dzień – Rozpoczęcie szkolenia – 8:30

Frameworki frontendowe wykorzystywane przy tworzeniu stron www

• Co to jest?
• Kiedy warto korzystać z frameworków
• Bootstrap – wprowadzenie
• Foundation – wprowadzenie

Przerwa obiadowa – 13:30 – 14.00

Bootstrap

• Rozpoczęcie pracy z frameworkiem – techniki podłączania plików
• Klasy, typografia, formatowanie list i itp.
• Dodawanie elementów interfejsu

Zakończenie szkolenia – 16:30

IV dzień – Rozpoczęcie szkolenia – 8:30

Projekt strony RWD

• Zaplanowanie działań
• Wdrożenie struktury projektu
• Tworzenie responsywnej strony www HTML / CSS – praktyczne ćwiczenia

Przerwa obiadowa – 13:30 – 14.00

• Wprowadzenie technik responsywnych
• Wykorzystanie Bootstrap – ćwiczenia praktyczne
• Testowanie projektu

Zakończenie szkolenia – 16:30

V dzień – Rozpoczęcie szkolenia – 8:30

Dodatkowe narzędzia deweloperskie

• Konsola DevTools w przeglądarce – źródło wiedzy o stronach www
• Testowanie responsywności serwisu
• Sizzy

PageSpeed Insights

• Dlaczego jest to takie ważne?
• Elementy wpływające na szybkość serwisu
• Optymalizacja techniczna
• Wdrożenie rozwiązań przyspieszających działanie wersji mobilnej

Przerwa obiadowa – 13:30 – 14.00

• Lazy loading
• Dostępne rozwiązania serwerowe jakie warto wdrożyć w celu optymalizacji serwisu
• CDN – jak działa i dlaczego warto?
• Inne narzędzia wykorzystywane w ocenie szybkości działania serwisu www

Google Search Console

• Podłączania strony www
• Metody alternatywne zgłaszania serwisu www do GSC
• Konfiguracja i generowanie mapy serwisu
• Analizowanie potencjalnych błędów

Strona w Google

• Co wpływa na proces indeksowania stron www
• Elementy serwisu ważne dla SEO
• Wykonywanie przekierowań adresów URL – eliminacja błędów 404
• Metadane
• Dane strukturalne

Podsumowanie

Zakończenie szkolenia – 16:30

Każdego dnia oprócz przerwy obiadowej, przewidziane są dwie przerwy kawowe po 15 minut.

Jak zdobyć dofinansowanie na Kurs HTML i CSS?

Kurs HTML i CSS w praktyce - opinie na temat kursu

Zarówno oferowany Kurs HTML i CSS w praktyce, jak i pozostałe kursy organizowane przez IT Media cieszą się dużym uznaniem wśród uczestników, którzy najwyższej oceniają naszych wykładowców. Goście zajęć doceniają ich przygotowanie, zaangażowanie i podejście. Przychodząc na nie, przekonasz się, że stawiamy na wykwalifikowaną kadrę, która z pasją podchodzi do prowadzenia wykładów i przedstawiania uczestnikom sekretów Photoshop. Nasze kursy i usługi mają średnią ocen 4,9 w Google oraz 5,0 na Facebooku.

Sprawdź nasze opinie na Google >

Dowiedz się więcej o kursie

HTML i CSS – co to jest?

Korzystając z internetu i znajdując potrzebne nam treści zazwyczaj nie zastanawiamy się, w jaki sposób to wszystko działa. Jak to jest, że wpisuję w przeglądarce adres, a po kilku sekundach widzę gotową stronę? Ta układanka ma wiele elementów. Potrzebny jest dostęp do sieci i adres strony. Właściciel strony musi posiadać domenę, hosting oraz pliki, które wczytane na serwer staną się stroną internetową. Wśród narzędzi wykorzystywanych w tym procesie HTML5 i CCS3 są jednymi z kluczowych elementów.

Konstrukcję strony WWW można porównać do ludzkiego działa. HTML i CSS są jak szkielet i mięśnie. HTML nadaje stronie strukturę. To dzięki niemu strona posiada nagłówek, miejsce na treść i stopkę, inny układ w przypadku statycznej strony, a inny w przypadku strony blogowej. CSS z kolei odpowiada za wygląd strony i jej poszczególnych elementów – ich kolor, rozmiar, umiejscowienie, marginesy, obramowania, hierarchię i wiele innych.

HTML5 i CSS3 a tworzenie stron WWW

Wiele osób jeszcze pamięta proste strony oparte na tabelach wyświetlające się w systemowej przeglądarce. Wobec tamtych stron nie było zbyt wielkich wymagań estetycznych – ważne było, by witryna działała i by była czytelna. Myśląc o zaawansowanych, responsywnych stronach WWW wyglądających równie dobrze w wersji dekstopowej jak i mobilnej, z których korzystamy dziś, aż trudno uwierzyć, że u ich podstaw leżą niemalże te same znaczniki!

Niemalże te same, ponieważ HTML i CSS od lat ewoluują. Obecnie do tworzenia stron wykorzystuje się HTML5 i CCS3, czyli najnowsze, a jednocześnie dobrze udokumentowane wersje HTML i modułów CSS, które są odczytywane przez większość przeglądarek. Przy budowaniu strony przydają się również języki skryptowe – PHP czy JavaScript, a także znajomość baz danych (głównie MySQL). Czy to oznacza, że znajomość HTML i CSS są konieczne do budowania strony? Odpowiedź brzmi – to zależy.

HTML5 i CSS3 a WordPress

Jeśli korzystasz ze znanego systemu zarządzania treścią (CMS), np. WordPress, znajomość HTML i CSS przydaje się okazjonalnie, do edycji nie do końca wizualnie pasujących elementów. Ze względu na swoją konstrukcję WordPress jest przykładem tego, jak w sposób przyjazdy dla nie do końca technicznego użytkownika może rozwijać się system zarządzania treścią.

WordPress umożliwia takiemu użytkownikowi tworzenie atrakcyjnych, responsywnych i dostosowanych do wymogów SEO stron internetowych, przy których nie potrzeba znajomości kodowania. Jednocześnie jednak, chcąc wycisnąć z niego najwięcej potrzebna jest wiedza o działaniu WordPressa. Pozwoli ona umiejętnie korzystać chociażby z widgetów, page builderów czy shortcode’ów – stworzonych przez programistów elementów, z których można łatwo stworzyć stronę.

Wciąż jednak motywy stanowią pewne ograniczenia dla twórców. Wiele elementów można, a czasem trzeba zmienić. Do tego zaś potrzebna jest znajomość HTML5 i CSS3.

Kurs CSS i kurs HTML – do czego może się przydać?

WordPress jako dominujący obecnie CMS pozwala na szybkie stworzenie strony WWW. Odbywa się to jednak kosztem pewnych wyobrażeń czy potrzeb użytkownika. Tworzenie prostych stron wizytówkowych, blogów czy nawet średniozaawansowanych portali nie stanowi trudności. Gorzej, jeśli funkcja czy element, o którym myślisz, nie wpasowuje się w wizję twórców motywów czy wtyczek.

Jeśli jako użytkownik potrzebujesz pewnych unikalnych czy dostosowanych do specyfiki Twojego biznesu funkcjonalności może się okazać, że WordPress nie jest w stanie dać Ci tego, czego potrzebujesz. W tym momencie masz do wyboru trzy opcje. Pierwsza: zrezygnujesz z czegoś, co wydawało Ci się potrzebne. Druga: poznasz lepiej ten CMS i zobaczysz jego możliwości bez nauki kodowania i na podstawie zdobytej wiedzy podejmiesz decyzję, czy WordPress jest dla Ciebie. Trzecim rozwiązaniem jest zamówienie odpowiednich zmian u specjalisty od danego CMSa lub języka.

Dobra znajomość CMSa umożliwia wprowadzenie wielu zmian, wymaga jednak pójścia w wielu kwestiach na kompromis. Jeżeli zmiany, które chcesz wprowadzić, mają dotyczyć wyglądu lub funkcjonalności strony z perspektywy odbiorcy / użytkownika, to kurs HTML i CSS będzie dla Ciebie idealnym rozwiązaniem.

Kurs HTML i CSS dla początkujących

Zadania specjalistów tworzących strony internetowej można podzielić na dwa obszary.

Część specjalistów będzie zajmować się tym, co widzą inni wchodząc na stronę – wyglądem strony i tym, by była użyteczna dla użytkownika. To front-end deweloperzy. U podstaw ich pracy leży znajomość HTML, CSS i JavaScript.

Inni specjaliści dbają o to, by zaplecze strony działało bez zarzutu. By można było się na niej logować, dodawać treść, by pliki były odpowiednio ze sobą powiązane tak, by użytkownik nie dostał komunikatu o błędzie w wyświetlanej stronie. To zadania back-end deweloperów, którzy znają języki związane z działaniem serwera (np. PHP) oraz umieją się poruszać po bazach danych (np. MySQL).

Kurs HTML5 i CSS3 dla początkujących umożliwia podstawienie pierwszych kroków na ścieżce rozwoju front-end dewelopera. Pozwala na modyfikację szablonów w istniejących już CMSach, a także na zbudowanie strony od podstaw. Kurs HTML umożliwi Ci stworzenie ram takiej strony, a kurs CSS pozwoli nadać jej ładny, responsywny wygląd. Dodatkowo znajomość podstaw JavaScript umożliwi Ci stworzenie bardziej interaktywnych elementów strony.

Kursy HTML i CSS Warszawa i online

Jeśli wiesz już, że interesuje Cię kurs HTML lub CSS dla początkujących, to pojawia się pytanie: czy lepiej wziąć udział w kursie stacjonarnym czy online? Wziąć udział w szkoleniu z osobą prowadzącą czy przerobić jeden z dostępnych kursów wideo?

Szkolenie HTML czy CSS online w formie wideo jest rozwiązaniem dla osób, które mają czas na to, by kształcić się we własnym tempie i nie potrzebują na tej drodze wsparcia osób trzecich. Bywa jednak, że napotkane problemy stają się przeszkodą nie do przejścia, a motywacja do samodzielnej nauki z czasem spada. W takich sytuacjach szkolenie z osobą prowadzącą zapewnia nie tylko potrzebną dawkę wiedzy, lecz także wsparcie w procesie nauki.

Szkolenia z HTML5 i CSS3 w IT Media

IT Media oferuje szkolenie HTML i CSS w dwóch modułach. Moduł pierwszy zawiera informacje o podstawach HTML5, CSS3, JavaScript. Będąc na szkoleniu zobaczysz również, jakie możliwości oferuje twórcom stron program Adobe Dreamweaver. Moduł drugi rozwija informacje przekazane w module pierwszym m.in. o znajomość bootstrapów oraz bibliotek JavaScript, co pozwala na tworzenie bardziej zaawansowanych stron internetowych. Oba szkolenia składają się na kurs HTML i CSS.

Szkolenia w IT Media w wersji stacjonarnej przeprowadzane są w Warszawie. Istnieje również możliwość dołączenia do grupy online. Program kursu HTML i CSS online jest taki sam jak kursu stacjonarnego, jednocześnie pozwala zaoszczędzić czas oraz pieniądze w przypadku dojazdów.

Niech przemówią za nas liczby