@m-taahaSubmitted 8 days ago
What challenges did you encounter, and how did you overcome them?
I am face challenge in css in media query.. I would appreciate suggestions on media query .. please
Ralph Angelo Gonzaga
@codejerooAll comments
- P@codejerooPosted 7 days ago
Great solution! To give you some tips using media queries it would be really nice if you start to switching em and rem for sizing and as much as you can avoid using pixels using queries because it would not make it responsive. It would've been better also
maxorminheight and width instead of fixed sizes. Or trying using percentages because in that way it would be much more responsive. Overall it was nice! Keep Coding!0 - P@mezbahDevSubmitted 11 days agoP@codejerooPosted 10 days ago
Great Solution! However if I may add, hover function is part of the challenge, you can do this by adding
button:hoverand changingopacity. In Mobile and Tablet Screen sizes there is an horizontal scroll which can easily be fixed by making sure the containers content is not overflowing. You can also addoverflow: hiddenon the parent container of the hero-left and hero-right images to cut off excess overflow. Overall nice solution and keep up the good work!0 - @danielnero-botSubmitted about 1 month agoP@codejerooPosted 11 days ago
Great Solution! However, if I may add, it would probably best to look again in the given designs and see for yourself the layout differences in each screen sizes. Utilize media queries and set breakpoints for you to be able to position each card in the grid. It's also better to implement mobile first workflow because from what I see, mobile layout as well as tablet layout looks very stretch. Overall It was great and responsive! Happy Coding!
Marked as helpful0 - @kariimellsayedSubmitted 13 days agoWhat challenges did you encounter, and how did you overcome them?
I faced challenges only in the layout section the first time, but the topic is very simple
What specific areas of your project would you like help with?...
P@codejerooPosted 13 days agoGreat solution! However the orientation of cards in the challenge are vastly different in different screen sizes. Try using media queries to create breakpoints and adjust the orientation of cards using grid or flexbox. Overall it was good! Keep Coding!
0 - @Annalyza106Submitted 21 days agoP@codejerooPosted 17 days ago
Wow! It's perfect! I loved how you utilized variables to store colors and sizing to make it easier to implement. I was supposed to give feedback, but it looks like I'll be the one learning something.
1 - @emanoelOliverSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
De conseguir fazer uma pagina web sem ter muita dificuldade, obvio que ainda tenho que aprender bastante mas eu fico feliz em ter conseguido sem me enganchar em nenhuma parte do site, já que ainda é bem simples.
What challenges did you encounter, and how did you overcome them?Na ultima parte desse site eu não estava conseguindo entender do por que eles não estavam se comportando do jeito q eu queria, tive que fazer uma pesquisa e vi que estava errando algumas tags e que estava fora de ordem.
P@codejerooPosted 19 days agoGreat and Responsive Solution! I love how you used rem and em for sizes for better responsiveness. However, if I may add.
- I think it's better to add
min-heightandmax-widthto the container so that it would scale properly based on the screen sizes.
2.At mobile screen-size, the nutrition table gets so close to each other. It's better to put them into distinct
divsand set the width to 50% of their container.- At desktop screen-size, both of them are too far from each other. Reduce it by having a fixed gap or fixing the margin.
0 - I think it's better to add
- @Sage-25Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
What I am most proud of is that this is my second design conversion after my training and I felt that I improved significantly from when I finished my training, it's easier right now, even though there was a bit of a stumbling block here and there I still felt confident in the skills I have learnt.
What I'd do differently is take the feedbacks given and then go ahead and implement them in my next screen conversion.
What challenges did you encounter, and how did you overcome them?On this, I didn't encounter many issues, but I was able to resolve the hosting issue using Google and help from my younger brother.
What specific areas of your project would you like help with?I would appreciate people dropping reviews on my code structure, and how I can write a more effective code -this would help me become better at what I am currently learning.
P@codejerooPosted 22 days agoGreat Solution! I love how you used multiple CSS files separating different stylings! If I may add.
-
you don't need repeatedly call
font-family: Inter;you can just put in the body tag then it will all apply since font-family is inheritable. -
It's also better to set the height and size when adding image files, adding
height = 32pxandwidth = 32pxinline in yourimgwould greatly help! -
There's also no need for
padding-bottomorpaddingpadding-topyou can just add padding:40px`. Overall, it was amazing, and I hope we can both learn from each other!
0 -
- P@codejerooSubmitted 24 days agoWhat are you most proud of, and what would you do differently next time?
Being able to use flexbox and clamp function
What challenges did you encounter, and how did you overcome them?Using focus and hover states on css
What specific areas of your project would you like help with?To be able to make it more responsive
P@codejerooPosted 23 days agoHi, thank you for the feedback! I used flex-shrink = 0 so that the image won't resize lower than its original size but yes, you're correct it was unnecessary. I used flex flow instead of flex-direction to set it up to column but looks like it was unnesscary too. I will try to implement what you've said. Thank you for the suggestions! Especially about the BEM naming convention and the time tag!
0 - @isaiahp04Submitted 24 days agoP@codejerooPosted 23 days ago
It's looking great and clean! Congrats on completing the challenge! If I may add I would probably made my html more semantic and accessible by adding more alt attributes to all the images. I think adding defer on your link to stylesheet would be better to prevent render blocking. Also, you included a local font file (Figtree-VariableFont_wght.ttf), but it’s redundant since you’re already loading the same font from Google Fonts. Overall, it was a great job!
0 - @Roaa-HussamSubmitted 27 days agoWhat specific areas of your project would you like help with?
I'm looking for an overall review of my code. I’d appreciate feedback on any areas that could be improved, whether it's structure, readability, best practices, or performance. If there's anything I should update or change, please let me know!
P@codejerooPosted 27 days agoThe code already looks so clean! I'm also just starting out as a dev, but I think that since this is a small component rather than an entire page, using <section> instead of <main> is more appropriate. The <main> tag is typically reserved for the primary content of a full web page.
1
