Frontendowe Mięsko: Warsztaty

Twoja własna strona w 1 dzień, od zera do online. Zbuduj portfolio, które naprawdę działa i wygląda profesjonalnie.

⏱️ 9h warsztatów na żywo z trenerem

🟢 Online

🏆 Certyfikat

🎁 Mini e-book gratis!

Cele warsztatów

- Stworzenie własnej strony portfolio w 1 dzień

- Nauka nowoczesnego HTML i CSS

- Praktyka A11y (dostępność), SEO i responsywności

- Integracja narzędzi frontendowca: Lighthouse, fonts, WAVE, metatags i wiele innych

- Automatyczny deployment z Githuba na Netlify

Plan warsztatów

Część I: Fundamenty

• Wprowadzenie + setup projektu
  • Agenda i plan
  • “Jak działa przeglądarka?” – showcase
  • Setup Gita i Webstorma
• Struktura HTML i semantyka
• Najważniejsze meta tagi i struktura HTML
• Dlaczego bez semantyki wszystko “leży”
• Divoza

Część II: Kodujemy razem

• Nawigacja
  • Poznajemy dużo semantycznych tagów HTML
  • Wjeżdżamy w CSS
  • Poznajemy CSS BEM
  • Poznajemy CSS Flex
  • Tworzymy podstrony
  • Poznajemy fajny trik Accessibility
• Hero Section
  • Poznajemy kolejne semantyczne tagi
  • Przyciągamy klientów – Call To Action (CTA)
  • Wrzucamy obrazy w nowoczesnych formatach i optymalizujemy
  • Znowu Accessibility – tym razem kontrast kolorów i obrazy
• Footer & Contact Page
• Budujemy stopkę
  • Wrzucamy linki do social mediów
  • Budujemy dostępny formularz
  • “Jak zepsuć Accessibility za pomocą CSS”
  • Stylujemy z wykorzystaniem pseudo elementów i pseudo selektorów
• Debugowanie z DevTools
  • Debuggujemy strukturę strony i skanujemy z Lighthouse
  • Jak działa strona na słabym internecie
  • Twoja strona na różnych urządzeniach (tablet, smartphone)

Część III: Perfekcja

• Responsywność
  • Wjeżdżamy w CSS variables
  • Robimy responsywne obrazy
  • Łamiemy layout
  • CSS Media queries & breakpoints
  • Uczymy się responsywnego spacingu i tekstu
• Branding & Integracje
  • Wybieramy kolory dla Twojego brandu
  • Integrujemy Google Fonts
  • Integrujemy bibliotekę ikon
  • Integrujemy bibliotekę do animacji
• Lecimy z Deploymentem
  • Accessibility checklist
  • Łączymy repo GitHub + Netlify
  • Wrzucamy Netlify build plugins
  • Social media preview
• Q&A + Certyfikaty

Metodologia

- Małe grupy szkoleniowe - tak, żeby każdy ze wszystkim zdążył i dało się wrócić i pomóc każdemu

- Code review - ocena jakości kodu

- Mentoring - indywidualne podejście, indywidualne rozwiązywanie problemów - nikt nie zostaje w tyle, ja nie muszę "lecieć z materiałem"

- Q&A - w zasadzie całe warsztaty to jedno wielkie Q&A - ale jest też dedykowana sekcja