Veebilehe loomine Esiotsa arendus - tasuta kursus Laste online programmeerimiskoolist Hello World, koolitus 44 tundi, Kuupäev: 3. detsember 2023.
Varia / / December 06, 2023
Kuidas Internet töötab
Räägime Interneti ja selle arhitektuuri põhikontseptsioonidest. Uurime, mis on domeen, hostimine, klient-server arhitektuur. Paneme paika töökeskkonna ja räägime kolmest Front-end arenduse alustalast – HTML, CSS ja JavaScript.
HTML
HTML-dokumendi struktuur
Loome esimesed HTML-lehed ja vaatame lihtsate ja keerukate veebilehtede näiteid. Mõelgem välja, millised plokid peaksid meie lehel olema. Paneme oma lehed üksteisele linkima, uurime, kuidas tekst erineb hüpertekstist ning mis on sildid ja atribuudid.
Töö tekstiga
Õppime, kuidas HTML-is tekstiga õigesti töötada: jagage see lõikudeks, märkige pealkirjad ja alampealkirjad. Õpime koostama nummerdatud ja täpploendeid ning tsiteerima klassikuid.
Lingid ja pildid
Tutvume linkidega lähemalt ning õpime ka pilte sisestama ja linkidena kasutama.
Tabeli paigutus
Loome oma esimese tabeli ja uurime, millistest siltidest see koosneb. Õpime lahtrite liitmist, ridade ja veergude arvu muutmist, teksti joondamist ja palju muud. Samuti õpime disainerilt elementaarseid näpunäiteid, kuidas oma laud kauniks muuta.
Sissejuhatus vormidesse
Loome oma esimese vormi, õpime töötama sisestusväljade, ripploendite, märkeruutude ja loomulikult nuppudega. Uurime teisi vormielemente, mis meile tulevikus kasulikud on.
CSS
Sissejuhatus CSS-i
Tuletagem meelde, mis on CSS ja kuidas seda kasutada. Õpime kasutama CSS-i HTML-lehtedega töötamisel. Uurime CSS-i süntaksit ja millised on selektorid, pärilikkus ja millise prioriteediga meie stiile HTML-dokumendile rakendatakse.
Valijad
Uurime selektoreid üksikasjalikumalt. Õpime ligipääsu ühele või mitmele elemendile, mis vahe on klassil pseudoklassil ja elemendil pseudoelemendist. Vaatame CSS-i juhiseid ja uurime, mida inimestele meeldib intervjuudes CSS-i kohta küsida.
Pärand, kaskaad ja prioriteet
Saame teada, et kaskadöörid ja kaskadöörid ei ole samast valdkonnast. Saame aru, milliste põhimõtetega CSS-stiile HTML-elementidele rakendatakse.
Teksti kaunistamine
Tuleme tagasi selle juurde, kust alustasime – teksti juurde. Õpime, kuidas muuta oma tekst ilusaks ja kasutajasõbralikuks, kasutades CSS-i omadusi: paksus, kaldkiri, suurus, värv, taust ja muud.
Blokeeri dokumendimudel
Õpime tundma div- ja span-märgendeid, samuti elementide suuruste, polsterduse ja ääriste määramist. Saame aru, kuidas kujuneb dokumendi plokkmudel ja millised võimalused meil on elementide positsioneerimiseks.
JavaScript
Tutvustame JavaScripti
Teeme tutvust Front-end arenduse kolmanda sambaga – JavaScriptiga. Uurime, mis on muutujad, andmetüübid ja miks neid vaja on. Ja loomulikult kirjutame oma esimese programmi.
Tingimused
Meenutagem loogikat, loogikatehteid ja nende kombinatsioone. Olgu jõud ja kontroll meiega.
Tsüklid
Õpime väikese koodi kirjutamise ajal palju ära tegema. Mõistkem, et tsükkel tsüklis on lihtne, kuid peate olema ettevaatlik.
Massiivid
Seal on jäämassid, metsad ja programmeerimises on massiive. Uurime selles õppetükis, mis neil on ühist ja kuidas need erinevad. Vihje - eelmise õppetunni silmused aitavad meid palju.
Funktsioonid
Kui muutujad ja nende õige nimetus on programmeerimise ABC, siis funktsioonidega töötamise ja neile sobivate nimede valimise oskus on juba retsept. Selles õppetükis õpime, kuidas programm loogilisteks plokkideks jagada ja miks see oluline on.
Objektid
Tutvume objektide mõistega, meetoditega ja hakkame tutvuma OOP põhimõtetega.
Sissejuhatus DOM-i
JavaScript oleks kasutu, kui see ei saaks suhelda HTML-dokumendiga. Saame teada, mis on DOM (Document Object Model), kuid mis veelgi olulisem, õpime, kuidas töötada JavaScripti kaudu HTML-i ja CSS-iga.
Sündmuste käsitlemine
Nüüd viime selle järgmisele tasemele ja õpime, kuidas JavaScripti kasutades reageerida ja kasutajaga suhelda. Samuti saame teada, miks JavaScripti sündmused võivad mullida ja uppuda.
HTML5 ja CSS3
HTML5: mis on uut ja miks?
Uurime, millised muudatused on HTML5-s toimunud ja miks. Uurime uusi elemente ja analüüsime nende õige kasutamise juhtumeid.
Elementide ja ruudustiku positsioneerimine
Vaatame uusi viise lehtede struktureerimiseks ja nendele elementide paigutamiseks.
HTML5 vormid
Uurime võimu varjukülgi ja harjutame HTML5 uute vormide ja vanade muudatustega. Töötame uut tüüpi väljadega, et sisestada kuupäevi, värve, numbreid ja kuidas kasutajat oma elu veidi lihtsamaks teha.
Audio ja video
Selles õpetuses olete nii DJ kui ka toimetaja. Meil ei ole selle tunni jooksul aega oma Youtube'i loomiseks, kuid püüame väga palju luua põhifunktsioonidega prototüüpi.
Tekstiga töötamine CSS3-s
Uurime välja, millised on võimalused ja soovitused teksti vormindamiseks standardi uusimas versioonis.
Ülemineku- ja teisendusefektid CSS3-s
Õpime looma animatsioone ja erinevaid efekte kasutades CSS3. Tutvume lõksudega selliste efektide loomisel.
Adaptiivne paigutus
Uurime välja, miks peate kohandama paigutust ja millal see pole vajalik ja võib kahjustada. Vaatame põhisüntaksit ja muidugi harjutame adaptiivset paigutust.
Flexbox ja CSS-võrk
Õpime tundma plokkide paigutuse kaasaegseid lähenemisviise ja ka nende kasutamise raskusi.
CSS-i eelprotsessorid: LESS ja SASS
Kas soovite CSS-is muutujaid kasutada? Lihtsalt! Uurige, milliseid huvitavaid asju saate CSS-i eelprotsessorite abil teha.
JavaScript uuel tasemel
ES-2015+
Mis on kaasaegne JavaScript, "range režiim" ja kuidas selle kõigega elada.
OOP JavaScriptis
Uurime, kuidas on klassid moodsas JavaScriptis üles ehitatud ja miks neid kasutatakse, kui kõike saab teha funktsioonide abil. Kuidas pärimine toimib ja millised muud viisid klasside loomiseks on JS-is olemas.
Funktsioonid üksikasjalikult
Uurime välja, mis on funktsioonide deklaratsioon ja funktsiooniavaldis, kuidas kutsuda funktsiooni ilma nimeta. Vaatame fraasi "konteksti sidumine".
AJAX ja JSON
Viime end arendajatena uuele tasemele, õpime tegema HTTP päringuid ning uurime, kuidas server ja klient saavad omavahel suhelda ja mitte tülitseda.
Regulaaravaldised
"Kui teil on probleem ja kavatsete selle regulaaravaldiste abil lahendada, on teil juba kaks probleemi." Õpime regulaaravaldiste abil vältima endale jalga tulistamist.
Ehitajad, ülesannete jooksjad ja sõltuvushaldus
Bower, npm, gulp, Grunt, webpack ja teised. Selles pole midagi keerulist, kuid peate selle välja mõtlema.
Testimine JavaScriptis
Seal, kus on kood, on alati vigu. Saate teada, kuidas nende arvu minimeerida ning millised tavad ja tööriistad meid selles aitavad.
Algoritmid
Õpime koodi kirjutama, et hiljem protsessor ja brauser teie programmi käivitamisel piinavat valu ei kogeks.
ReactJS
ReactJS-i tutvustus
Tutvume ReactJS-iga, õpime kirjutama lihtsaid komponente ja võrdleme seda teiste populaarsete raamistikega. Tutvume virtuaalse DOM-i kontseptsiooniga.
Reacti rakenduste arhitektuur ja konfiguratsioon
Uurime välja, milliseid toiminguid peame tegema, et mitte ainult Reactis kirjutada, vaid ka teha seda võimalikult tõhusalt ja mugavalt.
Esimese rakenduse loomine ReactJS-is
Vaatame lähemalt JSX, ReactComponent, ReactDOM.render, Render funktsiooni. Konfigureerime ja käivitame esimese rakenduse, loome seosed komponentide ja protsessisündmuste vahel.
Marsruutimine ja ReactJS
Mis on marsruutimine; Tutvume ReactRouteri ja selle funktsionaalsusega; Korraldame oma rakenduses marsruutimise.