HTML: Weather widget

Last update: 27 May 23:20
Completion rate

In this challenge, you implement the adaptive weather widget at two resolutions:

  1. From 400px to the width of viewport
  2. Up to 400px in width of viewport

Before you, the other developer has already done the basic markup and styles of the widget, but it turned out that that developer does not know the Flex module and adaptability at all. So you have to complete the job. Based on the layout, complete the widget at different screen resolutions. Position the widget in the center of the screen.

Weather widget with a viewport width of 600px

Weather widget with 600px viewport

Weather widget with a viewport width of 399px

Weather widget at 399px viewport

At this resolution, the indent between the image and the information part: 1rem


  • The horizontal version of the widget is conditionally divided into three parts. The information area occupies two parts, the image of the city occupies one part

For full access to the challenge 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
hours of theory