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

advice generator app main - using Vue.js

#bem#itcss#sass/scss#vue

@eriveltondasilva

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, my friend πŸ‘‹ I’m Erivelton and this is my solution for this challenge: "advice generator app main". πŸš€

πŸ› οΈ Built With:

βœ”οΈ Semantic HTML5 markup βœ”οΈ CSS custom properties βœ”οΈ Flexbox βœ”οΈ Grid βœ”οΈ BEM βœ”οΈ ITCSS

πŸ‘¨β€πŸ’» Languages/frameworks Used:

HTML βš™οΈ SASS 🎨 JavaScript πŸ’» Vue.js πŸ—οΈ

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. πŸ”₯

Community feedback

_nehalπŸ’Žβ€’ 6,710

@NehalSahu8055

Posted

Hello Coder πŸ‘‹.

Congratulations on successfully completing the challenge! πŸŽ‰

Few suggestions regarding design.

  • Replace width with max-width in the .card to make it responsive.
.card {
max-width: 550px;
}
  • Add below line of code to make your design responsive.
img {
display: block;
max-width: 100%;
}
  • Make all above mentioned changes and see the effect.

I hope you find this helpful.

Happy codingπŸ˜„

Marked as helpful

0

@eriveltondasilva

Posted

@NehalSahu8055 Hello, my friend, they were great suggestions, I will put them into practice, thank you very much 😁😁

1

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