@plantpirate
@BT453567
Submitted
What are you most proud of, and what would you do differently next time?
Working with CSS Grid as I haven't used it before.
What challenges did you encounter, and how did you overcome them?
I haven't used CSS Grid before so had to read the documentation.
What specific areas of your project would you like help with?
Any advice would be welcomed. How my code compares to professionally code in particular.
@plantpirate
Posted
Hey friend,
I think the website in this link has been mentioned on frontend mentor, but this is a direct link for a solid example there on how to place items in named grid areas. https://gridbyexample.com/examples/example11/
it will be useful as we are both practicing grid :)
@AnujCodeIt
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@plantpirate
Posted
I really like your solution. The fact you got a box shadow is great, I didn't even notice it in the design all the times I looked at it. Grid does seem pretty difficult to use, but I'm not sure how the layout could have been done using flexbox.
The one thing I noticed is how your grid keeps growing on bigger screen sizes. That can be stopped by putting a max-width rule on the grid.
Marked as helpful
@mussino
Submitted
What are you most proud of, and what would you do differently next time?
All the good position for the blocks
What challenges did you encounter, and how did you overcome them?
positioning the blocks all over the different screens
What specific areas of your project would you like help with?
grid
@plantpirate
Posted
This looks good.
We went about this in different ways. I would do things differently so that the cards weren't so narrowly squished at those medium screen sizes, but I like how responsive the site still.
@Maheshgithub111
Submitted
@plantpirate
Posted
You've got a good start to this.
The first thing I noticed is at the larger width the padding around the actual content is less than the pictured design. You can solve this by including a new padding rule within your media query.
Keep up the learning and do some research on default settings and built in responsiveness from elements :)
@mverma45
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of the fact that I got the project looking close as possible to the actual design.
What challenges did you encounter, and how did you overcome them?
I had several issues with the project the issues I had were trying to get the Nutrition table to look like the design I had tried display: block display: flex and to get it to line up I tried to do the justify-content, justify-items etc. How I got it resolved is I had to make another class and that then made it a flex container and that fixed the issue.
What specific areas of your project would you like help with?
I would like to know how I can make the code better any help would be appreciated. I got it as close as I could with the research I did for the project.
@plantpirate
Posted
You've got a good start to the project, all these different elements can be overwhelming. Using grid for the table worked for me. I would suggest trying to understand grid videos by Kevin Powell, or by taking the grid course by Wes Bos (very helpful).
•I see that your calories text is all in one p tag per line, and that leads to issues itself.
•I would put your different sections with lists into div containers, then you can style the container around the text.
I don't have all your answers, but these can help you start moving in the right direction.
Since you've submitted your solution, look at comments on other solutions for the same problem. The comments can help you answer questions you didn't know you had.
Marked as helpful
@rezanahi
Submitted
What are you most proud of, and what would you do differently next time?
find semantic tags
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
I recently became familiar with the BEM naming convention, and I tried to adhere to it in this project. I would appreciate it if you could give me your opinion on the names of my classes. Additionally, I would also appreciate it if you could share your thoughts on the entire project.
@plantpirate
Posted
I personally don't like such long class names especially for a small scale project like this, but your way could be better than my simplified way, especially in larger projects. You used rem in most of your CSS so I was a bit confused seeing px used for widths and heights. Overall I think the design great. There's some differences in padding and margins, but I see those in most finished challenges here.
Marked as helpful
@rzuanisko
Submitted
What are you most proud of, and what would you do differently next time?
Next time i need to work with buttons. On mobile view looks very good, but desktop not exactly.
What challenges did you encounter, and how did you overcome them?
Buttons are biggest challenged. I try do this with nav>a, but finally i did nav>li>a. I think easiest way will be nav>p but im not sure this is correct.
What specific areas of your project would you like help with?
How to make buttons easy way?
@plantpirate
Posted
Your layout looks good! The space between elements isn't exactly like the design, but I have the same issue with mine. I never considered making the links buttons, I just put the text within a div since I wasn't including real links. Your choices on how you did the project are interesting, and opened my eyes up to different ways I can try in the future.
I don't exactly remember, but I think it's either freecodecamp or sololearn that has projects that include buttons if you want more practice.
Marked as helpful
@emidiovaleretto
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@plantpirate
Posted
Your design looks really good and it quite closely matches the prompt design. The things I easily noticed were spacing differences on multiple elements, and differences in font stylings. I admit I run into the same issues on these projects, Also, the view code link to your github doesn't connect as it should.
@PeterBachman100
Submitted
What are you most proud of, and what would you do differently next time?
I am happy that it looks right. Next time I would assume an 8px basis for the grid.
What challenges did you encounter, and how did you overcome them?
I wasn't sure of the spacing at first, but used some tools in Figma to understand the layout better.
What specific areas of your project would you like help with?
Having an easier time determining pixel values for spacing.
@plantpirate
Posted
These are the same issues I generally have when working a project. I like to go back to the basics of putting a border around an element when I'm working on it so I can try and decide on those spacings easier. Your design looks really solid though, and I only saw that slight spacing issue. Really good work
