course
Content layout fundamentals
6 students
Course updated
30 December 2022
Included in the course
17 lessons (video or text)
15 exercises in the IDE
66 quizzes
Assistance in Discussions on the website
Access to other courses of the our platform
What you'll learn
- Mark up text, lists, tables, and media elements properly
- Create tables
- Access elements using the selectors' extended features
- Adapt pages for people with disabilities
- Use CSS Columns features
- Connect fonts and use them properly
Description
The course focuses on working with content using CSS and HTML. To date, stylesheets provide great opportunities for styling text and blocks on the page: background, color, handling audio, and video. All these elements allow you to create colorful, responsive, and accessible websites for users. A lot of time here we devote to new selectors, pseudo-classes, and pseudo-elements, they allow you to style the content in an extraordinary way
Course program
-
2
Box model and CSS
Recall the box model and the properties that affect the element size. Study the margin, padding, and border properties and learn how to manage a box model using the box-sizing property -
4
Working with fonts
Learn how to connect and select fonts on the page. Learn how to control the size, formatting and spacing within the text. Examine the generalized font property -
8
Media elements
Learn how to add media elements to a page. Examine ways to add images, video, and audio -
12
Pseudo-classes
Learn about styling element events and styling by element's location. Discover how to use pseudo-classes -
13
Pseudo-elements
Get to know pseudo-elements and learn how to generate new content via CSS -
16
Background
Explore the possibilities for setting and managing the page background using the relevant property. Learn how to position background images and adjust their behavior -
17
Gradients
There are other ways besides a monochrome background or image to style a block. To create a background, artists and designers frequently use gradients — smooth transitions from one color to another. In this lesson, we will learn how to make linear and radial gradients. We'll examine how to make clear color transitions using gradients and other techniques. We'll also learn about the color wheel and how to use it to find gradient color schemes. -
18
Do it yourself
Some additional tasks to help you consolidate the theory you've learned -
19
Additional resources
Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic
Challenges
We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.
#
Challenge
completion rate
Suggested learning programs

Profession
beginner
Development of front-end components for web applications
start anytime
10 months

Profession
Under development
beginner
Layout with the latest CSS standards
start anytime
5 months