@ali-reza-2531
Husband, Father, Dreamer, Coder, and Coffee Addict. 15+ years as a backend developer looking to gain more knowledge on front-end design and coding. I'd love to work on some ideas that I've had swirling around for a while.
I’m currently learning...CSS Angular React
Latest solutions
Recipe Page for Frontend Mentor Challenge
Submitted 8 months agoI'm gaining a lot of knowledge as I work on the projects but in depth, big picture understanding aren't as easy to see. I'm a book guy but CSS doesn't have as much up to date books for me to gain an understanding outside of projects. Watching videos are nice but I don't always have to option to sit at the computer and learn after work hours. Any type of big picture blog posts, articles, etc. would be welcomed.
Latest comments
- @lank81
Very well done. I like the use of the BEM naming convention (something I want to move towards but don't always remember). It makes it much easier to read and navigate the tags.
The only suggestion I'd make is using semantic html5 tags instead of just DIVs. You could definitely use main and article for your container and testimonials.
- @Conte-Mouctar@lank81
You have the overall layout down.
One thing to look out for is the font-weight of each area. The top line and the paragraphs are a font-weight of 200.
Another easy fix is adding float: right to your img tags. This allows the image to be on the bottom right, instead of the left.
- @Ramon-AlvezWhat are you most proud of, and what would you do differently next time?
I'm proud of the responsiveness and also the speed with which I did this project, I noticed an improvement in both reasoning and practice.
Another thing I'm happy about is the fact that I used pseudo-classes to style some parts.
What challenges did you encounter, and how did you overcome them?I had no difficulties.
What specific areas of your project would you like help with?I'm open to suggestions, I always try to improve 😊
@lank81Ramon, that's something I've noticed as well as I do more projects, the speed to which I have a more complete solution. Practice definitely makes perfect.
I'm not sure if this is a best practice or not but I like how you broke out your CSS files almost in an object oriented (class) way. This makes things neater and keeps them as functional separate pieces.
Marked as helpful - @Wladi-Mojica56What are you most proud of, and what would you do differently next time?
It could be said that I am proud to have completed the challenge, however I could have developed it 100% on my own and not depended on tutorials.
What challenges did you encounter, and how did you overcome them?To tell the truth, I had to rely on the topic of units of measurement with other projects
What specific areas of your project would you like help with?I would like to know how you carry out the use of measurement units, I mean to know the amount of px, em, or rem based solely on an image?
@lank81Hey Wladi, Overall the page looks good. The main issue I see is around the prep time. I looks like the margins you have setup for ul li are 1.25rem plus some other margins already set in prep classes you have setup so the space between is much larger. I'm sure you could easily remedy this with either editing the prep classes.
- P@VSKarthikTWhat are you most proud of, and what would you do differently next time?
I have learned how to use max height / width to restrict the container to grow is helpful in social card project
What specific areas of your project would you like help with?I need help with responsive layout, does this social links card need to grow when we increase view port and decrease / shrink when we reduce view port
@lank81Your layout is identical to the design file.
I like the way you drill down in your CSS. Mine is higher level and although it still works I like how the specificity of your setup.
One small note, you should have an alt with a proper description in case your image isn't able to load.
- @lank81What are you most proud of, and what would you do differently next time?
When it came to my text I was using header tags. I'd probably use either semantic html or setup tags for each section and style the font size and weight on my own.
What challenges did you encounter, and how did you overcome them?The two issues I ran into:
- Setting up the user avatar and name alignment and size.
- setting the solid border box to be only right and below
@lank81Thanks for the links. Since I'm newer to front end I need to read more and understand rem values instead of pixels. As I go forward I'll work more within those values instead of the normal pixel use.
