Oprettelse af hjemmeside Front-end udvikling - gratis kursus fra børns online programmeringsskole Hello World, træning 44 timer, Dato: 3. december 2023.
Miscellanea / / December 06, 2023
Hvordan internettet fungerer
Lad os tale om de grundlæggende begreber for internettet og dets arkitektur. Lad os finde ud af, hvad et domæne, hosting, klient-server-arkitektur er. Lad os sætte arbejdsmiljøet op og tale om de tre søjler i frontend-udvikling – HTML, CSS og JavaScript.
HTML
HTML dokument struktur
Lad os skabe de første HTML-sider og se på eksempler på simple og komplekse websider. Lad os finde ud af, hvilke blokke der skal være på vores side. Lad os få vores sider til at linke til hinanden, finde ud af, hvordan tekst adskiller sig fra hypertekst, og hvad tags og attributter er.
Arbejd med tekst
Lad os lære, hvordan man arbejder med tekst i HTML korrekt: opdel den i afsnit, angiv overskrifter og underoverskrifter. Lad os lære at lave nummererede og punktopstillede lister og citere klassikerne.
Links og billeder
Lad os stifte bekendtskab med links mere detaljeret, og også lære at indsætte billeder og bruge dem som links.
Bordlayout
Lad os oprette vores første tabel og finde ud af, hvilke tags den består af. Lad os lære at flette celler, ændre antallet af rækker og kolonner, justere tekst og meget mere. Vi vil også lære grundlæggende tips fra designeren til, hvordan du gør dit bord smukt.
Introduktion til formularer
Lad os oprette vores første formular, lære at arbejde med inputfelter, drop-down lister, afkrydsningsfelter og selvfølgelig knapper. Lad os studere andre formelementer, som vil være nyttige for os i fremtiden.
CSS
Introduktion til CSS
Lad os huske, hvad CSS er, og hvordan man bruger det. Lad os lære, hvordan du bruger CSS, når du arbejder med HTML-sider. Lad os studere syntaksen for CSS og hvad vælgere er, arv, og med hvilken prioritet vores stilarter anvendes på et HTML-dokument.
Vælgere
Lad os studere vælgere mere detaljeret. Lad os lære, hvordan du får adgang til et eller flere elementer, hvad er forskellen mellem en klasse og en pseudo-klasse og et element fra et pseudo-element. Lad os tage et kig på CSS-retningslinjerne og finde ud af, hvad folk kan lide at spørge om CSS i interviews.
Arv, kaskade og prioritering
Vi lærer, at stunting og stuntmænd ikke er fra samme felt. Lad os forstå principperne for, hvordan CSS-stile anvendes på HTML-elementer.
Tekst dekoration
Lad os vende tilbage til hvor vi startede - til teksten. Lad os lære at gøre vores tekst smuk og brugervenlig ved hjælp af CSS-egenskaber: fed, kursiv, størrelse, farve, baggrund og andre.
Blok dokumentmodel
Lad os lære div- og span-tags, samt hvordan man indstiller elementstørrelser, polstring og grænser. Lad os forstå, hvordan blokmodellen af et dokument dannes, og hvilke muligheder vi har til at placere elementer.
JavaScript
Introduktion af JavaScript
Lad os stifte bekendtskab med den tredje søjle i frontend-udvikling - JavaScript. Lad os finde ud af, hvad variabler er, datatyper og hvorfor de er nødvendige. Og selvfølgelig skriver vi vores første program.
Betingelser
Lad os huske logik, logiske operationer og deres kombinationer. Må styrken og kontrollen være med os.
Cykler
Lad os lære at gøre meget, mens vi skriver lidt kode. Lad os forstå, at en cyklus i en cyklus er enkel, men du skal være forsigtig.
Arrays
Der er ismasser, skove, og der er arrays i programmering. Vi vil studere, hvad de har til fælles, og hvordan de adskiller sig i denne lektion. Tip - sløjferne fra den forrige lektion vil hjælpe os meget.
Funktioner
Hvis variabler og det rigtige navn for dem er programmeringens ABC'er, så er evnen til at arbejde med funktioner og vælge passende navne til dem allerede en opskrift. Vi lærer, hvordan man deler et program op i logiske blokke, og hvorfor det er vigtigt i denne lektion.
Objekter
Vi vil stifte bekendtskab med begrebet objekter, metoder og begynde at stifte bekendtskab med principperne i OOP.
Introduktion til DOM
JavaScript ville være ubrugeligt, hvis det ikke kunne interagere med et HTML-dokument. Vi lærer, hvad DOM (Document Object Model) er, men endnu vigtigere, vi lærer, hvordan man arbejder med HTML og CSS gennem JavaScript.
Begivenhedshåndtering
Nu tager vi det til næste niveau og lærer, hvordan man reagerer og interagerer med brugeren ved hjælp af JavaScript. Vi lærer også, hvorfor JavaScript-begivenheder kan boble og synke.
HTML5 og CSS3
HTML5: hvad er nyt og hvorfor?
Lad os finde ud af, hvilke ændringer der er sket i HTML5 og hvorfor. Lad os studere nye elementer og analysere tilfælde af deres korrekte brug.
Positioneringselementer og gitter
Lad os se på nye måder at strukturere sider og placere elementer på dem.
HTML5 formularer
Lad os udforske den mørke side af magt og øve os med nye formularer i HTML5, såvel som ændringer til gamle. Lad os arbejde med nye typer felter til at indtaste datoer, farver, tal og hvordan man får brugeren til at gøre sit liv lidt lettere.
Lyd og video
I denne tutorial er du DJ såvel som redaktør. Vi vil ikke have tid til at lave vores egen Youtube i løbet af denne lektion, men vi vil prøve meget hårdt på at skabe en prototype med grundlæggende funktionalitet.
Arbejde med tekst i CSS3
Lad os finde ud af, hvilke muligheder der er og anbefalinger til tekstformatering i den seneste version af standarden.
Overgangs- og transformationseffekter i CSS3
Lad os lære at lave animationer og forskellige effekter ved hjælp af CSS3. Lad os stifte bekendtskab med faldgruberne, når vi opretter sådanne effekter.
Adaptivt layout
Lad os finde ud af, hvorfor du skal layoute adaptivt, og hvornår det er unødvendigt og kan forårsage skade. Lad os se på den grundlæggende syntaks og selvfølgelig øve os på adaptivt layout.
Flexbox & CSS Grid
Vi vil lære om moderne tilgange til bloklayout, samt hvilke vanskeligheder der er ved at bruge dem.
CSS-forprocessorer: LESS og SASS
Vil du bruge variabler i CSS? Let! Find ud af, hvilke interessante ting du kan gøre ved at bruge CSS-forbehandlere.
JavaScript på et nyt niveau
ES-2015+
Hvad er moderne JavaScript, "strict mode" og hvordan man lever med det hele.
OOP i JavaScript
Lad os studere, hvordan klasser er struktureret i moderne JavaScript, og hvorfor de bruges, hvis alt kan gøres ved hjælp af funktioner. Hvordan arv fungerer, og hvilke andre måder at oprette klasser findes i JS.
Funktioner i detaljer
Lad os finde ud af, hvad funktionsdeklaration og funktionsudtryk er, lær hvordan man kalder en funktion uden navn. Lad os se på udtrykket "kontekstbinding".
AJAX og JSON
Lad os tage os selv til et nyt niveau som udviklere, lære at lave HTTP-anmodninger og lære, hvordan serveren og klienten kan kommunikere med hinanden og ikke skændes.
Regelmæssige udtryk
"Hvis du har et problem, og du vil løse det med regulære udtryk, så har du allerede to problemer." Lad os lære, hvordan du undgår at skyde dig selv i foden ved hjælp af regulære udtryk.
Bygherrer, opgaveløbere og afhængighedsstyring
Bower, npm, gulp, Grunt, webpack og co. Der er ikke noget kompliceret ved dette, men du bliver nødt til at finde ud af det.
Test i JavaScript
Hvor der er kode, er der altid fejl. Du vil lære, hvordan du minimerer deres antal, og hvilken praksis og værktøjer, der hjælper os med dette.
Algoritmer
Vi lærer, hvordan man skriver kode, så processoren og browseren ikke senere oplever voldsomme smerter, når du starter dit program.
ReactJS
Introduktion til ReactJS
Lad os stifte bekendtskab med ReactJS, lære at skrive simple komponenter og sammenligne det med andre populære rammer. Lad os stifte bekendtskab med konceptet Virtual DOM.
Arkitektur og konfiguration af React applikationer
Lad os finde ud af, hvilke handlinger vi skal udføre for ikke kun at skrive i React, men også for at gøre det så effektivt og bekvemt som muligt.
Oprettelse af den første applikation i ReactJS
Lad os se nærmere på JSX, ReactComponent, ReactDOM.render, Render-funktion. Vi konfigurerer og lancerer den første applikation, etablerer relationer mellem komponenter og proceshændelser.
Routing og ReactJS
Hvad er routing; Lad os stifte bekendtskab med ReactRouter og dens funktionalitet; Vi organiserer routing i vores applikation.