Grunnleggende om moderne layout - gratis kurs fra Hexlet, trening 9 timer, Dato: 5. desember 2023.
Miscellanea / / December 06, 2023
Du vil lære mer om HTML-oppmerking og mulighetene til den moderne HTML5-standarden. Du vil også få grunnleggende kunnskap om styling ved hjelp av CSS: Lær hvordan du kobler sammen stiler, bruker velgere og jobber med cascading. I tillegg til HTML og CSS vil du lære å jobbe med nettleserens innebygde layout-feilsøkingsverktøy, spesielt Google Chrome DevTools. Som et resultat vil du lære hvordan du bruker HTML-markeringsspråk for å layoute tekst på et nettsted, og du vil også bli kjent med de grunnleggende reglene for bruk av CSS og tekststiling.
Du vil umiddelbart kunne sette dine nye ferdigheter ut i livet - vi vil studere layoutredigerere og plugins for dem. På slutten av hver leksjon finner du små selvstendige oppgaver. De er rettet mot en mer praktisk forståelse av det dekkede emnet, og anbefales derfor sterkt for implementering.
Det grunnleggende om layout vil komme godt med hvis du bestemmer deg for å studere webutvikling, uansett retning. Kunnskapen fra dette kurset hjelper programmerere med å merke data og vise dem på nettstedet. Dette kurset passer for nybegynnere og utviklere som ikke har møtt
Introduksjon
Kurset "Fundamentals of Modern Layout" er grunnlaget for å lære det grunnleggende om HTML og CSS nettstedlayout. I denne leksjonen vil vi kort snakke om hva vi lærer på kurset og hvordan denne kunnskapen kan brukes i praksis.
Introduksjon til HTML
Leksjonen er viet HTML-layout fra bunnen av. Vi snakker om rollen til attributter og studerer det generelle opplegget for å beskrive HTML-tagger.
Blokkmodell
Hvilke elementer er ansvarlige for sidens ramme, og hvilke hjelper i prosessen med å style den eller legge til funksjonelle deler? La oss bli kjent med blokk- og innebygde HTML-elementer og studere innflytelsen av stiler på den endelige bredden av elementer.
Semantisk HTML
Hovedmålet med enhver HTML-layout er å formidle betydningen av blokkene. I denne leksjonen skal vi utforske semantikkmulighetene til den nyeste HTML5-standarden og lære om netttilgjengelighet.
Grunnleggende struktur for et HTML-dokument
Ethvert HTML-dokument har en grunnleggende struktur som består av tagger og tjenesteelementer. Nettleseren trenger dem for å vise informasjon riktig. I denne leksjonen skal vi se på hver linje i denne strukturen.
Grunnleggende om CSS
CSS-språket ble laget for den visuelle utformingen av en nettside. Vi studerer de grunnleggende egenskapene til språket, finner ut hvordan de skal brukes sammen med HTML. Vi lærer å inkludere CSS-filer og blir kjent med de grunnleggende typene velgere.
Cascading i CSS
Hva er cascading og hvordan fungerer det i CSS? Leksjonen er viet forskjeller i velgerprioriteringer og muligheten til å bruke dette i dine prosjekter.
Chrome Dev Tools
Når du legger ut et nettsted, er det viktig å finne feil i tide eller forstå hvordan du skal konvertere blokken vi trenger på riktig måte. Tidligere ble dette først og fremst gjort for hånd. I dag har moderne nettlesere en webinspektørfunksjon. La oss vurdere egenskapene til en av dem - Chrome DevTools.
Koderedaktører
For å lagre arbeidet ditt trenger du et koderedigeringsprogram. I denne leksjonen skal vi se på hvordan du installerer Visual Studio Code. Dette er et kraftig verktøy som ikke bare kan brukes til layout, men også for programmering på alle språk.
Emmet
La oss studere en av de mest nyttige pluginene for layoutdesignere - Emmet. Det vil øke hastigheten på HTML-kodemarkeringen og fjerne de fleste rutinetrinnene.
Publikasjon på Internett
For å legge et prosjekt på Internett, må du bruke hosting - en spesiell server som vil lagre filer og gi tilgang til dem gjennom et domenenavn. I denne opplæringen skal vi se på gratis GitHub-hosting.
Grafisk redaktør
Det er flere store redaktører på markedet. Noen av dem er spesifikke for bare ett operativsystem, andre kan installeres på hvilket som helst av dem. I denne delen, la oss se på hovedtrinnene når en layoutdesigner jobber med Figma online editor.
Selvstendig arbeid
Ytterligere oppgaver som lar deg konsolidere den ervervede teorien
Ytterligere materialer
Artikler og videoer kuratert av Hexlet-teamet. Vil hjelpe deg å dykke dypere inn i emnet for kurset