P
@EfthymiosK
P
pankajb085
@pankajb085All comments
- P@pankajb085
The code is well organized. Please check that the font sizes are proper, as per the design. The strength meter must be shown even if a password is not generated. The slider is not as per design.
- P@SurajCaseyWhat are you most proud of, and what would you do differently next time?
I have used SASS/SCSS for the first time. I have made mistake and took more time but somehow I completed it. I will try to use frameworks like Tailwind from next time.
What challenges did you encounter, and how did you overcome them?The main challenge was by using SCSS but I watched youtube videos and overcome from the challenge.
What specific areas of your project would you like help with?I would like help with placement of scss files. I have made files like buttons.scss, boilerplate.scss, and other files but I have no idea what code goes where.
P@pankajb085I liked how you arranged the folder structure and the solution for putting the cursor at the end. I have a few suggestions. Active states, like hover and active states, are not implemented. Tip and total amount are calculated only after the click on the tip button. It should happen in any order.
Marked as helpful - @NjeriwaweruP@pankajb085
Liked the hover effect over the cards. Please make sure all the font sizes are correct for the desktop version.
- @uixcemP@pankajb085
Nice Solution. Please check the designs properly. In mobile design width of form should be span over viewport.
- @Rlevel87What are you most proud of, and what would you do differently next time?
The project seems very simple at first and then gets complicated with the position of the share box. I was able to keep the java script simple and found solutions with the css. Don't know exactly what I would do different next time but I feel my css is a mess.
What challenges did you encounter, and how did you overcome them?My initial java script when building mobile view first included a function for toggling the display of the of the share box and the profile. When I went to desktop view I realized that would not work due to the profile disappearing. My initial ideas for solving this went to a lot of different java script ideas. While brainstorming those ideas It occurred to me that all I had to do was set the z-index on the share box and only toggle the display of the box.
What specific areas of your project would you like help with?I feel my css is a mess. Maybe I am wrong but I feel there is a simpler way to have the share box in the different locations without so much code.
P@pankajb085I liked the way you have structured HTML and used proper elements in the document. The font size of the title is not looking correct. The card should always be in the centre.
- P@mohamed-fathy3010What specific areas of your project would you like help with?
any feedback is appreciated. specially if you think there is a better way to handle the hero images or the 4 images in the middle of the page across all the screen.
P@pankajb085Excellent solution. I got to know so many things from your code.
- @shubhamprakash911P@pankajb085
Nice solution. For desktop screen just check padding given in figma.
- @nadam-designWhat are you most proud of, and what would you do differently next time?
I used the grid-template-areas. I think it could have been done purely with flexbox as well, but in this case, grid is easier, more painless, and requires less code.
What challenges did you encounter, and how did you overcome them?The biggest challenge was responsiveness: I wanted to solve it without using media queries, but in the end, adding a few extra lines of CSS resulted in a good outcome.
What specific areas of your project would you like help with?Is it possible to achieve this with CSS Grid without using grid-template-areas?
P@pankajb085I Liked the solution so much. Got to know so many things from your code. Kindly give me some suggestions. My code - https://github.com/pankajb085/FrontendMentorChallenges/tree/main/Four%20Card
Preview - https://pankajb085.github.io/FrontendMentorChallenges/Four%20Card/
- @gillaercioWhat are you most proud of, and what would you do differently next time?
I had customized this project using Flexbox, but when I went to post it, I realized that it required the use of CSS Grid.
It was a great opportunity to start studying this tool.
I'm excited to do more projects using CSS Grid.
What challenges did you encounter, and how did you overcome them?It wasn't really a challenge, it was more about exposing myself to a new tool, CSS Grid.
Progressive use will make me get better and better at CSS Grid.
P@pankajb085I liked the modularization of CSS files using @import and giving font using variables. A few suggestions - The Desktop image is different, you have used the mobile image for the desktop version.
Marked as helpful - @Phantuan2004P@pankajb085
The code is well structured. But needs a few improvements. Please always separate the CSS file from the HTML file as it increases the size of the HTML page and becomes difficult to read. Plus make the page responsive. It's only looking good on desktop design. Font sizes and colors also differ from actual design.
- @Jaca7xP@pankajb085
It is a very well-organized code. Just make sure the card is responsive across all devices. Please also add active states for the card. Its given in the design.
Marked as helpful - @bowman89What specific areas of your project would you like help with?
Like help to easier setup new projects with best practice formatting. And also be able du grasp and setup responsive designs from start instead of in the end.
P@pankajb085I liked your solution so much. Got to know a few more things. Please add hover, active and focus state.
Marked as helpful - @utsomondalWhat are you most proud of, and what would you do differently next time?
- I have completed the project to ensure it meets all the requirements and aligns precisely with the Figma design.
- This accomplishment reflects my dedication to delivering high-quality work and attention to detail.
- I plan to take on additional projects to enhance my skills further and broaden my expertise in frontend development.
- I identified the importance of setting padding values exactly per the design specifications.
- There was an issue with the
displayproperty, which initially posed a challenge. - However, I resolved the problem independently without seeking external assistance, showcasing my problem-solving skills.
As I am just starting in web development, I would appreciate help in the following areas:
- CSS Best Practices: Ensuring proper use of layout techniques, such as padding, margins, and alignment, to match designs precisely.
- Debugging: Guidance on identifying and resolving issues efficiently, such as those related to
displayproperties or responsiveness. - Performance Optimization: Tips on improving loading times and ensuring smooth interactions.
- Code Readability: Suggestions for writing cleaner and more maintainable HTML, CSS, and JavaScript code.
P@pankajb085Please don't forget to add alternate text for images. Its always good to use CSS reset to reset browser user styles and then override styles you want.
Marked as helpful
