Christian Lhie Besmanos
@assiduousdevAll comments
- @angel-serratoP@assiduousdev
Awesome work here, A minor adjustment could be adding a
cursor: pointer
to the add to cart button. Other than that, everything looks great! 😁 - P@IMythosWhat are you most proud of, and what would you do differently next time?
Improve responsive design for desktop
What challenges did you encounter, and how did you overcome them?Upload the project to github pages, I had problems with ssh but thanks to contributions from a community I was able to solve it
What specific areas of your project would you like help with?In the specific use of flexbox
P@assiduousdevAwesome work here! 😁
Just a few tweaks:
- I noticed that you used an h3 (Preparation time) before an h2 (Ingredients). You should always follow the correct order from h1-h6. I could assume why would you think an h3 is appropriate for Preparation time since it is smaller. However, always keep in mind that HTML and CSS are two different things. Use HTML for structure and CSS for visuals, always follow the correct HTML structure and then style your elements however you want using CSS.
- You could use a caption instead of a paragraph in your Nutrition section. It is basically a title for the table and provides it an accessible description. You can use MDN as your reference.
- @GH0STZILLAWhat are you most proud of, and what would you do differently next time?
This project taught me how to structure a profile card that includes a picture, a name, a short description, and a set of social media links. I got better at using Flexbox to stack and center elements, and I practiced creating interactive buttons with hover effects to improve user experience.
It was also a great opportunity to work with variables for consistent colors and spacing, which helped make the styling cleaner and more maintainable.
What challenges did you encounter, and how did you overcome them?Getting the alignment and spacing just right between the different elements (avatar, name, buttons) was tricky at first. I wanted the layout to feel balanced on both desktop and mobile, so I had to tweak padding, font sizes, and margins a few times.
Another challenge was making sure that the buttons were accessible and visually consistent, with proper contrast and readable text.
What specific areas of your project would you like help with?I would really appreciate feedback on:
Overall layout and visual balance — does the profile look clean and well-spaced?
Button styling — do the social links look good and feel intuitive to click?
Responsiveness — is the design working well on all screen sizes?
Code structure — any tips on improving the organization of my HTML and CSS?
Any suggestions for improving how I structure profile pages or create reusable components would be super helpful. Thanks a lot!
P@assiduousdevHi @GH0STZILLA, really great work here!
Some notes:
-
It would be great if you use a main tag to wrap your .profile-box component. A page must have one main tag for accessibility and SEO as this signifies that whatever inside of it is the primary content of the page. Here's a MDN reference.
-
Your social links are not working as expected. The user has to specifically click the text inside to work. This is because you're wrapping the Anchor tag inside a Button and this has a lot of issues.
- It is not a good idea to wrap an anchor tag inside a button. Buttons and Anchor tags are both interactive elements and interactive elements should not be a children of another interactive element.
- A good way to know which of the two you should is to ask yourself, what do you want to happen when the user clicks this button? If you want the user to redirect to another page then you should use an Anchor tag. If you want something to happen (deleting something in the database), you should use a Button.
Look at Frontend Mentor's preview site and view code "buttons" in your submissions page (via Inspect Element) and ask what does it do when I clicked them? That should give you a great direction on how to fix your code. 😁
-
- @lisagriggsP@assiduousdev
Great work here @lisagriggs! However, your card's width is not responsive. It breaks when the viewport's width is less than 400. You may use the max-width property instead of width, as width is fixed so it will not automatically adjust based on its container! This should be similar on how you handled its height.
With that in mind, you may also want to take a look at object- CSS properties to properly maintain the card's image aspect-ratio. Here is a MDN reference.
Lastly, it's good that you used the article tag for this card but the image is outside of it. The image itself is a part of the card. You may consider wrapping the "whole" card with an article tag instead of a section. Here is a MDN reference.
Marked as helpful - P@ngiles1P@assiduousdev
Really great work. I like that you wrapped the QR image with an anchor tag so users without a scanner can still visit the page. One suggestion though, to improve accessibility, it's better for you to use an article tag for the card instead of a normal div.
Reference: Article tag MDN Link