Skip to content
OverviewSolutions
39
Comments
6
Diego Ramírez
@Diego2Drm

All comments

  • Diego Ramírez•630
    @Diego2DrmPosted 3 months ago

    nice job

    0
  • Diego Ramírez•630
    @Diego2DrmPosted 3 months ago

    "Good job. I liked that you made a simple project more challenging by using React JS."

    0
  • Diego Ramírez•630
    @Diego2DrmPosted 3 months ago

    "Use padding in your HTML so it doesn't look so close to the vertical edges."

    0
  • Samuel Lwanga•40
    @babyanonymouseSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    my consistency in using Tailwind CSS, I am constantly gaining more skills

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

    1.Adding a box-shadow, where I decided to define them on the tailwind config 2. Using local fonts instead of google fonts

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

    I'm grateful for my continued progress in coding.

    Blog Card Preview

    #tailwind-css
    1
    Diego Ramírez•630
    @Diego2DrmPosted 3 months ago

    You use a media query to change the size on desktop.

    0
  • Diego Ramírez•630
    @Diego2DrmPosted 3 months ago

    1.-The design on mobile is incorrect and does not meet the appropriate measurements.

    2.-It is not recommended to use padding to center any component.

    Marked as helpful
    0
  • P
    ImposterCodeVault•90
    @ImposterCodeVaultSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Last time I didn't look at the figma files, this time around I looked at them from the start to try and get the solution as close as possible to the proposed design.

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

    • When trying to get the text content to fit properly in the card-content section, I had issues with the tag having a default margin. Am I supposed to remove this margin in order to get things to size correctly? Did I do this the right way by specifying 0 margin on all elements at the top of my css?

    • What are some better practices I could have followed with my CSS?

    • I tried to follow the design from figma as much as possible, but this resulted in a lot of pixel values being specified, which I don't think is great for resizing and responsive layout. What could I have done better here?

    • The challenge says: The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries. I'd be keen to see how other people approached this. I know I could use vw units for the font size, but I don't know how to set the starting font size using pixels and then scale from there.

    Blog Preview Card with HTML and CSS

    1
    Diego Ramírez•630
    @Diego2DrmPosted 3 months ago
    <p class="text text-medium text-gray"></p>

    Why put more than one class on the tag?

    .text-small { font-size: 14px; }

    .text-medium { font-size: 16px; }

    .text-large { font-size: 24px; } you can use variables..

    For example:

    :root{ --text-large: 30px; }

    h1{ font-size: var(--text-large); }

    Marked as helpful
    1