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.
For this challenge I wanted to level up, as I've already done some cards before, doing this one wouldn't be too difficult so I decided to use tailwind css. A technology that I didn't know yet, and I was surprised by how incredible and versatile it is. I still need to improve a lot, I hope to have contact with other similar technologies in the future.
What challenges did you encounter, and how did you overcome them?As I didn't know Tailwind, the way was to start with the documentation, I had a lot of difficulty understanding how each class influenced HTML, especially when it came to responsiveness.
What specific areas of your project would you like help with?It was my first time working with tailwind, so if you have any tips for beginners in this technology, I would be grateful to receive them.
The project looks pretty good, but the article is too tall for the project requirements, it gives the impression of being very large for the little content it contains. You could try to reduce the sources and lengthen the article. The rest of the design looks pretty solid!
Good job!
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!
I did it with little google search, and with previous feedback i received in this site.
What challenges did you encounter, and how did you overcome them?The responsive part and margins.
What specific areas of your project would you like help with?With anything possible.
The project really turned out incredible! Plus it fits almost perfectly in smaller sizes. The only thing is that logically, the recipe is presented in "Card" format so it would be better to use an "article" instead of a "section" (it's just convention, the project looks great)
The card looks incredible, however there is an error regarding positioning. You can try using flex-direction: column, or start by fixing the container styles. You don't need to add an extra main container, the body already works as a container!
I designed this without having a figma design to serve as a guide. I appreciate the importance of a figma design, i feel it helps with simplifying the design process.
What challenges did you encounter, and how did you overcome them?i still have issues with when to use the different display options.
it's really amazing! just, add some space between the links elements, and remember use totally white in the button text!
I will continue to improve on my styling. Apparently there is a lot for me to learn when it comes to styling.
What challenges did you encounter, and how did you overcome them?I had issue with positioning the footer to the base of the body.
What specific areas of your project would you like help with?Positioning the footer at the base and also properly aligning the author name and image.
My advices:
Use more semantic tags. The tag that encompasses the card should be "article" by convention and to separate the text from the illustration, use a "section". You don't need to use br for separation, use margin properties.
Use reset css (not mandatory but good practice!)
Also use CSS variables
Use the colors and all the resources that the project brings! It should be as close to the design that is presented. Although you can add a touch of your own design.
The design doesn't look good at smaller sizes (320px)
However, the design is quite similar to the one presented and the project looks good!
It was simple page but i effectively make use of the flexbox by which i was able to do work more faster. Next time i will try to use grid display.
What challenges did you encounter, and how did you overcome them?The challenge was to how a middle a div or content but by making use of flexbox it become simple and easy to achieve.
Some advices:
Use more semantic tags. For example, you can instead use a "section" for the card, use an "article" tag (it makes more sense). And use a "section" tag to enclose all the text, and treat the title without containers (divs or other types of containers). Use the attribution like a footer!
Clean up the HTML and use your own resources. By this I mean, make the project yours. Delete comments in the code, use your own README and dig deeper into your own project!
Just simple tips because the design is incredible. And it fits perfectly in all resolutions
