MoreLesson 252Free preview

Device Look

This lesson is part of How To · All levels

Summary

A device look is a mockup of a device such as a phone, tablet, or laptop made with CSS. Frames, rounded angles, notches, and shadows help display screenshots of applications in the context of the device. The mockup is purely decorative, so the original content must remain responsive and tested on real devices.

Key points

The frame is made of containers with thick borders, border-radius, and padding.
The aspect ratio helps to mimic the proportion of the screen on a phone or tablet.
Notch can be created with pseudo-elements positioned absolute at the top.
The mockup does not replace responsive testing in browsers and real devices.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.