Frontend vývojář: webové stránky na HTML/CSS/JavaScript - kurz 18 000 rub. z Coddy School of Programming for Children, školení 3 moduly (měsíce)

Různé   /   by admin   /   December 03, 2023

click fraud protection

Věk: 11-14 let

Úroveň: pro začátečníky.

Délka: od 3 modulů (měsíců), od 24 hodin*.

Formát: individuální a skupinové lekce, offline a online (v reálném čase).

Počet dětí: od 1 do 8.

Cena:

od 750 rub./hod v online skupině,
od 850 rub./hod v offline skupině,
od 1050 rub./hod individuálně online,
od 1980 rub./hod jednotlivě offline.

V moderním světě se každá seriózní společnost snaží získat své vlastní webové stránky, protože to je druh „vizitku“ na internetu, bez níž podnikání již vypadá zastarale, lehkovážně a beznadějný.

Profese webmastera se v posledních letech vyšvihla do čela žebříčku nejatraktivnějších a nejžádanějších profesí v IT oblasti. V tomto ohledu je v současné době stále více lidí ochotných absolvovat školení v tvorbě webových stránek s poškrábat a zvládnout tuto prestižní specialitu, aby měl stabilní a slušný zisk. Naše programovací škola CODDY doporučuje nezdržovat a přihlásit své dítě do kurzu “Frontend Developer: Webové stránky v HTML/CSS/JavaScript” právě teď! Účelem tohoto kurzu je naučit děti vytvářet moderní webové stránky a seznámit je se základy profese vývojáře rozhraní.

instagram viewer

Co je webmastering a jak se stát webmasterem?

Webmastering je soubor činností pro vývoj, tvorbu, optimalizaci a propagaci webových stránek. Vše, co je tak či onak spojeno s výrobou a údržbou stránek. To je celá věda, která vyžaduje určité dovednosti a znalosti v mnoha oblastech, jako je programování webu, design, copywriting, SEO a další.

Na moderním internetu si každý může vytvořit svůj vlastní web. Kvalita webových projektů však zpravidla ponechává mnoho přání. Aby byl web konkurenceschopný, musíte k problematice přistupovat kompetentně a zapojit do práce profesionály. Programátor pomocí programovacího jazyka vytvoří webové stránky a spojí je do jednoho objektu, poté je rozloží pro správné zobrazení v prohlížečích. Zvláštní pozornost by měla být věnována rozhraní budoucího webu, zajištění jeho správného provozu a zabezpečení. Profesionální webmaster tedy dělá vše výše uvedené sám! Jedná se o programátora, webdesignéra, designéra rozložení, administrátora a moderátora a někdy i SEO copywritera.

Jaké znalosti a technologie musíte ovládat, abyste se stali webmasterem?

Než se stanete webmasterem, musíte se seznámit a nastudovat mnoho technologií, programů a systémů. Zde jsou hlavní kroky, které položí základy vaší budoucí profese:
1. Učení HTML - Hyper Text Markup Language.
Jakmile se začnete učit HTML, pochopíte strukturu webového dokumentu a naučíte se vytvářet jednoduché webové stránky.

2. Učení CSS – jazyk stylu zobrazení webové stránky. Díky zavedení CSS stylů do dokumentu získává web svou vlastní chuť a jedinečný vzhled. Webové stránce můžete nastavit barvu, velikost, pozadí a mnoho dalšího.

3. Úvod do CMS – redakční systém nebo „engine“ webu.

4. Zvládnutí Adobe Photoshop – grafický editor s neuvěřitelným množstvím možností. Mnoho specialistů jej používá ke kreslení návrhů a vytváření vlastních originálních a vysoce kvalitních rozvržení.

5. Základní znalost programovacích jazyků. Naprostá většina webů používá PHP a JavaScript. Rychlost webu, jeho zabezpečení, možná škálovatelnost a podpora od vývojářů třetích stran závisí na kvalitě psaných skriptů. Jinými slovy, musíte umět psát kvalitní kód.

6. Práce s databázemi.

A co je nejdůležitější, webmaster musí vytvářet originální stránky. S příchodem hotových řešení pro všechny populární CMS je web s originálním designem bez šablony žádanější než kdy jindy. Profesionální webmaster umí nejen pracovat se sadou hotových programů, ale také tyto hotové programy psát. Abyste dosáhli této úrovně, budete muset tvrdě pracovat. A náš kurz „Frontend Developer: Webové stránky na HTML/CSS/JavaScript“ pomůže vašemu dítěti udělat první sebevědomé kroky v tomto obtížném úkolu. Pod vedením zkušených pedagogů se naučí vytvářet informativní webové stránky s originálním grafickým designem.

Během vzdělávacího procesu se budou probírat následující témata:

1. Základy jazyka HTML (Hypertext Markup Language) a kaskádových stylů (CSS)

2. rozložení moderních webových stránek

3. hloubkové studium vlastností stylování webových stránek

4. základy práce s Adobe Photoshopem a práce s rozvržením designu webových stránek

V počáteční fázi se seznámíme se základy profese vývojáře webového rozhraní a prostudujeme si pravidla budování struktury a logiky webových stránek, získávání praktických programátorských dovedností webová rozhraní. Každý student se naučí základy psaní HTML a CSS kódu.

Po dokončení tohoto tématu si vaše dítě vytvoří vlastní moderní webové stránky.

Druhý modul obsahuje hloubkovou studii programovacích nástrojů webového rozhraní. V tomto modulu budeme pokračovat v našem úvodu do HTML a CSS. Studenti se v praxi seznámí s algoritmem a strukturou tvorby moderních webových stránek, samostatně vytvoří interaktivní galerii obrázků a svůj projekt zveřejní na internetu.

Během třetího modulu budeme pokračovat v seznamování s profesí webového vývojáře, získáme praktické dovednosti v práci s Adobe Photoshop a studujeme moderní nástroje webdesignu. Ve fázi tvorby designu webových stránek student získá základní dovednosti práce v grafickém editoru. Budeme analyzovat různé možnosti designu webových stránek, prodiskutujeme výhody a nevýhody každého z nich a zjistíme, jak lze design vylepšit.

Na konci kurzu s mými studenty vytvoříme web pomocí hotového designového layoutu s využitím nejnovějších webových programovacích nástrojů a výsledek naší práce zveřejníme na internetu.

Ella T.
Kurzy

11

kurzy

lektor kurzu:
„Minecraft: Úvod do umělé inteligence“, „Unity 3D“, „Frontend Developer: Webové stránky HTML/CSS/JavaScript“, „Kreslení ve stylu Anime“, „Programování pro nejmenší“, „Programování v Minecraftu“, „Designové myšlení“, „Boti v Pythonu“, „Grafický design Photoshopu“, "Videoblogování"

Vzdělání:

Četné kurzy pro zlepšení IT dovedností v mezinárodních společnostech (Chatbot Hackathons, Prototyping v oblasti umělé inteligence, IT architektura atd.). University of Heilbronn, Heilbronn, Německo (Master of Business Administration). Běloruská státní ekonomická univerzita, Minsk, Bělorusko (Master of Business Administration).

Zkušenosti:

Věnuje se klientskému poradenství právních systémů, systémů pro řešení auditu a automatizaci procesů, působí v inovativní oblasti IT a start-upu v Německu v mezinárodní společnosti.

zájmy:

Osobní rozvoj, vášeň pro sdílení znalostí, networker, world opener, life designer, sportovní aktivista.

„Dnes je celý svět propojen: lidé, země, ekonomiky, technologie atd. Programování je klíčovou kompetencí budoucnosti. Pomáhá vám lépe porozumět světu budoucnosti, aktivně jej utvářet a být inovativním členem vzrušující společnosti bez hranic. Schopnost kódovat otevírá našim dětem v tomto světě nekonečné dveře do budoucnosti a dělá z nich ambasadory nových technologií.“

Sergey T.
Kurzy

9

kurzy

lektor kurzu:
„Minecraft: Úvod do umělé inteligence“, „Unity 3D“, „Frontend Developer: Webové stránky HTML/CSS/JavaScript“, „Kreslení ve stylu Anime“, „Programování pro nejmenší“, „Programování v Minecraftu“, „Designové myšlení“, „Boti v Pythonu“, „Grafický design Photoshopu“, "Video blogování"

Vzdělání:

Četné kurzy pro zlepšení IT dovedností v mezinárodních společnostech (SAP, automatizace procesů, e-commerce). FOM University of Stuttgart, Stuttgart, Německo (Master of Business Administration) Karaganda State Technical University, Karaganda, Kazachstán.

Zkušenosti:

Zakladatel úspěšného internetového obchodu s elektro v Německu, zabývající se klientským poradenstvím v oboru automatizace prodejních procesů, působí v oblasti IT prodeje v Německu v mezinár společnosti.

zájmy:

Cestování, rybaření, sport, šachy.

I. Goethe řekl: „Můžete se naučit jen to, co milujete“

1. modul 

První den

Základy rozvržení webové stránky

  • Struktura HTML dokumentu
  • První webová stránka využívající značkovací jazyk HTML
  • Představujeme editor Sublime Text 3

Výsledek lekce: vytvořil první webovou stránku, naučil se základní způsoby označování textu pomocí značek.
Praktický úkol: vytvořit webovou stránku pomocí značkovacího jazyka Html.

Druhý den

Atributy prvku div a tagu

  • Práce s webovým inspektorem
  • Vytvoření vícestránkového webu
  • Naučte se nové prvky a atributy značek

Výsledek lekce: naučili se přidávat odkazy a obrázky na stránky, přidávali atributy do značek
Praktický úkol: vytvořit svůj první vícestránkový web.

Den třetí

Kaskádové styly

  • Úvod do kaskádových stylů
  • Stylování prvků HTML
  • Pomocí selektorů
  • Instalace a práce s pluginem Emmet a přidání textu Lorem

Výsledek lekce: naučili se, jak změnit barvu pozadí a barvu textu prvků HTML, používat dva typy selektorů, vytvářet text Lorem pomocí pluginu Emmet
Praktický úkol: změnit vzhled stránky pomocí vlastností CSS.

Den čtvrtý

Tvorba webových stránek Jaguar

  • Vytvoření vícestránkového webu Jaguar
  • Vytvoření struktury souboru projektu 
  • Práce s výplní a výplní prvků

Výsledek lekce: naučil se pracovat s externím CSS souborem, seznámil se s vnějším a vnitřním vyložením prvků.
Praktický úkol: vytvořit vícestránkový web Jaguar.

2. modul

První den

Krabicový model v CSS

  • Box Model v CSS
  • Vytváření neobvykle tvarovaných bloků
  • Práce s vlastností box-sizing pro změnu způsobu výpočtu šířky a výšky prvku

Výsledek lekce: naučili se vytvářet bloky neobvyklých tvarů, používat vlastnost box-sizing s hodnotou border-box ke správnému výpočtu šířky prvku a nastavovat velikosti prvků v různých měrných jednotkách
Praktický úkol: vytvářet karty s textem pomocí různých hodnot vlastností velikosti boxu.

Druhý den

Pokročilá manipulace s textem v CSS

  • Různé typy písem
  • Výběr písem pro webové stránky
  • Vytváření nových stylů, které vám umožní přizpůsobit zobrazení textu na pokročilé úrovni

Výsledek lekce: vytvořil stránku pomocí různých typů písem, zlepšil vzhled a čitelnost textu pomocí předaných vlastností.
Praktický úkol: vytvořit stránku pomocí základních typů písem.

Den třetí

Umístění prvků v CSS

  • Práce s vlastností float
  • Typy umístění prvků na stránce
  • vlastnost pozice

Výsledek lekce: naučili pracovat s vlastnostmi float a position, vytvářet obtékání textu kolem obrázků
Praktický úkol: vytvořte webovou stránku a umístěte na ni prvky pomocí vlastností float a position

Den čtvrtý

Vytvoření stránky blogu

  • Vytvoření stránky blogu
  • Vlastnosti umístění prvků pro umístění nabídek a příspěvků na stránku
  • Sémantické značky

Výsledek lekce: naučili pracovat se sémantickými značkami pomocí polohovacích vlastností, umístili hlavní komponenty blogu na stránku
Praktický úkol: vytvořit stránku blogu pomocí sémantických značek

3. modul

První den

Pseudotřídy a práce s obrázky v CSS

  • Použití obrázků na pozadí na webové stránce
  • Pseudotřídy se vznášejí, jsou aktivní a navštěvované
  • Změna stylu jednoho prvku při aktivaci pseudotřídy na jiném prvku
  • Vytváření vzorů pozadí

Výsledek lekce: naučili se pracovat s obrázky na pozadí, studovali vlastnosti pro práci s obrázky
Praktický úkol: přidat externí změny do prvků, když na ně najedete kurzorem myši.

Druhý den

FlexBox v CSS

  • Práce s flexibilním rozvržením rámečku CSS
  • Vlastnosti pro zarovnání prvků v kontejneru Flex
  • Vzdělávací hra Flex-frog

Výsledek lekce: naučili pracovat s technologií Flex, aby vytvořili flexibilní rozvržení, dokončili hru flex-frog, aby zpevnili pokrytý materiál
Praktický úkol: dokončete hru flex-frog, abyste zpevnili pokrytý materiál

Den třetí

Vývoj webu Sneakers shop. Část 1

  • Vytvoření struktury webu s modely 
  • Připojení k webu s písmy
  • Vlastnosti záhlaví webu a jeho podřízených prvků
  • Funkce pro vytvoření pozadí stránky s přechodem

Výsledek lekce: vytvořil strukturu webu s modely, propojil písmo s webem.
Praktický úkol: vyberte a stáhněte obrázky s modely, přidejte stín do záhlaví webu

Den čtvrtý

Vývoj webu Sneakers shop. Část 2

  • Dokončení prací na webu
  • Vytvoření bloku s kartami 
  • Změna chování prvků při najetí na ně
  • Technologie FlexBox pro umístění karty 

Výsledek lekce: vytvořili webovou stránku s modelovými kartami 
Praktický úkol: přidat galerii pomocí technologie FlexBo

4. modul

První den

Rozložení mřížky v CSS

  • Úvod do systému Grid
  • Vytvoření stránky pomocí mřížky
  • Vlastnosti pro pokročilou práci s buňkami mřížky 

Výsledek lekce: studovali systém dvourozměrného rozvržení (CSS Grid Layout), naučili se, jak umístit buňky mřížky na stránku.
Praktický úkol: dokončete hru grid garden a konsolidujte pokrytý materiál.

Druhý den

Pseudoprvky po a před

  • Pseudoprvky před a po
  • Kombinace obrázku s textem uvnitř 
  • Prvky s pseudoprvky prvního písmene a prvního řádku

Výsledek lekce: naučili se pracovat s pseudoprvky předtím, než první písmeno a první řádek, zkombinovat pseudoprvky s různými vlastnostmi a vytvořit krásné bloky
Praktický úkol: vytvořte prvek pomocí pseudoprvků after a befor.

Den třetí

Animace a transformace v CSS

  • CSS transformace
  • Aplikace transformací na prvky HTML
  • Vytváření animovaných bloků v CSS
  • Použití funkcí časování na klíčové snímky

Výsledek lekce: naučili se pracovat s transformacemi v CSS, vytvářet nekonečné animace v CSS.
Praktický úkol: vytvořit tlačítko a při najetí myší k němu přidat transformace.

Den čtvrtý

Procvičte si tvorbu animací v CSS

  • Aplikace animace a transformace v praxi
  • Vytvoření animovaného orbitálního systému planet v naší sluneční soustavě

Výsledek lekce: vytvořili stránku demonstrující pohyb planet ve sluneční soustavě a animované pozadí.
Praktický úkol: vytvořit animovaný orbitální systém planet v naší sluneční soustavě.

5. modul

První den

Vytvoření internetového obchodu

  • Co je to internetový obchod?
  • Vytvoření struktury projektu
  • Nastavení projektu

Výsledek lekce: začala vytvářet internetový obchod.
Praktický úkol: vyberte ikony, které se mají na webu použít.

Druhý den

Vytvoření záhlaví internetového obchodu

  • Proměnné v CSS a jak je používat
  • Připojení písem k externí šabloně stylů pomocí funkce url
  • Záhlaví internetového obchodu, jeho styling
  • Přidání dalších funkcí nabídky pomocí programovacího jazyka JavaScript

Výsledek lekce: nakonfigurovali globální proměnné v projektu, vytvořili multifunkční hlavičku s nabídkou, připojili soubor Javascript pro přidání dalších funkcí nabídky.
Praktický úkol: přidat změnu pozadí záhlaví webu při posouvání stránky

Den třetí

Vytvoření první obrazovky s hlavním produktem 

  • HTML struktura prezentačního bloku
  • Mřížkový systém pro správné zobrazení prvků 
  • Hodnoty vlastností CSS pomocí proměnných
  • Stylingové prvky

Výsledek lekce: vytvořil prezentační část internetového obchodu 
Praktický úkol: vytvořit prezentační část internetového obchodu

Den čtvrtý

Vytvoření bloku s oblíbenými produkty

  • HTML značky pro blok s produkty
  • Styling pro produktové karty
  • Mřížka pro umístění karty
  • Stylizace bloku s historií firmy

Výsledek lekce: vytvořil blok s oblíbenými produkty a historií společnosti
Praktický úkol: přidat vnější a vnitřní výplň do prvků v bloku s historií společnosti

6. modul

První den

Vytvoření posuvníku s recenzemi zákazníků.

  • Kontrolní blok
  • Způsoby, jak vytvořit rolovatelné kontejnery v CSS
  • vlastnosti scroll-behavior a scroll-snap-type
  • Kotevní body posuvníku

Výsledek lekce: vytvořil posuvník s recenzemi zákazníků pomocí HTML a CSS.

Praktický úkol: přidejte kotevní body do hlavních sekcí webu a po kliknutí na tlačítko vytvořte automatické rolování k těmto blokům.

Druhý den

Práce s formuláři a video obsahem.

  • HTML5 tagy pro vkládání videoobsahu na web
  • Styling sekce s celoobrazovkovým videoklipem
  • Značka vstupního pole - a její atributy
  • Tag pro vytváření formulářů v Html
  • Úprava stylu prvku pro zadávání textu

Výsledek lekce: vytvořili sekci s videem a blok s formulářem zpětné vazby

Praktický úkol: vytvořit formulář zpětné vazby, stylizovat prvky

Den třetí

Vytvoření samostatné stránky galerie

  • Vlastní mřížka mřížky pro stránku galerie
  • Přidávání bloků s obrázky do mřížky
  • Pseudoprvky a různé animace bloků s obrázky
  • CSS filtry pro zlepšení vizuálního designu galerie

Výsledek lekce: vytvořili samostatnou stránku s fotogalerií

Praktický úkol: pomocí různých typů polohování k vytvoření průsvitného neobvyklého pozadí.

Den čtvrtý

Přizpůsobení obsahu pro všechny typy zařízení.

  • Způsoby přizpůsobení obsahu pro mobilní zařízení
  • Dotazy na média za účelem použití různých vlastností na stejný prvek na zařízeních s různou šířkou
  • Pravidla CSS pro tři typy zařízení

Výsledek lekce: Web jsme přizpůsobili pro tablety a telefony.

Praktický úkol: pomocí dotazů na média změňte hodnoty vlastností prvků HTML, abyste přizpůsobili obsah všem typům zařízení

7. modul

První den

Úvod do rámce Tailwind SS.

  • Co jsou rámce a jak urychlují proces vývoje projektu?
  • Instalace frameworku Tailwind CSS a pluginů
  • Koncepty rámce CSS Tailwind
  • Práce s typografií a barvami v Tailwind CSS

Výsledek lekce: vytvořili první webovou stránku pomocí frameworku Tailwind CSS.
Praktický úkol: vytvořit blok s textem, prvky stylu pomocí tříd tailwind.

Druhý den

Kurzy Tailwind pro vytvoření responzivního webu

  • Práce s třídami Tailwind při vytváření responzivního webu
  • Třídy pro přidávání efektů přechodu a zaostření
  • Třídy pro přidávání stínů do prvků
  • Třídy pro práci s velikostmi prvků
  • Třídy pro práci s vnější a vnitřní výplní prvků

Výsledek lekce: Vytvořili jsme adaptivní stránku pro všechny typy zařízení.
Praktický úkol: vytvářet tlačítka, přidávat efekty při kliknutí na ně pomocí tříd Tailwind

Den třetí

Tailwind Flex rozložení.

  • Práce s rozložením Tailwind Flex
  • Třídy pro zarovnání podřízených prvků v kontejneru Flex
  • Vytvoření karty s cenou produktu
  • Vytváření indikátorů pokroku
  • Práce s pseudoprvky v Tailwind CSS

Výsledek lekce: vytvořil Flex kontejner s produktovými kartami
Praktický úkol: vytvořit kartu s popisem produktu.

Den čtvrtý

Systém mřížky v Tailwind CSS.

  • Vlastnosti řádkového a souřadného rozpětí
  • Vlastnosti pro automatické vyplnění prázdného prostoru v mřížce prvky
  • Stránka projektového týmu

Výsledek lekce: vytvořili adaptivní stránku projektového týmu pomocí systému Tailwind Grid.
Praktický úkol: přidat efekty k prvkům mřížky, když na ně umístíte ukazatel myši

8. modul

První den

Nastavení projektu

  • Nastavení projektu webu aplikace „Spravovat“.
  • Vytvoření responzivní hlavičky webu
  • Vytvoření hamburgerového menu pomocí JavaScriptu
  • Vytvoření prezentační sekce s produktem

Výsledek lekce: vytvořili první obrazovku webu aplikace „Manage“.
Praktický úkol: přidat obrázek na pozadí na první obrazovku.

Druhý den

Vytvoření sekce s popisem aplikace

  • Část s popisem aplikace a jejích výhod
  • Upravte vytvořený blok pro všechny typy zařízení
  • Sekce s ovládáním aplikace
  • Použijte na obrázek filtry Tailwind

Výsledek lekce: vytvořili dvě sekce webu „Spravovat“
Praktický úkol: vytvořit další sekci s historií vytváření aplikace

Den třetí

Vytvoření sekce o projektovém týmu

  • Sekce o týmu
  • Posuvník využívající Tailwind CSS a Javascript
  • Zaměstnanecké karty

Výsledek lekce: vytvořili sekci o projektovém týmu
Praktický úkol: vytvořte sekci s tlačítkem CTA

Den čtvrtý

Vytvoření sekce s cenami 

  • Vytvořte sekci s cenami 
  • Vytvořte responzivní zápatí webu
  • Dokončete projekt

Výsledek lekce: dokončil práci na projektu, vytvořil web pro aplikaci „Manage“.
Praktický úkol: dokončit projekt, umístit stránky na internet

 9. modul

První den

Začněte pracovat na vlastním projektu.

  • Vyberte téma projektu
  • Začněte vytvářet vlastní webové stránky

Výsledek lekce: bylo vybráno téma a práce na projektu byla zahájena
Praktický úkol: Projektová práce

Druhý den

Pokračující práce na projektu

  • Pokračujte v práci na projektu
  • Opravte chyby v projektu

Výsledek lekce: tvorba webových stránek
Praktický úkol: Projektová práce

Den třetí

Příprava prezentace projektu.

  • Popište svůj projekt
  • Vytvořte šablonu prezentace k obhajobě svého projektu
  • Dokončete projekt
  • Umístěte stránku na internet

Výsledek lekce: připravili prezentaci a nacvičili projev.
Praktický úkol: připravit prezentaci projektu, umístit web na internet.

Den čtvrtý

Ochrana projektu.

  • Dokončete prezentaci projektu
  • Obhajujte svůj projekt před publikem

Výsledek lekce: Dokončili jsme práci na projektu kurzu a představili jej rodičům.
Praktický úkol: dokončit projekt, připravit a provést prezentaci.

Štítky cloud
Hodnocení
0
Zobrazení
0
Komentáře
YOU MIGHT ALSO LIKE
Instagram story viewer