Frontend developer: webové stránky na HTML/CSS/JavaScript - kurz 18 000 rub. z Coddy School of Programming for Children, tréning 3 modulov (mesiace)

Rôzne / by admin / December 03, 2023

click fraud protection

Vek: 11-14 rokov

Úroveň: pre začiatočníkov.

Trvanie: od 3 modulov (mesiace), od 24 hodín*.

Formát: individuálne a skupinové lekcie, offline a online (v reálnom čase).

Počet detí: od 1 do 8.

Cena:

od 750 rub./hod v online skupine,
od 850 rub./hod v offline skupine,
od 1050 rub./hod individuálne online,
od 1980 rub./hod individuálne offline.

V modernom svete sa každá seriózna spoločnosť snaží získať svoju vlastnú webovú stránku, pretože je to druh „vizitku“ na internete, bez ktorej podnikanie už vyzerá zastaralo, neseriózne a beznádejný.

Profesia webmastera sa v posledných rokoch vyšvihla na čelo rebríčka najatraktívnejších a najžiadanejších profesií v IT oblasti. V tomto smere je v súčasnosti čoraz viac ľudí ochotných absolvovať školenie v tvorbe webových stránok s poškriabať a zvládnuť túto prestížnu špecialitu, aby ste mali stabilnú a slušnú zárobky. Naša programátorská škola CODDY odporúča neodkladať a prihlásiť svoje dieťa do kurzu “Frontend Developer: Webové stránky v HTML/CSS/JavaScript” práve teraz! Cieľom tohto kurzu je naučiť deti vytvárať moderné webové stránky a oboznámiť ich so základmi profesie vývojára rozhrania.

instagram viewer

Čo je to webmastering a ako sa stať webmasterom?

Webmastering je súbor činností pre vývoj, tvorbu, optimalizáciu a propagáciu webových stránok. Všetko, čo je tak či onak spojené s výrobou a údržbou stránok. Ide o celú vedu, ktorá si vyžaduje určité zručnosti a znalosti v mnohých oblastiach, ako je programovanie webu, dizajn, copywriting, SEO a iné.

Na modernom internete si každý môže vytvoriť vlastnú webovú stránku. Kvalita webových projektov však spravidla ponecháva veľa požiadaviek. Aby bol web konkurencieschopný, musíte k problematike pristupovať kompetentne a zapojiť do práce profesionálov. Programátor pomocou programovacieho jazyka vytvorí webové stránky a spojí ich do jedného objektu, potom ich rozloží na správne zobrazenie v prehliadačoch. Osobitná pozornosť by sa mala venovať rozhraniu budúcej stránky, zabezpečeniu jej správnej prevádzky a bezpečnosti. Takže, profesionálny webmaster robí všetko vyššie sám! Ide o programátora, webdizajnéra, dizajnéra rozloženia, administrátora a moderátora a niekedy aj SEO copywritera.

Aké znalosti a technológie musíte ovládať, aby ste sa stali webmasterom?

Než sa stanete webmasterom, musíte sa zoznámiť a naštudovať si množstvo technológií, programov a systémov. Tu sú hlavné kroky, ktoré položia základy vašej budúcej profesie:
1. Učenie HTML – hypertextový značkovací jazyk.
Keď sa začnete učiť HTML, pochopíte štruktúru webového dokumentu a naučíte sa vytvárať jednoduché webové stránky.

2. Učenie CSS – jazyk štýlu zobrazenia webovej stránky. Vďaka zavedeniu CSS štýlov do dokumentu získava stránka svoju príchuť a jedinečný vzhľad. Webovej stránke môžete nastaviť farbu, veľkosť, pozadie a oveľa viac.

3. Úvod do CMS – redakčný systém alebo „motor“ stránky.

4. Ovládanie programu Adobe Photoshop – grafický editor s neskutočným množstvom možností. Mnoho špecialistov ho používa na kreslenie návrhov a vytváranie vlastných originálnych a kvalitných rozložení.

5. Základná znalosť programovacích jazykov. Prevažná väčšina webových stránok používa PHP a JavaScript. Rýchlosť stránky, jej bezpečnosť, možná škálovateľnosť a podpora od vývojárov tretích strán závisia od kvality napísaných skriptov. Inými slovami, musíte vedieť napísať kvalitný kód.

6. Práca s databázami.

A čo je najdôležitejšie, správca webu musí vytvárať originálne stránky. S príchodom hotových riešení pre všetky populárne CMS je webová stránka s originálnym dizajnom bez šablón viac žiadaná ako kedykoľvek predtým. Profesionálny webmaster dokáže nielen pracovať so sadou hotových programov, ale tieto hotové programy aj písať. Aby ste dosiahli túto úroveň, budete musieť tvrdo pracovať. A náš kurz „Frontend Developer: Webové stránky na HTML/CSS/JavaScript“ pomôže vášmu dieťaťu urobiť prvé sebavedomé kroky v tejto náročnej úlohe. Pod vedením skúsených lektorov sa naučí vytvárať informačné webové stránky s originálnym grafickým dizajnom.

Počas vzdelávacieho procesu sa budú študovať tieto témy:

1. Základy jazyka HTML (Hypertext Markup Language) a kaskádových štýlov (CSS)

2. rozloženie moderných webových stránok

3. hĺbkové štúdium vlastností štýlu webovej stránky

4. základy práce s programom Adobe Photoshop a práca s návrhmi webových stránok

V počiatočnej fáze sa zoznámime so základmi profesie vývojára webového rozhrania a preštudujeme si pravidlá budovanie štruktúry a logiky webových stránok, získavanie praktických programátorských zručností webové rozhrania. Každý študent sa naučí základy písania HTML a CSS kódu.

Po dokončení tejto témy si vaše dieťa vytvorí vlastnú modernú webovú stránku.

Druhý modul obsahuje hĺbkovú štúdiu programovacích nástrojov webového rozhrania. V tomto module budeme pokračovať v našom úvode do HTML a CSS. Študenti sa v praxi oboznámia s algoritmom a štruktúrou tvorby moderných webových stránok, samostatne vytvoria interaktívnu galériu obrázkov a zverejnia svoj projekt na internete.

Počas tretieho modulu budeme pokračovať v oboznamovaní sa s profesiou web developera, získame praktické zručnosti pri práci s Adobe Photoshop a študujeme moderné nástroje webdizajnu. Vo fáze tvorby dizajnu webovej stránky študent získa základné zručnosti v práci v grafickom editore. Budeme analyzovať rôzne možnosti dizajnu webových stránok, prediskutujeme výhody a nevýhody každého z nich a zistíme, ako možno dizajn vylepšiť.

Na konci kurzu s mojimi študentmi vytvoríme webovú stránku pomocou hotového dizajnového layoutu s využitím najnovších nástrojov na programovanie webu a výsledok našej práce zverejníme na internete.

Ella T.

kurzy

učiteľ kurzu:
„Minecraft: Úvod do umelej inteligencie“, „Unity 3D“, „Frontend Developer: Webové stránky HTML/CSS/JavaScript“, „Kreslenie v štýle Anime“, „Programovanie pre najmenších“, „Programovanie v Minecrafte“, „Dizajnérske myslenie“, „Boti v Pythone“, „Grafický dizajn Photoshopu“, "Videoblogovanie"

vzdelanie:

Početné kurzy na zlepšenie IT zručností v medzinárodných spoločnostiach (Chatbot Hackathons, Prototyping v oblasti umelej inteligencie, IT architektúra atď.). University of Heilbronn, Heilbronn, Nemecko (Master of Business Administration). Bieloruská štátna ekonomická univerzita, Minsk, Bielorusko (Master of Business Administration).

Skúsenosti:

Venuje sa klientskemu poradenstvu právnych systémov, systémov pre audítorské riešenia a automatizácii procesov, pôsobí v inovatívnej oblasti IT a start-upu v Nemecku v medzinárodnej spoločnosti.

Záujmy:

Osobný rozvoj, vášeň pre zdieľanie vedomostí, networker, otvárač sveta, life designer, športový aktivista.

„Dnes je celý svet prepojený: ľudia, krajiny, ekonomiky, technológie atď. Programovanie je kľúčovou kompetenciou budúcnosti. Pomáha vám lepšie pochopiť svet budúcnosti, aktívne ho formovať a byť inovatívnym členom vzrušujúcej spoločnosti bez hraníc. Schopnosť kódovať otvára našim deťom v tomto svete nekonečné dvere do budúcnosti a robí z nich ambasádorov nových technológií.“

Sergey T.

kurzy

vzdelanie:

Početné kurzy na zlepšenie IT zručností v medzinárodných spoločnostiach (SAP, automatizácia procesov, e-commerce). FOM Univerzita v Stuttgarte, Stuttgart, Nemecko (Master of Business Administration) Štátna technická univerzita v Karagande, Karaganda, Kazachstan.

Skúsenosti:

Zakladateľ úspešného internetového elektro obchodu v Nemecku, zaoberajúci sa klientskym poradenstvom v r oblasti automatizácie predajných procesov, pôsobí v oblasti IT predaja v Nemecku v medzinár spoločnosti.

Záujmy:

Cestovanie, rybolov, šport, šach.

I. Goethe povedal: „Môžeš sa naučiť len to, čo miluješ“

1. modul

Prvý deň

Základy rozloženia webovej stránky

Štruktúra HTML dokumentu
Prvá webová stránka používajúca značkovací jazyk HTML
Predstavujeme editor Sublime Text 3

Výsledok lekcie: vytvorili prvú webovú stránku, naučili sa základné spôsoby označovania textu pomocou značiek.
Praktická úloha: vytvoriť webovú stránku pomocou značkovacieho jazyka Html.

Druhý deň

Atribúty prvku div a značky

Práca s webovým inšpektorom
Vytvorenie viacstránkového webu
Učenie sa nových prvkov a atribútov značiek

Výsledok lekcie: naučili sa pridávať odkazy a obrázky na stránku, pridávali atribúty do značiek
Praktická úloha: vytvorte si svoj prvý viacstránkový web.

Deň tretí

Kaskádové štýly

Úvod do kaskádových štýlov
Úprava štýlu prvkov HTML
Pomocou selektorov
Inštalácia a práca s doplnkom Emmet a pridanie textu Lorem

Výsledok lekcie: naučili sa, ako zmeniť farbu pozadia a farbu textu prvkov HTML, používať dva typy selektorov, vytvárať text Lorem pomocou doplnku Emmet
Praktická úloha: zmeniť vzhľad stránky pomocou vlastností CSS.

Deň štvrtý

Tvorba webovej stránky Jaguar

Vytvorenie viacstránkového webu Jaguar
Vytvorenie štruktúry súboru projektu
Práca s výplňou a výplňou prvkov

Výsledok lekcie: naučil sa pracovať s externým CSS súborom, oboznámil sa s vonkajším a vnútorným výplňom prvkov.
Praktická úloha: vytvorte viacstránkovú webovú stránku Jaguar.

2. modul

Prvý deň

Krabicový model v CSS

Box Model v CSS
Vytváranie netradične tvarovaných blokov
Práca s vlastnosťou box-sizing na zmenu spôsobu výpočtu šírky a výšky prvku

Výsledok lekcie: naučili sa vytvárať bloky neobvyklých tvarov, používať vlastnosť box-sizing s hodnotou border-box na správny výpočet šírky prvku a nastavovať veľkosti prvkov v rôznych merných jednotkách
Praktická úloha: vytvárať karty s textom pomocou rôznych hodnôt vlastností veľkosti polí.

Druhý deň

Pokročilá manipulácia s textom v CSS

Rôzne typy písma
Výber fontov pre webové stránky
Vytváranie nových štýlov, ktoré vám umožňujú prispôsobiť zobrazenie textu na pokročilej úrovni

Výsledok lekcie: vytvoril stránku pomocou rôznych typov písma, zlepšil vzhľad a čitateľnosť textu pomocou odovzdaných vlastností.
Praktická úloha: vytvoriť stránku pomocou základných typov písma.

Deň tretí

Umiestnenie prvkov v CSS

Práca s vlastnosťou float
Typy umiestnenia prvkov na stránke
vlastnosť polohy

Výsledok lekcie: naučili sa pracovať s vlastnosťami float a position, vytvárať obtekanie textu okolo obrázkov
Praktická úloha: vytvorte webovú stránku a umiestnite na ňu prvky pomocou vlastností float a position

Deň štvrtý

Vytvorenie blogovej stránky

Vytvorenie blogovej stránky
Vlastnosti umiestnenia prvkov na umiestnenie ponúk a príspevkov na stránku
Sémantické značky

Výsledok lekcie: naučili pracovať so sémantickými značkami pomocou pozičných vlastností, umiestnili hlavné komponenty blogu na stránku
Praktická úloha: vytvorte blogovú stránku pomocou sémantických značiek

3. modul

Prvý deň

Pseudotriedy a práca s obrázkami v CSS

Používanie obrázkov na pozadí na webovej stránke
Pseudotriedy sa vznášajú, sú aktívne a navštevované
Zmena štýlu jedného prvku pri aktivácii pseudotriedy na inom prvku
Vytváranie vzorov na pozadí

Výsledok lekcie: naučili sa pracovať s obrázkami na pozadí, študovali vlastnosti pre prácu s obrázkami
Praktická úloha: pridať externé zmeny do prvkov, keď na ne umiestnite kurzor myši.

Druhý deň

FlexBox v CSS

Práca s flexibilným rozložením polí CSS
Vlastnosti na zarovnanie prvkov v kontajneri Flex
Vzdelávacia hra Flex-žaba

Výsledok lekcie: naučili sa pracovať s technológiou Flex na vytváranie flexibilných rozložení, dokončili hru flex-frog na konsolidáciu pokrytého materiálu
Praktická úloha: dokončite hru flex-frog, aby ste spevnili pokrytý materiál

Deň tretí

Vývoj webu Sneakers shop. Časť 1

Vytvorenie štruktúry lokality s modelmi
Pripojenie k lokalite písiem
Vlastnosti hlavičky lokality a jej podradených prvkov
Funkcie na vytvorenie pozadia stránky s prechodom

Výsledok lekcie: vytvoril štruktúru webu s modelmi, prepojil písmo s webom.
Praktická úloha: vyberte a stiahnite si obrázky s modelmi, pridajte tieň do hlavičky stránky

Deň štvrtý

Vývoj webu Sneakers shop. Časť 2

Dokončovanie prác na stránke
Vytvorenie bloku s kartami
Zmena správania prvkov pri prechode nad nimi
Technológia FlexBox pre umiestnenie karty

Výsledok lekcie: vytvoril webovú stránku s modelovými kartami
Praktická úloha: pridať galériu pomocou technológie FlexBo

4. modul

Prvý deň

Rozloženie mriežky v CSS

Úvod do systému Grid
Vytvorenie stránky pomocou mriežky
Vlastnosti pre pokročilú prácu s bunkami Grid

Výsledok lekcie: študovali systém dvojrozmerného rozloženia (CSS Grid Layout), naučili sa, ako umiestniť bunky mriežky na stránku.
Praktická úloha: dokončite mriežkovú záhradnú hru, aby ste upevnili pokrytý materiál.

Druhý deň

Pseudoprvky po a pred

Pseudoprvky pred a po
Spojenie obrázka s textom vo vnútri
Prvky s pseudoprvkami prvého písmena a prvého riadku

Výsledok lekcie: naučili sa pracovať s pseudoprvkami predtým, ako prvé písmeno a prvý riadok, skombinujte pseudoprvky s rôznymi vlastnosťami, aby ste vytvorili nádherné bloky
Praktická úloha: vytvorte prvok pomocou pseudoprvkov after a befor.

Deň tretí

Animácie a transformácie v CSS

CSS transformácie
Aplikovanie transformácií na prvky HTML
Vytváranie animovaných blokov v CSS
Aplikácia funkcií časovania na kľúčové snímky

Výsledok lekcie: naučili sa pracovať s transformáciami v CSS, vytvárať nekonečné animácie v CSS.
Praktická úloha: vytvorte tlačidlo a pri umiestnení kurzora myši k nemu pridajte transformácie.

Deň štvrtý

Precvičte si vytváranie animácií v CSS

Aplikácia animácie a transformácie v praxi
Vytvorenie animovaného orbitálneho systému planét v našej slnečnej sústave

Výsledok lekcie: vytvoril stránku demonštrujúcu pohyb planét v slnečnej sústave a animované pozadie.
Praktická úloha: vytvoriť animovaný orbitálny systém planét v našej slnečnej sústave.

5. modul

Prvý deň

Vytvorenie internetového obchodu

Čo je to internetový obchod?
Vytvorenie štruktúry projektu
Nastavenie projektu

Výsledok lekcie: začala vytvárať internetový obchod.
Praktická úloha: vyberte ikony, ktoré sa majú použiť na stránke.

Druhý deň

Vytvorenie hlavičky internetového obchodu

Premenné v CSS a ako ich používať
Pripojenie písiem k externej šablóne so štýlmi pomocou funkcie url
Záhlavie internetového obchodu, jeho štýl
Pridanie ďalších funkcií ponuky pomocou programovacieho jazyka JavaScript

Výsledok lekcie: nakonfigurovali globálne premenné v projekte, vytvorili multifunkčnú hlavičku s menu, pripojili súbor Javascript na pridanie ďalšej funkcionality menu.
Praktická úloha: pridajte zmenu pozadia hlavičky lokality pri posúvaní stránky

Deň tretí

Vytvorenie prvej obrazovky s hlavným produktom

HTML štruktúra prezentačného bloku
Mriežkový systém pre správne zobrazenie prvkov
Hodnoty vlastností CSS pomocou premenných
Stylingové prvky

Výsledok lekcie: vytvorila prezentačnú časť internetového obchodu
Praktická úloha: vytvoriť prezentačnú časť internetového obchodu

Deň štvrtý

Vytvorenie bloku s obľúbenými produktmi

HTML značka pre blok s produktmi
Styling pre produktové karty
Mriežka na umiestnenie karty
Štylizácia bloku s históriou firmy

Výsledok lekcie: vytvoril blok s obľúbenými produktmi a históriou spoločnosti
Praktická úloha: pridať vonkajšie a vnútorné čalúnenie prvkov v bloku s históriou spoločnosti

6. modul

Prvý deň

Vytvorenie posúvača s recenziami zákazníkov.

Kontrolný blok
Spôsoby, ako vytvoriť posúvateľné kontajnery v CSS
vlastnosti typu scroll-behavior a scroll-snap
Kotviace body posúvača

Výsledok lekcie: vytvoril posúvač s recenziami zákazníkov pomocou HTML a CSS.

Praktická úloha: pridajte kotviace body do hlavných sekcií lokality a po kliknutí na tlačidlo vytvorte automatické rolovanie k týmto blokom.

Druhý deň

Práca s formulármi a videoobsahom.

HTML5 tagy na vkladanie videoobsahu na web
Úprava štýlu sekcie s videoklipom na celú obrazovku
Značka vstupného poľa - a jej atribúty
Značka na vytváranie formulárov v Html
Úprava štýlu prvku zadávania textu

Výsledok lekcie: vytvorila sekciu s videom a blok s formulárom spätnej väzby

Praktická úloha: vytvorte formulár spätnej väzby, upravte štýl prvkov

Deň tretí

Vytvorenie samostatnej stránky galérie

Vlastná mriežka mriežky pre stránku galérie
Pridávanie blokov s obrázkami do mriežky
Pseudoprvky a rôzne animácie blokov s obrázkami
CSS filtre na zlepšenie vizuálneho dizajnu galérie

Výsledok lekcie: vytvorila samostatnú stránku s fotogalériou

Praktická úloha: pomocou rôznych typov polohovania na vytvorenie priesvitného neobvyklého pozadia.

Deň štvrtý

Prispôsobenie obsahu pre všetky typy zariadení.

Spôsoby prispôsobenia obsahu pre mobilné zariadenia
Mediálne dopyty na použitie rôznych vlastností na rovnaký prvok na zariadeniach s rôznymi šírkami
Pravidlá CSS pre tri typy zariadení

Výsledok lekcie: Web sme prispôsobili pre tablety a telefóny.

Praktická úloha: pomocou mediálnych dopytov zmeňte hodnoty vlastností prvkov HTML, aby ste prispôsobili obsah všetkým typom zariadení

7. modul

Prvý deň

Úvod do rámca Tailwind SS.

Čo sú rámce a ako urýchľujú proces vývoja projektu?
Inštalácia rámca CSS a doplnkov Tailwind
Koncepty rámca CSS Tailwind
Práca s typografiou a farbami v Tailwind CSS

Výsledok lekcie: vytvoril prvú webovú stránku pomocou rámca CSS Tailwind.
Praktická úloha: vytvorte blok s textom, prvkami štýlu pomocou tried zadného vetra.

Druhý deň

Triedy Tailwind na vytvorenie responzívneho webu

Práca s triedami Tailwind pri vytváraní responzívneho webu
Triedy na pridávanie efektov vznášania a zaostrenia
Triedy na pridávanie tieňov do prvkov
Triedy pre prácu s veľkosťami prvkov
Triedy pre prácu s vonkajšou a vnútornou výplňou prvkov

Výsledok lekcie: Vytvorili sme adaptívnu stránku pre všetky typy zariadení.
Praktická úloha: vytvárať tlačidlá, pridávať efekty pri kliknutí na ne pomocou tried Tailwind

Deň tretí

Rozloženie Tailwind Flex.

Práca s rozložením Tailwind Flex
Triedy na zarovnanie podradených prvkov v kontajneri Flex
Vytvorenie karty s cenou produktu
Vytváranie indikátorov pokroku
Práca s pseudoprvkami v Tailwind CSS

Výsledok lekcie: vytvoril Flex kontajner s produktovými kartami
Praktická úloha: vytvorte kartu s popisom produktu.

Deň štvrtý

Grid systém v Tailwind CSS.

Vlastnosti riadkov a stĺpcov
Vlastnosti na automatické vyplnenie prázdneho priestoru v mriežke prvkami
Stránka projektového tímu

Výsledok lekcie: vytvoril adaptívnu stránku projektového tímu pomocou systému Tailwind Grid.
Praktická úloha: pridať efekty k prvkom mriežky, keď na ne umiestnite kurzor myši

8. modul

Prvý deň

Nastavenie projektu

Nastavenie projektu lokality aplikácie „Manage“.
Vytvorenie responzívnej hlavičky webu
Vytvorenie hamburgerového menu pomocou JavaScriptu
Vytvorenie prezentačnej sekcie s produktom

Výsledok lekcie: vytvorila prvú obrazovku webovej stránky aplikácie „Spravovať“.
Praktická úloha: pridajte obrázok na pozadí na prvú obrazovku.

Druhý deň

Vytvorenie sekcie s popisom aplikácie

Časť s popisom aplikácie a jej výhodami
Prispôsobte vytvorený blok pre všetky typy zariadení
Časť s obsluhou aplikácie
Použite na obrázok filtre Tailwind

Výsledok lekcie: vytvorili dve sekcie stránky „Spravovať“
Praktická úloha: vytvorte ďalšiu sekciu s históriou vytvárania aplikácie

Deň tretí

Vytvorenie sekcie o projektovom tíme

Časť o tíme
Posúvač používajúci Tailwind CSS a Javascript
Zamestnanecké karty

Výsledok lekcie: vytvoril sekciu o projektovom tíme
Praktická úloha: vytvorte sekciu s tlačidlom CTA

Deň štvrtý

Vytvorenie sekcie s cenami

Vytvorte sekciu s cenami
Vytvorte responzívnu pätu webu
Dokončite projekt

Výsledok lekcie: dokončil prácu na projekte, vytvoril webovú stránku pre aplikáciu „Manage“.
Praktická úloha: dokončiť projekt, umiestniť stránku na internet

9. modul

Prvý deň

Začnite pracovať na vlastnom projekte.

Vyberte tému projektu
Začnite s vývojom vlastnej webovej stránky

Výsledok lekcie: bola zvolená téma a začala sa práca na projekte
Praktická úloha: Projektová práca

Druhý deň

Pokračovanie práce na projekte

Pokračujte v práci na projekte
Opravte chyby v projekte

Výsledok lekcie: tvorba webových stránok
Praktická úloha: Projektová práca

Deň tretí

Príprava prezentácie projektu.

Popíšte svoj projekt
Vytvorte šablónu prezentácie na obhajobu svojho projektu
Dokončite projekt
Umiestnite stránku na internet

Výsledok lekcie: pripravili prezentáciu a nacvičili prejav.
Praktická úloha: pripraviť prezentáciu projektu, umiestniť webovú stránku na internet.

Deň štvrtý

Ochrana projektu.

Dokončite prezentáciu projektu
Obhajujte svoj projekt pred publikom

Výsledok lekcie: Dokončili sme prácu na projekte kurzu a predstavili ho rodičom.
Praktická úloha: dokončiť projekt, pripraviť a zrealizovať prezentáciu.

Štítky cloud

Rôzne

hodnotenie

zobrazenie

Komentáre