Skapande av webbplats Front-end-utveckling - gratis kurs från Barnens onlineprogrammeringsskola Hello World, utbildning 44 timmar, Datum: 3 december 2023.

Hur internet fungerar

Låt oss prata om de grundläggande koncepten för Internet och dess arkitektur. Låt oss ta reda på vad en domän, värd, klient-serverarkitektur är. Låt oss sätta upp arbetsmiljön och prata om de tre pelarna för frontend-utveckling - HTML, CSS och JavaScript.

HTML

HTML-dokumentstruktur

Låt oss skapa de första HTML-sidorna och titta på exempel på enkla och komplexa webbsidor. Låt oss ta reda på vilka block som ska finnas på vår sida. Låt oss få våra sidor att länka till varandra, ta reda på hur text skiljer sig från hypertext och vad taggar och attribut är.

Arbeta med text

Låt oss lära oss hur man arbetar med text i HTML korrekt: dela upp den i stycken, ange rubriker och underrubriker. Låt oss lära oss hur man gör numrerade och punktlistor och citerar klassikerna.

Länkar och bilder

Låt oss bekanta oss mer detaljerat med länkar och även lära oss hur man infogar bilder och använder dem som länkar.

Bordslayout

Låt oss skapa vår första tabell och ta reda på vilka taggar den består av. Låt oss lära oss hur man slår samman celler, ändrar antalet rader och kolumner, justerar text och mycket mer. Vi kommer också att lära oss grundläggande tips från designern om hur du gör ditt bord vackert.

Introduktion till formulär

Låt oss skapa vårt första formulär, lära oss hur du arbetar med inmatningsfält, rullgardinslistor, kryssrutor och, naturligtvis, knappar. Låt oss studera andra formelement som kommer att vara användbara för oss i framtiden.

CSS

Introduktion till CSS

Låt oss komma ihåg vad CSS är och hur man använder det. Låt oss lära oss hur man använder CSS när man arbetar med HTML-sidor. Låt oss studera syntaxen för CSS och vad väljare är, arv och med vilken prioritet våra stilar tillämpas på ett HTML-dokument.

Väljare

Låt oss studera väljare mer i detalj. Låt oss lära oss hur man kommer åt ett eller flera element, vad är skillnaden mellan en klass och en pseudo-klass och ett element från ett pseudo-element. Låt oss ta en titt på CSS-riktlinjerna och ta reda på vad folk gillar att fråga om CSS i intervjuer.

Arv, kaskad och prioritet

Vi lär oss att stunting och stuntmän inte kommer från samma område. Låt oss förstå principerna för vilka CSS-stilar tillämpas på HTML-element.

Text dekoration

Låt oss återgå till där vi började – till texten. Låt oss lära oss hur vi gör vår text vacker och användarvänlig med hjälp av CSS-egenskaper: djärvhet, kursiv stil, storlek, färg, bakgrund och annat.

Blockdokumentmodell

Låt oss lära oss div- och span-taggar, samt hur man ställer in elementstorlekar, utfyllnad och gränser. Låt oss förstå hur blockmodellen av ett dokument bildas och vilka möjligheter vi har för att placera element.

JavaScript

Vi introducerar JavaScript

Låt oss bekanta oss med den tredje pelaren av frontend-utveckling - JavaScript. Låt oss ta reda på vad variabler är, datatyper och varför de behövs. Och självklart ska vi skriva vårt första program.

Betingelser

Låt oss komma ihåg logik, logiska operationer och deras kombinationer. Må styrkan och kontrollen vara med oss.

Cyklar

Låt oss lära oss hur man gör mycket samtidigt som man skriver lite kod. Låt oss förstå att en cykel inom en cykel är enkel, men du måste vara försiktig.

Arrayer

Det finns ismassor, skogar och det finns arrayer i programmering. Vi kommer att studera vad de har gemensamt och hur de skiljer sig i den här lektionen. Tips - slingorna från föregående lektion kommer att hjälpa oss mycket.

Funktioner

Om variabler och det rätta namnet för dem är programmeringens ABC, så är möjligheten att arbeta med funktioner och välja lämpliga namn för dem redan ett recept. Vi kommer att lära oss hur man delar upp ett program i logiska block och varför detta är viktigt i den här lektionen.

Föremål

Vi kommer att bekanta oss med begreppet objekt, metoder och börja bekanta oss med principerna för OOP.

Introduktion till DOM

JavaScript skulle vara värdelöst om det inte kunde interagera med ett HTML-dokument. Vi kommer att lära oss vad DOM (Document Object Model) är, men ännu viktigare, vi lär oss hur man arbetar med HTML och CSS genom JavaScript.

Eventhantering

Nu tar vi det till nästa nivå och lär oss hur man reagerar och interagerar med användaren med hjälp av JavaScript. Vi kommer också att lära oss varför JavaScript-händelser kan bubbla och sjunka.

HTML5 och CSS3

HTML5: vad är nytt och varför?

Låt oss ta reda på vilka förändringar som har skett i HTML5 och varför. Låt oss studera nya element och analysera fall av korrekt användning.

Positioneringselement och rutnät

Låt oss titta på nya sätt att strukturera sidor och placera element på dem.

HTML5-formulär

Låt oss utforska den mörka sidan av makt och träna med nya formulär i HTML5, såväl som ändringar av gamla. Låt oss arbeta med nya typer av fält för att ange datum, färger, siffror och hur man uppmanar användaren att göra livet lite enklare.

Ljud och video

I den här handledningen är du såväl DJ som redaktör. Vi kommer inte att ha tid att göra vår egen Youtube under den här lektionen, men vi kommer att försöka mycket hårt för att skapa en prototyp med grundläggande funktionalitet.

Arbeta med text i CSS3

Låt oss ta reda på vilka möjligheter det finns och rekommendationer för textformatering i den senaste versionen av standarden.

Övergångs- och transformationseffekter i CSS3

Låt oss lära oss hur man skapar animationer och olika effekter med CSS3. Låt oss bekanta oss med fallgroparna när du skapar sådana effekter.

Adaptiv layout

Låt oss ta reda på varför du behöver utforma adaptivt, och när det är onödigt och kan orsaka skada. Låt oss titta på den grundläggande syntaxen och, naturligtvis, träna adaptiv layout.

Flexbox & CSS Grid

Vi kommer att lära oss om moderna metoder för blocklayout, samt vilka svårigheter det finns med att använda dem.

CSS-förprocessorer: LESS och SASS

Vill du använda variabler i CSS? Lätt! Ta reda på vilka intressanta saker du kan göra med CSS-förprocessorer.

JavaScript på en ny nivå

ES-2015+

Vad är modernt JavaScript, "strikt läge" och hur man lever med det hela.

OOP i JavaScript

Låt oss studera hur klasser är uppbyggda i modern JavaScript och varför de används om allt kan göras med hjälp av funktioner. Hur arv fungerar och vilka andra sätt att skapa klasser finns i JS.

Funktioner i detalj

Låt oss ta reda på vad funktionsdeklaration och funktionsuttryck är, lär oss hur man anropar en funktion utan namn. Låt oss titta på frasen "kontextbindning".

AJAX och JSON

Låt oss ta oss själva till en ny nivå som utvecklare, lära oss hur man gör HTTP-förfrågningar och lära oss hur servern och klienten kan kommunicera med varandra och inte gräla.

Vanliga uttryck

"Om du har ett problem och du ska lösa det med reguljära uttryck, då har du redan två problem." Låt oss lära oss hur du undviker att skjuta dig själv i foten med vanliga uttryck.

Byggare, uppgiftslöpare och beroendehantering

Bower, npm, gulp, Grunt, webpack och co. Det är inget komplicerat med detta, men du måste ta reda på det.

Testa i JavaScript

Där det finns kod finns det alltid fel. Du kommer att lära dig hur du minimerar deras antal och vilka metoder och verktyg som hjälper oss med detta.

Algoritmer

Vi kommer att lära oss hur man skriver kod så att processorn och webbläsaren senare inte upplever olidlig smärta när du startar ditt program.

ReactJS

Introduktion till ReactJS

Låt oss bekanta oss med ReactJS, lära oss att skriva enkla komponenter och jämföra det med andra populära ramverk. Låt oss bekanta oss med konceptet Virtual DOM.

Arkitektur och konfiguration av React-applikationer

Låt oss ta reda på vilka åtgärder vi behöver utföra för att inte bara skriva i React, utan också göra det så effektivt och bekvämt som möjligt.

Skapar den första applikationen i ReactJS

Låt oss ta en närmare titt på JSX, ReactComponent, ReactDOM.render, Render-funktion. Vi konfigurerar och lanserar den första applikationen, etablerar relationer mellan komponenter och processhändelser.

Routing och ReactJS

Vad är routing; Låt oss bekanta oss med ReactRouter och dess funktionalitet; Vi organiserar routing i vår applikation.