Šiuolaikinio maketavimo pagrindai - nemokamas kursas iš Hexlet, mokymai 9 val., Data: 2023 12 05.
įvairenybės / / December 06, 2023
Sužinosite daugiau apie HTML žymėjimą ir šiuolaikinio HTML5 standarto galimybes. Taip pat įgysite pagrindinių žinių apie stilių naudodami CSS: išmoksite sujungti stilius, naudoti parinkiklius ir dirbti su pakopomis. Be HTML ir CSS, išmoksite dirbti su naršyklėje integruotais išdėstymo derinimo įrankiais, ypač Google Chrome DevTools. Taip išmoksite naudoti HTML žymėjimo kalbą teksto išdėstymui svetainėje, taip pat susipažinsite su pagrindinėmis CSS ir teksto stiliaus naudojimo taisyklėmis.
Savo naujus įgūdžius galėsite iš karto pritaikyti praktikoje – išstudijuosime jiems skirtus maketavimo redaktorius ir įskiepius. Kiekvienos pamokos pabaigoje rasite nedidelių savarankiškų užduočių. Jais siekiama praktiškiau suprasti nagrinėjamą temą, todėl labai rekomenduojama juos įgyvendinti.
Išdėstymo pagrindai pravers, jei nuspręsite studijuoti interneto svetainių kūrimą, nepaisant krypties. Šio kurso žinios padeda programuotojams pažymėti duomenis ir rodyti juos svetainėje. Šis kursas tinka pradedantiesiems ir kūrėjams, kurie nėra susidūrę
Įvadas
Kursas „Šiuolaikinio maketavimo pagrindai“ yra pagrindas mokytis HTML ir CSS svetainių maketavimo pagrindų. Šioje pamokoje trumpai pakalbėsime apie tai, ko išmokstame kurse ir kaip šias žinias galima pritaikyti praktikoje.
Įvadas į HTML
Pamoka skirta HTML išdėstymui nuo nulio. Mes kalbame apie atributų vaidmenį ir studijuojame bendrą HTML žymų apibūdinimo schemą.
Bloko modelis
Kurie elementai yra atsakingi už puslapio rėmelį, o kurie padeda jį formuoti ar pridėti funkcinių dalių? Susipažinkime su blokiniais ir eilutiniais HTML elementais ir ištirsime stilių įtaką galutiniam elementų pločiui.
Semantinis HTML
Pagrindinis bet kurio HTML išdėstymo tikslas yra perteikti blokų prasmę. Šioje pamokoje išnagrinėsime naujausio HTML5 standarto semantikos galimybes ir sužinosime apie žiniatinklio prieinamumą.
Pagrindinė HTML dokumento struktūra
Bet kuris HTML dokumentas turi pagrindinę struktūrą, kurią sudaro žymos ir paslaugų elementai. Naršyklėje jų reikia, kad informacija būtų rodoma teisingai. Šioje pamokoje apžvelgsime kiekvieną šios struktūros eilutę.
CSS pagrindai
CSS kalba buvo sukurta vizualiniam tinklalapio dizainui. Mes studijuojame pagrindines kalbos galimybes, sugalvojame, kaip jas naudoti kartu su HTML. Mokomės įtraukti CSS failus ir susipažįstame su pagrindiniais selektorių tipais.
Kaskados CSS
Kas yra pakopinė sistema ir kaip ji veikia CSS? Pamoka skirta atrankos prioritetų skirtumams ir galimybei tai panaudoti savo projektuose.
„Chrome DevTools“.
Kuriant svetainę svarbu laiku rasti klaidas arba suprasti, kaip teisingai konvertuoti mums reikalingą bloką. Anksčiau tai buvo daroma daugiausia rankomis. Šiuolaikinės naršyklės turi žiniatinklio tikrinimo funkciją. Panagrinėkime vieno iš jų – „Chrome DevTools“ – galimybes.
Kodo redaktoriai
Norėdami išsaugoti savo darbą, jums reikia kodo rengyklės. Šioje pamokoje apžvelgsime, kaip įdiegti „Visual Studio Code“. Tai galingas įrankis, kurį galima naudoti ne tik maketavimui, bet ir programavimui bet kuria kalba.
Emetas
Panagrinėkime vieną naudingiausių maketuotojams įskiepių – Emmetą. Tai pagreitins HTML kodo žymėjimą ir pašalins daugumą įprastų veiksmų.
Publikacija internete
Norėdami įdėti projektą į internetą, turite naudoti prieglobą - specialų serverį, kuris saugos failus ir suteiks prieigą prie jų per domeno vardą. Šioje pamokoje apžvelgsime nemokamą „GitHub“ prieglobą.
Grafinis redaktorius
Rinkoje yra keletas pagrindinių redaktorių. Kai kurie iš jų yra būdingi tik vienai operacinei sistemai, kiti gali būti įdiegti bet kurioje iš jų. Šiame skyriuje apžvelgsime pagrindinius veiksmus, kai maketuotojas dirba su Figma internetiniu redaktoriumi.
Savarankiškas darbas
Papildomos užduotys, leidžiančios įtvirtinti įgytą teoriją
Papildomos medžiagos
Straipsniai ir vaizdo įrašai, kuriuos kuruoja Hexlet komanda. Padės giliau pasinerti į kurso temą