Basisprincipes van de lay-out van de inhoud - cursus RUB 3.900. uit Hexlet, training 18 uur, Datum: 1 december 2023.

1. Invoering
Het werken met inhoud is een basisonderdeel bij het maken van een project. Er zit inhoud verborgen achter prachtige animaties, blokken en afbeeldingen. De gebruiker komt naar de site of opent er een applicatie voor. In deze les gaan we kort in op de onderwerpen die tijdens de cursus aan bod komen.

theorie

2. Boxmodel en CSS
Welke CSS-eigenschappen beïnvloeden de grootte van elementen wanneer ze op de pagina worden weergegeven? Laten we het concept van het boxmodel onthouden en bestuderen hoe de marge-, opvulling- en randeigenschappen werken om de externe/interne opvulling en zichtbare randen van een element in te stellen. Laten we kennis maken met de eigenschap box-sizing, die het standaardgedrag van het boxmodel verandert

theorie

3. Tekststijlen
Een pagina maken is in de eerste plaats werken met tekst. Hoe mooi de vormgeving ook is, als de informatie moeilijk of niet leesbaar is, zal de gebruiker de pagina snel verlaten. In deze les maken we kennis met de basiseigenschappen van tekststijl.

theorie
testen
oefening

4. Lettertypen en ermee werken
Heb je de uitdrukking ‘spelen met lettertypen’ gehoord? Het is tijd om dit te doen. We leren lettertypen verbinden met behulp van CSS, de tekstgrootte controleren, ontwerpen en de regelafstand instellen. Aan het einde van de les bestuderen we de algemene lettertype-eigenschap, waarmee je 6 verschillende tekststijlen tegelijk kunt instellen

theorie
testen
oefening

5. Lijsten
Lijsten zijn een integraal onderdeel van de tekst. Hiermee kunt u verwante fragmenten groeperen en ze verenigen op basis van hun betekenis. In deze les verkennen we de beschikbare typen lijsten in HTML, oefenen we het nesten van lijsten en bespreken we het onderwerp van het opmaken van lijstmarkeringen

theorie
testen
oefening

6. Kolommen
Het maken van een tijdschriftlay-out met meerdere kolommen was problematisch met behulp van CSS. Met de komst van de CSS3-standaard verscheen er een nieuwe module: CSS Multi-column Layout, die het mogelijk maakte om kolommen te maken met automatische inhoudsoverdracht. Laten we de mogelijkheden van de CSS-kolommenmodule bestuderen en de beperkingen die worden opgelegd door deze methode van tekststijl

theorie
testen
oefening

7. Eenheden
Net als in de echte wereld gebruikt de lay-outwereld maateenheden om de elementgrootte, opvulling, tekstgrootte, enzovoort aan te geven. In deze les maken we kennis met de basismeeteenheden en hun relatie met elementen op de site. Laten we het concept van relatieve en absolute eenheden bestuderen en het verschil tussen em- en rem-eenheden identificeren

theorie
testen
oefening

8. Media-elementen
Websitebezoekers lezen niet alleen graag tekst, maar nemen ook informatie waar via media-elementen: afbeeldingen, video, audio. Hoe voeg je ze correct toe en houd je rekening met browserverschillen? Waarom heeft de afbeelding op de site onderaan een klein streepje? Laten we dit en nog wat meer in de les onderzoeken.

theorie
testen
oefening

9. Tafels
Tafels zijn de nachtmerrie van elke lay-outontwerper. Er worden veel tags gebruikt om ze te maken, en kleine fouten kunnen de sfeer verpesten. In deze les bestuderen we stap voor stap het maken van eenvoudige en complexe tabellen, begrijpen we waar fouten kunnen ontstaan ​​en hoe we deze kunnen voorkomen. Aan het einde van de les kun je met vertrouwen tabellen maken en ben je er niet meer bang voor.

theorie
testen
oefening

10. Formulieren
Formulieren zijn een belangrijk interactief element van een webpagina. Net als links zorgen formulieren voor interactie tussen de gebruiker en de pagina, waardoor u gegevens kunt indienen. Laten we leren hoe u formulieren maakt en tekstvelden, selectievelden, lijsten en knoppen toevoegt. Laten we het hebben over het onderwerp toegankelijkheid van formulieren voor mensen met een handicap

theorie
testen
oefening

11. Selectoren
Voor deze les hebben we eenvoudige selectors geleerd en getest waarmee we elementen konden selecteren op klasse, ID of tag. Hoe kun je anders een element op de pagina selecteren? In deze les analyseren we verwante en aangrenzende selectors en leren we hoe we selectors op attribuut kunnen gebruiken

theorie
testen
oefening

12. Pseudo-klassen
Laten we doorgaan met het onderwerp selectors in CSS en kennis maken met het concept van een pseudo-klasse. Laten we leren hoe we ze kunnen gebruiken om even of oneven elementen te selecteren, hoe we nieuwe hover-stijlen kunnen toevoegen muis op een element en waarom zelfs elementen zo zullen zijn als je slechts een bepaald element gebruikt pseudo-klasse. Laten we elementtoestanden en structurele pseudo-klassen begrijpen

theorie
testen
oefening

13. Pseudo-elementen
Ontbrekende elementen op de pagina? Pseudo-elementen komen te hulp - elementen gemaakt met CSS. In deze les zullen we bekijken hoe pseudo-elementen worden gemaakt, waarom ze nodig zijn en welke functies ze hebben. Laten we eens kijken hoe lijstmarkeringen in CSS worden opgemaakt

theorie
testen

14. Overloop
Overflow is een situatie waarin de inhoud in een container groter is dan de grootte van de container zelf. Deze situatie kan zelfs voor een ervaren lay-outontwerper de lay-out bederven. In deze les leren we wat we hiermee kunnen doen en hoe we het verbergen van inhoud kunnen beheren met behulp van de overflow-eigenschap. Laten we eens kijken naar de eigenschap text-overflow en leren hoe u weglatingstekens in teksten kunt toevoegen als er niet genoeg ruimte voor is

theorie
testen
oefening

15. CSS-variabelen
Stel je voor dat er op een website een tiental blokken staan ​​met een achtergrond van dezelfde kleur. Je moet al deze kleuren veranderen. Hoe u dit kunt doen zonder de kleur in elke selector voortdurend te vervangen en hoe variabelen kunnen helpen, zullen we in deze les leren. Laten we eens kijken hoe variabelen worden gemaakt en gebruikt, leren over de reikwijdte en waarom globale variabelen beter zijn dan variabelen per selector

theorie
testen

16. Achtergrond
Een lay-outontwerper wordt vaak geconfronteerd met de noodzaak om niet alleen specifieke elementen op te maken, zoals tabellen, lijsten, tekst, media-elementen en formulieren. Soms moet je ook de blokken stileren waarin ze zich bevinden. Om dit te doen, kunt u de achtergrond voor het blok met inhoud instellen. In deze les leren we hoe u dit kunt doen met behulp van de eigenschap background. Laten we de eigenschappen voor het instellen van kleur en afbeelding bestuderen, leren hoe u de achtergrond positioneert en de grootte ervan instelt

theorie
testen

17. Verlopen
Een achtergrond of afbeelding in één kleur is niet de enige manier om een ​​blok te stylen. Kunstenaars en ontwerpers gebruiken vaak kleurverlopen om achtergronden te creëren: vloeiende overgangen van de ene kleur naar de andere. In deze tutorial leren we hoe u lineaire en radiale gradiënten kunt maken. Met behulp van verlopen en trucs zullen we het creëren van scherpe overgangen tussen kleuren bestuderen, en ook leren over het kleurenwiel en hoe we met behulp daarvan kleurencombinaties voor verlopen kunnen vinden

theorie
oefening

18. Onafhankelijk werk
Bijkomende taken waarmee je de verworven theorie kunt consolideren

19. Aanvullende materialen
Artikelen en video's samengesteld door het Hexlet-team. Het helpt je dieper in het onderwerp van de cursus te duiken