Kurs HTML i CSS w praktyce: profesjonalne tworzenie stron internetowych

Kurs HTML i CSS w praktyce: profesjonalne tworzenie stron internetowych

z certyfikatem Adobe Training Center | Warszawa | Online

Jako jedyny w Polsce Autoryzowany Ośrodek Szkoleniowy Adobe mamy zaszczyt zaprosić Cię na Kurs HTML i CSS z certyfikatem Adobe Training Center! 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 – 15-19 listopada 2021,
II Etap: Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i aplikacje – 29 listopada – 3 grudnia 2021.

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.

Autoryzowany Ośrodek Szkoleniowy Adobe

Akademia IT Media jest Autoryzowanym Ośrodkiem Szkoleniowym Adobe.
Mamy zaszczyt posiadać tę akredytację nieprzerwanie od 2005 roku.
Gwarantujemy najwyższą jakość prowadzonych przez nas szkoleń.

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: Solidne podstawy

Internet

• Możliwości i ograniczenia

Zasady projektowania i tworzenia serwisów internetowych

• rozpoznanie potrzeb Klienta
• wybór odpowiedniej technologii
• przygotowanie struktury serwisu
• omówienie układu strony internetowej
• struktura strony internetowej

Standardy budowy stron WWW

• typy dokumentów HTML
• HTML4 i HTML5
• CSS
• JavaScript i popularne biblioteki
• jQuery, Spry
• inne technologie

Podstawowe elementy strony WWW

• tekst
• grafika
• style CSS
• biblioteki JavaScript
• elementy i animacje
• PDF
• wideo i muzyka

Interfejs i narzędzia Adobe Fireworks

• narzędzia wektorowe
• narzędzia bitmapowe
• właściwości grafiki
• formaty graficzne stosowane w Internecie

Tworzenie elementów graficznych na stronę WWW w programie Adobe Fireworks

• import zdjęć i grafiki wektorowej
• edycja grafiki
• dodawanie efektów i cieni
• skalowanie
• użycie maski

Tworzenie projektu strony www

• import i dostosowanie grafiki
• zarządzanie wielkością
• dodawanie tekstów
• edycja kolorów
• nawigacja
• stopka, panele boczne
• reklamy i nowości
• cięcie grafiki na potrzeby języka HTML5 i stylów CSS

Cięcie, edycja i eksport projektu

• użycie narzędzia Slice tool
• wybór odpowiedniego formatu
• aktualizacja grafiki

Tworzenie elementów ozdobnych (strzałki, bullety, nagłówki itp.)

• zasady tworzenie niewielki plików graficznych
• przygotowanie prostych grafik śródtekstowych
• zasady eksportu grafiki bez tła

Zapis i optymalizacja elementów graficznych

• zasady optymalizacji plików graficznych
• zapis elementów graficznych dla strony WWW
• prototypy stron WWW

Przygotowanie struktury serwisu WWW

• site – definicja i zasady tworzenia i edycji
• budowa optymalnej struktury katalogów
• przygotowanie katalogu site’a

Interfejs programu Adobe Dreamweaver CS6

• okna i palety programu
• dopasowanie ekranu roboczego do własnych potrzeb
• tworzenie własnych skrótów klawiaturowych
• instalacja darmowych dodatków np. Lorem& More, Lightbox Gallery
• korzyści użycia i problemy z dodatkami

Tworzenie site’a

• konfiguracja site’a w programie Dreamweaver

Porównanie różnych metod budowy layoutu strony 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

• 960 Grid system
• Przegląd i porównanie wybranych układów strony internetowej
• układ jednokolumnowy
• układ dwukolumnowy
• układy wielokolumnowe

Zasady budowy layoutu w Adobe Dreamweaver

• Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www
• formatowanie elementów tekstowych
• wykorzystanie listy
• grafika na stronie www

Zasady użycia stylów CSS

• zasady tworzenie stylów CSS
• rodzaje selektorów
• style typu class, tag, id, compound
• dziedziczenie właściwości
• podstawowe właściwości stylów
• narzędzia tworzenia i edycji stylów w programie Adobe Dreamweaver CS6
• arkusze stylów
• łączenie arkusza ze stroną HTML
• CSS3

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)

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
• zasady dziedziczenia
• hierarchia stylów
• 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)

Optymalizacja 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 znaczników

Praca z grafiką

• zarządzanie wielkością, optymalizacja grafiki
• kadrowanie i efekty graficzne w programie Dreamweaver CC
• wykorzystanie elementów tylu Smart Object i współpraca z plikami Photoshopa
• teksty alternatywne
• dodawanie łączy
• formatowanie grafiki za pomocą stylów CSS

Zaawansowane formatowanie tekstów

• 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 grafiki, list, nagłówków
• 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 CSS

Tworzenie animacji na bazie stylów CSS

• animacje na stronie www
• animacje za pomocą stylów CSS

Budowa szablonów stron WWW

• tworzenie szablonów stron internetowych w programie Dreamweaver
• rodzaje szablonów
• wykorzystanie szablonów do tworzenie kolejnych podstroi serwisu
• edycja szablonu i aktualizowanie podstron

Zasady użycia animacji Aniamte na stronie WWW

• zalety i wady technologii Aniamte na stronie WWW
• osadzenie elementów Aniamte na stronie WWW
• alternatywy dla technologii Aniamte

Tworzenie stron WWW na podstawie szablonów Dreamweavera

• użycie elementów Aniamte, animacji na stronie WWW
• wykorzystanie i formatowanie tabel
• zapis i testowanie stron
• dodawanie łączy
• tworzenie i edycja stylów CSS dla elementów nawigacyjnych
• zaawansowane sposoby użycia stylów do formatowania menu

Praca z formularzem WWW

• zasady budowy formularza
• tworzenie interaktywnego formularza kontaktowego
• formatowanie elementów formularza za pomocą stylów CSS
• walidacja i testowanie działania formularza na stronie WWW
• elementy Spry w budowie formularzy
• edycja stylów CSS formularza
• przygotowanie formularza do przesyłania danych
• tworzenie strony potwierdzającej przesłanie danych

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

• konfiguracja site’a
• wybór firmy hostingowej i zakup domeny
• serwer ftp
• konfiguracja Adobe Dreamweaver CC do pracy z serwerem

Przesyłanie i aktualizacja strony na serwer WWW

• połączenie z fizycznym serwerem WWW
• przesyłanie strony na serwer
• pobieranie stron z serwera
• aktualizacja strony na serwerze WWW
• synchronizacja

JavaScrip  na stronie WWW

• Ajax i strony WWW
• Adobe Spry
• JQuery, MooTools

Współpraca z dodatkami JavaScript

• Adobe Widget Browser oraz Adobe Exchange
• wykorzystanie widgetów do tworzenia animacji nagłówka oraz innych elementów strony
• inne dodatki

Tworzenie interaktywnej galerii typu Lightbox

• Instalacja biblioteki Lightbox
• przygotowanie grafiki
• struktura galerii
• edycja i formatowanie galerii
• edycja kodu JavaScript
• publikacja galerii

Tworzenie elementów Ajax

• tworzenie interfejsu strony w oparciu o zakładki, panel typu Accordion czy Collapsible Panel
• edycja stylów CSS dla elementów Spry

Osadzenie mapy Google na stronie

• wykorzystanie dodatku Google Map do osadzenia mapy

Dodatkowe biblioteki JavaScript np. JQuery

• instalacja i wykorzystanie gadżetów JQuery
• tworzenie galerii zdjęć przy użyciu biblioteki Lightbox

Pływające reklamy Aniamte na stronie WWW

• zasady dodawania reklam umieszczonych ponad stroną internetową

Wykorzystanie filmów wideo i muzyki na stronie WWW

• problemy z przeglądarkami i wojna formatów
• praca z plikami FLV
• wykorzystanie plików mp4, mp3, ogg
• tworzenie odtwarzacza wideo na stronie WWW
• tworzenie odtwarzacza audio na stronie www
• Tips & Triks, biblioteki Javascript oraz dodatki do programu

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

Adobe Dreamweaver

• Projektowanie serwisu
• Tworzenie stron HTML
• Tworzenie stylów CSS

Projektowanie i tworzenie stron WWW

• Język HTML5
• Struktura strony
• Tworzenie zaawansowanych układów stron
• Elementy graficzne
• Wykorzystanie CSS

Praca z CSS

• Nowoczesne style CSS
• Selektory CSS
• Projektowanie bez użycia class i id
• Grafika CSS
• Gradienty i zaokrąglone narożniki
• Cienie

Animacje CSS

• Tworzenie prostych przejść CSS
• Interaktywne przejścia CSS

Media Queries – Zapytania o media

• Tworzenie punktów kontrolnych
• Dopasowanie wyglądu strony dla różnych wielkości ekranu
• Skalowanie strony na urządzenia mobilne
• Modyfikacja wyglądu strony
• Usuwanie i dodawanie elementów w zależności od wielkości stron
• Tworzenie mobilnej strony internetowej

Formularze HTML5

• Typy pól formularza
• Dodawanie formularzy na stronie internetowej i aplikacji
• Walidacja HTML5
• Współpraca z JavaScript

Podstawy języka JavaScript

• Typy danych, zmienne, obiekty
• Dostęp do obiektów
• Funkcje, tworzenie funkcji
• Tworzenie prostych instrukcji warunkowych
• Budowa różnego typu kalkulatorów (walutowe, BMI, temperatury, jednostek itp.)

Biblioteki JavaScript

• Poznajemy przykładowe biblioteki JavaScript
• Instalacja biblioteki
• Praca z Lightbox, jQueryCcle
• Podstawy jQuery, Zepto
• Selektory, zdarzenia i funkcje

jQueryMobile

• Tworzenie mobilnych serwisów i aplikacji
• Sterowanie wyglądem
• Theme Roller – tworzenie własnych skórek
• Dodajemy przejścia
• Elementy interaktywne
• Listy, nawigacja, menu

Adobe Edge Animate

• Zasady tworzenia animacji HTML5 w Edge Animate
• Podstawy animacji
• Tworzenie banerów HTML5
• Zapis i eksport animacji
• Wykorzystanie animacji Adobe Edge na stronie internetowej i aplikacji

Adobe Edge Animate – głębsze spojrzenie

• Złożone animacje
• Symbole
• Dodajemy elementy interaktywne
• Podstawy JavaScript w programie Adobe Edge Animate
• Projektujemy interaktywne banery, czołówki i animacje

Testowanie strony na urządzeniach mobilnych

• Adoobe Edge Inspect
• Ripple
• Testowanie na tabletach, telefonach komórkowych

Tworzenie natywnej aplikacji iOS, Windows, Android

• Współpraca z serwisem PhoneGapBuild
• Zapis i tworzenie aplikacji
• Testowanie aplikacji
• Zasady publikacji pracy w App Store i Google Play

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

Voucher na szkolenie