Website maken Front-end ontwikkeling - gratis cursus van online programmeerschool voor kinderen Hello World, training 44 uur, Datum: 3 december 2023.

Hoe internet werkt

Laten we het hebben over de basisconcepten van internet en zijn architectuur. Laten we eens kijken wat een domein-, hosting- en client-server-architectuur is. Laten we de werkomgeving opzetten en praten over de drie pijlers van front-endontwikkeling: HTML, CSS en JavaScript.

HTML

HTML-documentstructuur

Laten we de eerste HTML-pagina's maken en voorbeelden bekijken van eenvoudige en complexe webpagina's. Laten we uitzoeken welke blokken op onze pagina zouden moeten staan. Laten we onze pagina's naar elkaar linken, ontdekken hoe tekst verschilt van hypertekst en wat tags en attributen zijn.

Werk met tekst

Laten we leren hoe we correct met tekst in HTML kunnen werken: verdeel het in alinea's, geef koppen en subkoppen aan. Laten we leren hoe we genummerde lijsten en lijsten met opsommingstekens kunnen maken en de klassiekers kunnen citeren.

Links en afbeeldingen

Laten we meer in detail kennis maken met links, en ook leren hoe u afbeeldingen kunt invoegen en deze als links kunt gebruiken.

Tafelindeling

Laten we onze eerste tabel maken en ontdekken uit welke tags deze bestaat. Laten we leren hoe u cellen kunt samenvoegen, het aantal rijen en kolommen kunt wijzigen, tekst kunt uitlijnen en nog veel meer. Ook leren we basistips van de ontwerper over hoe u uw tafel mooi kunt maken.

Inleiding tot formulieren

Laten we ons eerste formulier maken, leren werken met invoervelden, vervolgkeuzelijsten, selectievakjes en natuurlijk knoppen. Laten we andere vormelementen bestuderen die in de toekomst nuttig voor ons zullen zijn.

CSS

Inleiding tot CSS

Laten we onthouden wat CSS is en hoe we het moeten gebruiken. Laten we leren hoe we CSS kunnen gebruiken bij het werken met HTML-pagina's. Laten we de syntaxis van CSS bestuderen en wat selectors zijn, overerving en met welke prioriteit onze stijlen worden toegepast op een HTML-document.

Selectoren

Laten we selectors in meer detail bestuderen. Laten we leren hoe we toegang kunnen krijgen tot een of meer elementen, wat het verschil is tussen een klasse en een pseudo-klasse en een element van een pseudo-element. Laten we de CSS-richtlijnen eens bekijken en ontdekken wat mensen graag vragen over CSS in interviews.

Overerving, cascadering en prioriteit

We leren dat stunten en stuntmannen niet uit hetzelfde vakgebied komen. Laten we de principes begrijpen waarmee CSS-stijlen worden toegepast op HTML-elementen.

Tekstdecoratie

Laten we terugkeren naar waar we begonnen: naar de tekst. Laten we leren hoe we onze tekst mooi en gebruiksvriendelijk kunnen maken met behulp van CSS-eigenschappen: vetheid, cursief, grootte, kleur, achtergrond en andere.

Blokdocumentmodel

Laten we div- en span-tags leren kennen, en ook hoe u elementgroottes, opvulling en randen instelt. Laten we begrijpen hoe het blokmodel van een document wordt gevormd en welke mogelijkheden we hebben voor het positioneren van elementen.

JavaScript

Introductie van JavaScript

Laten we kennis maken met de derde pijler van front-end-ontwikkeling: JavaScript. Laten we eens kijken wat variabelen zijn, gegevenstypen en waarom ze nodig zijn. En natuurlijk gaan we ons eerste programma schrijven.

Voorwaarden

Laten we de logica, logische bewerkingen en hun combinaties onthouden. Moge de kracht en controle bij ons zijn.

Cycli

Laten we leren hoe we veel kunnen doen terwijl we weinig code schrijven. Laten we begrijpen dat een cyclus binnen een cyclus eenvoudig is, maar je moet voorzichtig zijn.

Arrays

Er zijn ijsmassa's, bossen en er zijn arrays in de programmering. Wat ze gemeen hebben en waarin ze van elkaar verschillen, gaan we in deze les bestuderen. Tip: de loops uit de vorige les zullen ons veel helpen.

Functies

Als variabelen en de juiste naam ervoor het ABC van programmeren zijn, dan is de mogelijkheid om met functies te werken en er geschikte namen voor te kiezen al een recept. In deze les leren we hoe je een programma in logische blokken kunt opdelen en waarom dit belangrijk is.

Voorwerpen

We zullen kennis maken met het concept van objecten, methoden en beginnen kennis te maken met de principes van OOP.

Introductie tot DOM

JavaScript zou nutteloos zijn als het niet zou kunnen communiceren met een HTML-document. We zullen leren wat het DOM (Document Object Model) is, maar wat nog belangrijker is, we zullen leren werken met HTML en CSS via JavaScript.

Afhandeling van evenementen

Nu gaan we naar het volgende niveau en leren we hoe we kunnen reageren en communiceren met de gebruiker met behulp van JavaScript. We zullen ook leren waarom JavaScript-gebeurtenissen kunnen borrelen en zinken.

HTML5 & CSS3

HTML5: wat is nieuw en waarom?

Laten we eens kijken welke veranderingen er zijn opgetreden in HTML5 en waarom. Laten we nieuwe elementen bestuderen en gevallen van correct gebruik analyseren.

Positioneringselementen en raster

Laten we eens kijken naar nieuwe manieren om pagina's te structureren en elementen erop te positioneren.

HTML5-formulieren

Laten we de donkere kant van macht verkennen en oefenen met nieuwe vormen in HTML5, evenals met wijzigingen in oude. Laten we werken met nieuwe soorten velden voor het invoeren van datums, kleuren, cijfers en hoe we de gebruiker kunnen vragen zijn leven een beetje gemakkelijker te maken.

Audio en video

In deze tutorial ben jij zowel de DJ als de editor. We hebben tijdens deze les geen tijd om onze eigen YouTube te maken, maar we zullen heel hard proberen een prototype met basisfunctionaliteit te maken.

Werken met tekst in CSS3

Laten we eens kijken welke mogelijkheden er zijn en aanbevelingen voor tekstopmaak in de nieuwste versie van de standaard.

Overgangs- en transformatie-effecten in CSS3

Laten we leren hoe we animaties en verschillende effecten kunnen maken met behulp van CSS3. Laten we kennis maken met de valkuilen bij het creëren van dergelijke effecten.

Adaptieve lay-out

Laten we eens kijken waarom u een adaptieve lay-out nodig heeft, en wanneer dit niet nodig is en schade kan veroorzaken. Laten we naar de basissyntaxis kijken en natuurlijk adaptieve lay-out oefenen.

Flexbox & CSS-raster

We zullen leren over moderne benaderingen van bloklay-out, en welke moeilijkheden er zijn bij het gebruik ervan.

CSS-preprocessors: LESS en SASS

Wilt u variabelen gebruiken in CSS? Gemakkelijk! Ontdek welke interessante dingen u kunt doen met CSS-preprocessors.

JavaScript op een nieuw niveau

ES-2015+

Wat is modern JavaScript, de "strikte modus" en hoe ermee te leven.

OOP in JavaScript

Laten we eens kijken hoe klassen in modern JavaScript zijn gestructureerd en waarom ze worden gebruikt als alles met functies kan worden gedaan. Hoe overerving werkt en welke andere manieren er zijn om klassen te maken in JS.

Functies in detail

Laten we eens kijken wat Functiedeclaratie en Functie-expressie zijn, en leren hoe u een functie zonder naam kunt aanroepen. Laten we eens kijken naar de uitdrukking “contextbinding”.

AJAX en JSON

Laten we onszelf als ontwikkelaars naar een nieuw niveau tillen, leren hoe we HTTP-verzoeken kunnen doen en leren hoe de server en de client met elkaar kunnen communiceren zonder ruzie te maken.

Normale uitdrukkingen

"Als je een probleem hebt en je gaat het oplossen met reguliere expressies, dan heb je al twee problemen." Laten we leren hoe u kunt voorkomen dat u uzelf in de voet schiet met behulp van reguliere expressies.

Bouwers, taaklopers en afhankelijkheidsbeheer

Bower, npm, gulp, Grunt, webpack en co. Hier is niets ingewikkelds aan, maar je zult het wel moeten uitzoeken.

Testen in JavaScript

Waar code is, zijn er altijd fouten. Je leert hoe je hun aantal kunt minimaliseren en welke praktijken en hulpmiddelen ons daarbij kunnen helpen.

Algoritmen

We zullen leren code te schrijven zodat de processor en browser later geen ondraaglijke pijn ervaren bij het starten van uw programma.

ReageerJS

Inleiding tot ReactJS

Laten we kennis maken met ReactJS, leren hoe u eenvoudige componenten schrijft en deze vergelijken met andere populaire raamwerken. Laten we kennis maken met het concept van Virtual DOM.

Architectuur en configuratie van React-applicaties

Laten we eens kijken welke acties we moeten uitvoeren om niet alleen in React te schrijven, maar ook om het zo efficiënt en gemakkelijk mogelijk te doen.

Het creëren van de eerste applicatie in ReactJS

Laten we JSX, ReactComponent, ReactDOM.render, Render-functie eens nader bekijken. We configureren en starten de eerste applicatie, leggen relaties tussen componenten en procesgebeurtenissen.

Routing en ReactJS

Wat is routering; Laten we kennis maken met ReactRouter en zijn functionaliteit; Wij organiseren routing in onze applicatie.