Rozcestník studenta
Tady najdete odkazy na všechny mé oblíbené weby, co se nějak váží k frontendu, kam často chodím pro informace a také oblíbené online nástroje. Jsou rozdělené podle obecnějších témat a nebo níže najdete barevné tagy, které umožní konkrétnější výběr.
-
Junior Guru
Na stránce najdete skvělou příručku na cestu do IT. Dočtete se v ní vše potřebné, můžete se přidat do výborného klubu juniorů nebo si poslechnout podcast.
-
Vzhůru dolů
Vše o HTML a CSS a layoutu. Součástí je i podcast a videa nebo kvalitní knihy v češtině. Pokud se chcete pustit do tvorby webů, tak tuhle stránku si určitě zapamatujte.
-
Rob web s yablkom
Slovenský Youtube kanál tvůrce Yablka. Najdete tam živé kódování od webu až po hru, od HTML až po React, ale nejen to. Má tam také výborná videa která vás nakopnou a povzbudí, o pohovorech, získání první praxe i práce..
-
Czechitas
Pokud jsi holka a chceš se naučit kódit weby nebo programovat, tak tohle je ta nejlepší stránka kam se vydat. Mají tam "ochutnávkové" kurzy na pár hodin ale i dlouhodobé semestrální, najdete tam i kurzy zdarma, podcasty, blog.
-
React girls
Programovací akademie, skvělá komunita, workshopy, meetupy, mentoring, to všechno najdete u React Girls. Druhý odkaz vede na jejich Youtube kanál kde najdete záznamy přednášek z meetupů.
-
Udemy
Tutoriály všeho druhu v Angličtině formou videí, můžete si k nim zapnout anglické titulky. Když si web otevřete v anonymním okně, můžete si ulovit kurz za skvělou cenu. Nasajete u toho i IT angličtinu.
-
Codecademy
Interaktivní kurzy v angličtině, některé i zdarma. Za zmíňku určitě stojí Learn JavaScript ve ktérém se můžete naučit základy moderního JavaScriptu.
-
Core Skill
Pokud se chcete vzdělávat individuálně, mohl by se vám hodit mentoring (placený), na pomoc k získání první práce v IT. Osobně jsem nezkoušela, znám z junior.guru, takže kvality se nebojte.
-
Italki
Bojujete s angličtinou? Italki je svělá platforma s lektory z celého světa, kde vás rychle rozmluví, můžete zkusit více lektorů dokud vám nepadne styl výuky, lektoři se tam předhánějí ve výrobě úžasných výukových materiálů na míru.
-
Unsplash
Fotobanka s fotkama zdarma, možno použít fotky i komerčně, obrovský výběr, ve Figmě najdete plugin a můžete tak fotky rychle přidávat do návrhů webů
-
Pixabay
Fotobanka s fotkama zdarma, možno použít fotky i komerčně, obrovský výběr, ve Figmě najdete plugin a můžete tak fotky rychle přidávat do návrhů webů
-
Oto255
Nástoj na odstíny barvy. vybere si z kostiček na úvodní straně nebo zadáte kód barvy a aplikace vám vygeneruje její odstíny. Skělé třeba na hover efekt tlačítek, tónovaní.
-
Adobe Color
Nástroj na hraní si s barvami, asi nejkomplexnější, zjistíte si k barvě doplňkovou, kontrastní, uděláte paletu, jsou tam i hotové palety barev.
-
Roadmap Frontend
Roadmapa frontendu - najdete tu vše o tom co se potřebujete naučit od základů po pokročilé věci
-
Roadmap JavaScript
Roadmapa JavaScriptu - najdete tu vše o tom co se potřebujete naučit od základů po pokročilé věci
-
Font playground
Nástroj na výběr kombinací fontů, můžete si zkusit jak k sobě vybrané fonty ladí, jak vedle sebe vypadají.
-
Colordot
Nástroj na rychlé vytvoření palety barev, barvy u sebe vidíte na velkých plochách což považuji za velkou výhodu oproti jiným nástrojům.
-
CodeWars
Nevyčerpatelný zdroj na procvičování programování od jednoduchých až po opravdu složité, můžete se přidat do nějaké skupiny nebo si procvičovat sami.
-
Sass průvodce
Průvodce preprocesorem CSS v češtině, není úplně aktuální, ale i tak je to cenný zdroj informací.
-
CSS clip-path maker
Appka "vyřízne" tvar do HTML prvku přes který pak bude vidět např. obrázek na pozadí, jsou tam předdefinované základní tvary které lze libovolně upravovat
-
Icons8
Free ikony v asi 50 různých stylech.
-
Skillmea
Slovenský výukový portál se spoustou komplexních IT kurzů. Placený portál, systém měsíčních plateb.
-
IT Angličtina
Potřebujete zlepšit odbornou angličtinu? Zkuste Geek Power. Výborná lektorka Verča se mám bude věnovat individuálně a veškeré materiály pro své studenty má přehledně zpracované na svém webu.
-
Cupcake Ipsum
Generátor sladkého a chutného Lorem Ipsum. Snadno si tam navolíte počet odstavců a vyberete ze tří velikostí
-
Font Generator
Můžete si nechat vygenerovat různé kombinace fontů nebo třeba jeden vyplnit a k němu si další vygenerovat.
-
Video o Gitu a GitHubu
Yablko ve videu ukazuje základy Gitu a GitHubu
-
Tahák na Figmu
Začínáte s Figmou a chcete se zorientovat? Tento článek vám pomůže.
-
Lapa ninja
Inspirace na web-design
-
Eloquent JavaScript
Pokud se rádi učíte pomocí knih, tady je jedna Kniha o JavaScriptu, online k přečtení.
-
36 párů fontů
Článek kde najdete 36 nakombinovaných párů fontů, pokud taky nikdy nevíte jaké k sobě vybrat, můžete se zkusit inspirovat, jenom si raději hned zkontrolujte jestli mají i sadu českých znaků.
-
Hacker rank
Na této platformě můžete procvičovat své dovednosti v programování, řešit různé algoritmické úlohy a soutěžit s dalšími uživateli. Získat praxi, podobně jako codewars.
-
Frontend mentor
Procvičte si svoje kodérské schopnosti na reálných projektech. Další platforma na získání praxe.
-
Coverr
Chcete video na Váš web? Tady najdete videa zdarma ke stažení.
-
Squoosh
Šikovný zmenšovač obrázků pro váš web.
-
Fffuel
Appka s nástoji pro práci s barvami, SVG generátor gradientů, vzorů, textur, tvarů a pozadí. Příjemnou zábavu přeji :).
-
SVG Repo
Více než 500 000 free SVG ilustrací a ikon
-
Open Clipart
Skoro 200 000 free ilustrací s opravdu jednoduchou obsluhou, bez nutnosti registrace
-
Freepik
Najdete zde opravdu krásné free ilustrace, ale i fotky, videa, fonty, ikony.
-
UnDraw
Free ilustrace u kterých si můžete rovnou nastavit v jaké je chcete barvě (kompletní paleta barev). Jde o ilustrace v jedom stylu a obvykle je na nich člověk provádějící nějakou činnost.
-
DrawKit
Ilustrace, (nejen free) jde o různé kolektce v jednotném stylu. Má i Figma plugin.
-
Veřejné API
Seznam veřejných API
-
Free SVG
SVG zdarma volně ke stažení
-
Glass UI
Free generátor CSS - glassmorphismu - efektu pískovaného skla
-
Shadows brumm
Free generátor CSS stínů - box-shadow
-
Get Waves
Free generátor SVG - vygenerujte si tvarovaný background - vlny a jiné tvary
-
Neumorphism
Free generátor CSS - Neumorphismu - soft UI
-
Hero Patterns
Free generátor SVG opakovatelných vzorů pozadí - boží záležitost.
-
Blob maker
Free generátor SVG - skvrny, fleky, kaňky :)
-
Haikei
Objevujte a vytvářejte neomezené vizuály pro vaše návrhy
-
Tiny Img
Free converter obrázků na WebP formát, umí i kompresi JPG obrázků. Nenarazila jsem na limit.
-
Remove BG
Free odstraňovač pozadí obrázků.
-
GIT cheat-sheet
Tahák na GIT, práce s větvemi
-
Blog Joshe Comeau
Blog skvělého frontendisty a lektora na témata React, animace, CSS, JavaScript, Next.js, kariéra, performance s interaktivními prvky, do hloubky vysvětleno. Také interaktivní průvodce gridem a flexboxem.
-
Fancy border radius
Skvrny, fleky, kaňky podruhé, ale trochu jinak. Dají se totiž vytvořit pouze s CSS vlastností border-raadius.
-
Negativní margin
S marginem se dá také kouzlit, tedy hlavně s jeho negativními hodnotami.
-
CSS Writing modes
Možná jste někdy na nějakém webu viděli vertikální text a premýšleli jak na to. Writing mode je tu hlavně proto, že jazyky se píší v různých směrech, jako třeba čínština zhora dolů, nebo arabština zprava doleva, můžeme je ale použít i když chceme třeba vedle obrázku vertikální text.
-
Jak si zapamatovat úplně cokoliv
Jak si zapamatovat úplně cokoliv a skoro navždycky - to slibuje tento článek. S kóděním zdánlivě nesouvisející téma, ale my switcheři víme své.
-
Ovládni JavaScript
Platforma na učení JavaScriptu, zatím jsem nezkoušela, ale vypadá opravdu zajímavě.
-
Total Typescript
Kurz Typescriptu pro začátečníky.
-
Z-index
Tajemstvím zahalená CSS vlastnost z-index odhalena :)
-
Ovládni JavaScript s pomocí chat GPT
Článek o tom jak vám chat GPT může pomoci s učením Javascriptu.
-
CSS tricks
Pro kodéra must-know web, jsou tam vysvětleny různé ošemetné CSS záležitosti, jsou tam také výborné průvodce flexboxem a gridem které mívám při kódění často otevřené v záložce nebo článek o přístupnosti webu.
-
Průvodce flexboxem
Průvodce flexboxem se kterým to prostě dáte!
-
Průvodce gridem
Průvodce gridem se kterým to prostě dáte!
-
Průvodce přístupností
Přístupnost webů pro lidi co třeba špatně vidí nebo jsou úplně bez zraku. Demystifikace čteček webového obsahu. Pro člověka co se s tím nikdy nepotkal strašně těžce uchopitelné jak to vlastně funguje a zárověň i dost opomíjemná věc.
-
Nevymýšlej znovu modál!
Objevte html tag dialog a ušetřete si spoustu času a práce. A navíc zlepšíte přístupnost vyskakovacího okna pro čtečky webového obsahu.
-
CSS zápisy formátů barev
Jaký použít formát zápisu barev - hexa-decimální, RGB nebo HSL? Dozvíte se v interaktivním článku.
-
Knihovna ikon
Knihovna na ikony, používám tedy hlavně v React projektech protože si tam ikony naimportujete jako takové komponenty a je to super jednoduché na použití