@SvitlanaSuslenkovaSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
Try to put Number of people to zero :)
henryapm
@henryapmAll comments
- @henryapmPosted 4 months ago
Wow, you have a natural talent for design, did you come up with the design by yourself? It looks very nice.
I really like how you used colors to change the perspective of the whole splitter calculator
0 - @henryapmSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of being able have used flexbox to successfully center the component, I also used media queries to resize the component when use in a smaller screen, and at the same time being able to align the text of the author to the center of the avatar image was a little challenging, I spent a bit of time figuring that out.
What challenges did you encounter, and how did you overcome them?Like I mentioned before I experienced difficulty trying to align the author name with the avatar image to the center, however I was able to fix it and center it!
What specific areas of your project would you like help with?Last project I had to use fixed sizes with the images, in this one I used max-width to fix the sizing problems, however there's a margin of error, and I had some problems with the left side of the main image, it had like a whole pixel across the left side of the image that made it not fit in its container and at this point I don't know how to fix it.
@henryapmPosted 5 months agohenry241341, I found my password you can hit me up there, do you speak another language?
0 - @henryapmSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of being able have used flexbox to successfully center the component, I also used media queries to resize the component when use in a smaller screen, and at the same time being able to align the text of the author to the center of the avatar image was a little challenging, I spent a bit of time figuring that out.
What challenges did you encounter, and how did you overcome them?Like I mentioned before I experienced difficulty trying to align the author name with the avatar image to the center, however I was able to fix it and center it!
What specific areas of your project would you like help with?Last project I had to use fixed sizes with the images, in this one I used max-width to fix the sizing problems, however there's a margin of error, and I had some problems with the left side of the main image, it had like a whole pixel across the left side of the image that made it not fit in its container and at this point I don't know how to fix it.
@henryapmPosted 5 months agoAre you able to see my solution online?
And ah ok, I do it through the command line, I just tried to push changes again and it says that there's nothing to push :S even trying to push All!
And tell me why are you trying to become a web dev
0 - @theNomadicEnbySubmitted 5 months ago@henryapmPosted 5 months ago
Hello @theNomadicEnby I hope I find you well, I like your solution for this challenge, the use of css variables, very convinient, the use of footer and main, is great for your html semantic.
I would just honestly add a section instead of a div to wrap the elements of the component.
And add the correct paddings which I understand if you don't have the guide to do it since the figma isn't available for all the users, but other than that you did a pretty good job!
0 - @eduardolluisSubmitted 5 months ago@henryapmPosted 5 months ago
Hey Eduardo, congrats on finishing the problem, btw I like that you added a hover effect to the title of the card, however I have to highlight and give you some feedback on what I see that you could have improved, It seems like your solution has bigger dimensions than the actual design, at the same time seems like you use the right colors so congrats on that.
One last thing I would remark is that you could use some more semantic html elements, like main, section, or article in my case I used section and main for the main content, but I'm not gonna ignore that you used footer for your card, so that's some progress. I also noticed that the padding on your elements is not the same, so I guess that's one negative aspect of the design, but the rest looks good, so I hope you keep it up!
Marked as helpful1 - @Divino-AlonsoSubmitted 5 months ago@henryapmPosted 5 months ago
Hello @Divino-Alonso I'm going to attempt to give you some feedback.
My solution isn't perfect either but I'm supposed to give you some feedback. It seems that your design doesn't match the solution, this could be because the height and width are not stablished to be the ones the Figma file suggest to use.
I'm my case the way I solved at least that part was to hardcode those two values, if you have another way to fix it I'll be glad to hear from you.
Another suggestion I can make is that you should try to implement the use of semantic HTML elements like main, section, article, in this case particularly I personally used section to encapsulate the component and gave a
#componentid.That will be pretty much my feedback I hope you can implement some of this in your next or this present challenge.
1 - @Smart-Ace-DesignsSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Using Astro and my own Astro template to implement the solution. However, using an Astro component within the project might have been a bit overkill for getting to the desired outcome. Frameworks like Nuxt/Vue and Astro seem to be component-centric, so I am try to get into the habit of using components.
What challenges did you encounter, and how did you overcome them?I struggle with CSS layouts. I had to "cheat" a bit to get started - but then was able to finish the rest on my own.
What specific areas of your project would you like help with?Sometimes I am not really sure where to put margins. Do I use it on the upper element, to add space between it and the lower element? Or vice versa? Or does it not matter? Same for left vs. right elements.
Using hard-coded widths seems "restrictive". Is there a better way to set the width that is more dynamic instead of using a hard-coded width of "360px".
I have several issues with Frontend Mentor itself:
-
The screenshot does not match my live solution. For example, my paragraph has three lines but the screenshot of my solution only shows two lines. This seems to be a bug with the screenshot process. I tried creating a second screenshot and got the same results.
-
Code blocks in this section are not being saved if they are at the very bottom. I tried using both of the options as described in the markdown help but neither worked. It shows it in the preview correctly, but when I hit submit or update solution, the content within the code block is lost. I have tried several times. Here is an example - you will see it is blank after I update solution:
``
@henryapmPosted 5 months agoI ran into the same question when it comes to hard code width, I was trying to used max width but it was not working so I decided to go with hardcoding the width and height!
If you found a better solution after all hit me up.
Btw did you get the pro version? I'm still sticking with the free one to see where it takes me!
0 -
