Basics of content layout - course RUB 3,900. from Hexlet, training 18 hours, Date: December 1, 2023.

1. Introduction
Working with content is a basic part when creating a project. There is content hidden behind beautiful animations, blocks and pictures. The user comes to the site or opens an application for it. In this lesson we will briefly look at the topics that will be studied throughout the course.

theory

2. Box Model and CSS
What CSS properties affect the size of elements when displayed on the page? Let's remember the concept of the box model and study how the margin, padding and border properties work to set external/internal padding and visible borders of an element. Let's get acquainted with the box-sizing property, which changes the standard behavior of the box model

theory

3. Text styles
Creating a page is, first of all, working with text. No matter how beautiful the design is, if the information is difficult or impossible to read, the user will quickly leave the page. In this lesson we will get acquainted with the basic properties of text styling.

theory
tests
exercise

4. Fonts and working with them
Have you heard the phrase “play around with fonts”? It's time to do this. We learn to connect fonts using CSS, control text size, design, and set line spacing. At the end of the lesson, we will study the generalized font property, with which you can set 6 different text styles at once

theory
tests
exercise

5. Lists
Lists are an integral part of the text. They allow you to group related fragments, uniting them according to their meaning. In this lesson, we'll explore the available types of lists in HTML, practice nesting lists, and touch on the topic of styling list markers

theory
tests
exercise

6. Columns
Creating a multi-column magazine layout was problematic using CSS. With the advent of the CSS3 standard, a new module appeared - CSS Multi-column Layout, which made it possible to create columns with automatic content transfer. Let's study the capabilities of the CSS Columns module and the limitations that are imposed with this method of text styling

theory
tests
exercise

7. Units
Just like in the real world, the layout world uses units of measurement to indicate element sizes, padding, text size, and so on. In this lesson we will get acquainted with the basic units of measurement and their relationship with elements on the site. Let's study the concept of relative and absolute units and identify the difference between em and rem units

theory
tests
exercise

8. Media elements
Website visitors not only like to read text, but also perceive information through media elements: images, video, audio. How to add them correctly and take into account browser differences? Why does the image on the site have a small indent at the bottom? Let's explore this and a little more in the lesson.

theory
tests
exercise

9. Tables
Tables are a layout designer's nightmare. A lot of tags are used to create them, and small mistakes can ruin the mood. In this lesson, step by step, we will study the creation of simple and complex tables, we will understand where errors can arise from and how to prevent them. By the end of the lesson, you will be able to confidently create tables and stop being afraid of them.

theory
tests
exercise

10. Forms
Forms are an important interactive element of a web page. Like links, forms provide interaction between the user and the page, allowing you to submit data. Let's learn how to create forms, add text fields, selection fields, lists, and buttons. Let's touch on the topic of accessibility of forms for people with disabilities

theory
tests
exercise

11. Selectors
For this lesson, we learned and tested simple selectors that allowed us to select elements by class, identifier, or tag. How else can you select an element on the page? In this lesson we will analyze related and neighboring selectors, learn how to use selectors by attribute

theory
tests
exercise

12. Pseudo-classes
Let's continue the topic of selectors in CSS and get acquainted with the concept of a pseudo-class. Let's learn how to use them to select even or odd elements, how to add new hover styles mouse on an element and why even elements will be like that when using only a certain pseudo-class. Let's understand element states and structural pseudo-classes

theory
tests
exercise

13. Pseudo-elements
Missing elements on the page? Pseudo-elements come to the rescue - elements created using CSS. In this lesson we will look at how pseudo-elements are created, why they are needed and what features they have. Let's see how list markers are styled in CSS

theory
tests

14. Overflow
Overflow is a situation in which the content inside a container is larger than the size of the container itself. This situation can spoil the layout even for an experienced layout designer. We will learn what to do with this and how to manage content hiding using the overflow property in this lesson. Let's look at the text-overflow property and learn how to add ellipsis in texts if there is not enough space for it

theory
tests
exercise

15. CSS Variables
Imagine that on a website there are a dozen blocks with a background of the same color. You need to change all these colors. How to do this without constantly replacing the color in each selector and how variables can help we will learn in this lesson. Let's look at how variables are created and used, learn about scope and why global variables are better than per-selector variables

theory
tests

16. Background
A layout designer quite often faces the need to style not only specific elements, such as tables, lists, text, media elements, and forms. Sometimes you also need to stylize the blocks they are located inside. To do this, you can set the background for the block with content, and we will learn how to do this using the background property in this lesson. Let's study the properties for setting color, image, learn how to position the background and set its size

theory
tests

17. Gradients
A single-color background or image isn't the only way to style a block. Artists and designers often use gradients to create backgrounds—smooth transitions from one color to another. In this tutorial we will learn how to create linear and radial gradients. Using gradients and tricks, we will study the creation of sharp transitions between colors, and also learn about the color wheel and how, with its help, to find color combinations for gradients

theory
exercise

18. Independent work
Additional tasks that allow you to consolidate the acquired theory

19. Additional materials
Articles and videos curated by the Hexlet team. Will help you dive deeper into the topic of the course