Grundlæggende om moderne layout - gratis kursus fra Hexlet, træning 9 timer, Dato: 5. december 2023.
Miscellanea / / December 06, 2023
Du vil lære mere om HTML-markering og mulighederne i den moderne HTML5-standard. Du vil også få grundlæggende viden om styling ved hjælp af CSS: Lær at forbinde stilarter, bruge vælgere og arbejde med cascading. Udover HTML og CSS lærer du at arbejde med browserens indbyggede layout-fejlfindingsværktøjer, især Google Chrome DevTools. Som et resultat vil du lære, hvordan du bruger HTML-markeringssprog til at layoute tekst på et websted, og du vil også blive fortrolig med de grundlæggende regler for brug af CSS og tekststyling.
Du vil straks kunne omsætte dine nye færdigheder i praksis - vi vil studere layout-editorer og plugins til dem. I slutningen af hver lektion finder du små selvstændige opgaver. De er rettet mod en mere praktisk forståelse af det dækkede emne og anbefales derfor stærkt til implementering.
Det grundlæggende i layout vil være praktisk, hvis du beslutter dig for at studere webudvikling, uanset retningen. Viden fra dette kursus hjælper programmører med at markere data og vise dem på webstedet. Dette kursus er velegnet til begyndere og udviklere, der ikke er stødt på
Introduktion
Kurset "Fundamentals of Modern Layout" er grundlaget for at lære det grundlæggende i HTML og CSS hjemmesidelayout. I denne lektion vil vi kort fortælle om, hvad vi lærer på kurset, og hvordan denne viden kan anvendes i praksis.
Introduktion til HTML
Lektionen er helliget HTML-layout fra bunden. Vi taler om attributternes rolle og studerer det generelle skema til beskrivelse af HTML-tags.
Blok model
Hvilke elementer er ansvarlige for sidens ramme, og hvilke hjælper i processen med at style den eller tilføje funktionelle dele? Lad os stifte bekendtskab med blok- og inline HTML-elementer og studere stilarternes indflydelse på elementernes endelige bredde.
Semantisk HTML
Hovedmålet med ethvert HTML-layout er at formidle betydningen af blokkene. I denne lektion vil vi udforske semantikken i den nyeste HTML5-standard og lære om webtilgængelighed.
Grundlæggende struktur af et HTML-dokument
Ethvert HTML-dokument har en grundlæggende struktur bestående af tags og serviceelementer. Browseren har brug for dem for at vise oplysninger korrekt. I denne lektion vil vi se på hver linje i denne struktur.
Grundlæggende om CSS
CSS-sprog blev skabt til det visuelle design af en webside. Vi studerer sprogets grundlæggende egenskaber, finder ud af, hvordan man bruger dem sammen med HTML. Vi lærer at inkludere CSS-filer og stifter bekendtskab med de grundlæggende typer af vælgere.
Cascading i CSS
Hvad er cascading, og hvordan fungerer det i CSS? Lektionen er viet til forskelle i vælgerprioriteter og evnen til at bruge dette i dine projekter.
Chrome DevTools
Når man lægger en hjemmeside ud, er det vigtigt at finde fejl i tide eller forstå, hvordan man korrekt konverterer den blok, vi har brug for. Tidligere foregik dette primært i hånden. I dag har moderne browsere en webinspektørfunktion. Lad os overveje mulighederne for en af dem - Chrome DevTools.
Kode redaktører
For at gemme dit arbejde skal du bruge en kodeeditor. I denne lektion vil vi se på, hvordan du installerer Visual Studio Code. Dette er et kraftfuldt værktøj, der ikke kun kan bruges til layout, men også til programmering på ethvert sprog.
Emmet
Lad os studere et af de mest nyttige plugins for layoutdesignere - Emmet. Det vil fremskynde HTML-kodemarkering og fjerne de fleste rutinetrin.
Udgivelse på internettet
For at lægge et projekt på internettet skal du bruge hosting - en speciel server, der gemmer filer og giver adgang til dem via et domænenavn. I denne tutorial ser vi på gratis GitHub-hosting.
Grafisk redaktør
Der er flere store redaktører på markedet. Nogle af dem er specifikke for kun ét operativsystem, andre kan installeres på et hvilket som helst af dem. Lad os i dette afsnit se på de vigtigste trin, når en layoutdesigner arbejder med Figma online-editoren.
Selvstændigt arbejde
Yderligere opgaver, der giver dig mulighed for at konsolidere den erhvervede teori
Yderligere materialer
Artikler og videoer kurateret af Hexlet-teamet. Vil hjælpe dig med at dykke dybere ned i emnet for kurset