Register to get access to free programming courses with interactive exercises

Intro Content layout fundamentals

Working with content is an essential aspect of any project. Behind all the beautiful animations, panels, and images is all sorts of hidden content. The content is what the user comes to a website or opens an app for. The user's mood often depends on how good the content looks and feels.

In this course, we'll go through the fundamentals of working with content and how to make animations. You'll learn:

  • how to create styles for fonts and lists
  • how to create and style tables
  • how to use columns using the columns property
  • about the different units of measurement and how to work with them
  • how to create forms and use media elements
  • the basic rules of animation and typography
  • how to make content accessible

Practice

Many of the lessons in this course will include a practice section with a web view. It's a good idea to do more than just complete the task. Once you've completed the task successfully, try experimenting with the code and the features you've learned.

Practice segments in this course are built around a system of snapshot testing. Unlike other courses, this one doesn't check against the values you specify, but rather takes a screenshot of the page with your styles and compares it to the screenshots from the teacher's solution. You can easily see how the page should look at different viewport resolutions.

You can see screenshots with styles from the teacher's solution in __tests_/_image_snapshots__.

Testing the solution

Students' solutions are mostly tested using the Visual Regression Testing method, i.e., by comparing screenshots. Without going into technical details, the test is as follows:

  1. The exercise contains reference screenshots that were taken based on the teacher's solution
  2. When you click on the "Check" button, the student's solution is sent to a Chromium-based browser and screenshotted
  3. The screenshot is compared with the reference screenshot, and then the tests give a text result of the comparison

If there's a difference of more than 2% detected, the system will produce one of two possible errors:

Different sizes of screenshots

Visual Regression Testing

The system says that the dimensions of the images do not match. In this example, the reference screenshot is 370px x 558px, and the comparison screenshot is 370px x 524px.

Most likely, there is a problem with the indentation/height or line spacing. Carefully analyze the screenshots, in the __diff_output__ directory. The specific path is given in the test output, and the files can be found in the left area of the exercise.

You'll find two files:

  • name-test-actual.jpg⁣ – the screenshot of your solution
  • name-test-expected.jpg – the reference screenshot

Visual Differences

Visual Regression Testing

In this test, the system is reporting that the images have an 810-pixel difference. In this case, three files are generated instead of two:

  • name-test-actual.jpg⁣ – the screenshot of your solution
  • name-test-expected.jpg – the reference screenshot
  • name-test-diff.jpg - the screenshot obtained by overlaying the student's screenshot and the reference screenshot. This is how you see the areas that are different

The screenshot with the differences looks something like this:

Visual Regression Testing Diff

The places where the differences were found are highlighted in red. In this case, you can compare the screenshots yourself.


Important: fix the differences going from top to bottom. Often there is a situation where a small error in the indentation affects the entire screenshot. It looks like everything is wrong, but only one property needs to be fixed


CodePen

Another opportunity to apply the skills learned in the course is to use the CodePen service. You can create your own pen, where you can experiment with properties.

Additionally, there'll be examples that are loaded from CodePen in each lesson of the course. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.

Don't forget to practice all the time, that way you boost your content markup skills and be able to quickly and skillfully design all the content on a page or app.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months
Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.