#181

HTML dla zielonych – czyli pierwszy krok do front-endu

UWAGA! WARSZTAT ODBYWA SIĘ W PIĄTEK!

Chcesz zacząć tworzyć strony internetowe? Próbowałeś robić coś z wykorzystaniem WordPressa, ale chciałbyś w pełni zapanować na kodem? Twarde programowanie wydaje Ci się zbyt skomplikowane? Zacznij tworzyć strony internetowe z wykorzystaniem języka HTML!

Język znaczników HTML to wstęp i zarazem drzwi do świata front-endu. Obecnie szeroko stosowany zarówno w przypadku tworzenia stron internetowych, aplikacji webowych, a nawet aplikacji desktopowych czy mobilnych. Warsztaty składać się będą w przeważającej części z zadań praktycznych, aby każdy uczestnik mógł stworzyć swoją pierwszą stronę WWW.

Podczas warsztatu zapewniamy dostęp do kawy, herbaty, wody. W porze obiadowej zapewniamy pizzę w wersji mięsnej lub wegetariańskiej.

Żarówka

Czego się nauczysz?

W trakcie warsztatu:
- poznasz język HTML i towarzyszące mu technologie,
- poznasz potężne możliwości ukryte w samym HTMLu,
- nauczysz się tworzyć semantyczny kod zgodny ze współczesnymi standardami i trendami,
- poznasz zalety i wady omawianych zagadnień.
Notatnik

Wymagania wstępne

Od uczestników nie jest wymagana wcześniej nabyta wiedza z zakresu stosowania HTML czy innych technologii webowych. Niemniej jednak obycie z jakimkolwiek językiem programowania jest mile widziane. Warsztaty skierowane dla osób początkujących adeptów front-endu.
Uczestnicy w trakcie zajęć korzystają z własnego sprzętu (do wygodnej pracy wystarczy jakikolwiek laptop z systemami Linux, OSX czy Windows) na którym mile widziane jest zainstalowane następujące oprogramowanie:
- dowolny edytor tekstowy kolorujący składnie lub IDE np. Notepad++, Atom, NetBeans, Visual Studio, WebStorm,
- kilka przeglądarek internetowych w najnowszych wersjach: Firefox, Chrome/Chromium, IE/EDGE, Opera, Safari.

Prowadzący

Krzysztof Ścira:

Absolwent AGH - Informatyka Stosowana w Hutnictwie. Prezes Zarządu i front-end developer firmy desi9n.pl tworzącej aplikacje webowe, aplikacje mobilne oraz programowanie dedykowane. Wielokrotny prelegent na konferencjach związanych z programowaniem urządzeń mobilnych i programowaniem front-end. W wolnych chwilach pasjonat boksu olimpijskiego.

Program warsztatów

  1. Wstęp
    1. Czym jest język HTML i w jakim celu się go stosuje
    2. Wersje i standaryzacja języka HTML
    3. Przestarzale i nie zalecane znaczniki (font, center)
  2. Pierwsze kroki
    1. Struktura dokumentu
    2. Elementy blokowe
    3. Najważniejsze znaczniki HTMLa: HTML, HEAD, BODY
    4. Semantyka bloków: ASIDE, MAIN, ARTICLE, SECTION
  3. Wyświetlanie treści
    1. Elementy tekstowe – paragrafy, nagłówki, wyróżnianie treści na różne sposoby
    2. Tabele (wiersze, kolumny, komórki, łączenie komórek)
    3. Listy (wypunktowania, numeracje, zagnieżdżanie)
    4. Linki (nawigacja oparta o anchory, linki zewnętrzne)
    5. Przełamania linii, linie horyzontalne
  4. Obrazki i inne cuda
    1. img
    2. figure, figcaption, picture
    3. Atrybuty src i srcset
    4. Wymiarowanie obrazków w HTML
  5. Formularze
    1. Przyciski, pola edycyjne, checkboxy, radiobuttony
    2. date picker, color picker, camera
    3. Natywna walidacja formularzy
    4. progress
  6. Nie widać, ale działa!
    1. Atrybuty dla konkretnych znaczników
    2. Znaczniki META – kodowanie znaków, viewport, tytuł i opis strony
    3. Semantyka znaczników – UX i DX, dostępność dla osób niepełnosprawnych
    4. Atrybuty WAI-ARIA
  7. Spojrzenie na dodatkowe możliwości
    1. Łączenie HTML z CSS (nadawanie koloru, formatowanie tekstu i inne podstawy)
    2. Operacja JavaScript na drzewie DOM
    3. iframe
  8. Layouty
    1. Tworzenie prostych layoutów z minimalnym wykorzystaniem CSSa
    2. Znaczniki semantyczne: HEADER, FOOTER. NAV
  9. Zagadnienia niszowe
    1. Własne znaczniki
    2. Trzymanie danych w atrybutach data-*
    3. Białe znaki a HTML, znaki specjalne – encje
    4. Mało popularne znaczki: np. pre, cite, mark
  10. Zagadnienia zaawansowane
    1. Poprawki w drzewie DOM wykonywane przez przeglądarkę
    2. Tworzenie layoutu a reprezentacja danych
    3. Osadzanie multimediów: dźwięk, filmy, CANVAS
    4. Shadow DOM
  11. Warsztat programisty
    1. Sprawdzanie poprawności syntaktycznej HTMLa
    2. Formatowanie kodu, radzenie sobie z większymi strukturami HTML
    3. Komentarze w kodzie
    4. Edytory ułatwiające pracę

Uwaga

Liczba miejsc ograniczona! Organizator zastrzega sobie prawo do zmiany lokalizacji wydarzenia oraz jego odwołania w przypadku niezgłoszenia się minimalnej liczby uczestników.

Zapisy na wybrany warsztat zostały zakończone.