Frontend ontwikkelaar: websites op HTML/CSS/JavaScript - cursus 18.000 rub. van Coddy School of Programming for Children, training 3 modules (maanden)
Gemengde Berichten / / December 03, 2023
Leeftijd: 11-14 jaar
Niveau: voor beginners.
Duur: vanaf 3 modules (maanden), vanaf 24 uur*.
Formaat: individuele en groepslessen, offline en online (realtime).
Aantal kinderen: van 1 tot 8.
Prijs:
vanaf 750 wrijven/uur in een online groep,
vanaf 850 wrijven/uur in een offline groep,
vanaf 1050 roebel/uur individueel online,
vanaf 1980 wrijf/uur individueel offline.
In de moderne wereld streeft elk serieus bedrijf ernaar een eigen website te verwerven, omdat het een soort website is “visitekaartje” op internet, zonder dat zakendoen al verouderd, frivool en ouderwets lijkt hopeloos.
De afgelopen jaren is het beroep van webmaster gestegen naar de top van de ranglijst van de meest aantrekkelijke en gewilde beroepen op IT-gebied. In dit opzicht zijn er momenteel steeds meer mensen bereid een training te volgen in het maken van websites kras en beheers deze prestigieuze specialiteit om stabiel en fatsoenlijk te zijn inkomsten. Onze programmeerschool CODDY stelt voor om uw kind niet uit te stellen en nu meteen in te schrijven voor de cursus “Frontend Developer: Websites op HTML/CSS/JavaScript”! Het doel van deze cursus is om kinderen te leren hoe ze moderne websites kunnen maken en hen kennis te laten maken met de basisprincipes van het beroep van interface-ontwikkelaar.
Wat is webmastering en hoe wordt u webmaster?
Webmastering is een geheel van activiteiten voor de ontwikkeling, creatie, optimalisatie en promotie van websites. Alles wat op één of andere manier te maken heeft met de productie en het onderhoud van sites. Dit is een hele wetenschap die bepaalde vaardigheden en kennis op veel gebieden vereist, zoals webprogrammering, ontwerp, copywriting, SEO en andere.
Op het moderne internet kan iedereen zijn eigen website maken. Maar in de regel laat de kwaliteit van webprojecten veel te wensen over. Wil een website concurrerend zijn, dan moet u het probleem vakkundig benaderen en professionals bij het werk betrekken. Met behulp van een programmeertaal maakt de programmeur websitepagina's en combineert deze tot één object, waarna hij ze opmaakt voor correcte weergave in browsers. Er moet bijzondere aandacht worden besteed aan de interface van de toekomstige site, waardoor de juiste werking en veiligheid ervan wordt gegarandeerd. Een professionele webmaster doet dus al het bovenstaande zelf! Dit is een programmeur, webdesigner, lay-outontwerper, beheerder en moderator en soms een SEO-copywriter in één.
Welke kennis en technologieën moet u beheersen om webmaster te worden?
Voordat u webmaster wordt, moet u vertrouwd raken met veel technologieën, programma's en systemen en deze bestuderen. Dit zijn de belangrijkste stappen die de basis zullen leggen voor uw toekomstige beroep:
1. HTML leren – hypertext-opmaaktaal.
Zodra u HTML begint te leren, begrijpt u de structuur van een webdocument en leert u hoe u eenvoudige websites kunt maken.
2. CSS leren – Taal voor weergavestijl van webpagina’s. Dankzij de introductie van CSS-stijlen in het document krijgt de site een eigen smaak en unieke uitstraling. U kunt de kleur, grootte, achtergrond en nog veel meer op de webpagina instellen.
3. Inleiding tot CMS – contentmanagementsysteem of “motor” van de site.
4. Adobe Photoshop onder de knie krijgen – een grafische editor met ongelooflijk veel mogelijkheden. Veel specialisten gebruiken het om ontwerpen te tekenen en hun eigen originele en hoogwaardige lay-outs te creëren.
5. Basiskennis van programmeertalen. De overgrote meerderheid van websites maakt gebruik van PHP en JavaScript. De snelheid van de site, de beveiliging, mogelijke schaalbaarheid en ondersteuning van externe ontwikkelaars zijn afhankelijk van de kwaliteit van de geschreven scripts. Met andere woorden, je moet kwaliteitscode kunnen schrijven.
6. Werken met databanken.
En het allerbelangrijkste: de webmaster moet originele sites maken. Met de komst van kant-en-klare oplossingen voor alle populaire CMS'en is er meer vraag dan ooit naar een website met een origineel, niet-sjabloonontwerp. Een professionele webmaster kan niet alleen met een set kant-en-klare programma's werken, maar ook deze kant-en-klare programma's schrijven. Om dit niveau te bereiken zul je hard moeten werken. En onze cursus “Frontend Developer: Websites op HTML/CSS/JavaScript” helpt uw kind de eerste zelfverzekerde stappen te zetten in deze moeilijke taak. Onder begeleiding van ervaren docenten leert hij informatieve websites maken met een origineel grafisch ontwerp.
Tijdens het onderwijsproces komen de volgende onderwerpen aan bod:
1. Basisprincipes van Hypertext Markup Language (HTML) en Cascading Style Sheets (CSS)
2. lay-out van moderne websites
3. diepgaande studie van de kenmerken van webpagina-styling
4. basisprincipes van het werken met Adobe Photoshop en het werken met website-ontwerplay-outs
In de beginfase maken we kennis met de basis van het beroep van webinterface-ontwikkelaar en bestuderen we de regels het bouwen van de structuur en logica van websites, het verwerven van praktische programmeervaardigheden webinterfaces. Elke student leert de basisprincipes van het schrijven van HTML- en CSS-code.
Na voltooiing van dit onderwerp zal uw kind zijn eigen moderne website maken.
De tweede module omvat een diepgaande studie van programmeertools voor webinterfaces. In deze module vervolgen we onze introductie in HTML en CSS. Studenten raken vertrouwd met het algoritme en de structuur van het maken van moderne websites in de praktijk, creëren zelfstandig een interactieve beeldgalerij en publiceren hun project op internet.
Tijdens de derde module vervolgen we onze kennismaking met het beroep van webontwikkelaar, verwerven we praktische vaardigheden in het werken met Adobe Photoshop en bestuderen we moderne webontwerptools. In de fase van het maken van een websiteontwerp verwerft de student basisvaardigheden in het werken in een grafische editor. We zullen verschillende ontwerpopties voor websites analyseren, de voor- en nadelen ervan bespreken en ontdekken hoe het ontwerp kan worden verbeterd.
Aan het einde van de cursus zullen mijn studenten en ik een website maken met behulp van een kant-en-klare ontwerplay-out met behulp van de nieuwste webprogrammeertools en het resultaat van ons werk op internet publiceren.
11
cursussenCursusdocent:
“Minecraft: Inleiding tot kunstmatige intelligentie”, “Unity 3D”, “Frontend-ontwikkelaar: HTML/CSS/JavaScript-websites”, “Tekenen in anime-stijl”, “Programmeren voor de kleintjes”, “Minecraft programmeren”, “Design thinking”, “Bots in Python”, “Photoshop grafisch ontwerp”, "Videobloggen"
Onderwijs:
Talrijke cursussen om de IT-vaardigheden bij internationale bedrijven te verbeteren (Chatbot Hackathons, Prototyping op het gebied van kunstmatige intelligentie, IT-architectuur, enz.). Universiteit van Heilbronn, Heilbronn, Duitsland (Master of Business Administration). Wit-Russische Staatseconomische Universiteit, Minsk, Wit-Rusland (Master of Business Administration).
Ervaring:
Hij houdt zich bezig met klantadvies op het gebied van rechtssystemen, systemen voor auditoplossingen en procesautomatisering, werkt op het innovatieve gebied van IT en is een start-up in Duitsland in een internationaal bedrijf.
Interesses:
Persoonlijke ontwikkeling, passie voor kennis delen, netwerker, wereldopener, life designer, sportactivist.
“Tegenwoordig is de hele wereld met elkaar verbonden: mensen, landen, economieën, technologieën, enz. Programmeren is een sleutelcompetentie van de toekomst. Het helpt je de wereld van de toekomst beter te begrijpen, deze actief vorm te geven en een innovatief lid te zijn van een opwindende samenleving zonder grenzen. Het vermogen om te coderen opent eindeloze deuren naar de toekomst voor onze kinderen in deze wereld en maakt hen tot ambassadeurs van nieuwe technologieën.”
9
cursussenCursusdocent:
“Minecraft: Inleiding tot kunstmatige intelligentie”, “Unity 3D”, “Frontend-ontwikkelaar: HTML/CSS/JavaScript-websites”, “Tekenen in anime-stijl”, “Programmeren voor de kleintjes”, “Minecraft programmeren”, “Design thinking”, “Bots in Python”, “Photoshop grafisch ontwerp”, "Videobloggen"
Onderwijs:
Talrijke cursussen om de IT-vaardigheden bij internationale bedrijven te verbeteren (SAP, procesautomatisering, e-commerce). FOM Universiteit Stuttgart, Stuttgart, Duitsland (Master of Business Administration) Karaganda State Technical University, Karaganda, Kazachstan.
Ervaring:
Oprichter van een succesvolle online elektronicawinkel in Duitsland, actief in klantadvies in gebied van automatisering van verkoopprocessen, werkt op het gebied van IT-verkoop in Duitsland in de internationale bedrijven.
Interesses:
Reizen, vissen, sporten, schaken.
I. Goethe zei: “Je kunt alleen leren waar je van houdt”
1e moduul
De eerste dag
Basisprincipes van webpagina-indeling
- HTML-documentstructuur
- Eerste webpagina met HTML-opmaaktaal
- Maak kennis met de Sublime Text 3-editor
Resultaat van de les: creëerde de eerste webpagina en leerde basismanieren om tekst te markeren met behulp van tags.
Praktische taak: maak een webpagina met behulp van HTML-opmaaktaal.
Tweede dag
Div-element en tagattributen
- Werken met de webinspecteur
- Een website met meerdere pagina's maken
- Nieuwe tagelementen en attributen leren
Resultaat van de les: geleerd hoe je links en afbeeldingen aan de site kunt toevoegen, attributen aan tags kunt toevoegen
Praktische taak: maak uw eerste website met meerdere pagina's.
Dag drie
Trapsgewijze stijlbladen
- Inleiding tot trapsgewijze stijlbladen
- HTML-elementen opmaken
- Selectoren gebruiken
- Installeren en werken met de Emmet-plug-in en Lorem-tekst toevoegen
Resultaat van de les: geleerd hoe je de achtergrondkleur en tekstkleur van HTML-elementen kunt wijzigen, twee soorten selectors kunt gebruiken, Lorem-tekst kunt maken met behulp van de Emmet-plug-in
Praktische taak: verander het uiterlijk van de pagina met behulp van CSS-eigenschappen.
Dag vier
Creatie van Jaguar-website
- Creatie van een Jaguar-website met meerdere pagina's
- Een projectbestandsstructuur creëren
- Werken met opvulling en opvulling van elementen
Resultaat van de les: leerde werken met een extern CSS-bestand, raakte vertrouwd met de externe en interne opvulling van elementen.
Praktische taak: maak een Jaguar-website met meerdere pagina's.
2e moduul
De eerste dag
Boxmodel in CSS
- Boxmodel in CSS
- Ongewoon gevormde blokken maken
- Werken met de eigenschap box-sizing om te wijzigen hoe de breedte en hoogte van een element worden berekend
Resultaat van de les: geleerd hoe je blokken met ongebruikelijke vormen maakt, de eigenschap box-sizing gebruikt met de border-box-waarde om de breedte van een element correct te berekenen, en de afmetingen van elementen in verschillende maateenheden in te stellen
Praktische taak: maak kaarten met tekst met behulp van verschillende eigenschapswaarden voor de doosgrootte.
Tweede dag
Geavanceerde tekstmanipulatie in CSS
- Verschillende soorten lettertypen
- Lettertypen voor websites kiezen
- Nieuwe stijlen maken waarmee u de tekstweergave op een geavanceerd niveau kunt aanpassen
Resultaat van de les: heeft een pagina gemaakt met verschillende soorten lettertypen, het uiterlijk en de leesbaarheid van de tekst verbeterd met behulp van de doorgegeven eigenschappen.
Praktische taak: maak een pagina met basislettertypes.
Dag drie
Positionering van elementen in CSS
- Werken met de eigenschap float
- Typen positionering van elementen op de pagina
- positie eigendom
Resultaat van de les: geleerd om te werken met de float- en position-eigenschappen, om tekstomloop rond afbeeldingen te maken
Praktische taak: maak een webpagina en plaats er elementen op met behulp van float- en position-eigenschappen
Dag vier
Een blogpagina maken
- Een blogpagina maken
- Elementpositioneringseigenschappen voor het plaatsen van menu's en berichten op de pagina
- Semantische tags
Resultaat van de les: leerde werken met semantische tags met behulp van positioneringseigenschappen, plaatste de belangrijkste componenten van de blog op de pagina
Praktische taak: maak een blogpagina met behulp van semantische tags
3e moduul
De eerste dag
Pseudo-klassen en werken met afbeeldingen in CSS
- Achtergrondafbeeldingen gebruiken op een webpagina
- Pseudo-klassen zweven, actief en bezocht
- Het veranderen van de stijl van één element bij het activeren van een pseudo-klasse op een ander element
- Achtergrondpatronen maken
Resultaat van de les: leerde werken met achtergrondafbeeldingen, bestudeerde eigenschappen voor het werken met afbeeldingen
Praktische taak: voeg externe wijzigingen toe aan elementen wanneer u er met de muiscursor overheen beweegt.
Tweede dag
FlexBox in CSS
- Werken met CSS Flexibele Box Layout
- Eigenschappen voor het uitlijnen van elementen in een Flex-container
- Educatief spel met Flex-kikker
Resultaat van de les: leerde werken met Flex-technologie om flexibele lay-outs te creëren, voltooide het flex-kikkerspel om het behandelde materiaal te consolideren
Praktische taak: voltooi het flex-kikkerspel om het behandelde materiaal te consolideren
Dag drie
Ontwikkeling van de website van de Sneakerswinkel. Deel 1
- Een sitestructuur maken met modellen
- Verbinding maken met een lettertypesite
- Eigenschappen van de sitekop en de onderliggende elementen ervan
- Functies voor het maken van een verlooppagina-achtergrond
Resultaat van de les: creëerde een sitestructuur met modellen, verbond het lettertype met de site.
Praktische taak: selecteer en download afbeeldingen met modellen, voeg een schaduw toe aan de sitekop
Dag vier
Ontwikkeling van de website van de Sneakerswinkel. Deel 2
- Werkzaamheden op de site voltooien
- Een blok maken met kaarten
- Het gedrag van elementen wijzigen wanneer u erover zweeft
- FlexBox-technologie voor kaartpositionering
Resultaat van de les: een website gemaakt met modelkaarten
Praktische taak: voeg een galerij toe met behulp van FlexBo-technologie
4e moduul
De eerste dag
Rasterindeling in CSS
- Inleiding tot het Grid-systeem
- Een pagina maken met behulp van een raster
- Eigenschappen voor geavanceerd werken met rastercellen
Resultaat van de les: bestudeerde het tweedimensionale lay-outsysteem (CSS Grid Layout), leerde hoe je Grid-cellen op de pagina positioneerde.
Praktische taak: voltooi het rastertuinspel om het behandelde materiaal te consolideren.
Tweede dag
Pseudo-elementen voor en na
- Pseudo-elementen voor en na
- Combineer een afbeelding met tekst erin
- Elementen met pseudo-elementen van de eerste letter en de eerste regel
Resultaat van de les: leerde werken met pseudo-elementen voor, na, eerste letter en eerste regel, combineer pseudo-elementen met verschillende eigenschappen om prachtige blokken te creëren
Praktische taak: maak een element met behulp van de pseudo-elementen after en before.
Dag drie
Animaties en transformaties in CSS
- CSS-transformaties
- Transformaties toepassen op HTML-elementen
- Geanimeerde blokken maken in CSS
- Timingfuncties toepassen op keyframes
Resultaat van de les: leerde werken met transformaties in CSS, eindeloze animaties maken in CSS.
Praktische taak: maak een knop, voeg er transformaties aan toe als u erover zweeft.
Dag vier
Oefen met het maken van animaties in CSS
- Toepassing van animatie en transformatie in de praktijk
- Het creëren van een geanimeerd orbitaal systeem van planeten in ons zonnestelsel
Resultaat van de les: heeft een pagina gemaakt die de beweging van planeten in het zonnestelsel demonstreert en een geanimeerde achtergrond.
Praktische taak: creëer een geanimeerd orbitaal systeem van planeten in ons zonnestelsel.
5e moduul
De eerste dag
Oprichting van een online winkel
- Wat is een online winkel?
- Het creëren van een projectstructuur
- Projectopstelling
Resultaat van de les: begonnen met het opzetten van een online winkel.
Praktische taak: selecteer pictogrammen die op de site moeten worden gebruikt.
Tweede dag
Een koptekst voor een online winkel maken
- Variabelen in CSS en hoe u ze kunt gebruiken
- Lettertypen koppelen aan een extern stylesheet met behulp van de url-functie
- Koptekst van online winkel, de stijl ervan
- Extra menufunctionaliteit toevoegen met behulp van de programmeertaal JavaScript
Resultaat van de les: configureerde globale variabelen in het project, creëerde een multifunctionele header met een menu, verbond een Javascript-bestand om extra menufunctionaliteit toe te voegen.
Praktische taak: voeg het wijzigen van de achtergrond van de sitekop toe tijdens het scrollen op de pagina
Dag drie
Het eerste scherm maken met het hoofdproduct
- HTML-structuur van het presentatieblok
- Rastersysteem voor correcte weergave van elementen
- CSS-eigenschapswaarden met behulp van variabelen
- Stylingelementen
Resultaat van de les: creëerde het presentatiegedeelte van de online winkel
Praktische taak: maak een presentatiegedeelte van een online winkel
Dag vier
Een blok maken met populaire producten
- HTML-opmaak voor een blok met producten
- Styling voor productkaarten
- Raster voor kaartpositionering
- Stilering van een blok met de geschiedenis van het bedrijf
Resultaat van de les: creëerde een blok met populaire producten en bedrijfsgeschiedenis
Praktische taak: voeg externe en interne opvulling toe aan elementen in het blok met de bedrijfsgeschiedenis
6e moduul
De eerste dag
Een slider maken met klantrecensies.
- Beoordelingsblok
- Manieren om schuifbare containers in CSS te maken
- scroll-gedrag en scroll-snap-type eigenschappen
- Ankerpunten met schuifregelaar
Resultaat van de les: een slider gemaakt met klantrecensies met behulp van HTML en CSS.
Praktische taak: voeg ankerpunten toe aan de hoofdsecties van de site en creëer een automatische scroll naar deze blokken wanneer u op de knop klikt.
Tweede dag
Werken met formulieren en videocontent.
- HTML5-tags voor het invoegen van video-inhoud in een website
- Een sectie opmaken met een videoclip op volledig scherm
- Voer veldtag - en de bijbehorende attributen in
- Tag voor het maken van formulieren in HTML
- Een tekstinvoerelement opmaken
Resultaat van de les: heb een sectie gemaakt met een video en een blok met een feedbackformulier
Praktische taak: maak een feedbackformulier, stijl de elementen
Dag drie
Een aparte galerijpagina maken
- Aangepast rasterraster voor een galerijpagina
- Blokken met afbeeldingen toevoegen aan het raster
- Pseudo-elementen en diverse animaties van blokken met afbeeldingen
- CSS-filters om het visuele ontwerp van de galerij te verbeteren
Resultaat van de les: een aparte pagina gemaakt met een fotogalerij
Praktische taak: door verschillende soorten positionering te gebruiken om een doorschijnende, ongebruikelijke achtergrond te creëren.
Dag vier
Aanpassing van inhoud voor alle soorten apparaten.
- Manieren om inhoud aan te passen voor mobiele apparaten
- Mediaquery's om verschillende eigenschappen toe te passen op hetzelfde element op apparaten met verschillende breedtes
- CSS-regels voor drie soorten apparaten
Resultaat van de les: We hebben de website aangepast voor tablets en telefoons.
Praktische taak: verander met behulp van mediaquery's de eigenschapswaarden van HTML-elementen om de inhoud aan te passen aan alle soorten apparaten
7e moduul
De eerste dag
Inleiding tot het Tailwind SS-framework.
- Wat zijn raamwerken en hoe versnellen ze het projectontwikkelingsproces?
- Het Tailwind CSS-framework en plug-ins installeren
- Tailwind CSS Framework-concepten
- Werken met typografie en kleuren in Tailwind CSS
Resultaat van de les: creëerde de eerste webpagina met behulp van het Tailwind CSS-framework.
Praktische taak: maak een blok met tekst en stijlelementen met behulp van staartwindklassen.
Tweede dag
Tailwind-lessen voor het maken van een responsieve website
- Werken met Tailwind-klassen om een responsieve website te maken
- Klassen voor het toevoegen van zweef- en focuseffecten
- Klassen voor het toevoegen van schaduwen aan elementen
- Klassen voor het werken met elementgroottes
- Klassen voor het werken met externe en interne opvulling van elementen
Resultaat van de les: We hebben een adaptieve pagina gemaakt voor alle soorten apparaten.
Praktische taak: maak knoppen, voeg effecten toe door erop te klikken met behulp van Tailwind-klassen
Dag drie
Flex-indeling voor de wind in de rug.
- Werken met Tailwind Flex Layout
- Klassen voor het uitlijnen van onderliggende elementen in een Flex-container
- Een kaart maken met de prijs van een product
- Voortgangsindicatoren creëren
- Werken met pseudo-elementen in Tailwind CSS
Resultaat van de les: een Flex-container met productkaarten gemaakt
Praktische taak: maak een kaart met een beschrijving van het product.
Dag vier
Rastersysteem in Tailwind CSS.
- Rij-span- en col-span-eigenschappen
- Eigenschappen voor het automatisch opvullen van lege ruimte in een raster met elementen
- Projectteampagina
Resultaat van de les: een adaptieve projectteampagina gemaakt met behulp van het Tailwind Grid-systeem.
Praktische taak: voeg effecten toe aan rasterelementen wanneer u erover zweeft
8e moduul
De eerste dag
Projectopstelling
- Het opzetten van het applicatiesiteproject “Beheren”.
- Een responsieve websiteheader maken
- Een hamburgermenu maken met JavaScript
- Een presentatiegedeelte maken met een product
Resultaat van de les: creëerde het eerste scherm van de applicatiewebsite "Beheren".
Praktische taak: voeg een achtergrondafbeelding toe aan het eerste scherm.
Tweede dag
Een sectie maken met een beschrijving van de applicatie
- Sectie met een beschrijving van de toepassing en de voordelen ervan
- Pas het aangemaakte blok aan voor alle soorten apparaten
- Sectie met applicatiebediening
- Pas Tailwind-filters toe op een afbeelding
Resultaat van de les: twee secties van de site gemaakt “Beheren”
Praktische taak: maak een extra sectie met de geschiedenis van het maken van de applicatie
Dag drie
Een sectie over het projectteam maken
- Sectie over het team
- Schuifregelaar met Tailwind CSS en Javascript
- Medewerkerskaarten
Resultaat van de les: een sectie gemaakt over het projectteam
Praktische taak: maak een sectie met een CTA-knop
Dag vier
Een sectie met prijzen maken
- Maak een sectie met prijzen
- Maak een responsieve websitevoettekst
- Maak het project af
Resultaat van de les: voltooide de werkzaamheden aan het project en creëerde de website voor de applicatie “Beheren”.
Praktische taak: het project afronden, de site op internet zetten
9e moduul
De eerste dag
Ga aan je eigen project werken.
- Selecteer een projectonderwerp
- Begin met het ontwikkelen van uw eigen website
Resultaat van de les: er is een onderwerp gekozen en het werk aan het project is begonnen
Praktische taak: Project Werk
Tweede dag
Verder werken aan het project
- Ga door met werken aan het project
- Herstel fouten in het project
Resultaat van de les: het maken van websitepagina's
Praktische taak: Project Werk
Dag drie
Het voorbereiden van een projectpresentatie.
- Beschrijf uw project
- Maak een presentatiesjabloon om uw project te verdedigen
- Maak het project af
- Zet de site op internet
Resultaat van de les: een presentatie voorbereid en de toespraak ingestudeerd.
Praktische taak: een presentatie van het project voorbereiden, de website op internet zetten.
Dag vier
Projectbescherming.
- Rond de projectpresentatie af
- Verdedig uw project voor een publiek
Resultaat van de les: We hebben het cursusproject afgerond en aan de ouders gepresenteerd.
Praktische taak: het project afronden, een presentatie voorbereiden en uitvoeren.