Szkolenie HTML + CSS – zaawansowany

Opis szkolenia

Szkolenie HTML + CSS
zaawansowany

Kurs podzielony jest na 9 dni, w trakcie których odbywać się będą 4 godzinne zajęcia

Podstawą do efektywnego pokonywania poszczególnych etapów kursu są materiały szkoleniowe, podzielone na część teoretyczną jak i praktyczną.

Jest to kurs niezależny jak i uzupełniający do kursu „Szkolenie HTML & CSS –  Podstawy”. Udział w tym kursie wymaga uczestnictwa w poprzednim kursie lub wiedzy co najmniej na poziomie podstawowym.

Zajęcia odbywać się będą w weekendy  od godz. 10 do godz. 14. W 5 dniowej przerwie pomiędzy zajęciami wymagana jest praca własna w domu nad zadanym projektem.

Zajęcia prowadzone są w 5 – 12 osobowych grupach, w nowoczesnych salach wykładowych.

 

  • Szkolenia w kameralnych grupach od 5 do 12 osób
  • W pełni przystosowane sale szkoleniowe
  • Materiały szkoleniowe
  • 9 dni po 4 godziny zajęć

Szkolenie przeznaczone dla osób po kursie - Html css w wersji podstawowej

Zapytaj

Plan szkolenia

Dzień 1 - Wprowadzenie do kursu "Zaawansowany "HTML & CSS" + CSS/powtórka.

  1. Przedstawienie uczestników kursu – wykładowców jak i kursantów.
  2. Przedstawienie metodologi kursu – teoria vs praktyka.
  3. Prezentacja i omówienie własnych projektów z kursu „Podstawy…”.
  4. Sprawdzenie i przygotowanie zainstalowanego oprogramowania.
  5.  Konfiguracja edytora kodu Visual Studio Code.
  6. CSS – powtórka: kaskadowość, dziedziczenie.
  7. CSS – powtórka: selektory, pseudoklasy, pseudoelementy.
  8. CSS – powtórka: fonty i jednostki.
  1. Właściwość background.
  2. Box-sizing.
  3. Właściwość position. strony HTML.
  4. Właściwość display.
  5. Normalizacja.
  6. Funkcja calc.
  7. Zmienne.
  8. Przyklejona nawigacja.

Dzień 2 - Alokacja elementów na stronie, animacja, właściwości transition & transform cz.1

  1. Zadanie 1: obraz.
  2. Zadanie 2a: szachownica inline-block.
  3. Zadanie 2b: szachownica float.
  4. Zadanie 2c: szachownica position: absolute.
  5. Menu z ikonami Font Awesome i Media Queries.
  1. Właściwość transition – teoria.
  2. Zadanie: zmiana koloru, wyświetlanie tekstu po najechaniu myszką na przycisk.
  3. Zadanie: Zmiana rozmiaru i pozycji po najechaniu myszką na przycisk.
  4. Właściwość transform(teoria).
  5.  Zadanie: wyśrodkować element w innym elemencie.
  6. Zadanie: przesunąć linie z kwadratem za pomocą scrolla w obrębie okna.
  7. Zadanie: kliknij w przycisk i odsłoń budynek.

Dzień 3 - Animacja, właściwości transition & transform cz.2, właściwość animation.

  1. Zadanie: zegar z obracająca się wskazówką.
  2. Zadanie: przycisk z animacją cz.1.
  3. Zadanie: przycisk z animacją cz.2.
  4. Zadanie: przycisk z animacją cz.3.
  5. . Zadanie: przycisk z animacją cz.4.
  6. Zadanie: trójkąt.
  7. Zadanie: zmiana tekstu i border-a.
  8. Zadanie: zmiana rozmiaru tekstu z jQuery.
  1. Zadanie 1: planeta – animacja i klatki kluczowe.
  2. Zadanie 2: zmieniający się kwadrat.
  3. Trochę teorii animation w praktyce.
  4. Projekt 1: ruszający się przycisk (animation).
  5. Projekt 2: zmieniający się tekst (transition).
  6. Projekt 3: wyjeżdzający z boku ekranu tekst.
  7. Projekt 4: napisy przesuwające się w obrębie sekcji.
  8. Projekt 5: Dyskoteka.

Dzień 4 - Użycie animacji CSS w projektach, Flexbox.

  1. Projekt 1a: 3 kropki z pseudoelementu.
  2. Projekt 1b: 3 kropki ze spanów.
  3. Zadanie 1a: baner ze zmieniającymi się zdjęciami.
  4. Zadanie: 1b baner ze zmieniającymi się zdjęciami i opisem.
  5. Zadanie: gra Pong.
  6. Projekt 2: chodząca postać.
  7. Projekt 3: poruszający się dzwonek.
  8. Zadanie 3: przycisk ze strzałkami.
  1. Teoria Flexboxa na przykładzie kontenera.
  2. Najważniejsze właściwości Flexboxa.
  3. Trochę więcej teorii o Flexboxie.
  4.  Flexbox w praktyce.
  5.  Kontener we Flexboxie.
  6. Elementy elastyczne w praktyce.
  7. Teoretycznie o właściowściach elastycznych i Flexboxie.

Dzień 5 - Flexbox: CSS Grid i responsywność, Javascript vs tworzenie stron.

  1. Zadanie 1a: Layout z użyciem Flexboxa.
  2. Zadanie 1b: Layout z użyciem Flexboxa.
  3. Strony responsywne: media queries.
  4. Zadanie 2: Responsywne Flexbox menu.
  5. Zadanie 3a: Flexbox layout.
  6. Zadanie 3b: Flexbox layout + media queries.
  7. Zadanie 4: Grid layout.
  8. Zadanie 5: Grid cennik.
  1.  Wprowadzenie do Java Script we Frond End-dzie.
  2. Zmienne JS: błędy i ich wykrywanie.
  3. Typy zmiennych JS.
  4. JS: funkcje i eventy.

Dzień 6 - Java Script w projekcie, JQuerry wprowadzenie

  1. Praca ze stroną z JS.
  2. Zadanie 1: zmiana fontu po kliknięciu.
  3. Zadanie 2: zmiana koloru po kliknięciu.
  4. Zadanie 3: obracający się kwadrat.
  5. Zadanie 4: dodawanie obiektu po kliknięciu przycisku.
  1. Zadanie 1: Dodawanie obiektu.
  2. Jquerry w teorii.
  3. Jquerry w praktyce.
  4. Jquerry vs DOM: meotody i właściwości.
  5. Zadanie 2: zmiana tła i właściwości.

Dzień 7 - Menu hamburger, Popup i inne efekty przy przewijaniu.

  1. Zadanie 1: menu z boku po najechaniu.
  2. Zadanie 2: menu wysuwane po kliknięciu.
  3. Zadanie 3: ikona z menu.
  4. Zadanie 4: menu hamburger w jQuerry.
  5. Zadanie 5: integracja strony z menu.
  6. Zadanie 6 – menu z góry jQuerry.
  7. Zadanie 7 – menu na dole strony w JS.
  1. Zadanie 1: pop-up z użyciem jQuerry.
  2. Zadanie 2: menu z jQuerry.
  3. Zadanie 3: pasek wyświetlający pozycję skrola.
  4. Zadanie 4: pasek wyświetlający nr sekcji.
  5. Zadanie 5a: pojawianie się elementów z animacją jQ (wprowadzenie).
  6. Zadanie 5b: pojawianie się elementów z animacją jQ (rozwienięcie).

Dzień 8 - Galeria, baner, slider: Flexbox, JS, jQ, wprowadzenie do SaaS.

  1.  Zadanie 1a: Baner z animacją HTML & CSS.
  2. Zadanie 1b: Baner z animacją Java Script.
  3. Zadanie 2a: galeria z pop-upem HTML & CSS.
  4. Zadanie 2B: galeria z pop-upem biblioteka Lightbox-a.
  1. SASS teoria.
  2. Konfiguracja Visual Studio Code pod kątem SASS.
  3. Zadanie 1a – menu w składni SASS.
  4. Zadanie 1b – menu w składni SASS.

Dzień 9 - Zaawansowane pozycjonowanie strony w wyszukiwarce Google.

  1. Zaawansowane pozycjonowanie strony w Google.
  2. Zaawansowane prowadzenie Kampanii Google Ads.
  1.  Zaawansowana analityka Internetowa / Google Analytics.
  2. Podsumowanie „Zaawansowane pozycjonowanie”.

Co zyskujesz?

Poznaj techniki tworzenia galerii, menu, animacji, efekty kliknięć, najechania czy skrolowania strony. naucz się wykorzystywać Java Script i jQuery w projekcie. Stawiaj pierwsze kroki w programowaniu z nami.

Certyfikat

Na koniec kursu otrzymasz potwierdzenie udziału w kursie wydane przez Web Farming Academy

Grupy max 12 osób

Ze względu na jakość szkolenia nasze grupy liczą od 5 do maksymalnie 12 osób.

Materiały szkoleniowe

Dostarczymy Tobie wszystkie potrzebne do szkolenia materiały .

Promocja

Sprawdź oferty promocyjne wszystkich szkoleń organizowanych przez Naszych trenerów.

Sprawdź

Trener

Andrzej Rybicki

Masz dodatkowe pytania? Napisz! Chętnie wyjaśnię wszystkie zagadnienia i przedstawię plan szkolenia, wyjaśniając wszystkie wątpliwości.

Adres

Szkolenia

Strona

© 2023 WebFArming
Facebook