Creare site Dezvoltare front-end - curs gratuit de la Școala de programare online pentru copii Hello World, instruire 44 de ore, Data: 3 decembrie 2023.
Miscelaneu / / December 06, 2023
Cum funcționează internetul
Să vorbim despre conceptele de bază ale internetului și arhitectura acestuia. Să aflăm ce este un domeniu, găzduire, arhitectură client-server. Să creăm mediul de lucru și să vorbim despre cei trei piloni ai dezvoltării front-end - HTML, CSS și JavaScript.
HTML
Structura documentului HTML
Să creăm primele pagini HTML și să ne uităm la exemple de pagini web simple și complexe. Să ne dăm seama ce blocuri ar trebui să fie pe pagina noastră. Să facem ca paginile noastre să se conecteze între ele, să aflăm cum diferă textul de hipertext și ce sunt etichetele și atributele.
Lucrați cu text
Să învățăm cum să lucrăm corect cu textul în HTML: împărțiți-l în paragrafe, indicați titluri și subtitluri. Să învățăm cum să facem liste numerotate și cu marcatori și să cităm clasicii.
Link-uri și imagini
Să ne familiarizăm cu link-urile mai detaliat și, de asemenea, să învățăm cum să inserăm imagini și să le folosim ca link-uri.
Dispunerea tabelului
Să creăm primul nostru tabel și să aflăm din ce etichete constă. Să învățăm cum să îmbinam celule, să schimbăm numărul de rânduri și coloane, să aliniem textul și multe altele. De asemenea, vom afla sfaturi de bază de la designer despre cum să vă faceți masa frumoasă.
Introducere în Forme
Să creăm primul nostru formular, să învățăm cum să lucrăm cu câmpuri de introducere, liste derulante, casete de selectare și, bineînțeles, butoane. Să studiem și alte elemente de formular care ne vor fi utile în viitor.
CSS
Introducere în CSS
Să ne amintim ce este CSS și cum să îl folosim. Să învățăm cum să folosim CSS atunci când lucrați cu pagini HTML. Să studiem sintaxa CSS și care sunt selectorii, moștenirea și cu ce prioritate sunt aplicate stilurile noastre unui document HTML.
Selectoare
Să studiem selectoarele mai detaliat. Să învățăm cum să accesăm unul sau mai multe elemente, care este diferența dintre o clasă și o pseudo-clasă și un element dintr-un pseudo-element. Să aruncăm o privire la regulile CSS și să aflăm ce le place oamenilor să întrebe despre CSS în interviuri.
Moștenire, cascadă și prioritate
Învățăm că cascadorismul și cascadorii nu sunt din același domeniu. Să înțelegem principiile prin care stilurile CSS sunt aplicate elementelor HTML.
Decorare text
Să revenim de unde am început - la text. Să învățăm cum să facem textul nostru frumos și ușor de utilizat folosind proprietățile CSS: îndrăzneală, cursive, dimensiune, culoare, fundal și altele.
Model de document bloc
Să învățăm etichetele div și span, precum și cum să setăm dimensiunile elementelor, umplutura și chenarele. Să înțelegem cum se formează modelul bloc al unui document și ce capacități avem pentru poziționarea elementelor.
JavaScript
Vă prezentăm JavaScript
Să facem cunoștință cu al treilea pilon al dezvoltării front-end - JavaScript. Să aflăm ce sunt variabilele, tipurile de date și de ce sunt necesare. Și bineînțeles că vom scrie primul nostru program.
Condiții
Să ne amintim logica, operațiile logice și combinațiile lor. Fie ca puterea și controlul să fie cu noi.
Cicluri
Să învățăm cum să facem multe în timp ce scriem cod mic. Să înțelegem că un ciclu în cadrul unui ciclu este simplu, dar trebuie să fii atent.
Matrice
Există mase de gheață, păduri și există matrice în programare. Vom studia ce au în comun și cum diferă în această lecție. Sugestie - buclele din lecția anterioară ne vor ajuta foarte mult.
Funcții
Dacă variabilele și numele potrivit pentru ele sunt ABC-urile programării, atunci capacitatea de a lucra cu funcții și de a alege nume potrivite pentru ele este deja o rețetă. Vom învăța cum să împărțim un program în blocuri logice și de ce acest lucru este important în această lecție.
Obiecte
Ne vom familiariza cu conceptul de obiecte, metode și vom începe să ne familiarizăm cu principiile OOP.
Introducere în DOM
JavaScript ar fi inutil dacă nu ar putea interacționa cu un document HTML. Vom afla ce este DOM (Document Object Model), dar mai important, vom învăța cum să lucrăm cu HTML și CSS prin JavaScript.
Gestionarea evenimentelor
Acum vom trece la nivelul următor și vom învăța cum să reacționăm și să interacționăm cu utilizatorul folosind JavaScript. Vom afla, de asemenea, de ce evenimentele JavaScript pot bule și se scufundă.
HTML5 și CSS3
HTML5: ce este nou și de ce?
Să aflăm ce modificări au avut loc în HTML5 și de ce. Să studiem elemente noi și să analizăm cazuri de utilizare corectă a acestora.
Elemente de poziționare și grilă
Să ne uităm la noi moduri de a structura paginile și de a poziționa elementele pe ele.
Formulare HTML5
Să explorăm partea întunecată a puterii și să exersăm cu noile forme în HTML5, precum și cu modificările celor vechi. Să lucrăm cu noi tipuri de câmpuri pentru introducerea datelor, culorilor, numerelor și a modului de a solicita utilizatorului să-și ușureze viața.
Audio și video
În acest tutorial, ești DJ, precum și editor. Nu vom avea timp să ne facem propriul Youtube în timpul acestei lecții, dar vom încerca foarte mult să creăm un prototip cu funcționalitate de bază.
Lucrul cu text în CSS3
Să aflăm ce oportunități există și recomandări pentru formatarea textului în cea mai recentă versiune a standardului.
Efecte de tranziție și transformare în CSS3
Să învățăm cum să creăm animații și diverse efecte folosind CSS3. Să ne familiarizăm cu capcanele atunci când creăm astfel de efecte.
Aspect adaptiv
Să aflăm de ce trebuie să amenajați adaptiv și când este inutil și poate provoca rău. Să ne uităm la sintaxa de bază și, bineînțeles, să exersăm aspectul adaptiv.
Flexbox și grilă CSS
Vom învăța despre abordările moderne de aranjare a blocurilor, precum și despre dificultățile de utilizare a acestora.
Preprocesoare CSS: LESS și SASS
Doriți să utilizați variabile în CSS? Uşor! Aflați ce lucruri interesante puteți face folosind preprocesoarele CSS.
JavaScript la un nou nivel
ES-2015+
Ce este JavaScript modern, „modul strict” și cum să trăiești cu toate acestea.
OOP în JavaScript
Să studiem cum sunt structurate clasele în JavaScript modern și de ce sunt folosite dacă totul poate fi făcut folosind funcții. Cum funcționează moștenirea și ce alte moduri de a crea clase există în JS.
Funcții în detaliu
Să aflăm ce sunt Declarația funcției și Expresia funcției, să învățăm cum să apelăm o funcție fără nume. Să ne uităm la expresia „legare de context”.
AJAX și JSON
Să ne ducem la un nou nivel ca dezvoltatori, să învățăm cum să facem solicitări HTTP și să învățăm cum serverul și clientul pot comunica între ei și nu se ceartă.
Expresii obisnuite
„Dacă ai o problemă și o vei rezolva cu expresii regulate, atunci ai deja două probleme.” Să învățăm cum să evităm să te împuști în picior folosind expresii regulate.
Constructori, conducători de sarcini și managementul dependențelor
Bower, npm, gulp, Grunt, webpack și co. Nu este nimic complicat în acest sens, dar va trebui să-ți dai seama.
Testare în JavaScript
Acolo unde există cod, există întotdeauna erori. Veți învăța cum să minimizați numărul lor și ce practici și instrumente ne vor ajuta în acest sens.
Algoritmi
Vom învăța cum să scriem cod, astfel încât mai târziu procesorul și browserul să nu experimenteze dureri chinuitoare la lansarea programului.
ReactJS
Introducere în ReactJS
Să facem cunoștință cu ReactJS, să învățăm cum să scriem componente simple și să le comparăm cu alte cadre populare. Să ne familiarizăm cu conceptul de Virtual DOM.
Arhitectura si configurarea aplicatiilor React
Să aflăm ce acțiuni trebuie să facem pentru a nu doar să scriem în React, ci și să o facem cât mai eficient și convenabil.
Crearea primei aplicații în ReactJS
Să aruncăm o privire mai atentă la JSX, ReactComponent, ReactDOM.render, funcția Render. Configuram si lansam prima aplicatie, stabilim relatii intre componente si evenimente de proces.
Rutare și ReactJS
Ce este rutarea; Să facem cunoștință cu ReactRouter și funcționalitatea acestuia; Organizăm rutarea în aplicația noastră.