I'm a Web Dev student about to graduate as a TSU in Computer Science. I love working with React and I'm drawn to Vue. I also love the IA and art!
I’m currently learning...JavaScript (improving) 📚 React Ecosystem ⚛ Databases 🧾 Programming in general (always learning!)
Completing the app
What challenges did you encounter, and how did you overcome them?No major issues
What specific areas of your project would you like help with?Any helpful feedback
looks actually great! the logic and the state management is solid the design is close to the reference image, great job!
I am most pleased with the extra effort I put in to make the responsiveness look good between the two given design sizes.
Since I used grid templates and grid areas on this one, if I were to do it over, I'd probably try a subgrid or maybe named grid lines implementation.
What challenges did you encounter, and how did you overcome them?The JSON file presented a new challenge to serve with Vite on Github pages. Lots of repetitive deployments while troubleshooting. I overcame that by automating it. I save a little shell script in my project that runs the following command:
$ pnpm run build && git add dist -f && git commit -m "Updated site." && git subtree push --prefix dist origin gh-pages
Can I do anything about the lower corners of the cards?
Both the code and the design are pretty good, they are very similar to the design, maybe it is not pixel perfect, but it is very close to it. I don't think there is much to comment on, great work!
The design looks great! Maybe making the container smaller and adding thickness to the title could help to be more faithful to the original, however, there is no need to reach pixel perfect.
Besides, always use semantic tags! The container could be an article for example, it is more semantic than a div.
As for the logic, well, the form does not work as expected, even if it is not correct, the project advances to the success screen. It should be validated correctly. Also, the hover animation of the button on the success screen should be smoother!
There is little else I can say, the project is great but you should focus on correcting the validation logic.
i learnt responsiveness
What challenges did you encounter, and how did you overcome them?i suffered a bit with responsiveness but hey I conquered them
What specific areas of your project would you like help with?none
Your project looks great!
You should correct the colors only, and add some semantic HTML. It is necessary to learn semantic HTML because it allows you to give more meaning to what is being built, especially to search engines.
You could also use grid here, I recommend some resources to understand grid at least at a basic level:
I hope you can continue practicing and improving!
Kindly help me to take a look at this project and check whether its in need of any correctioms. Thanks.
From what i can see from the code, you should use more semantic HTML! You are using two divs, instead you can use an hgroup for the text and a section for the rest.
The same for the cards. Use articles.
The result is very far from the design, try to use fewer shadows, add paddings and play with the size of the elements using percentages.
On mobile it fits well but as the size increases, the elements stretch too much. Try adding media queries to manage the width of elements on tablet screens, for example.
However, the project really looks good, if you make it closer to the design, you've got it! It might even be better than mine.
Good luck and i hope you can continue improving and practicing!
Following Kevin Powell's approach for reference, I was able to implement:
I wouldn't want to do anything differently so far, I'd like to take into account the things I learned for future projects. Moreover, analyzing other people's code was highly beneficial!
What challenges did you encounter, and how did you overcome them?The margins of the html and body tags were conflicting with my grids, so I had to change a few properties:
html, body selector from height: 100%; to min-height: 100svh.padding property.I'm curious about the distinct behaviors of the body and html tags if anyone has resources about them!
The project looks really great! The design looks like it came from the screenshot, although the button is unexpectedly wider than the design, even so, it's just a secondary thing. Congratulations on your great work!
