Grunderna i innehållslayout - kurs 3 900 RUB. från Hexlet, träning 18 timmar, Datum: 1 december 2023.
Miscellanea / / December 04, 2023
Idag ger stilmallar stora möjligheter att styla text och block på en sida: bakgrund, färg, användning av ljud och video. Alla dessa element låter dig skapa färgglada och tillgängliga webbplatser för användare. Mycket tid gick åt till att lära sig nya väljare, pseudo-klasser och pseudo-element. De låter dig stilisera innehåll på ett extraordinärt sätt.
Tester
Det är praktiska uppgifter som vi rekommenderar att du gör efter avslutad kurs. Uppdragen hjälper dig att få ytterligare erfarenhet av programmering och befästa dina förvärvade färdigheter. Vanligtvis rekommenderar vi att du genomför 3-5 tester. Men om det inte går, misströsta inte. Återkom bara till dem senare.
1. Introduktion
Att arbeta med innehåll är en grundläggande del när man skapar ett projekt. Det finns innehåll gömt bakom vackra animationer, block och bilder. Användaren kommer till webbplatsen eller öppnar en applikation för den. I den här lektionen kommer vi kort att titta på de ämnen som kommer att studeras under kursen.
teori
2. Boxmodell och CSS
Vilka CSS-egenskaper påverkar storleken på element när de visas på sidan? Låt oss komma ihåg konceptet med boxmodellen och studera hur marginal-, stoppnings- och kantegenskaperna fungerar för att ställa in extern/intern stoppning och synliga gränser för ett element. Låt oss bekanta oss med egenskapen box-sizing, som ändrar standardbeteendet för boxmodellen
teori
3. Textstilar
Att skapa en sida är först och främst att arbeta med text. Oavsett hur vacker designen är, om informationen är svår eller omöjlig att läsa, kommer användaren snabbt att lämna sidan. I den här lektionen kommer vi att bekanta oss med textstilens grundläggande egenskaper.
teori
tester
träning
4. Typsnitt och arbeta med dem
Har du hört frasen "leka med typsnitt"? Det är dags att göra det här. Vi lär oss att koppla teckensnitt med CSS, styra textstorlek, design och ställa in radavstånd. I slutet av lektionen kommer vi att studera den generaliserade teckensnittsegenskapen, med vilken du kan ställa in 6 olika textstilar samtidigt
teori
tester
träning
5. Listor
Listor är en integrerad del av texten. De låter dig gruppera relaterade fragment och förena dem enligt deras betydelse. I den här lektionen kommer vi att utforska de tillgängliga typerna av listor i HTML, öva på kapslingslistor och beröra ämnet stylinglistmarkörer
teori
tester
träning
6. Kolumner
Att skapa en tidningslayout med flera spalter var problematiskt med CSS. Med tillkomsten av CSS3-standarden dök en ny modul upp - CSS Multi-column Layout, som gjorde det möjligt att skapa kolumner med automatisk innehållsöverföring. Låt oss studera funktionerna i CSS Columns-modulen och de begränsningar som åläggs med denna metod för textstil
teori
tester
träning
7. Enheter
Precis som i den verkliga världen använder layoutvärlden måttenheter för att indikera elementstorlekar, utfyllnad, textstorlek och så vidare. I den här lektionen kommer vi att bekanta oss med de grundläggande måttenheterna och deras förhållande till element på webbplatsen. Låt oss studera begreppet relativa och absoluta enheter och identifiera skillnaden mellan em och rem enheter
teori
tester
träning
8. Medieelement
Webbplatsbesökare gillar inte bara att läsa text, utan uppfattar också information genom mediaelement: bilder, video, ljud. Hur lägger man till dem korrekt och tar hänsyn till skillnader i webbläsaren? Varför har bilden på sajten ett litet indrag längst ner? Låt oss utforska detta och lite mer i lektionen.
teori
tester
träning
9. Tabeller
Bord är en layoutdesigners mardröm. Många taggar används för att skapa dem, och små misstag kan förstöra stämningen. I den här lektionen, steg för steg, kommer vi att studera skapandet av enkla och komplexa tabeller, vi kommer att förstå var fel kan uppstå ifrån och hur man kan förhindra dem. I slutet av lektionen kommer du att med säkerhet kunna skapa tabeller och sluta vara rädd för dem.
teori
tester
träning
10. Blanketter
Formulär är en viktig interaktiv del av en webbsida. Liksom länkar ger formulär interaktion mellan användaren och sidan, vilket gör att du kan skicka in data. Låt oss lära oss hur du skapar formulär, lägger till textfält, urvalsfält, listor och knappar. Låt oss beröra ämnet tillgänglighet av blanketter för personer med funktionshinder
teori
tester
träning
11. Väljare
För den här lektionen lärde vi oss och testade enkla väljare som gjorde det möjligt för oss att välja element efter klass, identifierare eller tagg. Hur kan du annars välja ett element på sidan? I den här lektionen kommer vi att analysera relaterade och närliggande väljare, lära oss hur man använder väljare efter attribut
teori
tester
träning
12. Pseudo-klasser
Låt oss fortsätta ämnet väljare i CSS och bekanta oss med konceptet med en pseudoklass. Låt oss lära oss hur man använder dem för att välja jämna eller udda element, hur man lägger till nya svävstilar musen på ett element och varför även element blir så när man bara använder ett visst pseudoklass. Låt oss förstå elementtillstånd och strukturella pseudoklasser
teori
tester
träning
13. Pseudo-element
Saknar du element på sidan? Pseudo-element kommer till undsättning - element skapade med CSS. I den här lektionen kommer vi att titta på hur pseudoelement skapas, varför de behövs och vilka funktioner de har. Låt oss se hur listmarkörer utformas i CSS
teori
tester
14. Svämma över
Overflow är en situation där innehållet i en behållare är större än storleken på själva behållaren. Denna situation kan förstöra layouten även för en erfaren layoutdesigner. Vi kommer att lära oss vad man ska göra med detta och hur man hanterar innehållsdöljning med hjälp av overflow-egenskapen i den här lektionen. Låt oss titta på egenskapen text-overflow och lära oss hur man lägger till ellips i texter om det inte finns tillräckligt med utrymme för det
teori
tester
träning
15. CSS-variabler
Föreställ dig att det på en webbplats finns ett dussin block med en bakgrund av samma färg. Du måste ändra alla dessa färger. Hur man gör detta utan att ständigt byta ut färgen i varje väljare och hur variabler kan hjälpa vi kommer att lära oss i den här lektionen. Låt oss titta på hur variabler skapas och används, lär oss om omfattning och varför globala variabler är bättre än per-selektorvariabler
teori
tester
16. Bakgrund
En layoutdesigner står ofta inför behovet av att utforma inte bara specifika element, såsom tabeller, listor, text, medieelement och formulär. Ibland behöver man också styla blocken de sitter inuti. För att göra detta kan du ställa in bakgrunden för blocket med innehåll, och vi kommer att lära oss hur du gör detta med hjälp av bakgrundsegenskapen i den här lektionen. Låt oss studera egenskaperna för att ställa in färg, bild, lära oss hur man placerar bakgrunden och ställer in dess storlek
teori
tester
17. Gradienter
En enfärgad bakgrund eller bild är inte det enda sättet att styla ett block. Konstnärer och designers använder ofta gradienter för att skapa bakgrunder – smidiga övergångar från en färg till en annan. I den här handledningen kommer vi att lära oss hur man skapar linjära och radiella gradienter. Med hjälp av gradienter och trick kommer vi att studera skapandet av skarpa övergångar mellan färger, och även lära oss om färghjulet och hur man med dess hjälp kan hitta färgkombinationer för gradienter
teori
träning
18. Självständigt arbete
Ytterligare uppgifter som gör att du kan konsolidera den förvärvade teorin
19. Ytterligare material
Artiklar och videor kurerade av Hexlet-teamet. Hjälper dig att dyka djupare in i kursens ämne