Challenges

HTML: Instagram

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

Instagram is one of the most popular social networks for sharing photos. In this challenge, you implement one of the screens that appear when viewing new posts.

Instagram CSS

The challenge does not involve using only CSS Grid. Now you know many different tools for positioning elements. Use the ones you see fit.

The whole application can be divided into 4 sections:

  • Application header.
  • Section with stories.
  • Section with post.
  • Application footer.

The application title uses the GrandHotel font. This is the most similar font to the original, which can be found under a free license. The title is centered relative to the entire application and is 32 pixels in size with normal saturation.

  • Padding between icons: 15px
  • Icon size: 25x25. Use the available classes in the style file to create icons. All icons in layout are buttons. This is the most accurate option in terms of accessibility, since each button performs a specific action, and is not a link. Use the aria-label attribute to describe icons. The value of this attribute will be read by screen readers.
  • Header background: #fafafa
  • Padding: 20 pixels vertically and 15 pixels horizontally.

Stories section

  • Padding between stories: 20px
  • Section padding: 10px
  • There is a border at the top and bottom of the section. Take advantage of the available atomic classes.
  • Each story box is a button and is 65 pixels wide. Make sure text overflow works correctly. The text has a top padding of 5 pixels and a font size of 12 pixels. Font weight: 500.
  • Image padding: 5px
  • Border color: #e0e0e0.

Names and avatars:

  • Your story — avatar_1
  • alex-avatar_2
  • jediAcademy-avatar_3
  • PythonCool-avatar_4

All images are in the assets/images directory

Post section

The section can be divided into three logical parts:

  • User section.
  • Image.
  • Footer with interaction buttons and text.

The section has a font size of 13 pixels. Padding: 15px vertically and 10px horizontally.

User section

  • Avatar Width: 35px
  • Border: 1px with color #e0e0e0
  • Right padding: 10px
  • More Actions button is 15px wide
  • Bottom border: 1px with color #c6c6c8
  • Font size: 13px
  • Padding: 20 pixels vertically and 15 pixels horizontally
  • Padding between buttons: 20px
  • Indent from the bottom of the buttons: 20px

Texts:

  • Likes: 2,165
  • hexlet_code And soon we are opening the photography course. Sign up

Indent between texts: standard.

There are 5 buttons in the footer with equal distances between them.

  • Section color: #fafafa
  • Padding: 20px each

Hints

  • Use the <button> tag to create buttons. To make these buttons have basic accessibility, add the aria-label attribute with a description of the action.
  • Pay attention to available classes in app.css. It contains all available fonts and paths to icons.
  • Icons are located in the assets/icons directory. Check with them.
  • Add headings to sections. This will help with validation. To hide unnecessary visual text, use the sr-only class

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