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:
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__.
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:
If there's a difference of more than 2% detected, the system will produce one of two possible errors:
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:
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:
The screenshot with the differences looks something like this:
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
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.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.