@shekinahwebdevSubmitted 4 months ago
What challenges did you encounter, and how did you overcome them?
I KIND OF GOT CONFUSED APPLYING CSS GRID BUT I HAD TO TAKE MY TIME TO DO UNDERSTAND AND APPLY IT.
Latest solutions
Product preview card component - Solution
PSubmitted 4 months agoTo all experts out there, If you have the time to check on this solution, please let me know if I am following best practice, Semantic HTML, Accessibility and so on. All feedback are appreciated.
Recipe Details Page - Solution
PSubmitted 4 months agoLet me know if you find anything that I have missed, anything I can improve on, or If I have or have not followed best practices. all feedback are appreciated.
Social Links Profile Solution
PSubmitted 4 months agoLet me know if I am doing something wrong or if I am not following best coding practice. Thanks in advance. appreciate all feedback.
Latest comments
- @gopaladhikariSubmitted 4 months agoP@jeraldbiananPosted 4 months ago
Great job! I believe that with access to the Figma design, you could achieve a nearly pixel-perfect implementation.
If you do have access to the Figma file, it might be a good idea to strive for pixel perfection. This way, you not only refine your skills but you are also following best practice.
0 - @Crystalis89Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
That I definitely am learning and getting faster now that finally applying in many projects what I learned the theory of in Odin Project. A confidence boost I badly needed.
What specific areas of your project would you like help with?On every single one of my projects my solution screenshot was notably different size. This project in particular, despite it fitting perfectly all the way down to 320px size screen in Chrome dev tools.
Not really sure what doing so "wrong", or at least wrong in a way that the Screenshot doesn't like.
P@jeraldbiananPosted 4 months agoNice Work!
I can give you some tips on how to properly apply customized bullets and decimals for ul and ol tags. You noticed that in the list the bullets are centered when there are 2 or more lines? You might not see this in Desktop view but in the mobile view that is for sure. In order to achieve this you have to utilize the usage of pseudo element ::before and disable the default list style type for both ul and ol, for the decimal/ordered list, it is a bit different, I have used the CSS Property "counter-reset" to achieve the correct design.
https://www.w3schools.com/cssref/pr_gen_counter-reset.php
I know Vue/React, but I used only HTML And CSS for this project, You can check out my solution if you want it might help you.
Marked as helpful0 - @DYBDDYSubmitted about 1 year agoP@jeraldbiananPosted 4 months ago
Good job, keep up the good work my friend!
I have a feedback regarding the design, as you can see when working in real world projects our clients tends do let us develop pixel perfect design. if you are not using figma, best use it to achieve pixel perfect design.
It is very obvious that in the Solution/Design, your solution is a bit off, like the spacing, correct font sizes. in order to achieve this, it is best to look in the figma design to get the correct information like the font style, letter spacing, font size and so on.
try checking my work maybe it will help you :D
https://www.frontendmentor.io/solutions/social-links-profile-solution-IG9y7IDeXt
0 - @JOYBOi3D2YSubmitted 4 months agoP@jeraldbiananPosted 4 months ago
nice job, keep up the good work!
a few adjustments are needed though to achieve pixel perfect design. Solution|Design is a bit off.
Marked as helpful0 - @developertaskinSubmitted 5 months agoP@jeraldbiananPosted 5 months ago
very nice!
however based on the solution/design, it looks like you need to fix the image and the paragraph, you already got it though, just a little refactoring to make it pixel perfect :D
0
