Verkkosivujen luominen Käyttöliittymäkehitys - ilmainen kurssi Lasten verkkoohjelmointikoululta Hello World, koulutus 44 tuntia, päivämäärä: 3.12.2023.

Kuinka Internet toimii

Puhutaanpa Internetin peruskäsitteistä ja sen arkkitehtuurista. Selvitetään mitä verkkotunnus, hosting, asiakas-palvelin-arkkitehtuuri on. Perustetaan työympäristö ja puhutaan Front-end-kehityksen kolmesta pilarista - HTML, CSS ja JavaScript.

HTML

HTML-dokumentin rakenne

Luodaan ensimmäiset HTML-sivut ja katsotaan esimerkkejä yksinkertaisista ja monimutkaisista verkkosivuista. Selvitetään, mitä lohkoja sivullamme tulisi olla. Laitetaan sivumme linkittämään toisiinsa, selvitetään kuinka teksti eroaa hypertekstistä ja mitä tagit ja attribuutit ovat.

Työskentele tekstin kanssa

Opitaan käsittelemään tekstiä HTML: ssä oikein: jaa se kappaleiksi, osoita otsikot ja alaotsikot. Opitaan tekemään numeroituja ja luettelomerkitty luetteloita ja lainaamaan klassikoita.

Linkkejä ja kuvia

Tutustutaanpa linkkeihin tarkemmin ja opitaan myös lisäämään kuvia ja käyttämään niitä linkkeinä.

Taulukon asettelu

Luodaan ensimmäinen taulukkomme ja selvitetään, mistä tunnisteista se koostuu. Opitaan yhdistämään soluja, muuttamaan rivien ja sarakkeiden määrää, tasaamaan tekstiä ja paljon muuta. Opimme myös suunnittelijalta perusvinkkejä pöytäsi kauniin tekemiseen.

Johdatus lomakkeisiin

Luodaan ensimmäinen lomake, opitaan työskentelemään syöttökenttien, avattavien luetteloiden, valintaruutujen ja tietysti painikkeiden kanssa. Tutkitaan muita lomakeelementtejä, joista on meille hyötyä tulevaisuudessa.

CSS

Johdatus CSS: ään

Muistetaan mitä CSS on ja miten sitä käytetään. Opitaan käyttämään CSS: ää HTML-sivujen parissa. Tutkitaan CSS: n syntaksia ja mitä valitsimet ovat, periytymistä ja millä prioriteetilla tyylejämme sovelletaan HTML-dokumenttiin.

Valitsijat

Tutkitaan valikoimia tarkemmin. Opitaan pääsemään yhteen tai useampaan elementtiin, mitä eroa on luokalla ja pseudo-luokalla ja elementillä pseudoelementistä. Katsotaanpa CSS: n ohjeita ja selvitetään, mitä ihmiset haluavat kysyä CSS: stä haastatteluissa.

Periytys, peräkkäinen ja prioriteetti

Opimme, että stunting ja stuntman eivät ole samalta alalta. Ymmärretään periaatteet, joilla CSS-tyylejä sovelletaan HTML-elementteihin.

Tekstin koristelu

Palataan siihen mistä aloitimme – tekstiin. Opitaan tekemään tekstistämme kaunista ja käyttäjäystävällistä käyttämällä CSS-ominaisuuksia: lihavointi, kursivoitu, koko, väri, tausta ja muut.

Estä asiakirjamalli

Opitaan div- ja span-tunnisteet sekä elementtien koon, täytön ja reunusten asettaminen. Ymmärretään kuinka dokumentin lohkomalli muodostuu ja mitä ominaisuuksia meillä on elementtien sijoitteluun.

JavaScript

Esittelyssä JavaScript

Tutustutaan Front-end-kehityksen kolmanteen pilariin - JavaScriptiin. Selvitetään mitä muuttujat ovat, tietotyypit ja miksi niitä tarvitaan. Ja tietysti kirjoitamme ensimmäisen ohjelmamme.

ehdot

Muistetaan logiikka, loogiset toiminnot ja niiden yhdistelmät. Olkoon voima ja hallinta kanssamme.

Pyörät

Opitaan tekemään paljon samalla kun kirjoitat vähän koodia. Ymmärrämme, että sykli syklissä on yksinkertainen, mutta sinun on oltava varovainen.

Taulukot

On jäämassoja, metsiä ja ohjelmoinnissa on joukkoja. Tutkimme, mitä niillä on yhteistä ja miten ne eroavat toisistaan ​​tällä oppitunnilla. Vihje - edellisen oppitunnin silmukat auttavat meitä paljon.

Toiminnot

Jos muuttujat ja niille oikea nimi ovat ohjelmoinnin ABC: t, niin kyky työskennellä funktioiden kanssa ja valita niille sopivat nimet on jo resepti. Tällä oppitunnilla opimme jakamaan ohjelman loogisiksi lohkoiksi ja miksi tämä on tärkeää.

Objektit

Tutustumme esineiden käsitteeseen, menetelmiin ja alamme tutustua OOP: n periaatteisiin.

Johdatus DOM: iin

JavaScript olisi hyödytön, jos se ei voisi olla vuorovaikutuksessa HTML-dokumentin kanssa. Opimme mitä DOM (Document Object Model) on, mutta mikä tärkeintä, opimme työskentelemään HTML: n ja CSS: n kanssa JavaScriptin avulla.

Tapahtumankäsittely

Nyt viemme sen seuraavalle tasolle ja opimme reagoimaan ja olemaan vuorovaikutuksessa käyttäjän kanssa JavaScriptin avulla. Opimme myös, miksi JavaScript-tapahtumat voivat kuplia ja upota.

HTML5 ja CSS3

HTML5: mitä uutta ja miksi?

Selvitetään, mitä muutoksia HTML5:ssä on tapahtunut ja miksi. Tutkitaan uusia elementtejä ja analysoidaan tapauksia niiden oikeasta käytöstä.

Asemointielementit ja ruudukko

Katsotaanpa uusia tapoja jäsentää sivuja ja sijoittaa niihin elementtejä.

HTML5-lomakkeet

Tutkitaan vallan pimeää puolta ja harjoitellaan HTML5:n uusilla muodoilla sekä muutoksilla vanhoihin. Työstetään uudentyyppisten kenttien kanssa päivämäärien, värien, numeroiden syöttämiseen ja kuinka kehotetaan käyttäjää helpottamaan elämäänsä hieman.

Ääni ja video

Tässä opetusohjelmassa olet DJ sekä toimittaja. Meillä ei ole aikaa tehdä omaa Youtubea tämän oppitunnin aikana, mutta yritämme kovasti luoda prototyypin perustoiminnoilla.

Työskentely tekstin kanssa CSS3:ssa

Selvitetään, mitä mahdollisuuksia ja suosituksia tekstin muotoilulle on standardin uusimmassa versiossa.

Siirtymä- ja muunnostehosteet CSS3:ssa

Opitaan luomaan animaatioita ja erilaisia ​​tehosteita CSS3:lla. Tutustutaan sudenkuoppiin luotaessa tällaisia ​​tehosteita.

Mukautuva asettelu

Selvitetään, miksi sinun on asetettava mukautuva asettelu ja milloin se on tarpeetonta ja voi aiheuttaa vahinkoa. Katsotaanpa perussyntaksia ja tietysti harjoitellaan mukautuvaa asettelua.

Flexbox & CSS Grid

Opimme nykyaikaisista lähestymistavoista lohkoasetteluun sekä siitä, mitä vaikeuksia niiden käytössä on.

CSS-esiprosessorit: LESS ja SASS

Haluatko käyttää muuttujia CSS: ssä? Helposti! Ota selvää, mitä mielenkiintoisia asioita voit tehdä CSS-esiprosessorien avulla.

JavaScript uudelle tasolle

ES-2015+

Mikä on moderni JavaScript, "tiukka tila" ja kuinka elää sen kanssa.

OOP JavaScriptissä

Tutkitaan kuinka luokat rakennetaan nykyaikaisessa JavaScriptissä ja miksi niitä käytetään, jos kaikki voidaan tehdä funktioiden avulla. Kuinka perintö toimii ja mitä muita tapoja luoda luokkia on olemassa JS: ssä.

Toiminnot yksityiskohtaisesti

Selvitetään, mitä funktion ilmoitus ja funktiolauseke ovat, opitaan kutsumaan funktiota ilman nimeä. Katsotaanpa ilmaisua "kontekstin sitominen".

AJAX ja JSON

Nostetaan itsemme kehittäjänä uudelle tasolle, opitaan tekemään HTTP-pyyntöjä ja opitaan kuinka palvelin ja asiakas voivat kommunikoida keskenään eikä riidellä.

Säännölliset lausekkeet

"Jos sinulla on ongelma ja aiot ratkaista sen säännöllisillä lausekkeilla, sinulla on jo kaksi ongelmaa." Opitaan kuinka vältyt ampumasta itseäsi jalkaan käyttämällä säännöllisiä lausekkeita.

Rakentajat, tehtävien suorittajat ja riippuvuuden hallinta

Bower, npm, gulp, Grunt, webpack ja muut. Tässä ei ole mitään monimutkaista, mutta sinun on selvitettävä se.

Testaus JavaScriptillä

Missä on koodia, siellä on aina virheitä. Opit kuinka minimoida niiden lukumäärä ja mitkä käytännöt ja työkalut auttavat meitä tässä.

Algoritmit

Opettelemme kirjoittamaan koodia, jotta prosessori ja selain eivät myöhemmin koe tuskallista kipua ohjelmaa käynnistettäessä.

ReactJS

ReactJS: n esittely

Tutustutaan ReactJS: ään, opitaan kirjoittamaan yksinkertaisia ​​komponentteja ja verrataan sitä muihin suosittuihin kehyksiin. Tutustutaanpa Virtual DOM: n käsitteeseen.

React-sovellusten arkkitehtuuri ja konfigurointi

Selvitetään, mitä toimia meidän on suoritettava, jotta voimme paitsi kirjoittaa Reactiin, myös tehdä sen mahdollisimman tehokkaasti ja kätevästi.

Ensimmäisen sovelluksen luominen ReactJS: ssä

Katsotaanpa tarkemmin JSX: ää, ReactComponentia, ReactDOM.renderiä ja Render-toimintoa. Konfiguroimme ja käynnistämme ensimmäisen sovelluksen, luomme suhteita komponenttien ja prosessitapahtumien välille.

Reititys ja ReactJS

Mikä on reititys; Tutustutaan ReactRouteriin ja sen toimivuuteen; Järjestämme reitityksen sovelluksessamme.