Frontend udvikler: hjemmesider på HTML/CSS/JavaScript - kursus 18.000 rub. fra Coddy School of Programming for Children, træning 3 moduler (måneder)
Miscellanea / / December 03, 2023
Alder: 11-14 år
Niveau: for begyndere.
Varighed: fra 3 moduler (måneder), fra 24 timer*.
Format: individuelle og gruppelektioner, offline og online (realtid).
Antal børn: fra 1 til 8.
Pris:
fra 750 rub./time i en online gruppe,
fra 850 rub./time i en offline gruppe,
fra 1050 rub./time individuelt online,
fra 1980 rub./time individuelt offline.
I den moderne verden stræber enhver seriøs virksomhed efter at erhverve sin egen hjemmeside, fordi den er en slags "visitkort" på internettet, uden hvilket at gøre forretning allerede ser forældet, useriøst og håbløs.
I de senere år er faget som webmaster steget til tops på ranglisten over de mest attraktive og eftertragtede erhverv inden for IT-området. I denne forbindelse er der i øjeblikket flere og flere mennesker, der er villige til at gennemgå uddannelse i at skabe hjemmesider med ridse og mestre denne prestigefyldte specialitet for at få en stabil og anstændig indtjening. Vores programmeringsskole CODDY foreslår ikke at forsinke og tilmelde dit barn til kurset "Frontend Developer: Websites on HTML/CSS/JavaScript" lige nu! Formålet med dette kursus er at lære børn at skabe moderne hjemmesider og introducere dem til det grundlæggende i professionen som interfaceudvikler.
Hvad er webmastering, og hvordan bliver man webmaster?
Webmastering er et sæt aktiviteter til udvikling, oprettelse, optimering og promovering af hjemmesider. Alt, hvad der på den ene eller anden måde er forbundet med produktion og vedligeholdelse af sites. Dette er en hel videnskab, der kræver visse færdigheder og viden inden for mange områder, såsom webprogrammering, design, copywriting, SEO og andre.
På det moderne internet kan enhver lave deres egen hjemmeside. Men som regel lader kvaliteten af webprojekter meget tilbage at ønske. For at en hjemmeside skal være konkurrencedygtig, skal du gribe problemstillingen kompetent an og involvere fagfolk i arbejdet. Ved hjælp af et programmeringssprog opretter programmøren hjemmesidesider og kombinerer dem til et enkelt objekt, hvorefter han layouter dem til korrekt visning i browsere. Der bør lægges særlig vægt på grænsefladen på det fremtidige websted, der sikrer dens korrekte drift og sikkerhed. Så en professionel webmaster gør alt ovenstående selv! Dette er en programmør, webdesigner, layoutdesigner, administrator og moderator, og nogle gange en SEO tekstforfatter rullet ind i en.
Hvilken viden og teknologier skal du mestre for at blive webmaster?
Før du bliver webmaster, skal du sætte dig ind i og studere mange teknologier, programmer og systemer. Her er de vigtigste trin, der vil lægge grundlaget for dit fremtidige erhverv:
1. Lære HTML – hypertekst markup sprog.
Når du begynder at lære HTML, vil du forstå strukturen af et webdokument og lære, hvordan du opretter enkle websteder.
2. At lære CSS – sprog for visning af websider. Takket være introduktionen af CSS-stile i dokumentet får webstedet sin egen smag og unikke udseende. Du kan indstille farve, størrelse, baggrund og meget mere til websiden.
3. Introduktion til CMS – indholdsstyringssystem eller "motor" på webstedet.
4. Beherskelse af Adobe Photoshop – en grafisk editor med utrolig mange muligheder. Mange specialister bruger det til at tegne design og skabe deres egne originale layouts af høj kvalitet.
5. Grundlæggende kendskab til programmeringssprog. Langt de fleste hjemmesider bruger PHP og JavaScript. Webstedets hastighed, dets sikkerhed, mulige skalerbarhed og support fra tredjepartsudviklere afhænger af kvaliteten af de skrevne scripts. Du skal med andre ord kunne skrive kvalitetskode.
6. Arbejde med databaser.
Og vigtigst af alt, skal webmasteren oprette originale websteder. Med fremkomsten af færdige løsninger til alle populære CMS'er er en hjemmeside med et originalt, ikke-skabelondesign mere efterspurgt end nogensinde. En professionel webmaster kan ikke kun arbejde med et sæt færdige programmer, men også skrive disse færdige programmer. For at nå dette niveau bliver du nødt til at arbejde hårdt. Og vores kursus "Frontend Developer: Websites on HTML/CSS/JavaScript" vil hjælpe dit barn med at tage de første selvsikre skridt i denne vanskelige opgave. Under vejledning af erfarne lærere vil han lære at skabe informative hjemmesider med originalt grafisk design.
I løbet af uddannelsesprocessen vil følgende emner blive studeret:
1. Grundlæggende om Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS)
2. layout af moderne hjemmesider
3. dybtgående undersøgelse af funktionerne ved styling af websider
4. grundlæggende i at arbejde med Adobe Photoshop og arbejde med hjemmesidedesignlayouts
I den indledende fase vil vi stifte bekendtskab med det grundlæggende i professionen som webinterfaceudvikler og studere reglerne at opbygge strukturen og logikken for websteder, opnå praktiske programmeringsfærdigheder webgrænseflader. Hver elev vil lære det grundlæggende i at skrive HTML- og CSS-kode.
Efter at have afsluttet dette emne, vil dit barn oprette deres egen moderne hjemmeside.
Det andet modul omfatter en dybdegående undersøgelse af webgrænsefladeprogrammeringsværktøjer. I dette modul vil vi fortsætte vores introduktion til HTML og CSS. Studerende vil blive fortrolige med algoritmen og strukturen for at skabe moderne hjemmesider i praksis, selvstændigt oprette et interaktivt billedgalleri og publicere deres projekt på internettet.
I løbet af det tredje modul vil vi fortsætte vores bekendtskab med professionen som webudvikler, få praktiske færdigheder i at arbejde med Adobe Photoshop og studere moderne webdesignværktøjer. På tidspunktet for oprettelse af et webstedsdesign vil den studerende opnå grundlæggende færdigheder i at arbejde i en grafisk editor. Vi vil analysere forskellige muligheder for hjemmesidedesign, diskutere fordele og ulemper ved hver af dem og finde ud af, hvordan designet kan forbedres.
I slutningen af kurset vil mine elever og jeg lave en hjemmeside ved hjælp af et færdiglavet designlayout ved hjælp af de nyeste webprogrammeringsværktøjer og offentliggøre resultatet af vores arbejde på internettet.
11
kurserKursuslærer:
"Minecraft: Introduktion til kunstig intelligens", "Unity 3D", "Frontendudvikler: HTML/CSS/JavaScript-websteder", "Tegning i Anime-stil", “Programmering for de mindste”, “Minecraft-programmering”, “Designtænkning”, “Bots in Python”, “Photoshop grafisk design”, "Videobloggin"
Uddannelse:
Talrige kurser til forbedring af IT-færdigheder i internationale virksomheder (Chatbot Hackathons, Prototyping inden for kunstig intelligens, IT-arkitektur, etc.). Universitetet i Heilbronn, Heilbronn, Tyskland (Master of Business Administration). Belarusian State Economic University, Minsk, Belarus (Master of Business Administration).
Erfaring:
Han beskæftiger sig med bygherrerådgivning af juridiske systemer, systemer til revisionsløsninger og procesautomatisering, arbejder inden for det innovative IT-område og en start-up i Tyskland i en international virksomhed.
Interesser:
Personlig udvikling, passion for videndeling, netværker, verdensåbner, livsdesigner, sportsaktivist.
"I dag er hele verden forbundet: mennesker, lande, økonomier, teknologier osv. Programmering er en nøglekompetence for fremtiden. Det hjælper dig med bedre at forstå fremtidens verden, aktivt forme den og være et innovativt medlem af et spændende samfund uden grænser. Evnen til at kode åbner uendelige døre til fremtiden for vores børn i denne verden og gør dem til ambassadører for nye teknologier."
9
kurserKursuslærer:
"Minecraft: Introduktion til kunstig intelligens", "Unity 3D", "Frontendudvikler: HTML/CSS/JavaScript-websteder", "Tegning i Anime-stil", “Programmering for de mindste”, “Minecraft-programmering”, “Designtænkning”, “Bots in Python”, “Photoshop grafisk design”, "Videoblogging"
Uddannelse:
Talrige kurser til forbedring af IT-færdigheder i internationale virksomheder (SAP, procesautomatisering, e-handel). FOM University of Stuttgart, Stuttgart, Tyskland (Master of Business Administration) Karaganda State Technical University, Karaganda, Kasakhstan.
Erfaring:
Grundlægger af en succesfuld online elbutik i Tyskland, engageret i kunderådgivning i inden for automatisering af salgsprocesser, arbejder inden for IT-salg i Tyskland i det internationale virksomheder.
Interesser:
Rejser, fiskeri, sport, skak.
I. Goethe sagde: "Du kan kun lære det, du elsker"
1. modul
Den første dag
Grundlæggende om websidelayout
- HTML dokument struktur
- Første webside, der bruger HTML markup sprog
- Introduktion til Sublime Text 3 Editor
Resultat af lektionen: skabte den første webside, lærte grundlæggende måder at markere tekst ved hjælp af tags.
Praktisk opgave: oprette en webside ved hjælp af HTML markup sprog.
Anden dag
Div element og tag attributter
- Samarbejde med webinspektøren
- Oprettelse af en flersidet hjemmeside
- Lære nye tag-elementer og attributter
Resultat af lektionen: lært at tilføje links og billeder til webstedet, tilføjet attributter til tags
Praktisk opgave: oprette din første flersidede hjemmeside.
Dag tre
Cascading Style Sheets
- Introduktion til Cascading Style Sheets
- Styling af HTML-elementer
- Brug af vælgere
- Installation og arbejde med Emmet-pluginnet og tilføjelse af Lorem-tekst
Resultat af lektionen: lært at ændre baggrundsfarven og tekstfarven for HTML-elementer, bruge to typer vælgere, oprette Lorem-tekst ved hjælp af Emmet-pluginet
Praktisk opgave: ændre udseendet af siden ved hjælp af CSS-egenskaber.
Dag fire
Oprettelse af Jaguar hjemmeside
- Oprettelse af et Jaguar-websted med flere sider
- Oprettelse af en projektfilstruktur
- Arbejde med polstring og polstring af elementer
Resultat af lektionen: lært at arbejde med en ekstern CSS-fil, blev fortrolig med den eksterne og interne polstring af elementer.
Praktisk opgave: oprette et Jaguar-websted med flere sider.
2. modul
Den første dag
Æskemodel i CSS
- Box Model i CSS
- Oprettelse af usædvanligt formede blokke
- Arbejde med egenskaben box-sizing for at ændre, hvordan et elements bredde og højde beregnes
Resultat af lektionen: lært at skabe blokke med usædvanlige former, bruge egenskaben box-sizing med grænsekasseværdien til korrekt at beregne bredden af et element og indstille størrelsen af elementer i forskellige måleenheder
Praktisk opgave: oprette kort med tekst ved hjælp af egenskabsværdier i forskellige boksstørrelser.
Anden dag
Avanceret tekstmanipulation i CSS
- Forskellige typer skrifttyper
- Valg af skrifttyper til websteder
- Oprettelse af nye stilarter, der giver dig mulighed for at tilpasse tekstvisning på et avanceret niveau
Resultat af lektionen: oprettet en side ved hjælp af forskellige typer skrifttyper, forbedret udseendet og læsbarheden af teksten ved hjælp af de beståede egenskaber.
Praktisk opgave: oprette en side ved hjælp af grundlæggende skrifttyper.
Dag tre
Positioneringselementer i CSS
- Arbejder med flydeejendommen
- Typer af placering af elementer på siden
- stilling ejendom
Resultat af lektionen: lært at arbejde med flyde- og positionsegenskaberne, skabe tekstombrydning omkring billeder
Praktisk opgave: oprette en webside og placere elementer på den ved hjælp af float- og positionsegenskaber
Dag fire
Oprettelse af en blogside
- Oprettelse af en blogside
- Elementpositioneringsegenskaber til placering af menuer og indlæg på siden
- Semantiske tags
Resultat af lektionen: lærte at arbejde med semantiske tags ved hjælp af positioneringsegenskaber, placerede bloggens hovedkomponenter på siden
Praktisk opgave: oprette en blogside ved hjælp af semantiske tags
3. modul
Den første dag
Pseudo-klasser og arbejde med billeder i CSS
- Brug af baggrundsbilleder på en webside
- Pseudo-klasser svæver, aktive og besøgte
- Ændring af stilen på et element, når du aktiverer en pseudo-klasse på et andet element
- Oprettelse af baggrundsmønstre
Resultat af lektionen: lært at arbejde med baggrundsbilleder, studeret egenskaber for at arbejde med billeder
Praktisk opgave: tilføje eksterne ændringer til elementer, når du holder musemarkøren over dem med musemarkøren.
Anden dag
FlexBox i CSS
- Arbejde med CSS Flexible Box Layout
- Egenskaber til justering af elementer i en Flex-beholder
- Flex-frog pædagogisk spil
Resultat af lektionen: lærte at arbejde med Flex-teknologi for at skabe fleksible layouts, fuldførte flex-frog-spillet for at konsolidere det dækkede materiale
Praktisk opgave: færdiggør flex-frog-spillet for at konsolidere det dækkede materiale
Dag tre
Udvikling af Sneakers shops hjemmeside. Del 1
- Oprettelse af en sitestruktur med modeller
- Opretter forbindelse til et skrifttypewebsted
- Egenskaber for sidehovedet og dets underordnede elementer
- Funktioner til at skabe en gradientsidebaggrund
Resultat af lektionen: oprettet en webstedsstruktur med modeller, forbundet skrifttypen til webstedet.
Praktisk opgave: vælg og download billeder med modeller, tilføj en skygge til sidehovedet
Dag fire
Udvikling af Sneakers shops hjemmeside. Del 2
- Færdiggørelse af arbejdet på stedet
- Oprettelse af en blok med kort
- Ændring af elementers adfærd, når du holder musemarkøren over dem
- FlexBox-teknologi til kortpositionering
Resultat af lektionen: lavet en hjemmeside med modelkort
Praktisk opgave: tilføje et galleri ved hjælp af FlexBo-teknologi
4. modul
Den første dag
Gitterlayout i CSS
- Introduktion til Grid-systemet
- Oprettelse af en side ved hjælp af gitter
- Egenskaber for avanceret arbejde med Grid-celler
Resultat af lektionen: studerede det todimensionelle layoutsystem (CSS Grid Layout), lærte at placere Grid-celler på siden.
Praktisk opgave: færdiggør gitterhavespillet for at konsolidere det dækkede materiale.
Anden dag
Pseudo-elementer efter og før
- Pseudo-elementer før og efter
- At kombinere et billede med tekst indeni
- Elementer med første-bogstav og første-line pseudo-elementer
Resultat af lektionen: lært at arbejde med pseudo-elementer før, efter, første bogstav og første linje, kombinere pseudo-elementer med forskellige egenskaber for at skabe smukke blokke
Praktisk opgave: oprette et element ved hjælp af efter og før pseudo-elementer.
Dag tre
Animationer og transformationer i CSS
- CSS-transformationer
- Anvendelse af transformationer til HTML-elementer
- Oprettelse af animerede blokke i CSS
- Anvendelse af timing-funktioner på keyframes
Resultat af lektionen: lært at arbejde med transformationer i CSS, skabe endeløse animationer i CSS.
Praktisk opgave: opret en knap, tilføj transformationer til den, når du holder musen over den.
Dag fire
Øv dig i at lave animationer i CSS
- Anvendelse af animation og transformation i praksis
- At skabe et animeret kredsløbssystem af planeter i vores solsystem
Resultat af lektionen: oprettet en side, der demonstrerer planeternes bevægelse i solsystemet og en animeret baggrund.
Praktisk opgave: skabe et animeret kredsløbssystem af planeter i vores solsystem.
5. modul
Den første dag
Oprettelse af en netbutik
- Hvad er en netbutik?
- Oprettelse af en projektstruktur
- Projektopsætning
Resultat af lektionen: begyndte at oprette en netbutik.
Praktisk opgave: vælg ikoner, der skal bruges på webstedet.
Anden dag
Oprettelse af en onlinebutiks header
- Variabler i CSS og hvordan man bruger dem
- Tilslutning af skrifttyper til et eksternt typografiark ved hjælp af url-funktionen
- Online butiks overskrift, dens styling
- Tilføjelse af yderligere menufunktionalitet ved hjælp af JavaScript-programmeringssproget
Resultat af lektionen: konfigurerede globale variabler i projektet, oprettede en multifunktionel header med en menu, tilsluttede en Javascript-fil for at tilføje yderligere menufunktionalitet.
Praktisk opgave: tilføje ændring af baggrunden for sidehovedet, når du ruller på siden
Dag tre
Oprettelse af den første skærm med hovedproduktet
- HTML-struktur af præsentationsblokken
- Gittersystem til korrekt visning af elementer
- CSS-egenskabsværdier ved hjælp af variabler
- Styling elementer
Resultat af lektionen: lavet præsentationsdelen af netbutikken
Praktisk opgave: oprette en præsentationsdel af en netbutik
Dag fire
Oprettelse af en blok med populære produkter
- HTML-markering for en blok med produkter
- Styling til produktkort
- Gittergitter til kortpositionering
- Stilisering af en blok med virksomhedens historie
Resultat af lektionen: skabt en blok med populære produkter og virksomhedshistorie
Praktisk opgave: tilføje ekstern og intern polstring til elementer i blokken med virksomhedens historie
6. modul
Den første dag
Oprettelse af en skyder med kundeanmeldelser.
- Gennemgå blok
- Måder at oprette rullebare containere i CSS
- egenskaber af rulle-adfærd og rulle-snap-type
- Skydeankerpunkter
Resultat af lektionen: oprettet en skyder med kundeanmeldelser ved hjælp af HTML og CSS.
Praktisk opgave: tilføj ankerpunkter til hovedsektionerne af webstedet og opret en automatisk rulning til disse blokke, når du klikker på knappen.
Anden dag
Arbejde med formularer og videoindhold.
- HTML5-tags til at indsætte videoindhold på et websted
- Styler et afsnit med et videoklip i fuld skærm
- Indtastningsfelttag -, og dets attributter
- Tag til oprettelse af formularer i HTML
- Styler et tekstinputelement
Resultat af lektionen: oprettet et afsnit med en video og en blok med en feedbackformular
Praktisk opgave: lav en feedbackformular, stil elementerne
Dag tre
Oprettelse af en separat galleriside
- Brugerdefineret gittergitter til en galleriside
- Tilføjelse af blokke med billeder til gitteret
- Pseudo-elementer og forskellige animationer af blokke med billeder
- CSS-filtre for at forbedre galleriets visuelle design
Resultat af lektionen: oprettet en separat side med et fotogalleri
Praktisk opgave: ved hjælp af forskellige typer positionering for at skabe en gennemskinnelig usædvanlig baggrund.
Dag fire
Tilpasning af indhold til alle typer enheder.
- Måder at tilpasse indhold til mobile enheder
- Medieforespørgsler for at anvende forskellige egenskaber til det samme element på enheder med forskellig bredde
- CSS-regler for tre typer enheder
Resultat af lektionen: Vi har tilpasset hjemmesiden til tablets og telefoner.
Praktisk opgave: Brug medieforespørgsler til at ændre egenskabsværdierne for HTML-elementer for at tilpasse indholdet til alle typer enheder
7. modul
Den første dag
Introduktion til Tailwind SS frameworket.
- Hvad er rammer, og hvordan fremskynder de projektudviklingsprocessen?
- Installation af Tailwind CSS framework og plugins
- Tailwind CSS Framework Concepts
- Arbejde med typografi og farver i Tailwind CSS
Resultat af lektionen: oprettet den første webside ved hjælp af Tailwind CSS frameworket.
Praktisk opgave: oprette en blok med tekst, stilelementer ved hjælp af medvindsklasser.
Anden dag
Medvindskurser til at skabe en responsiv hjemmeside
- Arbejder med Tailwind-klasser for at skabe en responsiv hjemmeside
- Klasser til tilføjelse af svæve- og fokuseffekter
- Klasser til at tilføje skygger til elementer
- Klasser til arbejde med elementstørrelser
- Klasser til arbejde med udvendig og indvendig polstring af elementer
Resultat af lektionen: Vi har lavet en adaptiv side til alle typer enheder.
Praktisk opgave: opret knapper, tilføj effekter, når du klikker på dem ved hjælp af Tailwind-klasser
Dag tre
Tailwind Flex Layout.
- Arbejde med Tailwind Flex Layout
- Klasser til justering af underordnede elementer i en Flex-beholder
- Oprettelse af et kort med prisen på et produkt
- Oprettelse af fremskridtsindikatorer
- Arbejde med Pseudo-elementer i Tailwind CSS
Resultat af lektionen: lavet en Flex container med produktkort
Praktisk opgave: oprette et kort med en beskrivelse af produktet.
Dag fire
Gittersystem i Tailwind CSS.
- Row-span og col-span egenskaber
- Egenskaber til automatisk at udfylde tom plads i et gitter med elementer
- Projektteam-side
Resultat af lektionen: oprettet en adaptiv projektteamside ved hjælp af Tailwind Grid-systemet.
Praktisk opgave: tilføje effekter til gitterelementer, når du holder markøren over dem
8. modul
Den første dag
Projektopsætning
- Opsætning af "Administrer" applikationswebstedsprojektet
- Oprettelse af en responsiv hjemmesideheader
- Oprettelse af en hamburgermenu ved hjælp af JavaScript
- Oprettelse af en præsentationssektion med et produkt
Resultat af lektionen: oprettet den første skærm på "Administrer"-applikationswebstedet
Praktisk opgave: tilføje et baggrundsbillede til den første skærm.
Anden dag
Oprettelse af et afsnit med en beskrivelse af applikationen
- Afsnit med en beskrivelse af ansøgningen og dens fordele
- Tilpas den oprettede blok til alle typer enheder
- Afsnit med applikationsbetjening
- Anvend medvindsfiltre på et billede
Resultat af lektionen: oprettet to sektioner af webstedet "Administrer"
Praktisk opgave: oprette en ekstra sektion med historikken for applikationsoprettelse
Dag tre
Oprettelse af et afsnit om projektteamet
- Afsnit om holdet
- Slider ved hjælp af Tailwind CSS og Javascript
- Medarbejderkort
Resultat af lektionen: oprettet et afsnit om projektteamet
Praktisk opgave: oprette et afsnit med en CTA-knap
Dag fire
Oprettelse af en sektion med priser
- Opret en sektion med priser
- Opret en responsiv sidefod
- Afslut projektet
Resultat af lektionen: afsluttet arbejdet med projektet, oprettet hjemmesiden til applikationen "Administrer".
Praktisk opgave: færdiggør projektet, læg webstedet på internettet
9. modul
Den første dag
Begynd at arbejde på dit eget projekt.
- Vælg et projektemne
- Begynd at udvikle din egen hjemmeside
Resultat af lektionen: et emne er valgt og arbejdet med projektet er påbegyndt
Praktisk opgave: Projekt arbejde
Anden dag
Fortsætter arbejdet med projektet
- Fortsæt arbejdet med projektet
- Ret fejl i projektet
Resultat af lektionen: oprettelse af hjemmesider
Praktisk opgave: Projekt arbejde
Dag tre
Udarbejdelse af en projektpræsentation.
- Beskriv dit projekt
- Opret en præsentationsskabelon for at forsvare dit projekt
- Afslut projektet
- Læg siden på internettet
Resultat af lektionen: forberedte et oplæg og øvede talen.
Praktisk opgave: forberede en præsentation af projektet, læg hjemmesiden på internettet.
Dag fire
Projektbeskyttelse.
- Afslut projektpræsentationen
- Forsvar dit projekt foran et publikum
Resultat af lektionen: Vi afsluttede arbejdet med kursusprojektet og præsenterede det for forældrene.
Praktisk opgave: færdiggøre projektet, forberede og gennemføre en præsentation.