Challenges

HTML: keyboard component

CSS: Layout on the Grid
Last update: 27 Apr 23:20
0
Students
Start challenge

Create a keyboard component using the capabilities of the CSS Flex and CSS Grid modules

Keyboard in CSS

In this challenge, you have access to the layout of the top row of the keyboard and helper classes. Based on them, finalize the component in accordance with the layout.

Keys

  • By default, each key occupies 2 columns inside the grid
  • Text inside keys must be centered on all axes
  • Spacing between keys: 10px
  • Mnemonics that will help to mark up buttons:
    • <: &lt;
    • >: &gt;
    • ᐊ: &#5130;
    • ᐃ: &#5123;
    • ᐁ: &#5121;
    • ᐅ: &#5125;

Based on the layout of the keys in the template, you will need to create additional helper classes like span-*

Hints

  • Before you start, calculate the optimal number of columns within the grid. The size of each column will be 1fr. For calculations, analyze the first row, which is available in the index.html file
  • The classes p-0, border-none, and w-100 will help you lay out the up and down keys

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
130
courses
1000
exercises
2000+
hours of theory
3200
tests