Layout e sviluppo web di siti web. Sviluppo Web di livello avanzato - corso 1990 rub. da Stepik, formazione 131 lezioni, Data: 1 dicembre 2023.
Miscellanea / / December 04, 2023
Ciao!
Il mio nome è Dima. E ti invito a immergerti nelle profondità della creazione e del layout del sito web!
Questo corso è rivolto a chi conosce già le basi, ma vuole passare da un buon livello di creazione di siti web a uno eccellente.
Il corso è rivolto a chi conosce le basi di HTML e CSS, ma sa che esistono ancora molte tecniche, tecniche di sviluppo e tecnologie che vengono utilizzate dai veri sviluppatori professionisti.
Se questo ti suona familiare, allora questo corso è per te)
Dai vita ai tuoi siti web con animazioni moderne tramite CSS
Inizieremo introducendo la dinamica nei nostri siti, ovvero faremo animazioni. Impareremo come animare pulsanti, testi e intestazioni utilizzando puro CSS, impareremo come creare animazioni di carte, creare un menu di navigazione dinamico e tutto questo senza una sola riga di codice JS, solo puro CSS.
Questo corso contiene le migliori pratiche nel responsive design.
Imparerai nuovi modi e trucchi per progettare i tuoi siti in modo reattivo, utilizzerai nuove tecniche per definire e scrivere query multimediali e imparerai come adatta tutti gli elementi della pagina modificando solo una proprietà CSS in modo che il tuo sito abbia un aspetto migliore che mai su qualsiasi dispositivo mobile dispositivo
Scopri tutte le complessità e i vantaggi dei moderni preprocessori
Imparerai come velocizzare la creazione del tuo sito web più volte utilizzando tutte le funzionalità del preprocessore SASS, come mixin, variabili e funzioni.
Nozioni di base essenziali per l'utilizzo di NPM
Inoltre, i pacchetti NPM con i plugin necessari a ogni sviluppatore professionista ci daranno l'opportunità di creare e ottimizzare i siti web in modo più rapido ed efficiente che mai.
Il sistema di controllo della versione Git ti aiuterà nel tuo sviluppo
Inoltre, imparerai le basi necessarie per lavorare con il sistema di controllo della versione git in modo da averlo sempre la possibilità di tornare alla versione corretta del tuo sito, non importa quanto hai sbagliato l'ultima volta aggiornare il sito)
Stai creando 2 siti Web moderni per il tuo portfolio
Questo corso si basa sulla pratica ed è diviso in piccole lezioni video in cui creeremo passo dopo passo 2 grandi progetti moderni basati sul sistema float - in modo da poter supportare vecchi progetti e ovviamente sul sistema GRID CSS, che ti consente di creare layout di incredibile complessità.
E, naturalmente, non ti vergognerai di mostrare questi progetti ai tuoi potenziali clienti o futuri datori di lavoro.
Sono sempre in contatto!
E stai tranquillo, non rimarrai solo, perché dopo ogni piccola lezione, avrai la possibilità di confrontare il tuo codice con il mio o semplicemente fare una domanda; le risposte solitamente non tarderanno ad arrivare.
Soddisfatti o rimborsati!
E se hai ancora dei dubbi, questo corso offre la possibilità di restituire i soldi spesi se non ti piace entro 30 giorni.
Unisciti a me e insieme impareremo come creare siti web professionali e moderni.
Ci vediamo in classe!
9
corsiDal 2016 creo originali corsi online. Insegno professionalmente a lavorare con gli editor grafici Adobe, insegno design e sviluppo web.
Ciao! Mi chiamo Dima! Non voglio vantarmi, ma devo farlo) Ho insegnato a più di 5.000 studenti in tutto il mondo nei miei corsi online proprietari. Oltre 2.000 recensioni reali con una valutazione media di 4,83 su 5,00! Insegno web design, sviluppo web e i software necessari (Photoshop Illustrator, Figma). La mia esperienza di insegnamento consiste in 5 anni di tutoraggio freelance, nonché di insegnamento attraverso scuole e corsi online, su piattaforme globali di apprendimento a distanza. Gli studenti dei miei corsi notano le mie migliori qualità nel modo in cui presento il materiale senza stipare, in modo divertente e interessante.
Preparazione / Ripetizione / Prime animazioni
1. Ciao!) Scarica i materiali per il corso
2. Installare e configurare il software necessario
3. Nuovo percorso di ritaglio della proprietà. Iniziamo a creare la prima sezione del sito
4. Se l'app scout non funziona per te
5. Esercizio: Crea la tua forma utilizzando Clip-path
6. Allineamento verticale degli elementi utilizzando il posizionamento assoluto
7. Ti presentiamo @KeyFrames. Creiamo la prima animazione.
8. Visibilità del backface e creazione di pulsanti tramite pseudo-classi
9. Animare un pulsante utilizzando pseudo-elementi
10. Modalità di riempimento dell'animazione. Avviare un'animazione da un punto specifico.
11. 3 principi dello sviluppo web
12. Usa REM invece di PX
Git e GitHub
1. Di cosa tratta questo blocco?
2. Comandi di base nel terminale
3. Come modificare i file tramite terminale
4. Installa il sistema git sul nostro computer
5. Come eseguire git in un progetto specifico
6. Creazione del primo commit
7. Invio di un progetto a GitHub
8. Se riscontri un errore quando invii il tuo progetto a GitHub
9. Errore di accesso durante il tentativo di inviare un progetto a GitHub
10. Esercizio: Crea il tuo repository
11. Come eliminare un repository GitHub
12. Come scaricare repository da GitHub
13. Emuliamo il lavoro di 2 sviluppatori su un repository
14. Come visualizzare le informazioni sui commit nel terminale. Registro Git
15. Cosa sono i rami
16. Come creare ed esplorare i rami.
17. Colmiamo il divario dall'inizio del mini corso con le notazioni -u e -M
18. Errore di commit non salvato durante il checkout
19. Come inviare le modifiche create a un nuovo ramo
20. Come inviare più commit a un nuovo ramo
21. Qual è la condizione della testa staccata? TESTA staccata
22. Come ripristinare un file specifico da un commit precedente
23. Log git avanzato e spettacolo git
24. Come unire i rami utilizzando Git merge. Metodo di avanzamento rapido
25. Come eliminare i rami
26. Come rimuovere i file di directory dallo stato non tracciato
27. Git reset --difficile. Come eseguire il rollback rigido di un commit
28. Secondo modo per trovare un commit bloccato utilizzando ORIG_HEAD
29. Git reset --soft
30. Git commit --amend modifica il commento di un commit precedente
31. Git reset --misto
32. Differenza tra git reset e git Restore
33. Introduzione a git diff. Stampa della differenza di diversi commit sulla console
34. Esempio pratico di utilizzo di git diff
35. Come visualizzare il diagramma di diramazione nel terminale. Git log --grafico
36. Uniamo i rami usando git merge. Metodo "Vera Fusione"
37. Come eseguire il rollback dopo un'unione
38. Come copiare un commit specifico utilizzando git cherry-pick
39. Unione dei rami con git rebase
40. Che è meglio git rebase o git merge
41. Come utilizzare il file .gitignore
42. Parola finale
Layout avanzato: CSS/SASS
1. Di cosa tratta questo blocco?
2. Come funzionano le variabili SASS
3. Come funzionano i mixin
4. Come aggiungere argomenti ai mixin
5. Cosa sono i modelli SASS
6. Come funzionano le funzioni SASS
7. Organizzazione di file SASS per un progetto di grandi dimensioni
8. 3 modi per posizionare gli elementi
9. Come funziona il galleggiante?
10. Creare il nostro sistema di griglia
11. Applicazione di una sfumatura al testo. Clip di sfondo
12. Come creare simboli utilizzando HTML
13. Animazione e completamento della seconda sezione
14. Come creare i tuoi caratteri di icona
15. Usiamo la proprietà perspective per riflettere la prospettiva degli elementi
16. Come funziona la modalità di fusione nei CSS
17. Terminare la sezione con le carte
18. Come arrotondare il testo utilizzando la proprietà shape-outside
19. Come funzionano i filtri CSS
20. Come aggiungere un video a una pagina
21. Conoscere il tag del modulo e il suo contenuto
22. Animare il modulo
23. Crea il tuo pulsante di opzione utilizzando i CSS
24. Creazione di un piè di pagina del sito web
25. Creazione di un menu di navigazione utilizzando puro CSS parte 1
26. Impostazione delle transizioni della velocità dell'animazione utilizzando cubic-bezier
27. Animare un hamburger
Progettazione adattiva
1. Di cosa tratta questo blocco?
2. Come creare siti web responsivi
3. Creazione di un mixin con regole multimediali
4. Adattamento del progetto parte 1
5. Adattamento del progetto parte 2
6. Adattamento del progetto parte 3
7. Cosa sono le immagini reattive
8. Come adattare le immagini in HTML
9. Adattiamo le immagini HTML nel nostro progetto
10. Adattamento delle immagini CSS
11. Alcune modifiche finali al sito
Gestore pacchetti nodo
1. Di cosa tratta questo blocco?
2. Che cosa sono node.js e npm
3. Preparazione del primo pacchetto npm per l'uso
4. Avvio del primo pacchetto npm
5. Usare gulp nel nostro progetto
6. Come aprire un sito web su un cellulare
Introduzione al CSS GRID
1. Di cosa tratta questo blocco?
2. Preparazione
3. Come creare un modello di griglia. Modello di griglia
4. Come funzionano le unità fr
5. Come spostare un elemento in un'altra cella
6. Posizionamento di più elementi in una cella
7. Esercizio: Creare il layout di un sito web
8. Esempio di insegnante. Crea un layout
9. Come rinominare ogni riga in una griglia
10. Come creare un modello di griglia utilizzando uno schema di denominazione
11. Cosa sono le griglie esplicite e implicite?
12. Come allineare gli elementi all'interno delle celle
13. Come allineare una griglia all'interno di un contenitore
14. Contenuto minimo-massimo
15. Compilazione automatica e adattamento automatico. Dimensioni delle celle in base al contenuto
16. Conclusione. Giardino a griglia
Progetto GRIGLIA CSS
1. Di cosa tratta questo blocco?
2. Preparazione
3. Creare un modello di griglia, parte 1
4. Creare un modello di griglia, parte 2
5. Come funzionano gli sprite SVG
6. Stiamo terminando la seconda sezione del sito
7. Creazione della sezione "Banner", parte 1
8. Creazione della sezione "Banner", parte 2
9. Creazione di una sezione con le carte
10. Creazione di una galleria
11. Creazione di un piè di pagina
12. Preparare l'"Hamburger"
13. Creazione dell'intestazione parte 1
14. Creazione dell'intestazione parte 2
15. Adattiamo il sito
Ci vediamo!
1. Arrivederci!
Ottieni il tuo certificato
1. Test per l'ottenimento dell'attestato di completamento del corso