ImbaMaster• 40
@ImbaMaster
Submitted
What challenges did you encounter, and how did you overcome them?
How to properly stylize a list and table. I found possible solutions by searching.
iyedoo
@iyedoo
All comments
- iyedoo• 120
@iyedoo
Posted
I can see your project is 99% the same as the original design! But I only have one thing to say I noticed in your source code:
- You didn't use <table>, <tr> and <td> HTML tags to make the table.
0 - Tanawut Wongboot• 30
@tanawutw03
Submitted
iyedoo• 120@iyedoo
Posted
Good job! The submission looks amazing and very close to the original design. I just want to point out some things that you may fix:
- This challenge is "FREE+" which means you can check the design files in figma and therefore check design details like border-radius, spacings, widths and heights...
- It's always better to follow the style-guide.md file for text colors and backgrounds instead of using tailwind colors.
However the code is clean, uses semantic html and is well organized! I'd give this a 8.5/10!
Marked as helpful
0 - lavollmer• 350
@lavollmer
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of working through each challenge that was presented in the project. I started with creating a skeleton of the design and moved on to functionality. I really enjoyed learning about the various aspects of this project.
What challenges did you encounter, and how did you overcome them?
I encountered challenges related to form validation, custom checkboxes, and flexbox styling. I was able to learn about the above through research and trial/error. I was able to work through each section!
What specific areas of your project would you like help with?
I would like help with the query type error message displaying on the screen. Thank you!
iyedoo• 120@iyedoo
Posted
Good job! You completed the challenge but with some mistakes. Let me recap what I see is missing:
- Using height: 100vh; causes a bug of the elements exceeding that limit when there are a lot of errors.
- Missing error for query type.
- The query type button should be something we call a "radio" and it is an input that allows only one choice between 2 radios... If you replace the checkbox with radio and give each of them the same name (ex: name="radio-input") there will be only one choice possible
- It's better not to use relative widths for such projects. I personally set a fixed width and changed it with a media query for mobile design
I don't know React so I can't say how easy is it to implement those things in your code. Hope this helps! Happy coding!
0 - Musab Khurram• 170
@musab03
Submitted
iyedoo• 120@iyedoo
Posted
This is a bit corrupted design bro!
No background, No style guide following, Wrong Content, container not even centered.
This should be reworked
0 - PIgorsimic1988• 70
@Igorsimic1988
Submitted
iyedoo• 120@iyedoo
Posted
Close to perfect! You just missed some simple things!
- The yellow text color is actually on hover. The color in normal state is black. And it has a cursor: pointer;
- You forgot to add the card's shadow. I used box-shadow for that setting the blur to 0
- Some smaaaaall spacing and font-size details that don't really matter
- Using classes for all elements wasn't a very good idea I guess because it made me go back to the HTML file to understand what the hell the ".background" in the css file was.😅 I prefer making it as obvious as possible for anyone reading my code.
- Using hex colors instead of hsl() (I don't know if that's that important)
Something I liked is using semantic HTML which we all learnt after our first submissions in Frontend Mentor. Good job implementing that here!
0 - Ayomide Akinbile• 30
@ayomixx
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the fact that this project was really easy to do and it didn't take me too much time to do it.
What challenges did you encounter, and how did you overcome them?
The major challenge I encountered was that I wasn't sure whether to write the social media links as links or as paragraphs in my HTML file.
What specific areas of your project would you like help with?
It's not really a help for the project, but I have a question. Is it possible for the social media links to be linked to each other? Like if someone clicks on a person's twitter account, Is it possible for it to be linked to the person's GitHub account?
iyedoo• 120@iyedoo
Posted
Good job! The main goal is achieved! But you have a lot of things to do:
- Using the <body> tag instead of .container
- Using the style-guide.md file for the background and text colors
- Adding a hover effect for the buttons
- Working on the spacing of the card
- Understanding the concept of media queries. (You repeated the whole code in the media query)
I suggest you check other people's solutions to write cleaner and better code! Good luck!
Marked as helpful
0 - Abenezer Haile• 50
@proAbenezer
Submitted
iyedoo• 120@iyedoo
Posted
Great work there! We have the same mistakes with the details of the design. But in overall the challenge is completed perfectly in my perspective.
1 - akoaltynbekova• 50
@akoaltynbekova
Submitted
iyedoo• 120@iyedoo
Posted
Great job on completing this challenge! I can notice that you have some problems with the design as it doesn't really match the real design. This challenge is FREE+ which means the design files are provided and everybody can check them. For the next try, use figma to check the spacing, border-radius etc...
0 What are you most proud of, and what would you do differently next time?
My first project using the React Hook Form library with Zod validation to create a modern and robust form.
iyedoo• 120@iyedoo
Posted
Great job bro! It's always so interesting to build a project with a completely new tool! Well I have some hot takes on your project which is looking good and solid:
- Some space needed for the container because in desktop and phone version it is just sticking to the webpage border which ruins the beauty of that border radius effect. As a solution for that. I personally started reducing the gap between the (inputs) and the gap between (label and input)
- I like your updating error state. What I mean is when an error occures, it goes away once the problem is solved without needing to sumbit again. This is something I missed in my solution.
- The success popup is more than excellent... but It only needs some spacing from the top.
To conclude, I think the only thing you are missing is the designer thinking... how you manage spacing, sizes, margins etc... but still a solid 8/10 for a new React Hook project. Great job!
Marked as helpful
1
