Oppretting av nettside Front-end utvikling - gratis kurs fra Barnas nettbaserte programmeringsskole Hello World, opplæring 44 timer, Dato: 3. desember 2023.
Miscellanea / / December 06, 2023
Hvordan Internett fungerer
La oss snakke om de grunnleggende konseptene til Internett og dets arkitektur. La oss finne ut hva en domene-, hosting-, klient-server-arkitektur er. La oss sette opp arbeidsmiljøet og snakke om de tre pilarene i frontend-utvikling – HTML, CSS og JavaScript.
HTML
HTML-dokumentstruktur
La oss lage de første HTML-sidene og se på eksempler på enkle og komplekse nettsider. La oss finne ut hvilke blokker som skal være på siden vår. La oss få sidene våre til å lenke til hverandre, finne ut hvordan tekst skiller seg fra hypertekst og hva tagger og attributter er.
Arbeid med tekst
La oss lære hvordan du jobber med tekst i HTML på riktig måte: del den inn i avsnitt, angi overskrifter og underoverskrifter. La oss lære å lage nummererte og punktlister og sitere klassikerne.
Lenker og bilder
La oss bli mer detaljert kjent med lenker, og også lære hvordan du setter inn bilder og bruker dem som lenker.
Bordoppsett
La oss lage vår første tabell og finne ut hvilke tagger den består av. La oss lære hvordan du slår sammen celler, endrer antall rader og kolonner, justerer tekst og mye mer. Vi vil også lære grunnleggende tips fra designeren om hvordan du kan gjøre bordet ditt vakkert.
Introduksjon til skjemaer
La oss lage vårt første skjema, lære hvordan du jobber med inndatafelt, rullegardinlister, avmerkingsbokser og selvfølgelig knapper. La oss studere andre formelementer som vil være nyttige for oss i fremtiden.
CSS
Introduksjon til CSS
La oss huske hva CSS er og hvordan du bruker det. La oss lære hvordan du bruker CSS når du arbeider med HTML-sider. La oss studere syntaksen til CSS og hva velgere er, arv, og med hvilken prioritet stilene våre brukes på et HTML-dokument.
Velgere
La oss studere velgere mer detaljert. La oss lære hvordan du får tilgang til ett eller flere elementer, hva er forskjellen mellom en klasse og en pseudo-klasse og et element fra et pseudo-element. La oss ta en titt på CSS-retningslinjene og finne ut hva folk liker å spørre om CSS i intervjuer.
Arv, kaskade og prioritering
Vi lærer at stunting og stuntmenn ikke er fra samme felt. La oss forstå prinsippene for hvilke CSS-stiler brukes på HTML-elementer.
Tekstdekorasjon
La oss gå tilbake til der vi startet - til teksten. La oss lære hvordan du gjør teksten vår vakker og brukervennlig ved å bruke CSS-egenskaper: dristighet, kursiv, størrelse, farge, bakgrunn og andre.
Blokkdokumentmodell
La oss lære div- og span-tagger, samt hvordan du angir elementstørrelser, polstring og grenser. La oss forstå hvordan blokkmodellen til et dokument dannes og hvilke muligheter vi har for å plassere elementer.
JavaScript
Vi introduserer JavaScript
La oss bli kjent med den tredje pilaren i frontend-utvikling - JavaScript. La oss finne ut hva variabler er, datatyper og hvorfor de er nødvendige. Og selvfølgelig skal vi skrive vårt første program.
Forhold
La oss huske logikk, logiske operasjoner og deres kombinasjoner. Måtte styrken og kontrollen være med oss.
Sykluser
La oss lære hvordan du gjør mye mens du skriver lite kode. La oss forstå at en syklus i en syklus er enkel, men du må være forsiktig.
Matriser
Det er ismasser, skoger, og det er matriser i programmering. Vi vil studere hva de har til felles og hvordan de er forskjellige i denne leksjonen. Hint - løkkene fra forrige leksjon vil hjelpe oss mye.
Funksjoner
Hvis variabler og det riktige navnet på dem er ABC-ene for programmering, er muligheten til å jobbe med funksjoner og velge passende navn for dem allerede en oppskrift. Vi vil lære hvordan du deler opp et program i logiske blokker og hvorfor dette er viktig i denne leksjonen.
Objekter
Vi skal sette oss inn i begrepet objekter, metoder og begynne å bli kjent med prinsippene til OOP.
Introduksjon til DOM
JavaScript ville være ubrukelig hvis det ikke kunne samhandle med et HTML-dokument. Vi lærer hva DOM (Document Object Model) er, men enda viktigere, vi lærer hvordan du arbeider med HTML og CSS gjennom JavaScript.
Begivenhetshåndtering
Nå skal vi ta det til neste nivå og lære hvordan du reagerer og samhandler med brukeren ved hjelp av JavaScript. Vi vil også lære hvorfor JavaScript-hendelser kan boble og synke.
HTML5 og CSS3
HTML5: hva er nytt og hvorfor?
La oss finne ut hvilke endringer som har skjedd i HTML5 og hvorfor. La oss studere nye elementer og analysere tilfeller av riktig bruk.
Plassering av elementer og rutenett
La oss se på nye måter å strukturere sider og plassere elementer på dem.
HTML5-skjemaer
La oss utforske den mørke siden av makt og øve med nye skjemaer i HTML5, samt endringer i gamle. La oss jobbe med nye typer felt for å legge inn datoer, farger, tall og hvordan man kan be brukeren om å gjøre livet hans litt enklere.
Lyd og video
I denne opplæringen er du DJ så vel som redaktør. Vi vil ikke ha tid til å lage vår egen Youtube i løpet av denne leksjonen, men vi vil prøve hardt for å lage en prototype med grunnleggende funksjonalitet.
Arbeid med tekst i CSS3
La oss finne ut hvilke muligheter det er og anbefalinger for tekstformatering i siste versjon av standarden.
Overgangs- og transformasjonseffekter i CSS3
La oss lære hvordan du lager animasjoner og ulike effekter ved hjelp av CSS3. La oss bli kjent med fallgruvene når du lager slike effekter.
Adaptiv layout
La oss finne ut hvorfor du trenger å layoute adaptivt, og når det er unødvendig og kan forårsake skade. La oss se på den grunnleggende syntaksen og selvfølgelig øve på adaptiv layout.
Flexbox og CSS Grid
Vi vil lære om moderne tilnærminger til blokkoppsett, samt hvilke vanskeligheter det er med å bruke dem.
CSS-forprosessorer: LESS og SASS
Vil du bruke variabler i CSS? Enkelt! Finn ut hvilke interessante ting du kan gjøre med CSS-forprosessorer.
JavaScript på et nytt nivå
ES-2015+
Hva er moderne JavaScript, «strict mode» og hvordan leve med det hele.
OOP i JavaScript
La oss studere hvordan klasser er strukturert i moderne JavaScript og hvorfor de brukes hvis alt kan gjøres ved hjelp av funksjoner. Hvordan arv fungerer og hvilke andre måter å lage klasser på finnes i JS.
Funksjoner i detalj
La oss finne ut hva funksjonserklæring og funksjonsuttrykk er, lære hvordan du kaller en funksjon uten navn. La oss se på uttrykket "kontekstbinding".
AJAX og JSON
La oss ta oss selv til et nytt nivå som utviklere, lære å lage HTTP-forespørsler og lære hvordan serveren og klienten kan kommunisere med hverandre og ikke krangle.
Vanlig uttrykk
"Hvis du har et problem og du skal løse det med regulære uttrykk, så har du allerede to problemer." La oss lære hvordan du unngår å skyte deg selv i foten ved å bruke regulære uttrykk.
Byggherrer, oppgaveløpere og avhengighetsstyring
Bower, npm, gulp, Grunt, webpack og co. Det er ikke noe komplisert med dette, men du må finne ut av det.
Testing i JavaScript
Der det er kode, er det alltid feil. Du vil lære hvordan du kan minimere antallet og hvilke praksiser og verktøy som vil hjelpe oss med dette.
Algoritmer
Vi vil lære hvordan du skriver kode slik at prosessoren og nettleseren senere ikke opplever uutholdelig smerte når du starter programmet.
ReactJS
Introduksjon til ReactJS
La oss bli kjent med ReactJS, lære hvordan du skriver enkle komponenter og sammenligne det med andre populære rammeverk. La oss bli kjent med konseptet Virtual DOM.
Arkitektur og konfigurasjon av React-applikasjoner
La oss finne ut hvilke handlinger vi må utføre for ikke bare å skrive i React, men også for å gjøre det så effektivt og praktisk som mulig.
Opprette den første applikasjonen i ReactJS
La oss se nærmere på JSX, ReactComponent, ReactDOM.render, Render-funksjonen. Vi konfigurerer og lanserer den første applikasjonen, etablerer relasjoner mellom komponenter og prosesshendelser.
Ruting og ReactJS
Hva er ruting; La oss bli kjent med ReactRouter og dens funksjonalitet; Vi organiserer ruting i applikasjonen vår.