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.
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 :)
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
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.
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 :)
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.
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.
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.
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.
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?
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.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
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.
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.
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
