Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Page using HTML CSS and BEM convention

Samoina• 220

@samoina

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

Results summary component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

After a hiatus of sorts from code, I decided to plunge in and do the challenges to ease my way back in. IT made me realize I had gaps in my understanding of Flexbox (especially properties of the children - like I needed to make sure the results and summary sections were of the same height after using flex - couldn't find a way to do that with flexbox, so I padded some padding till it appeared 'visually correct' which pretty much felt like 'forcing' the code, so I'll need to read up a little more on that. I'd appreciate some insight on this too for anyone who's found a concise way to work around it:)

I intend to repeat this challenge with ReactJS just to hone my skills and build projects as I am learning React presently.

Thanks in advance :)

Community feedback

Tushar Biswas• 4,080

@itush

Posted

Congratulations on completing the challenge! 🎉

Your solution looks nice to me:)

It is important to correctly understand flexbox / grid to render HTML elements as per the requirement. I struggled in my initial projects, since I didn't understand it correctly.

  • I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

0
Samoina• 220

@samoina

Posted

@itush thanks for this resources. I'm checking them out esp for the Flexbox bit.

1
Vinicius Gabriel• 200

@BregueNice

Posted

congratz pal!! they are really good! try to use linear-gradient() to put the color on the left background!! https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

0
Samoina• 220

@samoina

Posted

@BregueNice thank you, i am not sure how I left this out! But i appreciate it.

0
Vinicius Gabriel• 200

@BregueNice

Posted

@samoina i forgot too hahaha

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord