Nozioni di base del layout moderno - corso gratuito da Hexlet, formazione 9 ore, data: 5 dicembre 2023.
Miscellanea / / December 06, 2023
Imparerai di più sul markup HTML e sulle funzionalità del moderno standard HTML5. Acquisirai anche una conoscenza di base dello stile utilizzando i CSS: imparerai come connettere gli stili, utilizzare i selettori e lavorare con il cascading. Oltre a HTML e CSS, imparerai a lavorare con gli strumenti di debug del layout integrati nel browser, in particolare Google Chrome DevTools. Di conseguenza, imparerai come utilizzare il linguaggio di markup HTML per layout di testo su un sito Web e acquisirai familiarità con le regole di base dell'utilizzo dei CSS e dello stile del testo.
Potrai mettere subito in pratica le tue nuove competenze: studieremo per loro editor di layout e plugin. Alla fine di ogni lezione troverai piccoli compiti indipendenti. Mirano a una comprensione più pratica dell'argomento trattato e pertanto se ne consiglia vivamente l'implementazione.
Le basi del layout ti torneranno utili se decidi di studiare lo sviluppo web, indipendentemente dalla direzione. Le conoscenze acquisite in questo corso aiutano i programmatori a contrassegnare i dati e a visualizzarli sul sito. Questo corso è adatto a principianti e sviluppatori che non hanno incontrato
introduzione
Il corso “Fondamenti di layout moderno” è la base per apprendere le basi del layout di un sito web HTML e CSS. In questa lezione parleremo brevemente di ciò che impareremo durante il corso e di come questa conoscenza potrà essere applicata nella pratica.
Introduzione all'HTML
La lezione è dedicata al layout HTML da zero. Parliamo del ruolo degli attributi e studiamo lo schema generale per descrivere i tag HTML.
Modello a blocchi
Quali elementi sono responsabili della cornice della pagina e quali aiutano nel processo di styling o di aggiunta di parti funzionali? Facciamo conoscenza con gli elementi HTML a blocchi e in linea e studiamo l'influenza degli stili sulla larghezza finale degli elementi.
HTML semantico
L'obiettivo principale di qualsiasi layout HTML è trasmettere il significato dei blocchi. In questa lezione esploreremo le capacità semantiche dell'ultimo standard HTML5 e impareremo l'accessibilità web.
Struttura di base di un documento HTML
Qualsiasi documento HTML ha una struttura di base composta da tag ed elementi di servizio. Il browser ne ha bisogno per visualizzare correttamente le informazioni. In questa lezione esamineremo ogni riga di questa struttura.
Nozioni di base sui CSS
Il linguaggio CSS è stato creato per la progettazione visiva di una pagina web. Studiamo le capacità di base del linguaggio, scopriamo come usarle insieme all'HTML. Impariamo a includere file CSS e familiarizziamo con i tipi base di selettori.
Cascata nei CSS
Cos'è il cascata e come funziona nei CSS? La lezione è dedicata alle differenze nelle priorità del selettore e alla capacità di utilizzarlo nei propri progetti.
Strumenti di sviluppo di Chrome
Quando si realizza un sito Web, è importante trovare errori in tempo o capire come convertire correttamente il blocco di cui abbiamo bisogno. In precedenza, questo veniva fatto principalmente a mano. Al giorno d'oggi i browser moderni hanno una funzione di ispezione web. Consideriamo le capacità di uno di essi: Chrome DevTools.
Editori di codice
Per salvare il tuo lavoro, hai bisogno di un editor di codice. In questa lezione vedremo come installare Visual Studio Code. Questo è uno strumento potente che può essere utilizzato non solo per il layout, ma anche per la programmazione in qualsiasi linguaggio.
Emmet
Studiamo uno dei plugin più utili per i progettisti di layout: Emmet. Accelererà il markup del codice HTML e rimuoverà la maggior parte dei passaggi di routine.
Pubblicazione su Internet
Per mettere un progetto su Internet, è necessario utilizzare l'hosting, un server speciale che memorizzerà i file e fornirà l'accesso ad essi tramite un nome di dominio. In questo tutorial esamineremo l'hosting GitHub gratuito.
Redattore grafico
Ci sono diversi importanti editori sul mercato. Alcuni di essi sono specifici per un solo sistema operativo, altri possono essere installati su qualsiasi di essi. In questa sezione, esaminiamo i passaggi principali quando un progettista di layout lavora con l'editor online Figma.
Lavoro indipendente
Compiti aggiuntivi che consentono di consolidare la teoria acquisita
Materiali aggiuntivi
Articoli e video curati dal team Hexlet. Ti aiuterà ad approfondire l'argomento del corso