Svetainės kūrimas Front-end kūrimas – nemokamas kursas iš Vaikų internetinio programavimo mokyklos Hello World, mokymai 44 val., Data: 2023 m. gruodžio 3 d.
įvairenybės / / December 06, 2023
Kaip veikia internetas
Pakalbėkime apie pagrindines interneto ir jo architektūros sąvokas. Išsiaiškinkime, kas yra domenas, priegloba, kliento-serverio architektūra. Sukurkime darbo aplinką ir pakalbėkime apie tris Front-end kūrimo ramsčius – HTML, CSS ir JavaScript.
HTML
HTML dokumento struktūra
Sukurkime pirmuosius HTML puslapius ir pažvelkime į paprastų ir sudėtingų tinklalapių pavyzdžius. Išsiaiškinkime, kokie blokai turėtų būti mūsų puslapyje. Padarykime, kad mūsų puslapiai susietų vienas su kitu, išsiaiškinkime, kuo tekstas skiriasi nuo hiperteksto ir kas yra žymos bei atributai.
Darbas su tekstu
Išmokime taisyklingai dirbti su tekstu HTML: suskaidykite jį į pastraipas, nurodykite antraštes ir paantraštes. Išmokime sudaryti sąrašus su numeriais ir ženkleliais bei cituoti klasiką.
Nuorodos ir vaizdai
Susipažinkime su nuorodomis išsamiau, taip pat sužinokime, kaip įterpti paveikslėlius ir naudoti juos kaip nuorodas.
Lentelės išdėstymas
Sukurkime savo pirmąją lentelę ir išsiaiškinkime, iš kokių žymų ji susideda. Išmokime sujungti langelius, pakeisti eilučių ir stulpelių skaičių, lygiuoti tekstą ir dar daugiau. Taip pat išmoksime pagrindinių dizainerio patarimų, kaip pagražinti stalą.
Įvadas į formas
Sukurkime savo pirmąją formą, išmokime dirbti su įvesties laukais, išskleidžiamaisiais sąrašais, žymimaisiais laukeliais ir, žinoma, mygtukais. Išstudijuokime kitus formos elementus, kurie mums bus naudingi ateityje.
CSS
Įvadas į CSS
Prisiminkime, kas yra CSS ir kaip juo naudotis. Išmokime naudoti CSS dirbant su HTML puslapiais. Išstudijuokime CSS sintaksę ir kas yra selektoriai, paveldimumas ir kokiu prioritetu mūsų stiliai taikomi HTML dokumentui.
Selektoriai
Panagrinėkime rinkėjus išsamiau. Sužinokime, kaip pasiekti vieną ar kelis elementus, kuo skiriasi klasė nuo pseudoklasės ir elementas nuo pseudoelemento. Pažvelkime į CSS gaires ir sužinokime, ko žmonės mėgsta paklausti apie CSS interviu metu.
Paveldėjimas, pakopinis ir prioritetas
Sužinome, kad kaskadininkai ir kaskadininkai nėra iš tos pačios srities. Supraskime principus, kuriais vadovaujantis CSS stiliai taikomi HTML elementams.
Teksto dekoravimas
Grįžkime prie to, nuo ko pradėjome – prie teksto. Sužinokime, kaip padaryti mūsų tekstą gražų ir patogų naudojant CSS savybes: paryškintą raštą, kursyvą, dydį, spalvą, foną ir kt.
Blokuoti dokumento modelį
Išmoksime div ir span žymas, taip pat kaip nustatyti elementų dydžius, užpildymą ir kraštines. Supraskime, kaip formuojamas dokumento blokinis modelis ir kokias galimybes turime elementų pozicionavimui.
JavaScript
Pristatome JavaScript
Susipažinkime su trečiuoju Front-end kūrimo ramsčiu – JavaScript. Išsiaiškinkime, kas yra kintamieji, duomenų tipai ir kodėl jie reikalingi. Ir, žinoma, rašysime savo pirmąją programą.
Sąlygos
Prisiminkime logiką, loginius veiksmus ir jų derinius. Tegul stiprybė ir kontrolė būna su mumis.
Ciklai
Išmokime daug nuveikti rašydami mažą kodą. Supraskime, kad ciklas cikle yra paprastas, tačiau reikia būti atsargiems.
Masyvai
Yra ledo masės, miškai ir programavimo masyvai. Šioje pamokoje išnagrinėsime, ką jie turi bendro ir kuo skiriasi. Užuomina – ankstesnės pamokos kilpos mums labai padės.
Funkcijos
Jei kintamieji ir tinkamas jų pavadinimas yra programavimo ABC, tai gebėjimas dirbti su funkcijomis ir parinkti joms tinkamus pavadinimus jau yra receptas. Šioje pamokoje sužinosime, kaip suskaidyti programą į loginius blokus ir kodėl tai svarbu.
Objektai
Susipažinsime su objektų samprata, metodais ir pradėsime susipažinti su OOP principais.
Įvadas į DOM
„JavaScript“ būtų nenaudingas, jei negalėtų sąveikauti su HTML dokumentu. Sužinosime, kas yra DOM (Document Object Model), bet dar svarbiau, išmoksime dirbti su HTML ir CSS naudojant JavaScript.
Renginių tvarkymas
Dabar pereisime į kitą lygį ir sužinosime, kaip reaguoti ir bendrauti su vartotoju naudojant „JavaScript“. Taip pat sužinosime, kodėl „JavaScript“ įvykiai gali burbuliuoti ir nuskęsti.
HTML5 ir CSS3
HTML5: kas naujo ir kodėl?
Sužinokime, kokie pakeitimai įvyko HTML5 ir kodėl. Išstudijuokime naujus elementus ir išanalizuokime teisingo jų panaudojimo atvejus.
Elementų ir tinklelio padėties nustatymas
Pažvelkime į naujus puslapių struktūros ir elementų išdėstymo juose būdus.
HTML5 formos
Ištirkime tamsiąją galios pusę ir praktikuokite naudodami naujas HTML5 formas, taip pat senųjų pakeitimus. Dirbkime su naujais laukų tipais datoms, spalvoms, skaičiams įvesti ir kaip paskatinti vartotoją šiek tiek palengvinti jo gyvenimą.
Garsas ir vaizdo įrašas
Šioje pamokoje jūs esate didžėjus ir redaktorius. Per šią pamoką neturėsime laiko kurti savo Youtube, bet labai stengsimės sukurti prototipą su pagrindinėmis funkcijomis.
Darbas su tekstu CSS3
Sužinokime, kokios yra teksto formatavimo galimybės ir rekomendacijos naujausioje standarto versijoje.
Perėjimo ir transformavimo efektai CSS3
Išmokime sukurti animaciją ir įvairius efektus naudojant CSS3. Susipažinkime su spąstais kuriant tokius efektus.
Adaptyvus išdėstymas
Išsiaiškinkime, kodėl reikia maketuoti adaptyviai, o kada tai nereikalinga ir gali pakenkti. Pažvelkime į pagrindinę sintaksę ir, žinoma, praktikuokite adaptyvų išdėstymą.
„Flexbox“ ir CSS tinklelis
Sužinosime apie šiuolaikinius blokų išdėstymo būdus, taip pat su kokiais sunkumais susiduriama juos naudojant.
CSS pirminiai procesoriai: LESS ir SASS
Norite naudoti kintamuosius CSS? Lengvai! Sužinokite, ką įdomaus galite padaryti naudodami CSS išankstinius procesorius.
JavaScript naujame lygyje
ES-2015+
Kas yra šiuolaikinis JavaScript, „griežtas režimas“ ir kaip su visu tuo gyventi.
OOP „JavaScript“.
Išstudijuokime, kaip klasės yra struktūrizuotos šiuolaikiniame JavaScript ir kodėl jos naudojamos, jei viską galima padaryti naudojant funkcijas. Kaip veikia paveldėjimas ir kokie kiti klasių kūrimo būdai egzistuoja JS.
Funkcijos detaliai
Išsiaiškinkime, kas yra funkcijos deklaracija ir funkcijos išraiška, sužinokime, kaip iškviesti funkciją be pavadinimo. Pažvelkime į frazę „konteksto įrišimas“.
AJAX ir JSON
Perkelkime save į naują kūrėjų lygį, išmokime pateikti HTTP užklausas ir sužinokime, kaip serveris ir klientas gali bendrauti tarpusavyje ir nesiginčyti.
Reguliarūs reiškiniai
"Jei turite problemą ir ketinate ją išspręsti naudodami reguliariąsias išraiškas, tada jau turite dvi problemas." Sužinokime, kaip nešaudyti sau į koją naudojant įprastus posakius.
Statybininkai, užduočių vykdytojai ir priklausomybės valdymas
Bower, npm, gulp, Grunt, webpack ir kt. Čia nėra nieko sudėtingo, bet jūs turite tai išsiaiškinti.
Testavimas JavaScript
Kur yra kodas, visada yra klaidų. Sužinosite, kaip sumažinti jų skaičių ir kokia praktika bei įrankiai mums tai padės.
Algoritmai
Išmoksime rašyti kodą, kad vėliau procesorius ir naršyklė nepatirtų nepakeliamo skausmo paleisdami jūsų programą.
ReaguotiJS
ReactJS įvadas
Susipažinkime su ReactJS, išmokime rašyti paprastus komponentus ir palyginti su kitomis populiariomis sistemomis. Susipažinkime su Virtual DOM koncepcija.
„React“ programų architektūra ir konfigūracija
Išsiaiškinkime, kokius veiksmus turime atlikti, kad ne tik rašytume React, bet ir padarytume tai kuo efektyviau bei patogiau.
Pirmosios programos kūrimas ReactJS
Pažvelkime atidžiau į JSX, ReactComponent, ReactDOM.render, Render funkciją. Konfigūruojame ir paleidžiame pirmąją programą, nustatome ryšius tarp komponentų ir proceso įvykių.
Maršrutas ir ReactJS
Kas yra maršrutas; Susipažinkime su ReactRouter ir jo funkcionalumu; Savo programoje organizuojame maršrutą.