Sviluppatore frontend: siti web su HTML/CSS/JavaScript - corso 18.000 rubli. da Coddy School of Programming for Children, formazione 3 moduli (mesi)
Miscellanea / / December 03, 2023
Età: 11-14 anni
Livello: per principianti.
Durata: da 3 moduli (mesi), da 24 ore*.
Format: lezioni individuali e di gruppo, offline e online (tempo reale).
Numero di bambini: da 1 a 8.
Prezzo:
da 750 rub./ora in un gruppo online,
da 850 rub./ora in un gruppo offline,
da 1050 rub./ora individualmente online,
dal 1980 rub./ora individualmente offline.
Nel mondo moderno, qualsiasi azienda seria si sforza di acquisire il proprio sito Web, perché è una specie di "biglietto da visita" su Internet, senza il quale fare affari sembra già antiquato, frivolo e senza speranza.
Negli ultimi anni la professione di webmaster è salita ai primi posti della classifica delle professioni più attraenti e ambite in ambito informatico. A questo proposito, attualmente ci sono sempre più persone disposte a seguire una formazione sulla creazione di siti web con grattare e padroneggiare questa prestigiosa specialità in modo da avere una esperienza stabile e dignitosa guadagni. La nostra scuola di programmazione CODDY ti consiglia di non ritardare e iscrivi subito tuo figlio al corso “Frontend Developer: Siti web su HTML/CSS/JavaScript”! Lo scopo di questo corso è insegnare ai bambini come creare siti Web moderni e introdurli alle basi della professione di sviluppatore di interfacce.
Cos'è il webmaster e come diventare webmaster?
Il webmastering è un insieme di attività per lo sviluppo, la creazione, l'ottimizzazione e la promozione di siti web. Tutto ciò che è in un modo o nell'altro connesso alla produzione e alla manutenzione dei siti. Questa è un'intera scienza che richiede determinate competenze e conoscenze in molte aree, come la programmazione web, il design, il copywriting, il SEO e altri.
Nell'Internet moderna, chiunque può creare il proprio sito web. Ma di norma, la qualità dei progetti web lascia molto a desiderare. Affinché un sito web sia competitivo, è necessario affrontare la questione con competenza e coinvolgere i professionisti nel lavoro. Utilizzando un linguaggio di programmazione, il programmatore crea le pagine del sito Web e le combina in un unico oggetto, dopodiché le dispone per la corretta visualizzazione nei browser. Particolare attenzione dovrebbe essere prestata all'interfaccia del futuro sito, garantendone il corretto funzionamento e la sicurezza. Quindi, un webmaster professionista fa tutto quanto sopra da solo! Si tratta di programmatore, web designer, progettista di layout, amministratore e moderatore e talvolta un copywriter SEO tutto in uno.
Quali conoscenze e tecnologie devi padroneggiare per diventare un webmaster?
Prima di diventare webmaster, devi familiarizzare e studiare molte tecnologie, programmi e sistemi. Ecco i principali passi che getteranno le basi per la tua futura professione:
1. Imparare l'HTML - Hyper Text Markup Language.
Una volta che inizi a imparare l'HTML, capirai la struttura di un documento web e imparerai come creare semplici siti web.
2. Imparare i CSS – lingua dello stile di visualizzazione della pagina web. Grazie all'introduzione degli stili CSS nel documento, il sito acquisisce un proprio sapore e un aspetto unico. Puoi impostare il colore, la dimensione, lo sfondo e molto altro sulla pagina web.
3. Introduzione al CMS – sistema di gestione dei contenuti o “motore” del sito.
4. Padroneggiare Adobe Photoshop – un editor grafico con un numero incredibile di possibilità. Molti specialisti lo utilizzano per disegnare progetti e creare i propri layout originali e di alta qualità.
5. Conoscenza base dei linguaggi di programmazione. La stragrande maggioranza dei siti Web utilizza PHP e JavaScript. La velocità del sito, la sua sicurezza, l'eventuale scalabilità e il supporto di sviluppatori di terze parti dipendono dalla qualità degli script scritti. In altre parole, devi essere in grado di scrivere codice di qualità.
6. Lavorare con i database.
E, soprattutto, il webmaster deve creare siti originali. Con l'avvento di soluzioni già pronte per tutti i CMS più diffusi, un sito Web con un design originale e senza modello è più richiesto che mai. Un webmaster professionista non solo può lavorare con una serie di programmi già pronti, ma anche scrivere questi programmi già pronti. Per raggiungere questo livello dovrai lavorare duro. E il nostro corso "Sviluppatore frontend: siti web su HTML/CSS/JavaScript" aiuterà tuo figlio a muovere i primi passi con sicurezza in questo difficile compito. Sotto la guida di docenti esperti, imparerà a realizzare siti web informativi caratterizzati da una grafica originale.
Durante il percorso formativo verranno approfonditi i seguenti argomenti:
1. Nozioni di base sull'Hypertext Markup Language (HTML) e sui Cascading Style Sheets (CSS)
2. layout di siti web moderni
3. studio approfondito delle funzionalità di styling delle pagine web
4. nozioni di base per lavorare con Adobe Photoshop e lavorare con i layout di progettazione di siti Web
Nella fase iniziale, conosceremo le basi della professione di sviluppatore di interfacce web e studieremo le regole costruire la struttura e la logica dei siti web, acquisendo competenze pratiche di programmazione interfacce web. Ogni studente apprenderà le basi della scrittura di codice HTML e CSS.
Al termine di questo argomento, tuo figlio creerà il proprio sito Web moderno.
Il secondo modulo prevede uno studio approfondito degli strumenti di programmazione dell'interfaccia web. In questo modulo continueremo la nostra introduzione a HTML e CSS. Gli studenti acquisiranno familiarità con l'algoritmo e la struttura della creazione pratica di siti Web moderni, creeranno autonomamente una galleria di immagini interattiva e pubblicheranno il loro progetto su Internet.
Durante il terzo modulo, continueremo la nostra conoscenza con la professione di sviluppatore web, acquisiremo competenze pratiche nel lavorare con Adobe Photoshop e studieremo i moderni strumenti di web design. Nella fase di creazione del design di un sito Web, lo studente acquisirà le competenze di base per lavorare in un editor grafico. Analizzeremo varie opzioni di progettazione di siti Web, discuteremo i vantaggi e gli svantaggi di ciascuna e scopriremo come è possibile migliorarne la progettazione.
Alla fine del corso, io e i miei studenti creeremo un sito web utilizzando un layout di progettazione già pronto utilizzando gli strumenti di programmazione web più recenti e pubblicheremo il risultato del nostro lavoro su Internet.
11
corsiDocente del corso:
"Minecraft: Introduzione all'intelligenza artificiale", "Unity 3D", "Sviluppatore frontend: siti Web HTML/CSS/JavaScript", "Disegnare in stile anime", “Programmazione per i più piccoli”, “Programmazione Minecraft”, “Design thinking”, “Bots in Python”, “Progettazione grafica Photoshop”, "Videoblog"
Formazione scolastica:
Numerosi corsi per migliorare le competenze informatiche in aziende internazionali (Chatbot Hackathon, Prototipazione nel campo dell'intelligenza artificiale, Architettura informatica, ecc.). Università di Heilbronn, Heilbronn, Germania (Master in Business Administration). Università economica statale bielorussa, Minsk, Bielorussia (Master in amministrazione aziendale).
Esperienza:
Si occupa di consulenza ai clienti in materia di sistemi giuridici, sistemi per soluzioni di audit e automazione dei processi, lavora nel campo innovativo dell'IT e avvia una start-up in Germania in un'azienda internazionale.
Interessi:
Sviluppo personale, passione per la condivisione della conoscenza, networker, apri mondo, progettista di vita, attivista sportivo.
“Oggi il mondo intero è interconnesso: persone, paesi, economie, tecnologie, ecc. La programmazione è una competenza chiave del futuro. Ti aiuta a comprendere meglio il mondo del futuro, a plasmarlo attivamente e a essere un membro innovativo di un'entusiasmante società senza confini. La capacità di programmare apre infinite porte al futuro per i nostri figli in questo mondo e li rende ambasciatori delle nuove tecnologie”.
9
corsiDocente del corso:
"Minecraft: Introduzione all'intelligenza artificiale", "Unity 3D", "Sviluppatore frontend: siti Web HTML/CSS/JavaScript", "Disegnare in stile anime", “Programmazione per i più piccoli”, “Programmazione Minecraft”, “Design thinking”, “Bots in Python”, “Progettazione grafica Photoshop”, "Videoblog"
Formazione scolastica:
Numerosi corsi per migliorare le competenze IT in aziende internazionali (SAP, automazione dei processi, e-commerce). FOM Università di Stoccarda, Stoccarda, Germania (Master in Amministrazione aziendale) Università tecnica statale di Karaganda, Karaganda, Kazakistan.
Esperienza:
Fondatore di un negozio elettrico online di successo in Germania, impegnato nella consulenza ai clienti campo dell'automazione dei processi di vendita, lavora nel campo delle vendite IT in Germania a livello internazionale aziende.
Interessi:
Viaggiare, pescare, fare sport, scacchi.
I. Goethe diceva: “Puoi imparare solo ciò che ami”
1° modulo
Il primo giorno
Nozioni di base sul layout della pagina Web
- Struttura del documento HTML
- Prima pagina web che utilizza il linguaggio di markup HTML
- Presentazione dell'editor Sublime Text 3
Risultato della lezione: ha creato la prima pagina web, ha imparato i metodi di base per contrassegnare il testo utilizzando i tag.
Compito pratico: creare una pagina web utilizzando il linguaggio di markup Html.
Secondo giorno
Elemento div e attributi dei tag
- Lavorare con l'ispettore web
- Creazione di un sito web multipagina
- Apprendimento di nuovi elementi e attributi dei tag
Risultato della lezione: imparato come aggiungere collegamenti e immagini al sito, aggiunto attributi ai tag
Compito pratico: crea il tuo primo sito web multipagina.
Giorno tre
Fogli di stile
- Introduzione ai fogli di stile CSS
- Stile degli elementi HTML
- Utilizzo dei selettori
- Installazione e utilizzo del plugin Emmet e aggiunta di testo Lorem
Risultato della lezione: imparato come cambiare il colore dello sfondo e il colore del testo degli elementi HTML, utilizzare due tipi di selettori, creare testo Lorem utilizzando il plugin Emmet
Compito pratico: modificare l'aspetto della pagina utilizzando le proprietà CSS.
Quarto giorno
Creazione sito web Jaguar
- Creazione di un sito web Jaguar multipagina
- Creazione di una struttura di file di progetto
- Lavorare con l'imbottitura e l'imbottitura degli elementi
Risultato della lezione: ho imparato a lavorare con un file CSS esterno, ho acquisito familiarità con il riempimento esterno ed interno degli elementi.
Compito pratico: creare un sito Web Jaguar multipagina.
2° modulo
Il primo giorno
Modello box nei CSS
- Modello box nei CSS
- Creazione di blocchi dalla forma insolita
- Lavorare con la proprietà box-sizing per modificare il modo in cui vengono calcolate la larghezza e l'altezza di un elemento
Risultato della lezione: imparato come creare blocchi di forme insolite, utilizzare la proprietà box-sizing con il valore border-box per calcolare correttamente la larghezza di un elemento e impostare le dimensioni degli elementi in diverse unità di misura
Compito pratico: creare schede con testo utilizzando diversi valori delle proprietà di ridimensionamento della casella.
Secondo giorno
Manipolazione avanzata del testo nei CSS
- Diversi tipi di caratteri
- Scelta dei caratteri per i siti web
- Creazione di nuovi stili che consentono di personalizzare la visualizzazione del testo a livello avanzato
Risultato della lezione: creato una pagina utilizzando diversi tipi di carattere, migliorato l'aspetto e la leggibilità del testo utilizzando le proprietà passate.
Compito pratico: creare una pagina utilizzando tipi di carattere di base.
Giorno tre
Posizionamento degli elementi nei CSS
- Lavorare con la proprietà float
- Tipi di posizionamento degli elementi sulla pagina
- proprietà di posizione
Risultato della lezione: ho imparato a lavorare con le proprietà float e position, a creare testo che avvolge le immagini
Compito pratico: creare una pagina Web e posizionare elementi su di essa utilizzando le proprietà float e position
Quarto giorno
Creazione di una pagina blog
- Creazione di una pagina blog
- Proprietà di posizionamento degli elementi per posizionare menu e post sulla pagina
- Tag semantici
Risultato della lezione: ho imparato a lavorare con i tag semantici utilizzando le proprietà di posizionamento, ho inserito i componenti principali del blog nella pagina
Compito pratico: creare una pagina blog utilizzando tag semantici
3° modulo
Il primo giorno
Pseudo-classi e lavoro con le immagini nei CSS
- Utilizzo di immagini di sfondo in una pagina web
- Pseudo-classi aleggiano, attive e visitate
- Modifica dello stile di un elemento quando si attiva una pseudo-classe su un altro elemento
- Creazione di motivi di sfondo
Risultato della lezione: imparato come lavorare con le immagini di sfondo, proprietà studiate per lavorare con le immagini
Compito pratico: aggiungi modifiche esterne agli elementi quando ci passi sopra con il cursore del mouse.
Secondo giorno
FlexBox nei CSS
- Lavorare con il layout della casella flessibile CSS
- Proprietà per allineare gli elementi in un contenitore Flex
- Gioco educativo Flex-frog
Risultato della lezione: imparato a lavorare con la tecnologia Flex per creare layout flessibili, completato il gioco flex-frog per consolidare il materiale ricoperto
Compito pratico: completare il gioco flex-frog per consolidare il materiale rivestito
Giorno tre
Sviluppo del sito web del negozio di sneakers. Parte 1
- Creazione di una struttura del sito con modelli
- Connessione a un sito di caratteri
- Proprietà dell'intestazione del sito e dei relativi elementi secondari
- Funzioni per creare uno sfondo sfumato della pagina
Risultato della lezione: ha creato una struttura del sito con modelli, ha collegato il carattere al sito.
Compito pratico: seleziona e scarica le immagini con i modelli, aggiungi un'ombra all'intestazione del sito
Quarto giorno
Sviluppo del sito web del negozio di sneakers. Parte 2
- Completamento del lavoro sul sito
- Creare un blocco con le carte
- Modificare il comportamento degli elementi quando si passa sopra di essi
- Tecnologia FlexBox per il posizionamento delle carte
Risultato della lezione: ha creato un sito web con schede modello
Compito pratico: aggiungi una galleria utilizzando la tecnologia FlexBo
4° modulo
Il primo giorno
Layout della griglia nei CSS
- Introduzione al sistema Grid
- Creazione di una pagina utilizzando la griglia
- Proprietà per il lavoro avanzato con le celle della griglia
Risultato della lezione: studiato il sistema di layout bidimensionale (CSS Grid Layout), imparato come posizionare le celle della Grid sulla pagina.
Compito pratico: completare il gioco del giardino a griglia per consolidare il materiale ricoperto.
Secondo giorno
Pseudoelementi prima e dopo
- Pseudoelementi prima e dopo
- Combinazione di un'immagine con testo all'interno
- Elementi con pseudoelementi di prima lettera e di prima riga
Risultato della lezione: ho imparato a lavorare con gli pseudo-elementi prima, dopo, la prima lettera e la prima riga, a combinare pseudo-elementi con proprietà diverse per creare bellissimi blocchi
Compito pratico: creare un elemento utilizzando gli pseudo-elementi after e befor.
Giorno tre
Animazioni e trasformazioni in CSS
- Trasformazioni CSS
- Applicazione di trasformazioni agli elementi HTML
- Creazione di blocchi animati nei CSS
- Applicazione di funzioni di temporizzazione ai fotogrammi chiave
Risultato della lezione: imparato come lavorare con le trasformazioni in CSS, creare infinite animazioni in CSS.
Compito pratico: crea un pulsante, aggiungi trasformazioni quando ci passi il mouse.
Quarto giorno
Esercitati a creare animazioni in CSS
- Applicazione dell'animazione e della trasformazione nella pratica
- Creazione di un sistema orbitale animato di pianeti nel nostro sistema solare
Risultato della lezione: ha creato una pagina che mostra il movimento dei pianeti nel sistema solare e uno sfondo animato.
Compito pratico: creare un sistema orbitale animato di pianeti nel nostro sistema solare.
5° modulo
Il primo giorno
Creazione di un negozio online
- Cos'è un negozio online?
- Creazione di una struttura di progetto
- Impostazione del progetto
Risultato della lezione: ha iniziato a creare un negozio online.
Compito pratico: selezionare le icone da utilizzare sul sito.
Secondo giorno
Creazione dell'intestazione di un negozio online
- Variabili nei CSS e come usarle
- Collegamento dei caratteri a un foglio di stile esterno utilizzando la funzione URL
- Intestazione del negozio online, il suo stile
- Aggiunta di funzionalità di menu aggiuntive utilizzando il linguaggio di programmazione JavaScript
Risultato della lezione: configurato variabili globali nel progetto, creato un'intestazione multifunzionale con un menu, collegato un file Javascript per aggiungere ulteriori funzionalità di menu.
Compito pratico: aggiungi la modifica dello sfondo dell'intestazione del sito durante lo scorrimento della pagina
Giorno tre
Creazione della prima schermata con il prodotto principale
- Struttura HTML del blocco di presentazione
- Sistema a griglia per la corretta visualizzazione degli elementi
- Valori delle proprietà CSS utilizzando variabili
- Elementi di stile
Risultato della lezione: ha creato la parte di presentazione del negozio online
Compito pratico: creare una parte di presentazione di un negozio online
Quarto giorno
Creazione di un blocco con prodotti popolari
- Markup HTML per un blocco con prodotti
- Styling per le schede prodotto
- Griglia a griglia per il posizionamento delle carte
- Stilizzazione di un blocco con la storia dell'azienda
Risultato della lezione: ha creato un blocco con prodotti popolari e la storia dell'azienda
Compito pratico: aggiungi imbottitura esterna e interna agli elementi nel blocco con la storia dell'azienda
6° modulo
Il primo giorno
Creazione di uno slider con le recensioni dei clienti.
- Blocco revisione
- Modi per creare contenitori scorrevoli nei CSS
- proprietà del comportamento di scorrimento e del tipo di snap di scorrimento
- Punti di ancoraggio del dispositivo di scorrimento
Risultato della lezione: ha creato uno slider con le recensioni dei clienti utilizzando HTML e CSS.
Compito pratico: aggiungi punti di ancoraggio alle sezioni principali del sito e crea uno scorrimento automatico verso questi blocchi quando fai clic sul pulsante.
Secondo giorno
Lavorare con moduli e contenuti video.
- Tag HTML5 per l'inserimento di contenuti video in un sito web
- Styling di una sezione con un video clip a schermo intero
- Tag del campo di input - e i suoi attributi
- Tag per la creazione di moduli in Html
- Applicazione di stili a un elemento di input di testo
Risultato della lezione: ha creato una sezione con un video e un blocco con un modulo di feedback
Compito pratico: creare un modulo di feedback, modellare gli elementi
Giorno tre
Creazione di una pagina gallery separata
- Griglia personalizzata per una pagina della galleria
- Aggiunta di blocchi con immagini alla griglia
- Pseudo-elementi e varie animazioni di blocchi con immagini
- Filtri CSS per migliorare il design visivo della galleria
Risultato della lezione: creato una pagina separata con una galleria fotografica
Compito pratico: utilizzando diversi tipi di posizionamento per creare uno sfondo insolito traslucido.
Quarto giorno
Adattamento dei contenuti per tutti i tipi di dispositivi.
- Modi per adattare i contenuti ai dispositivi mobili
- Query multimediali per applicare proprietà diverse allo stesso elemento su dispositivi con larghezze diverse
- Regole CSS per tre tipi di dispositivi
Risultato della lezione: Abbiamo adattato il sito web per tablet e telefoni.
Compito pratico: utilizzando le media query, modificare i valori delle proprietà degli elementi HTML per adattare il contenuto a tutti i tipi di dispositivi
7° modulo
Il primo giorno
Introduzione al framework Tailwind SS.
- Cosa sono i framework e come accelerano il processo di sviluppo del progetto?
- Installazione del framework e dei plugin Tailwind CSS
- Concetti del framework CSS Tailwind
- Lavorare con tipografia e colori in Tailwind CSS
Risultato della lezione: ha creato la prima pagina web utilizzando il framework CSS Tailwind.
Compito pratico: crea un blocco con testo, elementi di stile utilizzando le classi tailwind.
Secondo giorno
Classi Tailwind per la creazione di un sito web responsivo
- Lavorare con le classi Tailwind per creare un sito web reattivo
- Classi per aggiungere effetti al passaggio del mouse e alla messa a fuoco
- Classi per aggiungere ombre agli elementi
- Classi per lavorare con le dimensioni degli elementi
- Classi per lavorare con il riempimento esterno e interno degli elementi
Risultato della lezione: Abbiamo creato una pagina adattiva per tutti i tipi di dispositivi.
Compito pratico: crea pulsanti, aggiungi effetti quando fai clic su di essi utilizzando le classi Tailwind
Giorno tre
Layout flessibile Tailwind.
- Lavorare con il layout Tailwind Flex
- Classi per allineare gli elementi figlio in un contenitore Flex
- Creazione di una scheda con il prezzo di un prodotto
- Creazione di indicatori di progresso
- Lavorare con pseudo elementi in Tailwind CSS
Risultato della lezione: creato un contenitore Flex con schede prodotto
Compito pratico: creare una scheda con la descrizione del prodotto.
Quarto giorno
Sistema a griglia in Tailwind CSS.
- Proprietà row-span e col-span
- Proprietà per riempire automaticamente lo spazio vuoto in una griglia con elementi
- Pagina del team di progetto
Risultato della lezione: ha creato una pagina adattiva del team di progetto utilizzando il sistema Tailwind Grid.
Compito pratico: aggiungi effetti agli elementi della griglia quando passi il mouse sopra di essi
8° modulo
Il primo giorno
Impostazione del progetto
- Impostazione del progetto del sito applicativo “Gestisci”.
- Creazione di un'intestazione del sito Web reattiva
- Creazione di un menu di hamburger utilizzando JavaScript
- Creazione di una sezione di presentazione con un prodotto
Risultato della lezione: creato la prima schermata del sito web dell'applicazione “Gestisci”.
Compito pratico: aggiungi un'immagine di sfondo alla prima schermata.
Secondo giorno
Creazione di una sezione con la descrizione dell'applicazione
- Sezione con la descrizione dell'applicazione e dei suoi vantaggi
- Adatta il blocco creato a tutti i tipi di dispositivi
- Sezione con il funzionamento dell'applicazione
- Applica i filtri Tailwind a un'immagine
Risultato della lezione: create due sezioni del sito “Gestisci”
Compito pratico: creare una sezione aggiuntiva con la cronologia della creazione dell'applicazione
Giorno tre
Creazione di una sezione sul team di progetto
- Sezione sulla squadra
- Dispositivo di scorrimento che utilizza Tailwind CSS e Javascript
- Carte dei dipendenti
Risultato della lezione: ha creato una sezione sul team di progetto
Compito pratico: creare una sezione con un pulsante CTA
Quarto giorno
Creazione di una sezione con i prezzi
- Crea una sezione con i prezzi
- Crea un footer del sito web reattivo
- Termina il progetto
Risultato della lezione: completato il lavoro sul progetto, creato il sito web per l'applicazione “Gestisci”.
Compito pratico: finalizzare il progetto, mettere il sito su Internet
9° modulo
Il primo giorno
Inizia a lavorare sul tuo progetto.
- Seleziona un argomento del progetto
- Inizia a sviluppare il tuo sito web
Risultato della lezione: è stato scelto un argomento e il lavoro sul progetto è iniziato
Compito pratico: Lavoro di progetto
Secondo giorno
Continuare il lavoro sul progetto
- Continua a lavorare sul progetto
- Correggere gli errori nel progetto
Risultato della lezione: creazione di pagine web
Compito pratico: Lavoro di progetto
Giorno tre
Preparazione della presentazione di un progetto.
- Descrivi il tuo progetto
- Crea un modello di presentazione per difendere il tuo progetto
- Termina il progetto
- Metti il sito su Internet
Risultato della lezione: preparato una presentazione e provato il discorso.
Compito pratico: preparare una presentazione del progetto, mettere il sito web su Internet.
Quarto giorno
Tutela del progetto.
- Finalizzare la presentazione del progetto
- Difendi il tuo progetto davanti a un pubblico
Risultato della lezione: Abbiamo completato il lavoro sul progetto del corso e lo abbiamo presentato ai genitori.
Compito pratico: finalizzare il progetto, preparare e condurre una presentazione.