Basisprincipes van moderne lay-out - gratis cursus van Hexlet, training 9 uur, Datum: 5 december 2023.
Gemengde Berichten / / December 06, 2023
Je leert meer over HTML-opmaak en de mogelijkheden van de moderne HTML5-standaard. Je krijgt ook basiskennis over styling met behulp van CSS: leer hoe je stijlen verbindt, selectors gebruikt en met cascadering werkt. Naast HTML en CSS leer je werken met de ingebouwde foutopsporingstools voor de lay-out van de browser, in het bijzonder Google Chrome DevTools. Als gevolg hiervan leert u hoe u HTML-opmaaktaal kunt gebruiken om tekst op een website op te maken, en raakt u ook vertrouwd met de basisregels voor het gebruik van CSS en tekststijl.
U kunt uw nieuwe vaardigheden onmiddellijk in de praktijk brengen - we zullen lay-outeditors en plug-ins voor hen bestuderen. Aan het einde van elke les vindt u kleine, onafhankelijke taken. Ze zijn gericht op een meer praktisch begrip van het behandelde onderwerp en worden daarom ten zeerste aanbevolen voor implementatie.
De basisprincipes van lay-out zullen van pas komen als u besluit webontwikkeling te studeren, ongeacht de richting. De kennis uit deze cursus helpt programmeurs gegevens te markeren en op de site weer te geven. Deze cursus is geschikt voor beginners en ontwikkelaars die nog geen ervaring hebben
Invoering
De cursus “Fundamentals of Modern Layout” is de basis voor het leren van de basisprincipes van HTML- en CSS-website-indeling. In deze les gaan we kort in op wat we in de cursus leren en hoe deze kennis in de praktijk kan worden toegepast.
Inleiding tot HTML
De les is geheel gewijd aan de HTML-indeling. We praten over de rol van attributen en bestuderen het algemene schema voor het beschrijven van HTML-tags.
Blokmodel
Welke elementen zijn verantwoordelijk voor het frame van de pagina en welke helpen bij het vormgeven of toevoegen van functionele onderdelen? Laten we kennis maken met blok- en inline HTML-elementen en de invloed van stijlen op de uiteindelijke breedte van elementen bestuderen.
Semantische HTML
Het belangrijkste doel van elke HTML-lay-out is om de betekenis van de blokken over te brengen. In deze les verkennen we de semantische mogelijkheden van de nieuwste HTML5-standaard en leren we over webtoegankelijkheid.
Basisstructuur van een HTML-document
Elk HTML-document heeft een basisstructuur die bestaat uit tags en service-elementen. De browser heeft ze nodig om informatie correct weer te geven. In deze les zullen we elke lijn van deze structuur bekijken.
CSS-basisprincipes
CSS-taal is gemaakt voor het visuele ontwerp van een webpagina. We bestuderen de basismogelijkheden van de taal en zoeken uit hoe we deze samen met HTML kunnen gebruiken. We leren CSS-bestanden opnemen en maken kennis met de basistypen selectors.
Cascadering in CSS
Wat is cascadering en hoe werkt het in CSS? De les is gewijd aan verschillen in selectorprioriteiten en de mogelijkheid om dit in uw projecten te gebruiken.
Chrome-ontwikkelaarstools
Bij het inrichten van een website is het belangrijk om fouten op tijd te vinden of te begrijpen hoe we het blok dat we nodig hebben correct kunnen converteren. Voorheen gebeurde dit vooral met de hand. Tegenwoordig hebben moderne browsers een webinspecteurfunctie. Laten we eens kijken naar de mogelijkheden van een van hen: Chrome DevTools.
Code-editors
Om uw werk op te slaan, heeft u een code-editor nodig. In deze les zullen we bekijken hoe u Visual Studio Code installeert. Dit is een krachtig hulpmiddel dat niet alleen voor de lay-out kan worden gebruikt, maar ook voor programmeren in elke taal.
Emmet
Laten we een van de handigste plug-ins voor lay-outontwerpers bestuderen: Emmet. Het versnelt de opmaak van HTML-code en verwijdert de meeste routinestappen.
Publicatie op internet
Om een project op internet te zetten, moet u hosting gebruiken: een speciale server die bestanden opslaat en er toegang toe biedt via een domeinnaam. In deze tutorial kijken we naar gratis GitHub-hosting.
Grafische redacteur
Er zijn verschillende grote editors op de markt. Sommige zijn specifiek voor slechts één besturingssysteem, andere kunnen op elk besturingssysteem worden geïnstalleerd. Laten we in dit gedeelte eens kijken naar de belangrijkste stappen wanneer een lay-outontwerper met de online editor van Figma werkt.
Onafhankelijk werk
Bijkomende taken waarmee je de verworven theorie kunt consolideren
Aanvullende materialen
Artikelen en video's samengesteld door het Hexlet-team. Het helpt je dieper in het onderwerp van de cursus te duiken