@ShamSuther
@amirhirx
Submitted
What are you most proud of, and what would you do differently next time?
...
What challenges did you encounter, and how did you overcome them?
...
What specific areas of your project would you like help with?
...
@ShamSuther
Posted
Hello Amir,
Wonderfully done, but I couldn't help but notice that you are using margin to center the main component instead I suggest you use:
This code to get rid of unnecessary padding and margin:
*{ margin: 0; padding: 0; box-sizing: border-box; }
and these additional lines to body to center the QR Component:
body{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }
and by adding this code you can remove most of the styling from your .container class, just remember when centering an child component it's parent should have a specific height and width.
I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨
@BesneiDavid
Submitted
I still find myself struggling to grasp the concepts of Flexbox and Grid, should you have any resources that helped you better understand this concepts I would ask you to share them with me. Thank you.
@ShamSuther
Posted
Congratulations on completing the challenge! ✨🎉, and I completely understand where you're coming from! Flexbox and Grid can indeed feel a bit tricky at first but don't worry, you're not alone in this. 😊 Here are a few resources that I found super helpful when I was diving into these concepts:
Remember, learning these concepts takes time, and it's completely okay to struggle at first. Keep practicing, and soon enough, you'll be a Flexbox and Grid pro!
I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨
Marked as helpful
@MichaelSpl
Submitted
@ShamSuther
Posted
Hey there! Congratulations on completing this challenge! ✨🎉
Your solution looks wonderful! 👍 You're curious about the best way to center a div? No problem at all, I'm here to help! In fact, there are a couple of ways that you might find really handy, and one of them involves using Flexbox =>
height: 100vh;
display: flex;
align-items: center; /* for vertical centering */
justify-content: center; /* for horizontal centering */
and the second one would be using a display grid property =>
height: 100vh;
display: grid;
place-content: center; /* both horizontal & vertical centering */
to make sure both methods work, you'll need to set a specific height for the container or body. By compressing the text, if you mean to center it!? you could try putting all the text inside a div and then applying flex property to it.
For a better understanding of these topics, I found these blogs very helpful
I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨
Marked as helpful
@NarendraKoya999
Submitted
Please Give Me feedback for Organizing the Code along with Class Names Scripted.
@ShamSuther
Posted
Hey there, congrats on acing the challenge! 🎉 Your solution looks awesome! 👏 Just a friendly heads-up – I noticed that the background color doesn't quite match the design, and there's a bit of spacing that could use some tweaking. When it comes to responsiveness, making the component shine on smaller screens might be a cool next step.
But don't worry at all – you're on the right track and doing great! 🌟 Take your time, enjoy the process, and those front-end magic moments will keep coming your way. Keep up the amazing work, and best of luck with all your projects ahead! Happy coding! 👩💻✨🚀
Marked as helpful
@JessicaSamtani
Submitted
Starting out with front end developing with this as my first project.
Initially writing of the media query was tricky, wonder if following the style guide is the best idea as the max/min widths could have been a bigger size.
Open to any suggestions
@ShamSuther
Posted
Hey there! Congratulations on embarking on your front-end development journey with your first project! ✨🎉
It's always exciting to dive into new challenges. Don't worry if writing the media query was a bit tricky at first – that's completely normal when you're getting started. Remember, practice makes perfect, and with time, you'll become more confident in handling such tasks.
Your solution looks wonderful! 😄 I happened to notice that you're using margins to center the card, which is a smart move. If you're open to suggestions, I'd like to share a syntax that could make centering even smoother. How about giving display flex and a height of 100vh a try?
body {
background-color: hsl(30, 38%, 92%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
I would like to suggest
for a better understanding of these topics.
Keep up the fantastic work, and remember, there's no rush. Enjoy the process, and before you know it, you'll be creating incredible front-end experiences.
Happy coding and best of luck with your projects! 🌟👩💻👨💻
Marked as helpful
@Rhinozer0s
Submitted
Hey coders,
this is my first project in JavaScript! I would really appreciate it, if you just check my script and give me some suggestions for improvement. This would help me a lot.
Thanks 🤝😎
@ShamSuther
Posted
Congratulations on completing the challenge! ✨🎉 You did a great job with the design and the JavaScript code looks pretty accurate. I have a suggestion that might make the design even better. Instead of adding all the invalid input properties directly as inline styles in JS, you could consider adding them to a class in CSS. This would make it easier to manage and update the design in the future.
input.invalid{
border : 1px solid rgb(236, 62, 62);
color : rgb(236, 62, 62);
background-color: rgb(252, 208, 208);
}";
With this approach, you can easily add or remove those properties to an element just like that.
input.classList.add("invalid");
input.classList.remove("invalid");
I hope you find this somewhat helpful, keep up the fantastic work, and enjoy coding! 😊💻✨
Marked as helpful
@moonrose93
Submitted
any feedback?
@ShamSuther
Posted
Great job on your work! I really like the design and the accordion functionality. I noticed that you used position absolute on the box, which is quite precise. However, I think it would be better if you set it relative to the overall component wrapper and used CSS transform property to align it according to the screen size. Keep up the amazing work, and I wish you happy coding! 😊💻✨
@proabre
Submitted
HELLO GUYS ! any feedback is appreciated.
@ShamSuther
Posted
Hi there! Congratulations on completing the challenge, that's awesome! 🎉 Your solution looks really great 👌. If you're interested, I have a suggestion to improve the responsive mode and centering of the main element. Instead of using Margin, you could try using Flexbox. Here's a helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Keep up the fantastic work and happy coding! 💪✨
Marked as helpful
@Akhil-Banothu
Submitted
@ShamSuther
Posted
great work brother
