Skip to content
OverviewSolutions
7
Comments
8
David de Alencar
@dealencardavid

All comments

  • ownedbyanonymous•190
    @ownedbyanonymousSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that l was able to complete the challenge as l had difficulties getting started. I didn't really know where to begin but breaking down the challenge and focusing on one problem at a time did help.

    What challenges did you encounter, and how did you overcome them?

    I had problems with the spacing between the columns and actually deciding how many rows l needed for this grid layout. The gap property had effect on the horizontal gap but not on the vertical gap and if anyone has a suggestion on how l can solve the issue, the suggestion will be appreciated.

    What specific areas of your project would you like help with?

    I need to practice using grid layout more as this is a new concept.

    Four card feature using Grid Layout.

    2
    David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hi!

    Great job! Working with grids can be a bit challenging at first, but once you understand how they work, it can be very rewarding.

    You might want to adjust the horizontal gaps a little to make your solution look more like the proposed design.

    Here's a tip: you could create a grid class and apply it to the parent component (setting the desired columns and gaps) while using a separate ID for each card. By tweaking the IDs, you can more easily position each card in the desired location.

    Hope this helps.
    Happy coding!

    0
  • David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hey, Ghassan! I believe you've mistaken the solution link for your portfolio link.

    0
  • Daniel Tving•230
    @dantviSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Finishing the challenge and improving my CSS grid skills.

    What challenges did you encounter, and how did you overcome them?

    The main challenge I encountered were in the desktop version, when I needed to place the card elements according to the design. I have not been working that much with CSS grid, but after reading about it I managed to solve the problem.

    What specific areas of your project would you like help with?

    Any feedback would be appreciated.

    Four card feature section

    2
    David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hey, Daniel!

    Great job here and nice job handling the positioning with a combination of id's and a single grid.

    The only thing I would say that could be improved in your solution is to change the card background-color to pure white to better match the design.

    Happy coding!

    Marked as helpful
    0
  • David de Alencar•120
    @dealencardavidPosted 3 months ago

    Amazing. Great job! 👏

    0
  • AlvaroPrates•130
    @AlvaroPratesSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I got stuck a bit while trying to design the lists and the table at the bottom of the page. It was hard to follow the figma design file for those parts. I end up using padding for the list bullet points and numbers and also the text that follows.

    Recipe page with HTML and CSS

    1
    David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hey! Amazing solution.

    I had the same problem with the table and ended up using a combination of borders, padding and :last-child to achieve the design.

    Saw how you organize your css file and learned a lot!

    1
  • Fernanda Tollotti•40
    @fernandatollottiSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In this project, I take pride in successfully implementing CSS techniques to enhance my knowledge and skills in frontend development.

    What challenges did you encounter, and how did you overcome them?

    I did not encounter any difficulty with the challenge

    What specific areas of your project would you like help with?

    I would like to know if the use of rem in CSS is correct, as I studied according to the guidelines provided by the platform's developers.

    Social Links Profile

    1
    David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hello, Fernanda,

    Your solution is absolutely fantastic!

    I did notice one thing, though: In your code, I observed that you used a mix of margin-top and margin-bottom to set the spacing between elements. While this approach works, it can potentially make the code harder to maintain and adjust in the future.

    For more manageable styling, consider using a consistent spacing system (maybe a fixed gap between elements or any other solution) . This can help keep your codebase cleaner and more adaptable.

    Best of luck with your journey!

    Cheers, David

    1
  • David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hey, JakkaThirumalesh.

    Amazing work!

    A few considerations:

    • The shadow box could be a bit smaller to better match the design.
    • The font-weight of both the tag and the heading is a bit off. Try a bit lighter and the design will be perfect!
    • Also, you could implement the hover effect proposed on the challenge (turn the heading yellow when the user hovers the card). It could be a good opportunity to learn.

    Good luck on your journey. Cheers, David.

    0
  • andevlima•20
    @andevlimaSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of succeeded finish my first practice project with html and css. How it was done and the result itself, I'm proud of it. But next time, I'll definitelly have to translate better the guide file, because I was trying to do the figma design, not the image on the design folder, lol. After done, I think it is really close to the original image.

    What challenges did you encounter, and how did you overcome them?

    The box model was the hardest part, I thought i did understood how it works in my beginner course on CodeCademy, but it was just the tip of the iceberg. I read tones of articles to understand just what I had to finish the challenge. I had to do the Qr code page responsive, and position a , in another propertly, to make it happen. So I found a way to do it reading articles about. But checking other persons sollutions I realize that my knowlege of box model is doesn't exist at all. The way I did the boxes in my sollution is all improvised. So I'll study more now, untill I take another challenge.

    What specific areas of your project would you like help with?

    I want to know how you guys make a responsive page and how you deal with box model issues, because that was hard for me, and I think it can be many ways to solve the problem.

    Qr code - html, css

    1
    David de Alencar•120
    @dealencardavidPosted 3 months ago

    Hello, qrcodezip!

    Great job on your project! I have a few suggestions, if I may:

    • Try updating the README.md file with a more personal touch. It’s a good opportunity to get comfortable with markdown.
    • In your solution, there's an issue with the padding. If you look closely, the main component (which includes the image and text) has more padding at the bottom than at the top and sides.
    • Additionally, your heading (H1) appears significantly darker than the one in the proposed solution. This might be due to an incorrect color or font weight. I suggest checking both to ensure consistency.

    That's all! Good luck on your journey.

    Cheers, David

    Marked as helpful
    1