@fabiot2
Latest solutions
Product preview card component
#sass/scss#gulpPSubmitted 10 months agoI would add more animation, like fade in, fade out, hover effects, etc.
Blog Review Card
#accessibility#animation#pure-cssPSubmitted 11 months agoProject is already complete, though I would suggest to add more interactivity for the elements.
QR-Code Card Component, with CSS, flex layout, @keyframe for animation
#express#nodePSubmitted 11 months agoBecause this project is for beginners level, I assume that it already refined, and well organized design files, Figma, help to create Fronend page fast.
Latest comments
- P@Yakub357
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.
- @frontproP@Yakub357
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 - @adambethWhat 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
What specific areas of your project would you like help with?100vhor set a px value? When and how to set width/height for elements... I'm sure I just need some more practiceI 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?
P@Yakub357Dear 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 - @Rui-Martins23What 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?
P@Yakub357Exceptionally good job, it's a little bit smaller than the design, however, the overall result satisfies the given tasks.
- @Muh-HuzaifaP@Yakub357
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.
