course

Content layout fundamentals

17 students
Course updated 06 September 2023
Course Content layout fundamentals
$49 per month
for all Hexlet's courses
Sign up
  • In-browser editor for exercises
  • Permanent access to theory
  • Asynchronous learning

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

Estimated time: 17 hours
  • 1

    Intro

    Learn about the course topics and goals. Get to know the lesson structure and features
  • 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
  • 3

    Text styles

    Get acquainted with the main styles used for text design

    quiz

    exercise

  • 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

    quiz

    exercise

  • 5

    Lists

    Explore the types of lists in HTML and learn how to style them

    quiz

    exercise

  • 6

    Columns

    Get to know CSS Multi-column Layout and where to use it

    quiz

    exercise

  • 7

    Units

    Explore the measurement units available in CSS and their relation to each other

    quiz

    exercise

  • 8

    Media elements

    Learn how to add media elements to a page. Examine ways to add images, video, and audio

    quiz

    exercise

  • 9

    Tables

    Learn table markup and its semantics

    quiz

    exercise

  • 10

    Forms

    Learn to create the cornerstone website element: form. Explore the standard elements of data input and form submission

    quiz

    exercise

  • 11

    Selectors

    Study more complex second- and third-level selectors according to the W3C specification

    quiz

    exercise

  • 12

    Pseudo-classes

    Learn about styling element events and styling by element's location. Discover how to use pseudo-classes

    quiz

    exercise

  • 13

    Pseudo-elements

    Get to know pseudo-elements and learn how to generate new content via CSS

    quiz

  • 14

    Overflow

    Explore how the overflow property works and how to hide content inside blocks. Learn about the text-overflow property

    quiz

    exercise

  • 15

    CSS Variables

    Learn about CSS variables, their application and scope

    quiz

  • 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

    quiz

  • 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
1
100%
2
100%
3
50%
4
50%

Recommended program

profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time
profession
new
Developing web applications with Django
10 months
from scratch
under development
Start at any time