PraveenEggadi• 10
@PraveenEggadi
Submitted
P
Timothé Bissonnette
@Fable54321
All comments
- PTimothé Bissonnette• 200
@Fable54321
Posted
Overall this looks good, now looking more in-depth;
1 I see in your code that you have included all of your css between two section and a <main> section would have been fine.
Still in semantics, why an h3 tag for your big text ? It is clearly the main and only header of the page therefore it should be an h1. h1, h2, h3, h4 are purely semantics tags, if you are to put only one of these tags, it should always be h1 and you ajdust the typography yourself.
3 obviously a few small mistakes with some font-sizes, for that my advice would just be to take your time more.
Good job ! Keep up!
0 - PTimothé Bissonnette• 200
@Fable54321
Submitted
PTimothé Bissonnette• 200@Fable54321
Posted
If you review this one **please open the live site ** front end mentor generates a screenshot way too fast. If you open the live site you won't even realize anything, but the text in the first card takes like half a second (if not less) to adjust on top of its background. I tried regenerating screenshots many times the screenshot still looks bad.
Now I know I could have used a different approach with absolute positionning but with the project done and fine in an actual real scenario, I'm not messing with it again ahah.
0 - Ololade• 110
@zololade
Submitted
PTimothé Bissonnette• 200@Fable54321
Posted
The overall layout is pretty good, I like how it reacts when you reduce the size of the screen !
Now I think you might have spent a lot of time on that layout and maybe not enough afterwards. Obviously designs like this are a little weird as in it's hard to do without fixed widths wich are normally not recommended.
I am not going to go over everything, I think just comparing the designs you can easily see what is wrong, it's just a matter of taking more time on the little details.
Good job ! keep up !
0 - Rido Septiawan• 80
@riddsep
Submitted
What are you most proud of, and what would you do differently next time?
You can implement it according to the design, but it looks like there are several things that need to be improved
What challenges did you encounter, and how did you overcome them?
I'm a little confused about what I should apply in the nutrition section
What specific areas of your project would you like help with?
in the nutrition section, whether to use flex or grid and I'm still confused about the best practice for applying bem
PTimothé Bissonnette• 200@Fable54321
Posted
1 -html wise, this looks spot on to me, I really should start using the bem convention more, very clean.
2- Now in your css, I can see you have used rem for font-sizes, wich I know a lot of people like to. If you do so it is really important to convert properly. You have a given paragraph size of 16px, that means I should see font-size: 1 rem somewhere, but it isn't there.
3-You have imported the young serif font, but never used it. The style guide can be seen as some sort of checklist to see if anything is missing at the end.
4-more on font-families, your font-family: "Outfit" is there 6 times. Now I'm all for interchangeable code in the future, but surely calling it on every single block is overkill. You could maybe look at css variables, have let's say a primary one and a secondary one that are both Outfit, use one of each variables for two different sectiosn and then if in the future, let's says the ingredients font needs to change you can just change the associated variable .
5-The colors look right at a glance. Except for the background wich I think you just forgot, no big deal.
6-It's not the end of the world for this project, but for the future you can use a display:flex and an align-items: center on the body to center your project vertically. For this your body needs a min-height: 100vh, wich I personally put on every project.
7- The responsiveness looks good, I would suggest you to use em for your media queries, they're the most consistent across all browsers. (50em is a good spot to start and see how it looks).
Overall Good job ! Keep up !
Marked as helpful
1 - Pthibault.deverge• 170
@thibault-deverge
Submitted
What are you most proud of, and what would you do differently next time?
Nothing really proud but let say of successfully implementing CSS Grid for the first time. Additionally, using SCSS streamlined my styling process and improved the maintainability of my code. Next time, I would explore more advanced CSS Grid features and further refine my SCSS structure to enhance scalability and efficiency.
What challenges did you encounter, and how did you overcome them?
The main challenge was organizing the grid with media queries to ensure that the grid items were properly placed while maintaining precise spacing and padding to match the original design. Achieving pixel-perfect alignment required careful attention to detail. I overcame this by dedicating ample time to tweaking the layout and ensuring consistency, often fueled by a steady supply of espresso!
What specific areas of your project would you like help with?
I would appreciate feedback on optimizing my SCSS organization and improving my use of CSS Grid. Specifically, tips on best practices for structuring SCSS files and making grid layouts more efficient would be very helpful.
Thank you for taking the time to review my project!
PTimothé Bissonnette• 200@Fable54321
Posted
Really good job, I can see you have quite a few project under your belt.
I wish I took the same approach as you for the box-shadow, but the figma file was saying it was black with low opacity, it clearly wasn't, but by the time I realized, I had already spent too much time on it.
Anyways, goob job, your code looks very professional !
1 - Arize Nnonyelu• 10
@arize99
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of finally getting it to be responsive to some extent.
What challenges did you encounter, and how did you overcome them?
making the containers responsive
What specific areas of your project would you like help with?
complete review and suggestions
PTimothé Bissonnette• 200@Fable54321
Posted
Ok so I took a good look.
- You say you are happy that you made the page responsive, wich it is, good job. Now it is important to understand what makes a page responsive or unresponsive.
Every html page is responsive initially wich means it's on us to not mess it up with our css. You didn't, again, good job. Now I just want you to understand why is your page responsive, because it all happens because of one little property.
Yes, it is all because of your max-width: 80% on your container. Because of this one property, the website doesn't break until reaching ridiculously thin width.
Now this is where it causes a few issue for this particular case.
1st: 80% is way too wide for desktop device. I imagine you had mobile in mind when you did this.(nothing wrong with using media queries for wider device instead of vice-versa, that's actually how I work most of the time)
2nd this leads me to another issue, you have used a media-query for device with a max-width of 375px. 2.1 this media query does absolutely nothing. Why ? Because you use it to set a max-width of 400px to your .container, now remember your container already has a max-width of 80% obviously 80% of 375px is less than 400px. 2.2 use em for media queries, they're the most consistent.(40 to 50 em is a good ballpark to start with, no need to go so low).
3rd Take your time with the CSS. I can see you wanted to go quickly. I see this on most project here. Going fast is worth nothing if you're not first focused on doing everything right. I would recommend you looking into CSS variables and at the start of every project, use the style guide and create a variable for every bit of information that is given to you. These are the little details that separate the pros from the hobbyists.
Now you are clearly going in the right direction, take your time and you will build perfect projects soon.
Marked as helpful
1 @apradaglez
Submitted
What are you most proud of, and what would you do differently next time?
Happy that I am able to code this challenge with Sass. The next time I will try to improve the structure with sass and code.
What challenges did you encounter, and how did you overcome them?
I've fought with the Responsive Design, specifically with the Responsive images and sizes of the container, Too with the function "clamp" I've fought but I couldn't achieve that it works and I've Found an alternative way. I admit to suggestions to improve my code.
What specific areas of your project would you like help with?
With funtion "Clamp" and use mediaqueries with sass
PTimothé Bissonnette• 200@Fable54321
Posted
ok, so looking at your code;
1st- I think one thing you could add to your reset.css file for every project is a min-height: 100vh to the body tag.
The reason why I'm starting with this is that it would have given you the possibility to center your content vertically, wich is the obvious visual issue with your page.
2nd- wihtout going one by one I can see there is a few things that are not respecting the style guide.
Since you are using SASS, what I like to do is to have a _variables.scss file, where I start by creating a variable for each information given by the style guide. You would then need to import your variables using @use "variables"; in your style.scss.
If it's in the style guide it means it is used somewhere so you can see it almost as a checklist, alhtough having used all of them doesn't guarantee perfection, having not used all of them guarantee something is wrong.
3- I recommend the use of em for media queries. They are the most consistent across all browsers. (50em is a good spot to begin with).
There is probably a few other things I could find, I can see your container size is weird when I inspect your page, but overall you did a good job, we recognize the design really well.
I would recommend that maybe you just take a bit more time in the future and I am sure you can make everything perfect. Keep up !
Marked as helpful
0- Max• 50
@MxxPxn
Submitted
What are you most proud of, and what would you do differently next time?
I used «vh» except px. not everywhere.
What challenges did you encounter, and how did you overcome them?
my challenge was how fast and understandable I can do it.
What specific areas of your project would you like help with?
I would like help with vh, bem, scss with bem, and maybe something about support old browsers
PTimothé Bissonnette• 200@Fable54321
Posted
Sadly the link to github just gets me to my own home page, so it's hard for me to properly give you advice.
Visually everything seems good except the gap between every links that is a little on the low side.Without your code I can't see what approach you've used, personally I went for a flex container using a flex-direction of column and a set gap property.
I see you too are looking to use sass/scss. I too am getting started with it so as much as I would have wanted to I am not sure how helpful I could have been yet.
Good job, keep going !
0 - Matias Lombardi• 40
@Lombardimn
Submitted
What are you most proud of, and what would you do differently next time?
"En este desafío, estoy orgulloso de haber aplicado el uso de mapeos de datos y la descomposición de componentes para tener mayor escalabilidad. Para la próxima, me gustaría poder aplicar estados a los componentes para que sean dinámicos según la receta que quiera consultar y aplicar animaciones.
What challenges did you encounter, and how did you overcome them?
El desafío más grande fue descomponer aquellos componentes que contenían más de un ítem repetitivo.
What specific areas of your project would you like help with?
Me gusataría recibir ayuda con el estilado de mis componentes y del proyecto en general, dado que seguro se pueden aplicar mejores practicas.
PTimothé Bissonnette• 200@Fable54321
Posted
First comment is going to be about your github management. It might be fine for your own personnal work to have one massive repo for multiple projects, but you should have one per project when publishing a solution. At least in my opinion.
Second, I can see you are learning react, wich is perfectly fine. It seems obvious to me that your big focus for this one was the usage of props. You have built a json file that you have imported in you app component (by the way your app.tsx is a component, so it should be in that folder ;)). You've sent the props down from the recipe.json file really well.
For the react side of things I would say you have done a great job, maybe it would be time for you to start looking into css modules wich is a really good way to use css with react.
Now, I feel like everybody who wants to be a front-end engineer should ear this. You may look at javascript and react and think this is what is going to set you apart, but really the difference between a pro and a hobbyist is mostly in the html and the css.
If you are taking one of the projects here to practice react, that's a good idea, but don't let it overtake everything else. You will kick yourself when you are a js and react master but you still look like an amateur using html and css.
Keep up you clearly are capable !
0 - Agung Prasetyo• 40
@agpprastyo
Submitted
PTimothé Bissonnette• 200@Fable54321
Posted
I am not sure whate to think about this one, after seeing you have used react.
I feel like maybe you are trying to practice your react skills on some shorter project, wich is a good idea.
The use of the map function to create the links shows me you have good knowledge of more advanced concepts. Good job!
On the other end, it is crucial on these smaller projects that you try to be top notch on what might seems less advanced. This is what makes professionals, the ability of doing the simple things over and over again in a coherent manner.
You have your hover state for your links, shouldn't be too hard to make them the right color.
The use of the map function for the links is good, but you sould have still wrap it in something to have more control over it.
Overall good job, I might sound harsh on these point but it's because I can see you are not a beginner.
Marked as helpful
0 - ErwiniaDev• 10
@ErwiniaDev
Submitted
What are you most proud of, and what would you do differently next time?
I'm not particularly proud of my work on this project, but the result is quite close I think.
What challenges did you encounter, and how did you overcome them?
I tried several times to get the paddings for the text that it was be the same as the design. I had to go over it again and again, even though I could see which ones to work on.
What specific areas of your project would you like help with?
- Is the CSS properly organized?
- And have I correctly broken down my HTML code (div, class, ...)?
- Thank you!
PTimothé Bissonnette• 200@Fable54321
Posted
So, at first glance, the difference between your solution and the design seems to come from your image being bigger.
Looking at your code I am not sure what causes it exactly. Did you get it directly from the assets directory given with the starter code?
If you did, I recommend you always get your image first without touching any height or width adjustment. A lot of the time if an image is given to you, it will already be the right size.
Apart from that, I think that you are maybe a 100pts too bold on both your font-weights, but I think I did the same for some reason.
If not from these, your project looks really good. HTML looks good too.
Marked as helpful
0 - Ademola Joshua• 40
@Hardehmohlah
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of how fast i am able to finish this project.
What challenges did you encounter, and how did you overcome them?
Applying a timer to the hover pseudo-class and i overcame it through a simple google search.
What specific areas of your project would you like help with?
Adding a focus psudeo-class
PTimothé Bissonnette• 200@Fable54321
Posted
I think you just posted this solution for the wrong project, but what you did look good I guess !
0
