Front-end arendus React baasil

Koolitusel on võimalik osaleda distantsõppe vormis.

Päevad ja kellaajad lepitakse kokku kursusele registreerumisel.

Koolitus toimub minigruppides (2-3 inimest), 2-3 korda nädalas, 4 ak.t. päevas.

Sihtgrupp:  Koolitus sobib ideaalselt neile, kes soovivad alustada karjääri front-end arendajana või täiendada oma oskusi veebilehtede loomisel ja disainimisel. Minigruppides toimuv õpe võimaldab personaalset lähenemist ja praktilist kogemust, sealhulgas interaktiivsete veebilehtede loomist ja API-teenuste integreerimist. Kursuse lõpus oskavad osalejad iseseisvalt kujundada ja programmeerida kaasaegseid veebirakendusi, kasutades Bootstrap 5 ja SASS-i võimalusi.
Distantsõppe vorm ja paindlik ajakava muudavad koolituse kättesaadavaks kõigile
huvilistele.

Koolituse eesmärk:  Omandada praktilised oskused frontend-disainerina.Õppida tarbima API-teenuseid Reactis.See põhjalik front-end arenduse kursus Reacti baasil õpetab osalejatele kaasaegseid veebitehnoloogiaid, sealhulgas HTML5, CSS3, JavaScripti, TypeScripti ja Reacti raamistikku.Saada praktilised teadmised frontend-arendaja spetsiaalsete tööriistade kohta. Omandada teadmised HTML5, CSS3/SASS-i veebilehtede kujundamisest. Õppida programmeerima JavaScripti ja kasutama React raamistikku. Õppida integreerima Bootstrap 5 veebilehele ja kasutama Bootstrap 5 võimalusi veebilehe kujundamisel.Õppida programmeerima TypeScripti ja rakendama neid oskusi Reactis. Omandada oskus luua interaktiivseid veebilehti Reactiga.

Õppe alustamise tingimused:  Kursuse alustamiseks on vajalik esmane arvuti
kasutamise oskus.

Kursus kestab: 120 akadeemilist tundi: seal hulgas 60 tundi auditoorset ja praktilist tööd. Lisaks on vaja vähemalt 60 tundi iseseisvat praktilist tööd.

Õppekeel: eesti

Õppegrupi suurus: koolitus toimub minigruppides (2-3 inimest)

Kursuse lõpuks õpilane:

  • Oskab luua veebilehe disaini, kasutades frontend-arenduse võtteid.
  • Oskab kujundada veebilehte HTML5, CSS3/SASS-i abil.
  • Oskab kasutada Bootstrap 5 raamistikku.
  • Tunneb frontend-arendaja spetsiaalseid tööriistu.
  • Oskab programmeerida JavaScripti ja kasutada React raamistikku.
  • Oskab programmeerida TypeScripti ja rakendada seda Reactis.
  • Oskab luua interaktiivseid veebilehti Reactiga.
  • Oskab tarbida API-teenuseid Reactis.

Õpiväljundid: Pärast teoreetilise ja praktilise osa läbimist peab õpilane sooritama teadmiste kontroll. Teadmiste kontroll koosneb järgmistest tegevustest:
● Õpilasele antakse pilt, millel on kujutatud disainielement, mall, malli osa või muu
frontend-arendusega seotud ülesanne.
● Õpilane peab täpselt reprodutseerima pildil nähtu, kasutades HTML5, CSS3,
JavaScripti või Reactit. Võib kasutada praktilistel tundidel omandatud teadmisi ja
iseseisva töö käigus saadud oskusi.
● Teadmiste kontroll tehakse iseseisvalt klassiruumis õpetaja juuresolekul.
Teadmiste kontroll ajal on lubatud kasutada internetti ja mobiiltelefoni teabe ning
dokumentatsiooni otsimiseks.

Hindamisskaala:
● Materjali omandamiseks peab õpilane saavutama vähemalt minimaalse läbimispunkti,
mis on 60%.
● Hinnatakse kahte oskust:

Oskus rakendada teadmisi koodi kirjutamisel ja JavaScripti ning Reactiga
rakenduste programmeerimisel. Minimaalne läbimispunkt näitab, et õpilane on materjali omandanud. Selle saavutamiseks peab õpilane kontrolltöös kasutama vähemalt 60% praktilistel tundidel õpitud võtteid ja oskusi. Hindamine toimub õpetaja poolt kohapeal. Oskus otsida internetist tehnoloogia dokumentatsiooni ülesande lahendamiseks.

Õppekava:

Kursuse teemad ja ajakava

  1. GIT-i põhiteadmised (2 ak.tundi)

● GIT-projekti initsialiseerimine.
● Projekti loomine platvormidel gitlab.com ja github.com.
● Konfliktide lahendamise stsenaariumid arenduses.
● Harude loomine ja ühendamine.
● Projekti avaldamine gitlab.com või github.com keskserveris.
Teadmiste kontroll (1 akadeemiline tund):
● Õpilane registreerub iseseisvalt gitlab.com või github.com keskkonnas.
● Loob isikliku projekti lokaalselt ja keskserveris.
● Kasutab GIT-i käske projekti avaldamiseks.
● Lõpetab projekti avaldamise, koostades README-faili ja edastab selle õpetajale
kloonimiseks.

  1. HTML-i põhiteadmised (2 ak.tundi)
    ● Sildid: loendid, tabelid, vormid.
    ● Stiilid: klassid, ID-d (siltide sidumine CSS-iga).
  2. CSS-i põhiteadmised (2 ak.tundi)
    ● Stiilikeele süntaks.
    ● Ühe ja mitme HTML-elemendi manipuleerimine.
    ● Objektide vormindamine: värvid, fondid, veerised, läbipaistvus, varjud, geomeetrilised
    kujundid.
    ● Lehekülje skeleti loomine ja objektide struktuur (päis, sektsioon, külgpaan, jalus).
    ● Adaptiivne kujundus (responsive design) erinevatele seadmetele (mobiil, tahvel,
    monitor).
  3. Praktilised tunnid adaptiivse kujunduse kohta (4 ak.tundi)
    ● Ülesanne 1 (õpetajaga): lehekülje kujundamine pildi järgi.
    ● Ülesanne 2 (õpetajaga): lehekülje skeleti loomine (menüü, disainielemendid jne).
    Teadmiste kontroll (3 ak.tundi):
    ● Õpilane saab pildi kujul maketi.
    ● Kasutab HTML5 ja CSS3 teadmisi maketi kujundamiseks. Õpetaja hindab maketi
    vastavust ja praktilistel tundidel õpitud oskuste kasutamist.
  4. JavaScripti põhiteadmised (6 ak.tundi)
    Muutujad (var, let), tüübid, tüübiteisendused.
    ● Funktsioonid ja nende kasutamine.
    ● Massiivid, objektid (JSON-formaat).
    ● Tsüklid (for, foreach), objektide tsüklid.
    ● Sündmused ja nende sidumine HTML-elementidega.
  5. Praktilised tunnid JavaScriptiga (4 ak.tundi)
    ● Ülesanne 1 (õpetajaga): analoogkella loomine (HTML, CSS, JavaScript).
    ● Ülesanne 2 (õpetajaga): maandumislehe loomine, mälu ja seanssidega töötamine.
    Teadmiste kontroll (3 akadeemilist tundi):
    ● Õpilane saab rakenduse kirjelduse, mida tuleb luua JavaScripti abil.
    ● Kasutab funktsioonide, klasside, sündmuste sidumise ja HTML-siltide manipuleerimise
    teadmisi.
    ● Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.
  6. Bootstrap 5 võimalused ja süntaks (2 akadeemilist tundi)
    ● Bootstrap 5 paigaldamine HTML-lehele (ka NodeJS ja NPM kaudu).
    ● Veebilehe plokkide kujundamine Grid Systemi abil.
    ● Flexbox ja plokkide positsioneerimine. ● Komponendid.
  7. Praktilised tunnid Bootstrap 5-ga (3 ak.tundi)
    ● Ülesanne 1 (õpetajaga): pildigalerii või tootekataloogi loomine.
    ● Ülesanne 2 (õpetajaga): komponentide programmeerimine JavaScripti ja jQuery abil.
    ● Ülesanne 3 (õpetajaga): modaalakna loomine.
    ● Ülesanne 4 (õpetajaga): lehekülje kujundamine Bootstrap 5 abil.
    Teadmiste kontroll (3 akadeemilist tundi):
    ● Õpilane saab pildi kujul maketi.
    ● Kasutab Bootstrap 5 ja jQuery teadmisi maketi kujundamiseks.
    ● Õpetaja hindab maketi vastavust ja praktilistel tundidel õpitud oskuste kasutamist.
  8. TypeScript kui React’i alus (3 ak.tundi)
    ● TypeScripti kiirstart ja ökosüsteem.
    ● Tüübisüsteem: deklareerimise ulatus, põhitäübid, andmestruktuurid, liidesed.
    ● Üldistused (Generics), tingimuslikud tüübid (Conditional Types), vastendatud tüübid
    (Mapped Types).
    ● Funktsioonid ja klassid: tüübistamise eripärad, funktsioonide ülekoormamine.
    ● OOP TypeScriptis: juurdepääsu modifikaatorid, abstraktsed klassid, miksiinid. ●
    Dekoraatorid ja annotatsioonid.
  9. Praktilised tunnid TypeScriptiga (2 ak.tundi)
    Ülesanne 1 (õpetajaga): oma dekoraatorite ja annotatsioonide kirjutamine (logimine,
    vigade käsitlemine, tüübikontroll, valideerimine).
  10. SASS kui React’i alus (2 ak.tundi)
    ● Miks kasutada SASS/SCSS-i CSS-i asemel?

● SASS-i eeltöötleja.
● Süntaks: eeldused, muutujad, pesastatud reeglid, ampersand.
● Miksiinid.
● Aritmeetilised operatsioonid ja võrdlusoperaatorid.
● Juhtimisvoo operaatorid: if(), @if, @for, @each, @while. ● Funktsioonid ja
infrastruktuur.
Teadmiste kontroll (3 ak.tundi):
● Õpilane saab rakenduse kirjelduse, mida tuleb luua TypeScripti ja SASS-i abil.
● Kasutab funktsioonide, klasside, sündmuste sidumise ja HTML-siltide manipuleerimise
teadmisi.
● Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.

  1. React: põhioskused ja edasijõudnud tase (12 ak.tundi)
    ● Komponendid, stiilid, mallid.
    ● Andmete ja sündmuste sidumine, stringi interpolatsioon.
    ● Direktiivid: ngIf, ngFor, ngStyle, ngClass.
    ● Piped (pipes).
    ● Sõltuvuste süstimine, teenused, marsruutimine, moodulid.
    ● Reaktiivsed vormid ja mallipõhised vormid.
    ● ● HTTP-päringud.
    Teadmiste kontroll (3 ak.tundi):
    ● Õpilane saab rakenduse kirjelduse ja maketi pildi kujul, mida tuleb luua Reactiga.
    ● Kasutab funktsioonide, klasside, sündmuste sidumise, HTML-siltide ja SASS-stiilide
    manipuleerimise teadmisi.
    ● Õpetaja hindab rakenduse korrektsust ja praktilistel tundidel õpitud osade olemasolu.

Lõpetamise tingimused ja väljastatavad dokumendid:

Koolituse lõpus teeb õpilane eksamitöö. Eksamitööks võib olla koolituse käigus valminud töö.

Eksamitöö, edukal sooritamisel väljastatakse kursuse lõpetanule tunnistus. Tõend väljastatakse õppijale kui õpitulemusi ei saavutatud, kuid õppija võttis osa õppetööst. Tõend väljastatakse vastavalt osaletud kontakttundide arvule.

Õppekeskkonna kirjeldus:

Arvutiklassides on olemas kogu vajalik tehniline varustus, internet, WiFi.

Õppekeskus tagab igale koolitusel osalejale kohvipausi, kui kursus on pikem kui 2 tundi.

Koolitusgruppide suurused on erinevad ja sõltuvad koolituse raskusastmest, kuid eesmärgiks on tagada individuaalne areng. Koolituse jooksul. kasutame Windows 10 või Windows11 operatsioonisüsteemi. Kasutav MS Office on Office 365. Adobe Creative Cloud täispakett, on kasutamiseks õppeklassis koolituse ajal ning koolituse perioodil ka õpilase enda arvutis.

Koolitus toimub loengute, praktilise ja iseseisva töö vormis.

Koolituse õppematerjalideks jagab õpetaja õpilastele lingid internetist, viited õppevideotele. Koolitusel tehtud tööde salvestamiseks ja kodutööks antakse igale osalejale mälupulk 32GB. Informatsiooni saab ka internetist meie koolitajate poolt õppetöö ajal soovitatud lehtedelt.

Õpilastele on konsultatsioonid ning koolitajate poolne abi 2 kuud peale koolituse läbimist tasuta.

Kasutatavad meetodid:

interaktiivsed loengud, rühmatööd, õppematerjalid, õppevideod.

Tasumise kord ja tähtaeg:

Õppemaks tuleb tasuda enne kursuse algust esitatud arve või maksegraafiku alusel. Erandjuhtudel mõlema poole poolt digitaalselt allkirjastatud maksegraafik.

Õppemaksu tagastamise alused ja kord:

Koolitusest loobumise korral palume sellest teada telefonil 56911250 või e-postile omis@omis.ee .

Kui koolituse lõppkuupäevaks ei ole kogu summa tasutud, siis on koolitajal õigus osalejale tunnistust mitte väljastada. Koolitusest loobumisel vähem kui 2 tööpäeva enne koolituse algust õppetasu ei tagastata.

Õppekeskus jätab endale õiguse teha õppeplaanis muudatusi. Koolitusgrupi mitte täitumise korral on koolitajal õigus koolitus ära jätta. Koolitusele registreerunuid teavitatakse kursuse ära jäämisest vähemalt kolm päeva ette. Ära jäänud koolituse eest tasutud summa makstakse tagasi või kantakse soovi korral üle mõne teise koolituse osavõtutasuks. Vaidlused lahendatakse kokkuleppe teel.

Toimumise aeg:

01.09
17.10.2025

registreeru:


    Makseviis:



    NB! Saates seda vormi me töötleme sinu andmeid vastavalt meie privaatsuspoliitikale Seda saiti kaitseb Google reCAPTCHA ja rakenduvad selle teenuse privaatsuspoliitika ja
    teenusetingimused

    Lektor:

    Vladimir Kjahri

    Tallinna Tehnikaülikool – magistrikraad – eriala: IT , lisaeriala: infotöötlus Infotehnoloogia projektide juhendamine, programmeerimine. Tallinna Pedagoogikaülikool – bakalaureusekraad. IT-spetsialist, programmeerija, tarkvaraarendaja.