Grunderna i modern layout - gratis kurs från Hexlet, utbildning 9 timmar, Datum: 5 december 2023.
Miscellanea / / December 06, 2023
Du kommer att lära dig mer om HTML-uppmärkning och funktionerna i den moderna HTML5-standarden. Du kommer också att få grundläggande kunskaper om styling med CSS: lär dig hur du kopplar ihop stilar, använder väljare och arbetar med cascading. Förutom HTML och CSS får du lära dig att arbeta med webbläsarens inbyggda layoutfelsökningsverktyg, i synnerhet Google Chrome DevTools. Som ett resultat kommer du att lära dig hur du använder HTML-markeringsspråk för att layouta text på en webbplats, och även bli bekant med de grundläggande reglerna för att använda CSS och textstil.
Du kommer omedelbart att kunna omsätta dina nya färdigheter i praktiken - vi kommer att studera layoutredigerare och plugins för dem. I slutet av varje lektion hittar du små självständiga uppgifter. De syftar till en mer praktisk förståelse av det täckta ämnet och rekommenderas därför starkt för implementering.
Grunderna i layout kommer väl till pass om du bestämmer dig för att studera webbutveckling, oavsett riktning. Kunskapen från denna kurs hjälper programmerare att markera data och visa den på webbplatsen. Denna kurs är lämplig för nybörjare och utvecklare som inte har stött på
Introduktion
Kursen "Fundamentals of Modern Layout" är grunden för att lära sig grunderna i HTML och CSS webbplatslayout. I den här lektionen kommer vi kort att prata om vad vi lär oss på kursen och hur denna kunskap kan tillämpas i praktiken.
Introduktion till HTML
Lektionen ägnas åt HTML-layout från grunden. Vi pratar om attributens roll och studerar det allmänna schemat för att beskriva HTML-taggar.
Blockmodell
Vilka element är ansvariga för sidans ram, och vilka hjälper till i processen att styla den eller lägga till funktionella delar? Låt oss bekanta oss med block och inline HTML-element och studera hur stilar påverkar den slutliga bredden av element.
Semantisk HTML
Huvudmålet med alla HTML-layouter är att förmedla innebörden av blocken. I den här lektionen kommer vi att utforska semantikfunktionerna i den senaste HTML5-standarden och lära oss om webbtillgänglighet.
Grundläggande struktur för ett HTML-dokument
Alla HTML-dokument har en grundläggande struktur som består av taggar och serviceelement. Webbläsaren behöver dem för att visa information korrekt. I den här lektionen kommer vi att titta på varje rad i denna struktur.
Grunderna i CSS
CSS-språk skapades för den visuella designen av en webbsida. Vi studerar språkets grundläggande förmågor, tar reda på hur man använder dem tillsammans med HTML. Vi lär oss att inkludera CSS-filer och bekanta oss med de grundläggande typerna av väljare.
Cascading i CSS
Vad är cascading och hur fungerar det i CSS? Lektionen ägnas åt skillnader i väljarprioriteringar och möjligheten att använda detta i dina projekt.
Chrome DevTools
När man lägger upp en webbplats är det viktigt att hitta fel i tid eller förstå hur man korrekt konverterar blocket vi behöver. Tidigare gjordes detta i första hand för hand. Numera har moderna webbläsare en webbinspektörsfunktion. Låt oss överväga kapaciteten hos en av dem - Chrome DevTools.
Kodredigerare
För att spara ditt arbete behöver du en kodredigerare. I den här lektionen kommer vi att titta på hur man installerar Visual Studio Code. Detta är ett kraftfullt verktyg som inte bara kan användas för layout, utan också för programmering på alla språk.
Emmet
Låt oss studera en av de mest användbara plugins för layoutdesigners - Emmet. Det kommer att påskynda HTML-kodmarkeringen och ta bort de flesta rutinstegen.
Publicering på Internet
För att lägga ett projekt på Internet måste du använda hosting - en speciell server som lagrar filer och ger åtkomst till dem via ett domännamn. I den här handledningen kommer vi att titta på gratis GitHub-värd.
Grafisk redaktör
Det finns flera stora redaktörer på marknaden. Vissa av dem är specifika för endast ett operativsystem, andra kan installeras på vilket som helst av dem. Låt oss i det här avsnittet titta på de viktigaste stegen när en layoutdesigner arbetar med Figma onlineredigerare.
Självständigt arbete
Ytterligare uppgifter som gör att du kan konsolidera den förvärvade teorin
Ytterligare material
Artiklar och videor kurerade av Hexlet-teamet. Hjälper dig att dyka djupare in i kursens ämne