@temesgen-982Submitted about 2 months ago
What are you most proud of, and what would you do differently next time?
My first time using fetch. The CSS is a mess I will try to organize it.
LucasNgTg
@LucasNgTgAll comments
- @LucasNgTgPosted about 2 months ago
Hello there!
Congratulations on your solution. In terms of fetch, you seem to have understood the concept quite well. A couple of things to point out:
- As per the design specifications, the menu button of each card should be highlighted on upon hovering with the cursor.
- The content of the grid container is leaking, causing it to not appear centered.
- The
scripttag should be placed at the bottom of the HTML body, so it only runs once the rest of the page is loaded. Alternatively, you could put the entire JS code inside aloadevent.
Hope it helps. Have a nice day!
Marked as helpful0 - @rainofSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of getting the form submission, error management, and navigation between the success and form submission pages to work. Although it wasn’t smooth, I learned much from the lesson. Next time, I’d focus on improving my event-handling skills by gaining more experience and applying best practices from the start to make the development process smoother.
What challenges did you encounter, and how did you overcome them?I faced challenges with handling events using JavaScript, which was new and initially confusing. To tackle this, I took a moment to step back, then relied on documentation, consulted ChatGPT, and used a trial-and-error approach to understand better and address the issues.
@LucasNgTgPosted about 2 months agoHello there!
Congratulations on completing this challenge! The layout looks great, albeit a bit smaller than the design, and for some reason the success page appears with a white bar on the bottom. The issue seems to occur when the screen height is less than 715px on the desktop version.
I have been learning React myself and, I must say, your components are very organized and well structured. Keep it up!
Have a nice day!
0 - @DiegoAlveesSubmitted 3 months agoWhat specific areas of your project would you like help with?
I had a lot of difficulty in some parts of the CSS, and in the balloon that opens when you click on the button, I couldn't place that "arrow" indicating the button. I believe my html was also quite messed up
@LucasNgTgPosted 3 months agoHello, there!
Well done on completing this challenge! The share area is not showing for me, I believe it is because of the way the class in HTML was declared. In order to declare multiple classes, you don't have to write the name of the attribute twice. For example, instead of
class="shareArea" class="ballon", you should writeclass="shareArea ballon".Regarding the "arrow" bit, take a look at CSS pseudo-elements, specifically
::beforeand::after(The links to the articles are in the text). There's a lot of cool stuff you can do with those.Hope it helps. Have a nice day!
Marked as helpful0 - @tugcekizildgSubmitted 3 months ago@LucasNgTgPosted 3 months ago
Hello! Hope you're have a good day.
Well done on your solution! The only criticism I have is that it needs a bit more
paddingon both layouts. I noticed you've used the Tailwind framework, with which I have absolutely no experience and as such I could not review it properly. Would you recommend it?0 - @Ay-dotcodeSubmitted 4 months ago@LucasNgTgPosted 4 months ago
Hello!
Well done on your solution, it looks great! I like how you've made the cards interactive, was that a stylistic choice? I don't remember it being specified in the design. A couple of things to point out:
- Make it so the desktop design is only applied when the viewport is in a landscape orientation, so it still looks good on tablets.
- The
box-shadowcould use a bit more attention. Here is a helpful website with tons of examples: https://getcssscan.com/css-box-shadow-examples.
Hope it helps. Have a nice day!
0 - @DarkKiller31Submitted 4 months agoWhat 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?.
@LucasNgTgPosted 4 months agoLooks great! Some things to consider, though:
- Prioritize relative units to make the page more responsive in different screen sizes;
- The "Add to Cart" button should change colour when the user hovers over it, as per the design specifications;
Hope this helps. Have a nice day!
Marked as helpful0 - @theNomadicEnbySubmitted 4 months ago@LucasNgTgPosted 4 months ago
Looks good, the only thing is that the text colour on the main content should be dark-charcoal instead of black, as specified in the design.
It is a recommendation to only use dashes as a separator in class names. For instance,
prep__headingshould beprep-heading.Have a nice day!
0 - @Yahia-kilanySubmitted 4 months ago@LucasNgTgPosted 4 months ago
Hello!
Good job at the solution, it look quite nice. One important thing to point out; since the social media buttons presumably lead the user to the owner's profiles in all those platforms, it makes more sense to use
<a>instead of<button>. That way you are able to redirect the user to different URL's.For example:
<a href="https://frontendmentor.io/" target="_blank">Frontend Mentor</a>You can find more information here.
Hope this helps. Have a good day!
0 - @0MarrkvI0Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
It looks similar like example, but I'd like to make it more responsible, but that would mean losing the wonderful layout that was built.
What challenges did you encounter, and how did you overcome them?I returned after around a year, so it took some time for me to get into a flow; I'm excited to learn JavaScript.
@LucasNgTgPosted 4 months agoHey there! To make the page responsive, take a look at
pseudo-classesin CSS, mainly the:hover, which is used for making the active states specified in the design. Here is a link where you can find all the information:https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
Hope this helps!
0 - @iamprincetjSubmitted 12 months ago@LucasNgTgPosted 4 months ago
Hello there! Well done on completing this challenge!
The proportions on the QR code card look quite accurate. A couple of things you might find helpful, though:
- In order to keep your code organized, include the styles in a separate CSS file;
- Always try to give HTML classes meaningful names, that helps with readability and possible maintenance later on;
- Although the template HTML file contained the attribution divs, the design image did not. In my opinion, the instructions provided were unclear in that regard. However, since you've decided to keep them, consider applying styles that fit the other bits of text, that helps to keep the page cohesive all throughout;
- Check out
flexboxto layout the page elements: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
Have a nice day!
0
