Fabio Triana• 90
@fabiot2
Submitted
P
JackEG
@Yakub357
All comments
Hi Fabio Triana, Your solution is great, congratulations.
- About semantic HTML, I assume you are using h3 and at your solution, the page doesn't start with h1, according to accessibility requirements, I think you would add a h1 element for your product__card-ctg class instead of span. This would give the semantic meaning for your card. The layout seem great both for mobile and desktop versions. The html code well structured, about Sass files, i would divide one index.scss file into several, like reset, variables, and btn-component files, for reusability purposes. Howeveer, because this project is small, it is not necessarily.
0- frontpro• 70
@frontpro
Submitted
Solution is great. Only one thing I wouldn't add to the styling, limiting the height of the box, in this case body or main, you may just adjust the width, and the height should be as much as client's browsers estate.
One more thing, about responsiveness, when on mobile view, the img of the recipe seems to transform weirdly, it may be because you are setting it's height, usually img tags styled as: width: 100%; and wrap it to external div, and then give the height to the img-wrapper. and that way, you may keep the aspect ratio of the img.
Marked as helpful
1 - Adam Bethlehem• 90
@adambeth
Submitted
What are you most proud of, and what would you do differently next time?
I have decided not to use any frameworks such as Bootstrap or Tailwinds
Instead of trying to design it from scratch, I used the Figma designs this time, which made the experience a whole lot better.
Just from the past two challenges I feel like by doing rather than tutorial hell, I have learned actual concepts and techniques rather than just following along
What challenges did you encounter, and how did you overcome them?
I found it difficult to know if all my need to be
displayed: flex. It looks like the Figma designs, but I'm not sure if that's correct.I'm still finding it hard to figure out the units for sizing. Should the view be
100vhor set a px value? When and how to set width/height for elements... I'm sure I just need some more practiceWhat specific areas of your project would you like help with?
I would like to know how you decide what divs need to be flexboxes and how you decide and what units you use to create the widths and heights or do you just add margins and let the parent decide the size of the child?
Dear Adam Bethlehem, You may add some padding inside div container which cover-up the texts or add some margin to your text. both for titles (h1)and for P-text. Also there is small discrepancy between the design color of secondary text, p-text and the solution, you may change the color property
Marked as helpful
0 - Rui-Martins23• 150
@Rui-Martins23
Submitted
What are you most proud of, and what would you do differently next time?
Happy to continue to use Flexbox efficiently, together with some css custom properties.
What challenges did you encounter, and how did you overcome them?
Defining the HTML elements was slightly more challenging on this project, since I found myself a bit divided regarding whether or not to use elements, in certain parts of the challenge.
What specific areas of your project would you like help with?
Please let me know what you think about the use of the HTML elements. Is the use of the elements semantically correct? Or could it be improved?
Exceptionally good job, it's a little bit smaller than the design, however, the overall result satisfies the given tasks.
1 - Muh-Huzaifa• 30
@Muh-Huzaifa
Submitted
Hi Muh-Huzaifa, The styling of the use-avatar is a little bit offset. The user-component is not inside the blog-review-card, I would suggest to include to the blog-review-card, and flexbox it accordingly, according the layout.
0 - Jony Reyes• 10
@JonRe88
Submitted
Hi Jony Reyes, your solution seems not working right now, your GitHub page for the source code not working. And the served page is also not working.
The layout seems not working only because the server not downloaded the img, you may wrap your img file into a div box with a width and height set to real px. This would help to avoid layout destruction when the picture is not available.
0
