@Jani-B
@miomio123
Submitted
What are you most proud of, and what would you do differently next time?
I think result is quite close to the original design
What challenges did you encounter, and how did you overcome them?
Took me a long time to understand the grid responsivness
What specific areas of your project would you like help with?
Im not sure if my code is clean enough, is there any other ways how to create it ina more efficiant way
@Jani-B
Posted
Nice work. I like the hover effect that you added on the cards.
For the grid I would say it might be better to do it with: grid-template: card 1 for the column 1 + row 1 to 2, card 2 for the column 2 + row 1 card 3 for column 2 + row 2 card 4 for column 3 + row 1 to 2
Sorry Could not write it as grid-template should as the reply field made changes to the order of the words :D I hope you understand what I try to say :D
so that you do not have to use the margin -140px or similar. You did very well with it as the solution works well on the mobile and desktop, but I think the grid-template area would work more easier.
just give the card1 and card4 margin auto and they should sit on the middle and then card 2 and card 3 just fits top of each other.
But I would say the solution was very good :)
Marked as helpful
@H-Keshk
Submitted
What are you most proud of, and what would you do differently next time?
*Reaching such a result after completing both HTML & CSS in around 4 months. *Being able to use responsive layout techniques correctly *Trying to finish the project with the minimum number of classes, using the semantic tags names as selectors.
-- Next time I will try to minimize the codes' lines, and write down the media queries codes in more prettier and shortened yet effective way.
What challenges did you encounter, and how did you overcome them?
*Add colorful (hr) between sections. -- I found the answer on StackOverflow website, which was adding a top border with the color you want like in the following code: hr { border-top: 1px solid hsl(30, 54%, 90%); }
*How to use internal fonts after using to add fonts by it's external links. -- First mentioning the font from you project's folder:
Then adding that code in CSS: @font-face { font-family: 'Outfit'; src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf); }
*What are the standard dimensions I'm going to use for media queries as screen sizes.. -- I found the solution on Bootstrap website under the section of (Breakpoints) giving the latest dimensions of all usable screens, up to date..
What specific areas of your project would you like help with?
I'd like always help with making my code looks more simple and short. Also I'd like to have more help with media queries and moving from query to another smoothly..
@Jani-B
Posted
Looks good.
I like the good commenting on the CSS. That is something I very often forget to do. It looked very good.
It will also help you if you make the general layout mobile first. -> start doing the css for the mobile size. and then change it with media query for bigger screens. This way there is lot less problems as it is easier to adapt to the growing screen size than to screen size that gets smaller.
I hope this helps :) Your solution is very nice !
Marked as helpful
@Davidmercy
Submitted
What challenges did you encounter, and how did you overcome them?
I am a beginner. I found it challenging to add a white background to the right part of the design while the background color is different. Getting the accurate shade of green is also challenging.
What specific areas of your project would you like help with?
I would be very grateful to receive comments on what I should have done differently so that my next projects will be much better.
@Jani-B
Posted
Hi,
The solution is very close to the given design. There is few things that might help you:
I hope these comments help you.
Good work with the design :)
@sudhanshusingh-g
Submitted
@Jani-B
Posted
Looks good :)
Unfortunately the buttons did not work atleast on my browser. Only the first click did work but I could not remove the changed div with second click. Maybe one solution could be that you use javascript to add class to the existing div. You can for example create a CSS class that has display: none; and then just use Javascript on click to give the specific div that className so that it will hide or display the div.
Then it is easy to use if statement to check if the div is showing or not and then remove or add the class accordingly
Sorry if my reply did not make sense :D Had some problems to find the correct words for this :D
The design itself looks very good. Nice work on the CSS.
@Ibtehaj-Ali-1
Submitted
@Jani-B
Posted
Very nice!
The design looks very good and the extra media query also made sure that everything works correctly on different screen sizes. Your code is also very good looking.
Great work !
@GamingClaus
Submitted
What are you most proud of, and what would you do differently next time?
i am proud of the whole thing that i have done because this is my first type trying out the challenge and next time i would want to do it better
What challenges did you encounter, and how did you overcome them?
while doing this challenge I faced a lot of difficulties like doing the mobile version layout as well as setting up the image that covers the div in the mobile layout and I still think its imperfect and can be done better but i am still proud of it
What specific areas of your project would you like help with?
i would like a help with the mobile version specifically because of the problems i encountered while doing it also i was new to this whole thing.
@Jani-B
Posted
Hello,
This looks good :) You were saying that you had some issues with the mobile version image that it does not cover completely the div. I noticed that you had 5px margin on the img. If you remove that on the mobile then it should be fine.
I noticed that on the around 425px size (mobile) the page breaks a little because the nutrition table element. You can change the padding for that and the problem should go away. You can add second media query with different with to fix this kind of problems if you want.
I have also been struggling a lot with my own pages going wrong on the mobile version. One very good way to avoid this is to make the site first mobile size and the with the media queries make it fit the bigger screens.
From my opinion your code and site looks very good.
Marked as helpful
@andmccutchan
Submitted
What are you most proud of, and what would you do differently next time?
How similar/clean I was able to get it to the original design
What challenges did you encounter, and how did you overcome them?
Determining spacing etc. I have not done too much stuff messing with line-spacing and kerning to that was new
What specific areas of your project would you like help with?
For all the lists in the project, I could not figure out how to get new lines to stay indented with the previous lines while keeping the bullets inside of the element
@Jani-B
Posted
Looks very nice :)
You were asking about the list items and the numbers and bullets. Do you need to use the list-style-position inside? I think that has the major effect on how the text is shown. I think you should keep the bullets and numbers outside so they will not effect the text flow. (if you decide to change it - remember to remove also the li::before margin - so it will not effect your design.)
But from my opinion the design and code looks very clear and I like it :)
@Atatra
Submitted
What are you most proud of, and what would you do differently next time?
So, I'm finally starting my webdev journey. What I'm not proud of is that it took me way too long to achieve this challenge, more or less. But I'm happy that I took enough time to do research, and try to really grasp what I was doing. Yeah I know.. using NextJS is probably overkill here, but I want to learn how to use this framework, so I'm glad I did!
What challenges did you encounter, and how did you overcome them?
It's my first time doing responsive design, and my first attempt at really trying to organize as much as possible my html page, so I had to google a lot of stuff.
What specific areas of your project would you like help with?
It's a bit unfortunate that I couldn't make the page look right with super low width ( tag... Also, due to me flex-wrapping words, the text is unreadable at such dimensions. Finally the article gets resized and the beige background becomes visible again. If anyone has any suggestions, I would be very thankful!
@Jani-B
Posted
Looks very nice. (i did not find the white space).
Code and page both look very good and I think it is not a bad idea to use Next.js with a simple page because it is good training. I do it also for small projects to get good experience. About the super low width. i noticed problem only well under 300px but I think that is not something that people see often. The nutrition table at the bottom is the cause for that. smaller font size and smaller padding will help there, but I think it is not a real issue.
Very good looking page :)
Marked as helpful
@mhmd-aboudalla
Submitted
@Jani-B
Posted
Nice job. Looks very good and good work with the code. Looks clean. Only thing I noticed you could do different way if you want to try it. Grid-template-areas are good help if you want to choose where different items will fit inside the grid. This way you do not need to but some of the cards inside different div.
Looks good :)
@HanSeongLee
Submitted
@Jani-B
Posted
Hello,
Looks good. There seems to be missing a gap between the second and third card in the mobile view. Maybe a grid-template could help you there? with that the gab should be easy to add to everthing and the placement with the components to any order you like should be easy.
Site looks very good :)
Marked as helpful
@patriciarrs
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud I found a way to reduce font size for smaller screens without using media queries by using the clamp() CSS function.
What challenges did you encounter, and how did you overcome them?
Initially, I didn't know how to reduce font size for smaller screens without using media queries so I had to search online for a suitable solution and read through several articles.
What specific areas of your project would you like help with?
I'd like to know if there are other viable options to reduce font size for smaller screens without using media queries.
@Jani-B
Posted
Nice work. Clamp is something I have not used. Will be checking it out asap. It seems to work very nice with the fonts. Not sure if it is so useful for the Width component in .card. But the page design and code itself is very nice.
@mangentemoncarlo
Submitted
What are you most proud of, and what would you do differently next time?
I was able to create this recipe page challenge using React. Though I am still learning this technology.
@Jani-B
Posted
Nice work.
I did not even think to do this with React but from my opinion the code looks very nice. Will be doing this with React soon myself as it looks very good. and you do not have to do too complicated things on this project so perfect to practice React. The page and code both look very good. :)
Marked as helpful
