HTML Academy
Input fields with dynamic width
Flexbox, part 224/28
Back to the list of tasks
  • 1. Flex items and the block model
  • 2. Features of the margin property
  • 3. Alignment and margins
  • 4. The flow direction of the main axis and margins
  • 5. The initial main size of flex item, flex-basis
  • 6. Test: Cubism
  • 7. The item growth factor, flex-grow
  • 8. Growing items proportionally
  • 9. Calculating the total size with flex-grow
  • 10. The item shrinkage factor, flex-shrink
  • 11. Shrinking items proportionally
  • 12. Calculating the total size with flex-shrink
  • 13. flex-shrink and min-width
  • 14. Test: Mastering factors
  • 15. The flex shorthand property
  • 16. Multi-line flex containers and flex-shrink
  • 17. Multi-line flex containers and flex-grow
  • 18. flex-basis: 100% and flex-wrap
  • 19. The heading with description in flexboxes
  • 20. Heading with description, part 2
  • 21. Flexible menu with overflowing content
  • 22. Flexible menu with overflow, part 2
  • 23. Input fields with dynamic width
  • 24. The course card
  • 25. Course card, part 2
  • 26. Course card, part 3
  • 27. So many cards
  • 28. Test: Flexible flows
Course card, part 2
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The course card

Now let’s assemble an interface using course cards in the flexbox.

We need the flexbox to make this block adaptive. You will see how flexibly it can be adapted in the following assignments.

Let’s get started with a separate card. Let’s make the card into a flex container and change the direction of flow of its main axis from top to bottom. We need to do this so that we can flexibly control inner card blocks in the future.

Recall that flex items can also be flex containers at the same time. We will convert the block with meta information into a flex container so that we can arrange the blocks with tags and read time.

In this series of assignments we will add temporary highlighting to items so that you can better see what is being repositioned and how during the operation process. You will be able to delete this highlighting at the end of the assignment so that you can see the intermediate result:

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The course card</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <section class="cards"> <article class="card"> <h1 class="card-heading">2D-transformations</h1> <div class="card-meta"> <div class="card-category"> <span class="card-icon icon-tag">Category: </span> <span>HTML, CSS</span> </div> <div class="card-duration"> <span class="card-icon icon-time">Course time: </span> <span>2 hours</span> </div> </div> <div class="card-content"> <figure class="card-figure"> <img class="card-img" src="img/course-2.png" alt="Muffin"> <figcaption> <p>We will learn how to rotate, tilt, move, shrink, and magnify objects, and we will even learn how to blow them up with fireballs.</p> </figcaption> </figure> <button class="card-button">Start course</button> </div> </article> </section> </body> </html>
CSS
.card { box-sizing: border-box; padding: 20px; max-width: 70%; } .card-img { width: 100%; } /* Decorative outlines */ .card { outline: 2px solid rgba(255, 0, 0, 0.3); outline-offset: -2px; } .card > * { outline: 2px solid rgba(0, 128, 0, 0.3); outline-offset: 1px; } .card-meta > * { outline: 2px solid rgba(0, 0, 0, 0.5); outline-offset: -3px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign the flexbox layout for the .card,
    2. and align the main axis from top to bottom.
    3. Then set .card-meta for the flexbox layout,
    4. and assign a growth factor of 1 for .card-category.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.