Frontend-utvikler: nettsteder på HTML/CSS/JavaScript - kurs 18 000 rub. fra Coddy School of Programming for Children, opplæring 3 moduler (måneder)
Miscellanea / / December 03, 2023
Alder: 11-14 år
Nivå: for nybegynnere.
Varighet: fra 3 moduler (måneder), fra 24 timer*.
Format: individuelle og gruppetimer, offline og online (sanntid).
Antall barn: fra 1 til 8.
Pris:
fra 750 rub./time i en nettgruppe,
fra 850 rub./time i en frakoblet gruppe,
fra 1050 rub./time individuelt online,
fra 1980 rub./time individuelt offline.
I den moderne verden prøver ethvert seriøst selskap å skaffe seg sin egen nettside, fordi den er en slags "visitkort" på Internett, uten hvilket det å gjøre forretninger allerede ser utdatert, useriøst og håpløs.
De siste årene har yrket som webmaster steget til toppen av rangeringen over de mest attraktive og ettertraktede yrkene innen IT-feltet. I denne forbindelse er det for tiden flere og flere som er villige til å gjennomgå opplæring i å lage nettsider med skrape og mestre denne prestisjetunge spesialiteten for å ha en stabil og anstendig inntjening. Vår programmeringsskole CODDY foreslår å ikke forsinke og melde barnet ditt på kurset "Frontendutvikler: Nettsteder på HTML/CSS/JavaScript" akkurat nå! Formålet med dette kurset er å lære barn å lage moderne nettsider og introdusere dem til det grunnleggende i yrket som grensesnittutvikler.
Hva er webmastering og hvordan bli webmaster?
Webmastering er et sett med aktiviteter for utvikling, opprettelse, optimalisering og promotering av nettsteder. Alt som på en eller annen måte er knyttet til produksjon og vedlikehold av nettsteder. Dette er en hel vitenskap som krever visse ferdigheter og kunnskaper på mange områder, for eksempel webprogrammering, design, copywriting, SEO og andre.
På det moderne Internett kan hvem som helst lage sin egen nettside. Men som regel overlater kvaliteten på nettprosjekter mye å være ønsket. For at et nettsted skal være konkurransedyktig, må du tilnærme deg problemstillingen kompetent og involvere fagfolk i arbeidet. Ved hjelp av et programmeringsspråk lager programmereren nettsider og kombinerer dem til et enkelt objekt, hvoretter han legger dem opp for korrekt visning i nettlesere. Spesiell oppmerksomhet bør rettes mot grensesnittet til det fremtidige nettstedet, for å sikre korrekt drift og sikkerhet. Så en profesjonell webmaster gjør alt ovenfor selv! Dette er en programmerer, webdesigner, layoutdesigner, administrator og moderator, og noen ganger en SEO tekstforfatter rullet inn i en.
Hvilken kunnskap og teknologi trenger du å mestre for å bli webmaster?
Før du blir webmaster, må du sette deg inn i og studere mange teknologier, programmer og systemer. Her er hovedtrinnene som vil legge grunnlaget for ditt fremtidige yrke:
1. Lære HTML – hypertekst-markeringsspråk.
Når du begynner å lære HTML, vil du forstå strukturen til et nettdokument og lære hvordan du lager enkle nettsider.
2. Lære CSS – språk for visning av nettsider. Takket være introduksjonen av CSS-stiler i dokumentet, får nettstedet sin egen smak og unike utseende. Du kan angi farge, størrelse, bakgrunn og mye mer til nettsiden.
3. Introduksjon til CMS – innholdsstyringssystem eller "motor" for nettstedet.
4. Mestring av Adobe Photoshop – en grafisk editor med utrolig mange muligheter. Mange spesialister bruker det til å tegne design og lage sine egne originale og høykvalitets layouter.
5. Grunnleggende kjennskap til programmeringsspråk. De aller fleste nettsteder bruker PHP og JavaScript. Hastigheten til nettstedet, dets sikkerhet, mulig skalerbarhet og støtte fra tredjepartsutviklere avhenger av kvaliteten på de skrevne skriptene. Du må med andre ord kunne skrive kvalitetskode.
6. Arbeid med databaser.
Og viktigst av alt, webansvarlig må lage originale nettsteder. Med bruken av ferdige løsninger for alle populære CMS-er, er et nettsted med et originalt, ikke-maldesign mer etterspurt enn noen gang. En profesjonell webmaster kan ikke bare jobbe med et sett med ferdige programmer, men også skrive disse ferdige programmene. For å nå dette nivået må du jobbe hardt. Og vårt kurs "Frontend Developer: Websites on HTML/CSS/JavaScript" vil hjelpe barnet ditt til å ta de første selvsikre skrittene i denne vanskelige oppgaven. Under veiledning av erfarne lærere vil han lære å lage informative nettsteder som har original grafisk design.
I løpet av utdanningsprosessen vil følgende emner bli studert:
1. Grunnleggende om Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS)
2. layout av moderne nettsider
3. dyptgående studie av funksjonene ved styling av nettsider
4. grunnleggende om å jobbe med Adobe Photoshop og jobbe med layouter for nettsteddesign
På den innledende fasen vil vi bli kjent med det grunnleggende om yrket til en webgrensesnittutvikler og studere reglene bygge strukturen og logikken til nettsteder, få praktiske programmeringsferdigheter nettgrensesnitt. Hver student vil lære det grunnleggende om å skrive HTML og CSS-kode.
Etter å ha fullført dette emnet, vil barnet ditt lage sin egen moderne nettside.
Den andre modulen inkluderer en dybdestudie av programmeringsverktøy for webgrensesnitt. I denne modulen vil vi fortsette vår introduksjon til HTML og CSS. Studentene skal bli kjent med algoritmen og strukturen for å lage moderne nettsider i praksis, selvstendig lage et interaktivt bildegalleri og publisere prosjektet sitt på Internett.
I løpet av den tredje modulen vil vi fortsette å bli kjent med yrket som webutvikler, få praktiske ferdigheter i å jobbe med Adobe Photoshop og studere moderne webdesignverktøy. På stadiet med å lage et nettsteddesign vil studenten få grunnleggende ferdigheter i å jobbe i en grafikkredigerer. Vi vil analysere ulike alternativer for nettstedsdesign, diskutere fordeler og ulemper ved hver, og finne ut hvordan designet kan forbedres.
På slutten av kurset vil jeg og studentene mine lage en nettside ved hjelp av et ferdig designoppsett med de nyeste webprogrammeringsverktøyene og publisere resultatet av arbeidet vårt på Internett.
11
kursKurslærer:
«Minecraft: Introduksjon til kunstig intelligens», «Unity 3D», «Frontendutvikler: HTML/CSS/JavaScript-nettsteder», «Tegning i animestil», «Programmering for de minste», «Minecraft-programmering», «Designtenkning», «Botter i Python», «Photoshop grafisk design», «Videoblogging»
Utdanning:
Tallrike kurs for å forbedre IT-ferdigheter i internasjonale selskaper (Chatbot Hackathons, Prototyping innen kunstig intelligens, IT-arkitektur, etc.). Universitetet i Heilbronn, Heilbronn, Tyskland (Master of Business Administration). Hviterussisk statsøkonomisk universitet, Minsk, Hviterussland (Master of Business Administration).
Erfaring:
Han er engasjert i klientrådgivning av juridiske systemer, systemer for revisjonsløsninger og prosessautomatisering, jobber innen det innovative feltet IT og en oppstart i Tyskland i et internasjonalt selskap.
Interesser:
Personlig utvikling, lidenskap for å dele kunnskap, nettverker, verdensåpner, livsdesigner, sportsaktivist.
"I dag er hele verden sammenkoblet: mennesker, land, økonomier, teknologier, etc. Programmering er en nøkkelkompetanse for fremtiden. Det hjelper deg bedre å forstå fremtidens verden, aktivt forme den og være et innovativt medlem av et spennende samfunn uten grenser. Evnen til å kode åpner uendelige dører til fremtiden for våre barn i denne verden og gjør dem til ambassadører for ny teknologi."
9
kursKurslærer:
«Minecraft: Introduksjon til kunstig intelligens», «Unity 3D», «Frontendutvikler: HTML/CSS/JavaScript-nettsteder», «Tegning i animestil», «Programmering for de minste», «Minecraft-programmering», «Designtenkning», «Botter i Python», «Photoshop grafisk design», «Videoblogging»
Utdanning:
Tallrike kurs for å forbedre IT-ferdigheter i internasjonale selskaper (SAP, prosessautomatisering, e-handel). FOM University of Stuttgart, Stuttgart, Tyskland (Master of Business Administration) Karaganda State Technical University, Karaganda, Kasakhstan.
Erfaring:
Grunnlegger av en vellykket nettbutikk i Tyskland, engasjert i kunderådgivning i innen automatisering av salgsprosesser, jobber innen IT-salg i Tyskland i det internasjonale selskaper.
Interesser:
Reise, fiske, sport, sjakk.
I. Goethe sa: "Du kan bare lære det du elsker"
1. modul
Første dagen
Grunnleggende om websideoppsett
- HTML-dokumentstruktur
- Første nettside som bruker HTML-markeringsspråk
- Vi introduserer Sublime Text 3 Editor
Resultatet av leksjonen: opprettet den første nettsiden, lærte grunnleggende måter å merke tekst ved hjelp av koder.
Praktisk oppgave: lage en nettside med HTML-markeringsspråk.
Andre dagen
Div element og tag attributter
- Jobber med webinspektøren
- Opprette et nettsted med flere sider
- Lære nye tagelementer og attributter
Resultatet av leksjonen: lærte hvordan du legger til lenker og bilder til nettstedet, lagt til attributter til tagger
Praktisk oppgave: lag ditt første nettsted med flere sider.
Dag tre
Cascading Style Sheets
- Introduksjon til Cascading Style Sheets
- Styling HTML-elementer
- Bruk av velgere
- Installere og arbeide med Emmet-plugin og legge til Lorem-tekst
Resultatet av leksjonen: lært hvordan du endrer bakgrunnsfargen og tekstfargen til HTML-elementer, bruker to typer velgere, lager Lorem-tekst ved hjelp av Emmet-pluginen
Praktisk oppgave: endre utseendet på siden ved hjelp av CSS-egenskaper.
Dag fire
Opprettelse av Jaguar-nettsted
- Opprettelse av et flersidet Jaguar-nettsted
- Opprette en prosjektfilstruktur
- Arbeid med polstring og polstring av elementer
Resultatet av leksjonen: lærte å jobbe med en ekstern CSS-fil, ble kjent med ekstern og intern polstring av elementer.
Praktisk oppgave: opprette et Jaguar-nettsted med flere sider.
2. modul
Første dagen
Boksmodell i CSS
- Boksmodell i CSS
- Lage uvanlig formede blokker
- Arbeide med egenskapen boksstørrelse for å endre hvordan et elements bredde og høyde beregnes
Resultatet av leksjonen: lærte å lage blokker med uvanlige former, bruke egenskapen boksstørrelse med grenseboksverdien for å beregne bredden på et element korrekt, og angi størrelsene på elementene i forskjellige måleenheter
Praktisk oppgave: lage kort med tekst ved å bruke forskjellige verdier for boksstørrelser.
Andre dagen
Avansert tekstmanipulering i CSS
- Ulike typer fonter
- Velge fonter for nettsteder
- Lage nye stiler som lar deg tilpasse tekstvisning på et avansert nivå
Resultatet av leksjonen: opprettet en side med forskjellige typer fonter, forbedret utseendet og lesbarheten til teksten ved å bruke de beståtte egenskapene.
Praktisk oppgave: opprette en side med grunnleggende skrifttyper.
Dag tre
Posisjoneringselementer i CSS
- Arbeider med flyteegenskapen
- Typer plassering av elementer på siden
- posisjon eiendom
Resultatet av leksjonen: lært å jobbe med flyte- og posisjonsegenskapene, lage tekstomslag rundt bilder
Praktisk oppgave: lag en nettside og plasser elementer på den ved å bruke flyte- og posisjonsegenskaper
Dag fire
Opprette en bloggside
- Opprette en bloggside
- Elementposisjoneringsegenskaper for å plassere menyer og innlegg på siden
- Semantiske tagger
Resultatet av leksjonen: lærte å jobbe med semantiske tagger ved hjelp av posisjoneringsegenskaper, plasserte hovedkomponentene i bloggen på siden
Praktisk oppgave: lage en bloggside ved hjelp av semantiske koder
3. modul
Første dagen
Pseudo-klasser og arbeid med bilder i CSS
- Bruke bakgrunnsbilder på en nettside
- Pseudo-klasser svever, aktive og besøkte
- Endre stilen til ett element når du aktiverer en pseudo-klasse på et annet element
- Lage bakgrunnsmønstre
Resultatet av leksjonen: lært å jobbe med bakgrunnsbilder, studert egenskaper for arbeid med bilder
Praktisk oppgave: legg til eksterne endringer i elementer når du holder musepekeren over dem.
Andre dagen
FlexBox i CSS
- Arbeide med CSS Flexible Box Layout
- Egenskaper for justering av elementer i en Flex-beholder
- Flex-frosk pedagogisk spill
Resultatet av leksjonen: lærte å jobbe med Flex-teknologi for å lage fleksible oppsett, fullførte flex-frog-spillet for å konsolidere materialet som dekkes
Praktisk oppgave: fullfør flex-frog-spillet for å konsolidere materialet som dekkes
Dag tre
Utvikling av nettsiden til Sneakers-butikken. Del 1
- Opprette en sidestruktur med modeller
- Kobler til et skriftsted
- Egenskaper for sideoverskriften og dens underordnede elementer
- Funksjoner for å lage en gradientsidebakgrunn
Resultatet av leksjonen: opprettet en nettstedsstruktur med modeller, koblet fonten til nettstedet.
Praktisk oppgave: velg og last ned bilder med modeller, legg til en skygge til sideoverskriften
Dag fire
Utvikling av nettsiden til Sneakers-butikken. Del 2
- Fullfører arbeid på nettstedet
- Lage en blokk med kort
- Endre oppførselen til elementer når du holder musepekeren over dem
- FlexBox-teknologi for kortposisjonering
Resultatet av leksjonen: laget en nettside med modellkort
Praktisk oppgave: legg til et galleri ved hjelp av FlexBo-teknologi
4. modul
Første dagen
Rutenettoppsett i CSS
- Introduksjon til Grid-systemet
- Opprette en side ved hjelp av rutenett
- Egenskaper for avansert arbeid med Grid-celler
Resultatet av leksjonen: studerte det todimensjonale layoutsystemet (CSS Grid Layout), lærte hvordan du plasserer Grid-celler på siden.
Praktisk oppgave: fullfør grid hagespillet for å konsolidere materialet som dekkes.
Andre dagen
Pseudo-elementer etter og før
- Pseudo-elementer før og etter
- Kombinere et bilde med tekst inni
- Elementer med første bokstav og første linje pseudo-elementer
Resultatet av leksjonen: lært å jobbe med pseudo-elementer før, etter, første bokstav og første linje, kombinere pseudo-elementer med forskjellige egenskaper for å lage vakre blokker
Praktisk oppgave: lag et element ved å bruke etter- og før-pseudoelementene.
Dag tre
Animasjoner og transformasjoner i CSS
- CSS-transformasjoner
- Bruke transformasjoner på HTML-elementer
- Opprette animerte blokker i CSS
- Bruk av tidsfunksjoner på nøkkelbilder
Resultatet av leksjonen: lært å jobbe med transformasjoner i CSS, lage endeløse animasjoner i CSS.
Praktisk oppgave: lag en knapp, legg til transformasjoner når du holder musepekeren.
Dag fire
Øv på å lage animasjoner i CSS
- Anvendelse av animasjon og transformasjon i praksis
- Å lage et animert banesystem av planeter i vårt solsystem
Resultatet av leksjonen: laget en side som demonstrerer bevegelsen til planeter i solsystemet og en animert bakgrunn.
Praktisk oppgave: lage et animert banesystem av planeter i vårt solsystem.
5. modul
Første dagen
Opprettelse av nettbutikk
- Hva er en nettbutikk?
- Opprette en prosjektstruktur
- Prosjektoppsett
Resultatet av leksjonen: begynte å lage en nettbutikk.
Praktisk oppgave: velg ikoner som skal brukes på nettstedet.
Andre dagen
Opprette en nettbutikkoverskrift
- Variabler i CSS og hvordan du bruker dem
- Koble fonter til et eksternt stilark ved hjelp av url-funksjonen
- Nettbutikkoverskrift, dens styling
- Legge til ekstra menyfunksjonalitet ved å bruke JavaScript-programmeringsspråket
Resultatet av leksjonen: konfigurerte globale variabler i prosjektet, laget en multifunksjonell overskrift med en meny, koblet til en Javascript-fil for å legge til ekstra menyfunksjonalitet.
Praktisk oppgave: legg til å endre bakgrunnen til sideoverskriften når du ruller siden
Dag tre
Opprette den første skjermen med hovedproduktet
- HTML-strukturen til presentasjonsblokken
- Gittersystem for korrekt visning av elementer
- CSS-egenskapsverdier ved hjelp av variabler
- Styling elementer
Resultatet av leksjonen: laget presentasjonsdelen av nettbutikken
Praktisk oppgave: lage en presentasjonsdel av en nettbutikk
Dag fire
Lage en blokk med populære produkter
- HTML-oppmerking for en blokk med produkter
- Styling for produktkort
- Rutenett for kortplassering
- Stilisering av en blokk med selskapets historie
Resultatet av leksjonen: opprettet en blokk med populære produkter og bedriftshistorie
Praktisk oppgave: legg til ekstern og intern polstring til elementer i blokken med selskapets historie
6. modul
Første dagen
Opprette en glidebryter med kundeanmeldelser.
- Gjennomgå blokk
- Måter å lage rullebare beholdere i CSS
- rulle-atferd og rulle-snap-type egenskaper
- Skyveankerpunkter
Resultatet av leksjonen: opprettet en glidebryter med kundeanmeldelser ved hjelp av HTML og CSS.
Praktisk oppgave: legg til ankerpunkter til hoveddelene av nettstedet og lag en automatisk rulling til disse blokkene når du klikker på knappen.
Andre dagen
Arbeid med skjemaer og videoinnhold.
- HTML5-tagger for å sette inn videoinnhold på et nettsted
- Style en seksjon med et videoklipp i fullskjerm
- Inndatafelt-tag -, og dens attributter
- Tag for å lage skjemaer i HTML
- Stiler et tekstinndataelement
Resultatet av leksjonen: laget en seksjon med en video og en blokk med tilbakemeldingsskjema
Praktisk oppgave: lag et tilbakemeldingsskjema, stil elementene
Dag tre
Opprette en egen galleriside
- Egendefinert rutenett for en galleriside
- Legge til blokker med bilder i rutenettet
- Pseudo-elementer og ulike animasjoner av blokker med bilder
- CSS-filtre for å forbedre galleriets visuelle design
Resultatet av leksjonen: opprettet en egen side med et bildegalleri
Praktisk oppgave: bruke forskjellige typer posisjonering for å skape en gjennomskinnelig uvanlig bakgrunn.
Dag fire
Tilpasning av innhold for alle typer enheter.
- Måter å tilpasse innhold for mobile enheter
- Mediespørringer for å bruke forskjellige egenskaper på det samme elementet på enheter med forskjellige bredder
- CSS-regler for tre typer enheter
Resultatet av leksjonen: Vi tilpasset nettsiden for nettbrett og telefoner.
Praktisk oppgave: ved å bruke mediespørringer, endre egenskapsverdiene til HTML-elementer for å tilpasse innholdet til alle typer enheter
7. modul
Første dagen
Introduksjon til Tailwind SS-rammeverket.
- Hva er rammer og hvordan fremskynder de prosjektutviklingsprosessen?
- Installere Tailwind CSS-rammeverket og plugins
- Medvind CSS-rammekonsepter
- Arbeid med typografi og farger i Tailwind CSS
Resultatet av leksjonen: opprettet den første nettsiden ved hjelp av Tailwind CSS-rammeverket.
Praktisk oppgave: lag en blokk med tekst, stilelementer ved hjelp av medvindsklasser.
Andre dagen
Medvindskurs for å lage en responsiv nettside
- Jobber med Tailwind-klasser for å lage en responsiv nettside
- Klasser for å legge til sveve- og fokuseffekter
- Klasser for å legge til skygger til elementer
- Klasser for arbeid med elementstørrelser
- Klasser for arbeid med utvendig og innvendig polstring av elementer
Resultatet av leksjonen: Vi har laget en adaptiv side for alle typer enheter.
Praktisk oppgave: lag knapper, legg til effekter når du klikker på dem ved å bruke Tailwind-klasser
Dag tre
Tailwind Flex Layout.
- Arbeid med Tailwind Flex Layout
- Klasser for justering av underordnede elementer i en Flex-beholder
- Lage et kort med prisen på et produkt
- Lage fremdriftsindikatorer
- Arbeide med Pseudo-elementer i Tailwind CSS
Resultatet av leksjonen: laget en Flex-beholder med produktkort
Praktisk oppgave: lage et kort med en beskrivelse av produktet.
Dag fire
Rutenettsystem i Tailwind CSS.
- Egenskaper for radspenn og fargespenn
- Egenskaper for automatisk fylling av tomrom i et rutenett med elementer
- Prosjektteam-side
Resultatet av leksjonen: opprettet en adaptiv prosjektgruppeside ved hjelp av Tailwind Grid-systemet.
Praktisk oppgave: legge til effekter i rutenettelementer når du holder musepekeren over dem
8. modul
Første dagen
Prosjektoppsett
- Sette opp "Administrer" applikasjonssideprosjektet
- Opprette en responsiv nettsideoverskrift
- Opprette en hamburgermeny ved hjelp av JavaScript
- Opprette en presentasjonsdel med et produkt
Resultatet av leksjonen: opprettet den første skjermen på "Administrer"-applikasjonsnettstedet
Praktisk oppgave: legg til et bakgrunnsbilde på den første skjermen.
Andre dagen
Opprette en seksjon med en beskrivelse av applikasjonen
- Seksjon med en beskrivelse av applikasjonen og dens fordeler
- Tilpass den opprettede blokken for alle typer enheter
- Seksjon med applikasjonsdrift
- Bruk medvindsfiltre på et bilde
Resultatet av leksjonen: opprettet to deler av nettstedet "Administrer"
Praktisk oppgave: opprette en ekstra seksjon med historikken for applikasjonsopprettingen
Dag tre
Opprette en del om prosjektgruppen
- Del om laget
- Slider med Tailwind CSS og Javascript
- Ansattkort
Resultatet av leksjonen: opprettet en del om prosjektgruppen
Praktisk oppgave: opprette en seksjon med en CTA-knapp
Dag fire
Opprette en seksjon med priser
- Lag en seksjon med priser
- Lag en responsiv bunntekst på nettstedet
- Fullfør prosjektet
Resultatet av leksjonen: fullført arbeidet med prosjektet, opprettet nettsiden for "Administrer"-applikasjonen
Praktisk oppgave: fullføre prosjektet, legge nettstedet på Internett
9. modul
Første dagen
Begynn å jobbe med ditt eget prosjekt.
- Velg et prosjektemne
- Begynn å utvikle din egen nettside
Resultatet av leksjonen: et tema er valgt og arbeidet med prosjektet har startet
Praktisk oppgave: Prosjekt arbeid
Andre dagen
Arbeidet videre med prosjektet
- Fortsett å jobbe med prosjektet
- Rett opp feil i prosjektet
Resultatet av leksjonen: opprettelse av nettsider
Praktisk oppgave: Prosjekt arbeid
Dag tre
Utarbeide en prosjektpresentasjon.
- Beskriv prosjektet ditt
- Lag en presentasjonsmal for å forsvare prosjektet ditt
- Fullfør prosjektet
- Legg nettstedet på Internett
Resultatet av leksjonen: forberedte en presentasjon og øvde på talen.
Praktisk oppgave: forberede en presentasjon av prosjektet, legg nettsiden på Internett.
Dag fire
Prosjektbeskyttelse.
- Fullfør prosjektpresentasjonen
- Forsvar prosjektet ditt foran et publikum
Resultatet av leksjonen: Vi fullførte arbeidet med kursprosjektet og presenterte det for foreldrene.
Praktisk oppgave: fullføre prosjektet, forberede og gjennomføre en presentasjon.