Mājas lapas izveide Front-end izstrāde - bezmaksas kurss no Bērnu tiešsaistes programmēšanas skolas Hello World, apmācība 44 stundas, Datums: 2023. gada 3. decembris.

Kā darbojas internets

Parunāsim par interneta un tā arhitektūras pamatjēdzieniem. Noskaidrosim, kas ir domēna, hostinga, klienta-servera arhitektūra. Izveidosim darba vidi un runāsim par trim priekšgala izstrādes pīlāriem – HTML, CSS un JavaScript.

HTML

HTML dokumentu struktūra

Izveidosim pirmās HTML lapas un apskatīsim vienkāršu un sarežģītu tīmekļa lapu piemērus. Izdomāsim, kādiem blokiem jābūt mūsu lapā. Padarīsim mūsu lapas saites viena uz otru, uzzināsim, kā teksts atšķiras no hiperteksta un kas ir tagi un atribūti.

Darbs ar tekstu

Mācīsimies pareizi strādāt ar tekstu HTML: sadaliet to rindkopās, norādiet virsrakstus un apakšvirsrakstus. Mācīsimies veidot numurētus un aizzīmju sarakstus un citēt klasiku.

Saites un attēli

Iepazīsimies ar saitēm sīkāk, kā arī uzzināsim, kā ievietot attēlus un izmantot tos kā saites.

Tabulas izkārtojums

Izveidosim savu pirmo tabulu un uzzināsim, no kādiem tagiem tā sastāv. Uzzināsim, kā sapludināt šūnas, mainīt rindu un kolonnu skaitu, līdzināt tekstu un daudz ko citu. Apgūsim arī pamata padomus no dizainera, kā padarīt galdu skaistu.

Ievads veidlapās

Izveidosim savu pirmo veidlapu, uzzināsim, kā strādāt ar ievades laukiem, nolaižamajiem sarakstiem, izvēles rūtiņām un, protams, pogām. Izpētīsim citus formas elementus, kas mums noderēs nākotnē.

CSS

Ievads CSS

Atcerēsimies, kas ir CSS un kā to lietot. Mācīsimies izmantot CSS, strādājot ar HTML lapām. Izpētīsim CSS sintaksi un to, kas ir selektori, pārmantojamība un ar kādu prioritāti mūsu stili tiek piemēroti HTML dokumentam.

Selektori

Izpētīsim atlasītājus sīkāk. Mācīsimies, kā piekļūt vienam vai vairākiem elementiem, kāda ir atšķirība starp klasi un pseidoklasi un elementu no pseidoelementa. Apskatīsim CSS vadlīnijas un uzzināsim, ko cilvēki intervijās labprāt jautā par CSS.

Mantojums, kaskāde un prioritāte

Mēs uzzinām, ka kaskadieri un kaskadieri nav no vienas jomas. Sapratīsim, pēc kādiem principiem CSS stili tiek piemēroti HTML elementiem.

Teksta dekorēšana

Atgriezīsimies pie tā, no kā sākām – pie teksta. Mācīsimies, kā padarīt savu tekstu skaistu un lietotājam draudzīgu, izmantojot CSS rekvizītus: treknrakstu, slīprakstu, izmēru, krāsu, fonu un citus.

Bloķēt dokumenta modeli

Apgūsim div un span tagus, kā arī to, kā iestatīt elementu izmērus, polsterējumu un apmales. Sapratīsim, kā veidojas dokumenta blokmodelis un kādas iespējas mums ir elementu pozicionēšanai.

JavaScript

Iepazīstinām ar JavaScript

Iepazīsimies ar trešo Front-end izstrādes pīlāru – JavaScript. Noskaidrosim, kas ir mainīgie, datu veidi un kāpēc tie ir nepieciešami. Un, protams, mēs rakstīsim savu pirmo programmu.

Nosacījumi

Atcerēsimies loģiku, loģiskās darbības un to kombinācijas. Lai spēks un kontrole ir ar mums.

Cikli

Mācīsimies, kā izdarīt daudz, rakstot maz kodu. Ļaujiet mums saprast, ka cikls ciklā ir vienkāršs, taču jums jābūt uzmanīgiem.

Masīvi

Ir ledus masas, meži, un programmēšanā ir masīvi. Kas viņiem ir kopīgs un kā tie atšķiras, mēs pētīsim šajā nodarbībā. Padoms - mums ļoti palīdzēs iepriekšējās nodarbības cilpas.

Funkcijas

Ja mainīgie un pareizais nosaukums tiem ir programmēšanas ABC, tad prasme strādāt ar funkcijām un izvēlēties tām piemērotus nosaukumus jau ir recepte. Šajā nodarbībā mēs uzzināsim, kā sadalīt programmu loģiskajos blokos un kāpēc tas ir svarīgi.

Objekti

Iepazīsimies ar objektu jēdzienu, metodēm un sāksim iepazīties ar OOP principiem.

Ievads DOM

JavaScript būtu bezjēdzīgs, ja tas nevarētu mijiedarboties ar HTML dokumentu. Mēs uzzināsim, kas ir DOM (Document Object Model), bet vēl svarīgāk, mēs iemācīsimies strādāt ar HTML un CSS, izmantojot JavaScript.

Pasākumu apstrāde

Tagad mēs to pārcelsim uz nākamo līmeni un uzzināsim, kā reaģēt un mijiedarboties ar lietotāju, izmantojot JavaScript. Mēs arī uzzināsim, kāpēc JavaScript notikumi var burbuļot un nogrimt.

HTML5 un CSS3

HTML5: kas jauns un kāpēc?

Noskaidrosim, kādas izmaiņas ir notikušas HTML5 un kāpēc. Izpētīsim jaunus elementus un analizēsim to pareizas izmantošanas gadījumus.

Pozicionēšanas elementi un režģis

Apskatīsim jaunus veidus, kā strukturēt lapas un novietot tajās elementus.

HTML5 veidlapas

Izpētīsim varas ēnas puses un praktizēsimies ar jaunām HTML5 formām, kā arī izmaiņām vecajās. Strādāsim ar jauna veida laukiem datumu, krāsu, skaitļu ievadīšanai un kā mudināt lietotāju nedaudz atvieglot savu dzīvi.

Audio un video

Šajā apmācībā jūs esat dīdžejs un redaktors. Šīs nodarbības laikā mums nebūs laika izveidot savu Youtube, taču mēs ļoti centīsimies izveidot prototipu ar pamata funkcionalitāti.

Darbs ar tekstu CSS3

Noskaidrosim, kādas ir iespējas un ieteikumus teksta formatēšanai jaunākajā standarta versijā.

Pārejas un transformācijas efekti CSS3

Mācīsimies izveidot animāciju un dažādus efektus, izmantojot CSS3. Iepazīsimies ar slazdiem, veidojot šādus efektus.

Adaptīvs izkārtojums

Noskaidrosim, kāpēc ir nepieciešams adaptīvs izkārtojums un kad tas nav nepieciešams un var nodarīt kaitējumu. Apskatīsim pamata sintaksi un, protams, praktizēsim adaptīvo izkārtojumu.

Flexbox un CSS režģis

Uzzināsim par modernajām pieejām bloku izkārtojumam, kā arī par to, kādas ir grūtības to lietošanā.

CSS priekšapstrādātāji: LESS un SASS

Vai vēlaties izmantot mainīgos CSS? Viegli! Uzziniet, kādas interesantas lietas varat paveikt, izmantojot CSS priekšapstrādātājus.

JavaScript jaunā līmenī

ES-2015+

Kas ir mūsdienu JavaScript, "stingrais režīms" un kā ar to visu sadzīvot.

OOP JavaScript

Izpētīsim, kā mūsdienu JavaScript tiek strukturētas klases un kāpēc tās tiek izmantotas, ja visu var izdarīt, izmantojot funkcijas. Kā darbojas mantošana un kādi citi veidi, kā izveidot klases, pastāv JS.

Funkcijas detalizēti

Noskaidrosim, kas ir funkciju deklarācija un funkcijas izteiksme, uzzināsim, kā izsaukt funkciju bez nosaukuma. Apskatīsim frāzi “konteksta saistīšana”.

AJAX un JSON

Pacelsim sevi jaunā līmenī kā izstrādātāji, iemācīsimies veikt HTTP pieprasījumus un uzzināsim, kā serveris un klients var sazināties savā starpā un nestrīdēties.

Regulāras izteiksmes

"Ja jums ir problēma un jūs to atrisināsit ar regulārām izteiksmēm, tad jums jau ir divas problēmas." Uzzināsim, kā izvairīties no šaušanas sev kājā, izmantojot regulārās izteiksmes.

Būvnieki, uzdevumu izpildītāji un atkarību pārvaldība

Bower, npm, gulp, Grunt, webpack un citi. Šeit nav nekā sarežģīta, taču jums tas būs jāizdomā.

Testēšana JavaScript

Kur ir kods, vienmēr ir kļūdas. Jūs uzzināsit, kā samazināt to skaitu un kāda prakse un rīki mums palīdzēs.

Algoritmi

Mēs iemācīsimies rakstīt kodu, lai vēlāk procesors un pārlūkprogramma nepiedzīvotu mokošas sāpes, palaižot jūsu programmu.

ReaģētJS

Ievads ReactJS

Iepazīsimies ar ReactJS, iemācīsimies rakstīt vienkāršus komponentus un salīdzināt to ar citiem populāriem ietvariem. Iepazīsimies ar Virtual DOM jēdzienu.

React lietojumprogrammu arhitektūra un konfigurācija

Noskaidrosim, kādas darbības mums jāveic, lai ne tikai rakstītu React, bet arī darītu to pēc iespējas efektīvāk un ērtāk.

Pirmās lietojumprogrammas izveide ReactJS

Apskatīsim tuvāk JSX, ReactComponent, ReactDOM.render, Render funkciju. Mēs konfigurējam un palaižam pirmo lietojumprogrammu, izveidojam attiecības starp komponentiem un procesa notikumiem.

Maršrutēšana un ReactJS

Kas ir maršrutēšana; Iepazīsimies ar ReactRouter un tā funkcionalitāti; Mēs organizējam maršrutēšanu mūsu lietojumprogrammā.