Dezvoltator front-end: site-uri web pe HTML/CSS/JavaScript - curs 18.000 rub. de la Coddy School of Programming for Children, instruire 3 module (luni)
Miscelaneu / / December 03, 2023
Varsta: 11-14 ani
Nivel: pentru începători.
Durata: de la 3 module (luni), de la 24 de ore*.
Format: lecții individuale și de grup, offline și online (în timp real).
Numar copii: de la 1 la 8.
Preț:
de la 750 rub./oră într-un grup online,
de la 850 rub./oră într-un grup offline,
de la 1050 rub./oră individual online,
de la 1980 rub./oră individual offline.
În lumea modernă, orice companie serioasă se străduiește să-și achiziționeze propriul site, pentru că este un fel de „carte de vizită” pe Internet, fără de care a face afaceri pare deja depășit, frivol și fara speranta.
În ultimii ani, profesia de webmaster a urcat în fruntea clasamentului celor mai atractive și căutate profesii din domeniul IT. În acest sens, în prezent există tot mai multe persoane dispuse să urmeze formare în crearea de site-uri web cu zgarie si stapaneste aceasta specialitate de prestigiu pentru a avea un stabil si decent castiguri. Școala noastră de programare CODDY vă sugerează să nu amânați și să vă înscrieți copilul la cursul „Dezvoltator Frontend: Site-uri web pe HTML/CSS/JavaScript” chiar acum! Scopul acestui curs este de a-i învăța pe copii cum să creeze site-uri web moderne și de a le prezenta elementele de bază ale profesiei de dezvoltator de interfețe.
Ce este webmastering-ul și cum să devii webmaster?
Webmasteringul este un set de activități pentru dezvoltarea, crearea, optimizarea și promovarea site-urilor web. Tot ceea ce este într-un fel sau altul legat de producția și întreținerea site-urilor. Aceasta este o întreagă știință care necesită anumite abilități și cunoștințe în multe domenii, cum ar fi programarea web, design, copywriting, SEO și altele.
Pe internetul modern, oricine își poate face propriul site. Dar, de regulă, calitatea proiectelor web lasă mult de dorit. Pentru ca un site web să fie competitiv, trebuie să abordați problema în mod competent și să implicați profesioniști în muncă. Folosind un limbaj de programare, programatorul creează pagini de site web și le combină într-un singur obiect, după care le aranjează pentru a fi afișate corect în browsere. O atenție deosebită trebuie acordată interfeței viitorului site, asigurând funcționarea corectă și securitatea acestuia. Deci, un webmaster profesionist face el însuși toate cele de mai sus! Acesta este un programator, designer web, designer de layout, administrator și moderator și, uneori, un copywriter SEO integrat într-unul.
Ce cunoștințe și tehnologii trebuie să stăpânești pentru a deveni webmaster?
Înainte de a deveni webmaster, trebuie să vă familiarizați și să studiați multe tehnologii, programe și sisteme. Iată pașii principali care vor pune bazele viitoarei tale profesii:
1. Învățarea HTML – limbaj de marcare hipertext.
Odată ce începeți să învățați HTML, veți înțelege structura unui document web și veți învăța cum să creați site-uri web simple.
2. Învățarea CSS – limbajul stilului de afișare a paginii web. Datorită introducerii stilurilor CSS în document, site-ul capătă propria sa aromă și aspect unic. Puteți seta culoarea, dimensiunea, fundalul și multe altele pe pagina web.
3. Introducere în CMS – sistemul de management al conținutului sau „motorul” site-ului.
4. Stăpânirea Adobe Photoshop – un editor grafic cu un număr incredibil de posibilități. Mulți specialiști îl folosesc pentru a desena modele și pentru a-și crea propriile machete originale și de înaltă calitate.
5. Familiarizare de bază cu limbaje de programare. Marea majoritate a site-urilor web utilizează PHP și JavaScript. Viteza site-ului, securitatea, posibila scalabilitate și suportul de la dezvoltatori terți depind de calitatea scripturilor scrise. Cu alte cuvinte, trebuie să poți scrie cod de calitate.
6. Lucrul cu baze de date.
Și cel mai important, webmasterul trebuie să creeze site-uri originale. Odată cu apariția soluțiilor gata făcute pentru toate CMS-urile populare, un site web cu un design original, fără șablon, este mai solicitat ca niciodată. Un webmaster profesionist poate nu numai să lucreze cu un set de programe gata făcute, ci și să scrie aceste programe gata făcute. Pentru a ajunge la acest nivel va trebui să muncești din greu. Iar cursul nostru „Dezvoltator front-end: site-uri web pe HTML/CSS/JavaScript” vă va ajuta copilul să facă primii pași încrezători în această sarcină dificilă. Sub îndrumarea unor practicieni în predare cu experiență, el va învăța să creeze site-uri web informative care prezintă design grafic original.
Pe parcursul procesului educațional vor fi studiate următoarele teme:
1. Elementele de bază ale limbajului de marcare hipertext (HTML) și foilor de stil în cascadă (CSS)
2. aspectul site-urilor web moderne
3. studiu aprofundat al caracteristicilor stilului paginilor web
4. elementele de bază ale lucrului cu Adobe Photoshop și ale lucrului cu aspecte de proiectare a site-urilor web
În etapa inițială, ne vom familiariza cu elementele de bază ale profesiei de dezvoltator de interfețe web și vom studia regulile construirea structurii și logicii site-urilor web, dobândind abilități practice de programare interfețe web. Fiecare student va învăța elementele de bază ale scrierii codului HTML și CSS.
După finalizarea acestui subiect, copilul dumneavoastră își va crea propriul site web modern.
Al doilea modul include un studiu aprofundat al instrumentelor de programare a interfeței web. În acest modul vom continua introducerea în HTML și CSS. Elevii se vor familiariza cu algoritmul și structura creării site-urilor web moderne în practică, vor crea în mod independent o galerie de imagini interactivă și își vor publica proiectul pe Internet.
În timpul celui de-al treilea modul, ne vom continua cunoștințele cu profesia de dezvoltator web, vom dobândi abilități practice în lucrul cu Adobe Photoshop și vom studia instrumentele moderne de web design. În etapa de creare a unui site web, studentul va dobândi abilități de bază în lucrul într-un editor grafic. Vom analiza diferite opțiuni de proiectare a site-ului web, vom discuta avantajele și dezavantajele fiecăruia și vom afla cum poate fi îmbunătățit designul.
La sfârșitul cursului, studenții mei și cu mine vom crea un site web folosind un aspect de design gata făcut folosind cele mai recente instrumente de programare web și vom publica rezultatul muncii noastre pe Internet.
11
cursuriProfesor de curs:
„Minecraft: Introducere în inteligența artificială”, „Unity 3D”, „Dezvoltator front-end: site-uri web HTML/CSS/JavaScript”, „Desen în stil anime”, „Programare pentru cei mici”, „Programare Minecraft”, „Design thinking”, „Bots în Python”, „Design grafic Photoshop”, „Videoblogin”
Educaţie:
Numeroase cursuri de îmbunătățire a abilităților IT în companii internaționale (Chatbot Hackathon, Prototyping în domeniul inteligenței artificiale, arhitectură IT etc.). Universitatea din Heilbronn, Heilbronn, Germania (Master în Administrarea Afacerilor). Universitatea Economică de Stat din Belarus, Minsk, Belarus (Maestru în Administrarea Afacerilor).
Experienţă:
Este angajat în consultanța clienților sistemelor juridice, sisteme pentru soluții de audit și automatizare a proceselor, lucrează în domeniul inovator al IT și un start-up în Germania într-o companie internațională.
Interese:
Dezvoltare personală, pasiune pentru împărtășirea cunoștințelor, networker, world opener, life designer, activist sportiv.
„Astăzi, întreaga lume este interconectată: oameni, țări, economii, tehnologii etc. Programarea este o competență cheie a viitorului. Vă ajută să înțelegeți mai bine lumea viitorului, să o modelați în mod activ și să fiți un membru inovator al unei societăți interesante fără granițe. Abilitatea de a codifica deschide uși nesfârșite către viitor pentru copiii noștri din această lume și îi face ambasadori ai noilor tehnologii.”
9
cursuriProfesor de curs:
„Minecraft: Introducere în inteligența artificială”, „Unity 3D”, „Dezvoltator front-end: site-uri web HTML/CSS/JavaScript”, „Desen în stil anime”, „Programare pentru cei mici”, „Programare Minecraft”, „Design thinking”, „Bots în Python”, „Design grafic Photoshop”, „Blog video”
Educaţie:
Numeroase cursuri de îmbunătățire a competențelor IT în companii internaționale (SAP, automatizare procese, comerț electronic). Universitatea FOM din Stuttgart, Stuttgart, Germania (Master în Administrarea Afacerilor) Universitatea Tehnică de Stat Karaganda, Karaganda, Kazahstan.
Experienţă:
Fondator al unui magazin online de electricitate de succes din Germania, angajat în consultanța clienților în domeniul automatizării proceselor de vânzare, lucrează în domeniul vânzărilor IT în Germania la nivel internațional companiilor.
Interese:
Călătorii, pescuit, sport, șah.
I. Goethe a spus: „Nu poți învăța decât ceea ce iubești”
modulul 1
Prima zi
Noțiuni de bază pentru aspectul paginii web
- Structura documentului HTML
- Prima pagină web care folosește limbajul de marcare HTML
- Vă prezentăm Sublime Text 3 Editor
Rezultatul lectiei: a creat prima pagină web, a învățat modalități de bază de a marca textul folosind etichete.
Sarcina practica: creați o pagină web folosind limbajul de marcare HTML.
A doua zi
Elementul Div și atributele etichetei
- Lucrul cu inspectorul web
- Crearea unui site web cu mai multe pagini
- Învățarea de noi elemente și atribute de etichetă
Rezultatul lectiei: a învățat cum să adăugați link-uri și imagini pe site, a adăugat atribute la etichete
Sarcina practica: creați-vă primul site web cu mai multe pagini.
Ziua trei
Foi de stil în cascadă
- Introducere în foile de stil în cascadă
- Stilarea elementelor HTML
- Utilizarea selectoarelor
- Instalarea și lucrul cu pluginul Emmet și adăugarea de text Lorem
Rezultatul lectiei: a învățat cum să schimbați culoarea de fundal și culoarea textului elementelor HTML, să utilizați două tipuri de selectoare, să creați text Lorem folosind pluginul Emmet
Sarcina practica: modificați aspectul paginii folosind proprietățile CSS.
Ziua a patra
Crearea site-ului Jaguar
- Crearea unui site web Jaguar cu mai multe pagini
- Crearea unei structuri de fișier de proiect
- Lucrul cu umplutura și umplutura elementelor
Rezultatul lectiei: a învățat să lucreze cu un fișier CSS extern, sa familiarizat cu umplutura externă și internă a elementelor.
Sarcina practica: creați un site web Jaguar cu mai multe pagini.
al 2-lea modul
Prima zi
Model de casetă în CSS
- Box Model în CSS
- Crearea de blocuri cu forme neobișnuite
- Lucrul cu proprietatea box-sizing pentru a modifica modul în care sunt calculate lățimea și înălțimea unui element
Rezultatul lectiei: a învățat cum să creeze blocuri de forme neobișnuite, să folosească proprietatea de dimensiune a casetei cu valoarea casetei de margine pentru a calcula corect lățimea unui element și a seta dimensiunile elementelor în diferite unități de măsură
Sarcina practica: creați carduri cu text utilizând valori diferite ale proprietăților cu dimensiunea casetei.
A doua zi
Manipulare avansată a textului în CSS
- Diferite tipuri de fonturi
- Alegerea fonturilor pentru site-uri web
- Crearea de noi stiluri care vă permit să personalizați afișarea textului la un nivel avansat
Rezultatul lectiei: a creat o pagină folosind diferite tipuri de fonturi, a îmbunătățit aspectul și lizibilitatea textului folosind proprietățile transmise.
Sarcina practica: creați o pagină folosind tipuri de fonturi de bază.
Ziua trei
Poziționarea elementelor în CSS
- Lucrul cu proprietatea float
- Tipuri de poziționare a elementelor pe pagină
- proprietatea poziției
Rezultatul lectiei: a învățat să lucreze cu proprietățile de float și poziție, să creeze text în jurul imaginilor
Sarcina practica: creați o pagină web și plasați elemente pe ea folosind proprietățile float și poziționare
Ziua a patra
Crearea unei pagini de blog
- Crearea unei pagini de blog
- Proprietăți de poziționare a elementelor pentru plasarea meniurilor și postărilor pe pagină
- Etichete semantice
Rezultatul lectiei: a învățat să lucreze cu etichete semantice folosind proprietăți de poziționare, a plasat principalele componente ale blogului pe pagină
Sarcina practica: creați o pagină de blog folosind etichete semantice
al 3-lea modul
Prima zi
Pseudo-clase și lucrul cu imagini în CSS
- Utilizarea imaginilor de fundal pe o pagină web
- Pseudo-clase plutesc, active și vizitate
- Schimbarea stilului unui element la activarea unei pseudo-clase pe alt element
- Crearea modelelor de fundal
Rezultatul lectiei: a învățat cum să lucrezi cu imagini de fundal, a studiat proprietățile pentru a lucra cu imagini
Sarcina practica: adăugați modificări externe la elemente când treceți cu cursorul peste ele cu cursorul mouse-ului.
A doua zi
FlexBox în CSS
- Lucrul cu CSS Flexible Box Layout
- Proprietăți pentru alinierea elementelor într-un container Flex
- Joc educativ Flex-broasca
Rezultatul lectiei: a învățat să lucreze cu tehnologia Flex pentru a crea machete flexibile, a finalizat jocul flex-frog pentru a consolida materialul acoperit
Sarcina practica: finalizați jocul flex-frog pentru a consolida materialul acoperit
Ziua trei
Dezvoltarea site-ului magazinului de adidași. Partea 1
- Crearea unei structuri de site cu modele
- Conectarea la un site de fonturi
- Proprietățile antetului site-ului și ale elementelor sale secundare
- Funcții pentru crearea unui fundal de pagină cu gradient
Rezultatul lectiei: a creat o structură de site cu modele, a conectat fontul la site.
Sarcina practica: selectați și descărcați imagini cu modele, adăugați o umbră la antetul site-ului
Ziua a patra
Dezvoltarea site-ului magazinului de adidași. Partea 2
- Finalizarea lucrărilor pe site
- Crearea unui bloc cu cărți
- Modificarea comportamentului elementelor la trecerea cursorului peste ele
- Tehnologia FlexBox pentru poziționarea cardului
Rezultatul lectiei: a creat un site web cu carduri model
Sarcina practica: adăugați o galerie folosind tehnologia FlexBo
al 4-lea modul
Prima zi
Aspect grilă în CSS
- Introducere în sistemul Grid
- Crearea unei pagini folosind grila
- Proprietăți pentru lucrul avansat cu celule Grid
Rezultatul lectiei: a studiat sistemul de aspect bidimensional (CSS Grid Layout), a învățat cum să poziționeze celulele Grid pe pagină.
Sarcina practica: finalizați jocul grădinii grilă pentru a consolida materialul acoperit.
A doua zi
Pseudo-elemente după și înainte
- Pseudo-elemente înainte și după
- Combinarea unei imagini cu text în interior
- Elemente cu pseudo-elemente de prima literă și prima linie
Rezultatul lectiei: a învățat să lucreze cu pseudo-elemente înainte, după, prima literă și prima linie, combină pseudo-elemente cu diferite proprietăți pentru a crea blocuri frumoase
Sarcina practica: creați un element folosind pseudo-elementele după și înainte.
Ziua trei
Animații și transformări în CSS
- Transformări CSS
- Aplicarea transformărilor elementelor HTML
- Crearea de blocuri animate în CSS
- Aplicarea funcțiilor de sincronizare cadrelor cheie
Rezultatul lectiei: ați învățat cum să lucrați cu transformări în CSS, să creați animații nesfârșite în CSS.
Sarcina practica: creați un buton, adăugați-i transformări atunci când treceți cu mouse-ul.
Ziua a patra
Exersați crearea de animații în CSS
- Aplicarea animației și transformării în practică
- Crearea unui sistem orbital animat de planete din sistemul nostru solar
Rezultatul lectiei: a creat o pagină care demonstrează mișcarea planetelor în sistemul solar și un fundal animat.
Sarcina practica: creați un sistem orbital animat de planete în sistemul nostru solar.
al 5-lea modul
Prima zi
Crearea unui magazin online
- Ce este un magazin online?
- Crearea unei structuri de proiect
- Configurarea proiectului
Rezultatul lectiei: a început să creeze un magazin online.
Sarcina practica: selectați pictogramele pentru a fi utilizate pe site.
A doua zi
Crearea unui antet de magazin online
- Variabile în CSS și cum să le folosiți
- Conectarea fonturilor la o foaie de stil externă folosind funcția url
- Antetul magazinului online, stilul său
- Adăugarea de funcționalități suplimentare de meniu folosind limbajul de programare JavaScript
Rezultatul lectiei: a configurat variabile globale în proiect, a creat un antet multifuncțional cu un meniu, a conectat un fișier Javascript pentru a adăuga funcționalități suplimentare de meniu.
Sarcina practica: adăugați modificarea fundalului antetului site-ului când derulați pagina
Ziua trei
Crearea primului ecran cu produsul principal
- Structura HTML a blocului de prezentare
- Sistem de grilă pentru afișarea corectă a elementelor
- Valorile proprietăților CSS folosind variabile
- Elemente de styling
Rezultatul lectiei: a creat partea de prezentare a magazinului online
Sarcina practica: creați o parte de prezentare a unui magazin online
Ziua a patra
Crearea unui bloc cu produse populare
- Markup HTML pentru un bloc cu produse
- Styling pentru carduri de produse
- Grila grila pentru pozitionarea cardului
- Stilizarea unui bloc cu istoria companiei
Rezultatul lectiei: a creat un bloc cu produse populare și istoria companiei
Sarcina practica: adăugați umplutură externă și internă elementelor din blocul cu istoricul companiei
al 6-lea modul
Prima zi
Crearea unui slider cu recenziile clienților.
- Bloc de revizuire
- Modalități de a crea containere care se pot derula în CSS
- proprietățile de tip scroll-comportament și scroll-snap
- Puncte de ancorare a cursorului
Rezultatul lectiei: a creat un glisor cu recenzii ale clienților folosind HTML și CSS.
Sarcina practica: adăugați puncte de ancorare în secțiunile principale ale site-ului și creați o defilare automată la aceste blocuri atunci când faceți clic pe butonul.
A doua zi
Lucrul cu formulare și conținut video.
- Etichete HTML5 pentru inserarea de conținut video într-un site web
- Stilizarea unei secțiuni cu un clip video pe ecran complet
- Eticheta câmpului de intrare - și atributele acesteia
- Etichetă pentru crearea formularelor în Html
- Stilul unui element de introducere a textului
Rezultatul lectiei: a creat o secțiune cu un videoclip și un bloc cu un formular de feedback
Sarcina practica: creați un formular de feedback, stilați elementele
Ziua trei
Crearea unei pagini de galerie separată
- Grilă personalizată pentru o pagină de galerie
- Adăugarea de blocuri cu imagini la grilă
- Pseudo-elemente și diverse animații de blocuri cu imagini
- Filtre CSS pentru a îmbunătăți designul vizual al galeriei
Rezultatul lectiei: a creat o pagină separată cu o galerie foto
Sarcina practica: folosind diferite tipuri de poziționare pentru a crea un fundal neobișnuit translucid.
Ziua a patra
Adaptarea conținutului pentru toate tipurile de dispozitive.
- Modalități de adaptare a conținutului pentru dispozitive mobile
- Interogări media pentru a aplica diferite proprietăți aceluiași element pe dispozitive cu lățimi diferite
- Reguli CSS pentru trei tipuri de dispozitive
Rezultatul lectiei: Am adaptat site-ul pentru tablete și telefoane.
Sarcina practica: folosind interogări media, modificați valorile proprietăților elementelor HTML pentru a adapta conținutul la toate tipurile de dispozitive
al 7-lea modul
Prima zi
Introducere în cadrul Tailwind SS.
- Ce sunt cadrele și cum accelerează ele procesul de dezvoltare a proiectului?
- Instalarea cadrului și pluginurilor Tailwind CSS
- Concepte de cadru CSS Tailwind
- Lucrul cu tipografie și culori în Tailwind CSS
Rezultatul lectiei: a creat prima pagină web folosind cadrul CSS Tailwind.
Sarcina practica: creați un bloc cu text, elemente de stil folosind clase de vânt din spate.
A doua zi
Tailwind clase pentru crearea unui site web receptiv
- Lucrul cu clasele Tailwind pentru a crea un site web receptiv
- Cursuri pentru adăugarea efectelor de hover și de focalizare
- Clase pentru adăugarea de umbre elementelor
- Clase de lucru cu dimensiunile elementelor
- Clasele de lucru cu umplutura externă și internă a elementelor
Rezultatul lectiei: Am creat o pagină adaptabilă pentru toate tipurile de dispozitive.
Sarcina practica: creați butoane, adăugați efecte când faceți clic pe ele folosind clasele Tailwind
Ziua trei
Tailwind Flex Layout.
- Lucrul cu Tailwind Flex Layout
- Clase pentru alinierea elementelor copil într-un container Flex
- Crearea unui card cu prețul unui produs
- Crearea indicatorilor de progres
- Lucrul cu pseudo-elemente în Tailwind CSS
Rezultatul lectiei: a creat un container Flex cu carduri de produse
Sarcina practica: creați un card cu o descriere a produsului.
Ziua a patra
Sistem de grilă în Tailwind CSS.
- Proprietăți de rânduri și col-span
- Proprietăți pentru umplerea automată a spațiului gol dintr-o Grilă cu elemente
- Pagina echipei de proiect
Rezultatul lectiei: a creat o pagină adaptivă a echipei de proiect folosind sistemul Tailwind Grid.
Sarcina practica: adăugați efecte elementelor grilei atunci când treceți cu mouse-ul peste ele
al 8-lea modul
Prima zi
Configurarea proiectului
- Configurarea proiectului site-ului aplicației „Gestionați”.
- Crearea unui antet de site web receptiv
- Crearea unui meniu Hamburger folosind JavaScript
- Crearea unei secțiuni de prezentare cu un produs
Rezultatul lectiei: a creat primul ecran al site-ului web al aplicației „Gestionați”.
Sarcina practica: adăugați o imagine de fundal la primul ecran.
A doua zi
Crearea unei secțiuni cu o descriere a aplicației
- Secțiune cu o descriere a aplicației și a avantajelor acesteia
- Adaptați blocul creat pentru toate tipurile de dispozitive
- Secțiune cu funcționarea aplicației
- Aplicați filtre Tailwind unei imagini
Rezultatul lectiei: a creat două secțiuni ale site-ului „Gestionați”
Sarcina practica: creați o secțiune suplimentară cu istoricul creării aplicației
Ziua trei
Crearea unei secțiuni despre echipa de proiect
- Secțiune despre echipă
- Slider folosind Tailwind CSS și Javascript
- Carduri de angajat
Rezultatul lectiei: a creat o secțiune despre echipa de proiect
Sarcina practica: creați o secțiune cu un buton CTA
Ziua a patra
Crearea unei secțiuni cu prețuri
- Creați o secțiune cu prețuri
- Creați un subsol de site receptiv
- Finalizați proiectul
Rezultatul lectiei: a finalizat lucrările la proiect, a creat site-ul web pentru aplicația „Manage”.
Sarcina practica: finalizați proiectul, puneți site-ul pe Internet
al 9-lea modul
Prima zi
Începeți să lucrați la propriul proiect.
- Selectați un subiect de proiect
- Începeți să vă dezvoltați propriul site web
Rezultatul lectiei: s-a ales un subiect și s-a început lucrul la proiect
Sarcina practica: Lucrul la proiect
A doua zi
Continuarea lucrărilor la proiect
- Continuați să lucrați la proiect
- Remediați erorile din proiect
Rezultatul lectiei: crearea paginilor site-ului web
Sarcina practica: Lucrul la proiect
Ziua trei
Pregătirea unei prezentări de proiect.
- Descrieți proiectul dvs
- Creați un șablon de prezentare pentru a vă apăra proiectul
- Finalizați proiectul
- Pune site-ul pe Internet
Rezultatul lectiei: a pregătit o prezentare și a repetat discursul.
Sarcina practica: pregătiți o prezentare a proiectului, puneți site-ul pe internet.
Ziua a patra
Protecția proiectului.
- Finalizați prezentarea proiectului
- Apără-ți proiectul în fața unui public
Rezultatul lectiei: Am finalizat lucrările la proiectul cursului și l-am prezentat părinților.
Sarcina practica: finalizați proiectul, pregătiți și realizați o prezentare.