Už jsme v kurzu! Můžeš se přihlásit na Kurz AI zde.
 

DevTools nejsou nepřítel

Tak se s nimi skamaraď s námi!

Pokud jen trošku přičichneš k vývoji webových aplikací, tak DevTools se ti budou hodit na prozkoumávání a studování applikace. Přidej se na jízdu prozkoumávání webových stránek.

Pro juniory
Kompletní podpora
10 lekcí
Zcela online
Staň se DevTools mastrem!
Ilustrační úvodní obrázek

Proč by tě to mělo zajímat...

Responsivní design testuješ tím, že zmenšuješ okno prohlížeče? || Slyšel jsi o výhodách responsivního designu, ale nevíš, jak ho v DevTools otestovat. (Vyber lepší z nich.)
"Application tab" ti zní jako místo, kde se podáváš žádost o práci?
Myslíš si, že "lighthouse" je jen maják na pobřeží, ne nástroj pro optimalizaci webu?
Klikáš na "Inspect Element" a cítíš se jako hacker, ale nevíš, co dál?
Občas otevřeš DevTools, ale cítíš se zahlcený množstvím záložek a možností.
Frustruje tě, že nevíš, proč tvůj CSS kód nefunguje tak, jak očekáváš.
Potřebuješ zjistit, jak funguje tvůj web na pomalém připojení a nechce se ti jezdit s notebookem Českými drahami, abys to zjistil. (Tahle funkce se jmenuje throttling, bude to chtít to tvrzení zkrátit.)


Pokud ses v něčem našel, jsi tu správně. Náš kurz je pro tebe jako dělaný, pokud:

- máš základní znalosti HTML a CSS (někdy si napsal jednoduchou stránku) 

- máš základní znalosti JavaScriptu (víš co je proměnná a podmínka)

- tušíš, co je to webová aplikace

Proč znát DevTools?

Švýcarský nůž každého vývojáře i testera

Dokážeš si představit webový vývoj bez DevTools? My ne! Jsou jako multifunkční švýcarský nůž v digitálním světě - nepostradatelné pro každého vývojáře i testera. Ať už ladíš HTML, CSS, JavaScript nebo analyzuješ výkon stránky, DevTools jsou tvým věrným společníkem. Je to jako mít superschopnost vidět pod pokličku každé webové aplikace - prostě must have pro každého, kdo se pohybuje ve světě webu!

Už žádný console.log 10x v kódu

Už tě nebaví zaplavovat kód desítkami console.log? DevTools jsou tvoje tajná zbraň. S Network panelem odhalíš každý API požadavek, s Consolí elegantně zkoumáš proměnné, a s Debuggerem procházíš kód řádek po řádku.  S DevTools už nemusíš hádat - vidíš přesně, co se v tvé aplikaci děje. Tak proč se spokojit s primitivním výpisem do konzole, když můžeš mít celou laboratoř na dosah ruky?

Virtuální opravna pro webové vývojáře

Máš pocit, že tvoje stránka vypadá jinak než by měla? Nefunguje ti JavaScript tak, jak očekáváš? S DevTools se stáváš detektivem i chirurgem webových aplikací. I zdánlivě neřešitelné problémy často mají jednoduché řešení - stačí vědět, kam se podívat. S DevTools můžeš diagnostikovat a opravit jakýkoliv webový neduh. Proč se trápit s nefunkčními stránkami, když máš po ruce nástroj, který ti umožní rychle identifikovat a napravit každou chybu?

Proč je aplikace pomalá

Trápí tě pomalé načítání stránky? Freezuje se ti aplikace při scrollování? S DevTools se stáváš výkonnostním guru. Využij Performance panel k analýze renderování, JavaScript execution a layoutu.  Či Sleduj síťové požadavky v Network tabu a odhal zbytečně velké assety. Je to jako mít superpočítač, který rozloží tvou aplikaci na prvočinitele. Drobné optimalizace mohou vést k výraznému zrychlení. Proč se spokojit s línou aplikací, když můžeš mít raketu?

Těžko získáš zkušenosti bez praxe, ale praxi ti nedají, pokud nemáš základy.

Naši junioři už více než rok pracují, přidej se mezi ně.

Byli s námi na cestě od samých začátků až do úspěšného pohovoru, na který jsme je připravili.

Pojďme vybudovat základy, se kterými zazáříš na každém pohovoru.

Chci rozumnět DevTools!
Jak bude kurz probíhat?

Přihlas se na kurz a připrav se na nálož učení

Suchý je únor

ne náš výklad.

Prezentuj se díky svým dovednostem.

Kurz je zcela online. Připrav si 9 volných večerů, kdy se spolu s naší lektorkou na dvě hodiny ponoříš do světa webových aplikací.
Co získáš?

Nekonečné opáčko


Záznamy všech lekcí budou tvoje navždy! Zapomněl jsi něco? Žádný problém, pusť si to znovu.

Nadupanou knihovnu

Dostaneš extra materiály, které tě posunou ještě dál. Vždy je co objevovat!

IT partu na Discordu


Máš otázku? Cokoli tě trápí? Nejsi v tom sám. Náš Discord bude tvůj druhý domov.

Certifikát o absolvování


Důkaz, kterým můžeš potvrdit své znalosti. Připrav se na obdivné pohledy kolegů!

Termíny
Start
Počet lekcí
Délka lekce
Cena
Registrace

4. 11. 2024

Pondělí a čtvrtek

10 lekcí

120 minut
18:00 - 20:00

2680 Kč

Platí pro Jsem v Kurzu.

4. 11. 2024

Pondělí a čtvrtek

10 lekcí

120 minut
18:00 - 20:00

12900 Kč

do 15. 10.  poté 14900 Kč

Přihlas se na kurz prostřednictvím programu Jsem v kurzu.
Získej cenovou výhodu. 

Řekli o nás...
Co tě čeká v našem kurzu?
1. Úvod do Devtools

V úvodní lekci se seznámíme s DevTools. Naučíš se jak se v nich pochybovat a navigovat. Podíváme se na interface Devtools v různých prohlížečích.

Prozkoumáme z lehka jednotlivé záložky, ať víš, co tě čeká.

2. Ponoření do Elements

V této lekci se do hloubky ponoříme do záložky elements. Prozkoumáme jednotlivé prvky na stránce detailněji v DOMu. Naučíš se editovat HTML i CSS stránek.


V této lekci se dozvíš víc o Box Modelu, čí Flexboxu nebo Gridu. 

3. Debugovací Techniky

Nedají ti chyby spát? V této lekci se zaměříme na jejich odhalování. Podíváme se blíže na logování chybových hlášek. Prozkoumáme záložku Control.


Naučíš se pomocí break pointů zastavit událost a prozkoumat kód.

4. Network

Záložka network nabízí exkurzi do komunikace mezi tvým prohlížečem a serverem. Rozpitváme requesty dopodrobna. Probereme je důkladně.


Kromě toho se naučíš jak simulovat pomalejší rychlost internetu.

5. Application a Security

Říká ti něco cache, service workery či local storage? Nvštívíme záložku application, kde se naučíš prozkoumat paměť aplikace.


Další neméně důležitá záložka je Security. Porozumíš jednotlivým údajům.

6. Performance

Prozkoumáme stránku pomocí Lighthouse. Zjistíme její hodnocení. Naučíš se interperetovat výsledky.

Zjistíš, že Ligthouse není vše. Podíváme se na zoubek Performance panelu.

7. Accesibilty a Mobile Emulation

Podíváme se na přístupnost webových aplikací. Zaměříme se na accesibility tree a zároveň probereme možnosti testování přístupnosti.


Zkusíš si jak v DevTools nasimulovat mobilní zařízení pro potřeby testování responzitivity.

8. Sources a propojení s mobilním zařízením

Ponoříme se více do záložky Sources. Naučíš se jak si zmrazit prohlížeš. Napíšeš si kousky kódu - snippety, kterými pak můžeš ovlivňovat stránku.

V druhé části si přprav mobilní zařízení a kabel. Budeme přes Devtools zkoumat prohlížeč na tvém mobilu.

9. Animace a rendering

Spousta aplikací nyní používá animace pro zpříjemnění uživatelského zážitku. Ale nic se nemá přehánět. Společně se podíváme na to, jak s animacemi pracovat v DevTools.


A vrátíme se trošku k přístupnosti, abychom zase podali o kus lepší zpětnou vazbu k přístupnosti.

10. Co dál?

Na závěr si vše zopakujeme. Podávíme na best practices. Dozvíš se jak si zjistit verzi prohlížeče. 

Zároveň nebudeš odcházet s práznou. Máme pro tebe připravené zdroje, které stojí za to prozkoumat.

Kurzem tě provede
Lýdie Hemalová
lydie.hemalova@naucme.it

Po univerzitě jsem se rozhodla, že nechci být vývojářka. Proč? Našla jsem vzrušující svět testování webových aplikací. Něco nového, neprozkoumaného a lákavého. Je tomu již několik let a můj názor se nezměnil, spíše se prohloubil.


Během své cesty jsem spolupracovala na vývoji několika aplikací. Ať už jsem psala automatické testy, nebo manuálně testovala, poznala jsem, že dobrá znalost základních pojmů a konceptů je důležitá a přenositelná. 

Proto se mi například jednoduše přechází mezi jednotlivými testovacími frameworky. 


Přestože nejsem vývojář, starám se o code base a dbám na best practices. Důležité pro mě je, aby všichni členové týmu měli vhodné podmínky pro spolupráci. Proto jsem na jednom projektu vedla migraci z JavaScriptu na TypeScript a na dalších projektech zavedla statickou analýzu kódu. 


Své znalosti ráda předám dál. Již jsem mentorovala několik kolegů během jejich začátků s automatizací. Důležité pro mě je, že nejenže ví, jak nabušit testy nebo něco proklikat podle návodu, ale také rozumí, proč to dělají. 

Často kladené otázky?
Jak dlouho kurz potrvá?

Kurz má devět dvouhodinových lekcí, které budou probíhat každé pondělí a čtvrtek.

Je možné, že kurz netradičně odstartuje ve čtvrtek. Během státního svátku si dáme studijní volno. 

Jak je to s programem Jsem v kurzu?

Jsem v kurzu je program od Ministerstva práce a sociálních věcí.
Během tří let ti mohou schválit dotaci na kurzy v hodnotě 50 tisíc. Kurzy ti neplatí celé, je potřeba tvoje spoluúčast. V případě našeho kurzu je to x Kč.
Chceš-li vědět víc o programu, doporučujeme se podívat na stránky programu.

Jaké jsou podmínky splnění?

Pro absolvování kurzu musíš splnit:

- docházky minimálně 16 hodin

- 80% úkolů z lekcí (kvízy, prozkoumávání stránek).
Úkoly budou vždy oznámeny na lekci a dostaneš
e-mail se zadáním. Deadline je poslední lekce kurzu.

Jak funguje podpora na Discordu?

Na našem Discord bude nejpozději po první lekci vytvořena podpůrná skupina, do které budou mít vstup jen účastníci kurzu a naši lektoři.

Do skupiny můžeš psát svoje dotazy, lektoři ti odpoví co nejdříve. 


Počítej s tím, odpověď nebude vždy okamžitá. Když napíšeš dotaz po půlnoci pravděpodobně dostaneš odpověď až ráno.

Kolik kurz stojí?

Kurz stojí 13 400 Kč včetně DPH.

Pokud pošleš přihlášku do 15. 10., dostaneš slevu 2000 Kč. Pozor zvýhodnění platí pouze do půlnoci.
Od 
16. 10. je kurz za plnou cenu.


Pokud se hlásíš přes program Jsem v kurzu. Tak cena se odvíjí od podmínek programu. Při splnění podmínek účasti ti bude programem proplaceno až 80% z ceny kurzu.

Kde bude kurz probíhat?

Kurz je zcela online. Lekce budou probíhat na platformě Google Meets.

Nemusíš si nikde tvořit účet, stačí se připojit. Pozvánka ti přijde na email. Záznamy obdržíš vždy několik hodin po lekci.


Podpůrná skupina bude na našem Discord, kam se musíš přihlásit a dát lektorovi vědět během první lekce svoje přihlašovací jméno.