This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See Mobile-First Workflow
- See hover states for interactive elements
Desktop view of the application:
Mobile view of the application:
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
With this challenge I learned and implemented
-
Flexbox, specifically that an element can be made a flex container with
display: flex
and all of its direct children will automatically be laid out as flex items..plan-info-summary { background-color: #F8F9FE; border-radius: 0.95rem; flex-flow: 1 1 100%; display: flex; justify-content: space-between; align-items: center; align-content: center; margin-left: 8%; margin-right: 8%; padding: 0.5rem; } .plan-info-summary .music-icon, .plan-info-summary .price-change-btn { flex-flow: 1 1 15%; } .plan-info-summary .plan-price { flex-flow: 2 1 60%; align-self: center; color: var(--dark-blue); }
-
Semantic HTML, that it includes usage of tags that provides meaning to different sections of the page, like below code snippets:
<figure>
<figure class="plan-info music-icon"> <img src="images/icon-music.svg" alt="music icon"/> </figure>
<section>
<section class="order-summary-header"> <h1> Order Summary</h1> <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p> </section>
I would continue to improve my current skills on Semantic HTML, Flexbox and would learn to incorporate accessibility to make sure application works properly with assistive devices.
- Flexbox Tutorial (CSS): Real Layout Examples - This is an amazing tutorial which helped me understand Flexbox. I'd recommend it to anyone still learning this concept.
- Content Sectioning - This helped me for applying Semantic HTML5 to organize the contents of the application. I really liked this pattern and will use it going forward.
- Website - Snehal Parate
- Frontend Mentor - @snehal1791
- Twitter - @sne_hal_p
I was inspired by Jake's and Mr Coder's solution. Their solutions help me better understand the problem.