@jose-beltranSubmitted 29 days ago
Latest solutions
Latest comments
- @mazinger086Posted 29 days ago
Mate you did it, well working with grid areas it's not a simple thing. Maybe to improve your design I'll recommend to use the same font family like the style guide attached in the project. Then you can adjunst some paddings, margins and widths to fit the design in the screenshot and that's it.
0 - P@micheldrvSubmitted about 1 month ago
- @sharathambangadSubmitted 30 days ago@mazinger086Posted 30 days ago
Mate, try to improve you solution, there are a lot of things to improve in your work such as: the font family, alignments, margins, paddings, colours. If you don't know some tools like flexbox or grid spend some time learning how to work with them and then fix the errors. Did you realize that in the folders there is a style guide?? Try to follow it and you will discover all the colour palette, fonts, backgrounds that you must use to complete the challenge
Marked as helpful0 - @wellsprSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
There are various subtle details in this project, and I made my best to pinpoint as much of then. I'm very satisfied with the result. I think I did a good job including semantic tags for accessibility and organizational structure, leading to legible and self-explained code. The BEM methodology was applied to enhance the use of Sass, leading also to a very legible SCSS stylesheet. Next time, I would like to get into the subject of delivering responsive images.
What challenges did you encounter, and how did you overcome them?A difficult part was finding a way to style the list bullets and numbers differently than the contents themselves. I solved this by applying the desired bullets or numbers styling to the whole list (
ul,ol), wrapping thelicontent in a span, and applying the content styles to this span.Also, I liked styling a table, which led me to refresh some basics of this subject (and I think it is always a good idea to know how to style a table). For example, I produced the table division lines styling the bottom border of the
What specific areas of your project would you like help with?td's, but had to set the table'sborder-spacingto zero to avoid a visible gap.I would love to get feedback on any point of this project, including the way I apply the BEM methodology, the use of semantic tags, etc. Thank you!
Accessible and Responsive Recipe Page: Flexbox, BEM and Media Queries
#accessibility#bem#sass/scss#lighthouse@mazinger086Posted 30 days agoHey mate, you really made it, for that challenge it was a little bit hard, depending on how do you handle in mobile and desktop version. It' take me a while but I think you handle better than me. Awesome work.
0 - @Mathilde4Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of how the design closely matches the original challenge, especially the visual elements like the profile image and social links.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered was ensuring the social media icons aligned well and maintained their spacing across different screen sizes. I overcame this by using CSS Flexbox, which allowed for more control over the layout.
What specific areas of your project would you like help with?I would appreciate feedback on my CSS approach to styling the profile picture and social icons. Specifically, I am curious if there are more efficient ways to handle the layout without using excessive margin and padding.
@mazinger086Posted about 1 month agoWell I think you did it very well, maybe you will have to update a little bit the width to be more similar to the design. You could play with the width and apply it in a media query to avoid mess everything you did in desktop. I've just seen your page and its seem to be it only work on desktop. So I will try to make it responsivea dn apply some paddings and margins to fit in the design
Marked as helpful0 - P@luanch2016Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am getting better at writing CSS which is the skill I am aiming to improve. I think I am getting closer to the solution.
My CSS is still very messy so I aim to organise it better next time.
What challenges did you encounter, and how did you overcome them?Aligning the div and its children to the right position. I trialled and errored each line to see which properties was responsible for the error and found myself more familiar with CSS.
What specific areas of your project would you like help with?Still need to improve on CSS.
@mazinger086Posted about 1 month agoIt's a pity that frontend mentor could not provide figma templates to be more precise when we do the templates, I remember when this started they provide them but right now, they put it on the pro version
0
