Skip to content
OverviewSolutions
23
Comments
19

Juan Bonilla

@juanpb96Colombia610 points

I'm working on improving my skills to create amazing, attractive and interacting web sites. Passionate about learning and putting my hands on new projects.

I’m currently learning...

Front-End Development. CSS / SCSS, React, JavaScript / ES6 +, Best Practices

Latest solutions

View more solutions

Latest comments

  • Juan Bonilla•610
    @juanpb96

    Hi Daniel, good job on your solution!

    I was looking at you code and I see you can do some fixes. You should consider the use of position: relative; in your #inputContainer or changing the layout of your input just a bit. I think you can use #inputContainer with display: flex; and place the button and icon better. The border could be moved to the container, so you can adjust styles in an easy way.

    Hope it helps!

    Marked as helpful
  • Juan Bonilla•610
    @juanpb96

    Hey Sourav 👋

    Good job on this one!

    I think I can help you with your questions and include additional comments:

    • It is good to define width in your .class and you should change it according to what you want with media queries. I recommend starting with a mobile-first approach.
    • You can use different tags to provide a more sematic HTML structure in your code. For example, your <div class="attribution"> should be <footer class="attribution"> or <div class="card"> could be <main class="card">.

    I think it is not a personal preference in general. If you use tags properly, your site increases in accessibility and best practices. You can take a look at HTML reference as it has helped me when I wonder about tags.

    Hope this can be useful for you 😃

    Marked as helpful
  • Juan Bonilla•610
    @juanpb96

    Hi Harsh 👋

    Your solution looks great! 👍

    I think you can consider some points to improve your project:

    • You can improve you HTML structure by including more semantic tags. For example, your <div class="main"> could be <main>.
    • The background is disappearing in desktop screens, have you added the correct image path?
    • Card spacing is too small, maybe you can check your styles and add some padding 🤔
    • Try to use CSS pseudo elements (::before or ::after) to avoid unnecessary HTML elements such as <div class="bg_image">

    Hope this can help 😃

  • Juan Bonilla•610
    @juanpb96

    Hey Kim! 👋

    Your solution looks good! 🥳

    I have some tips for you to improve your project:

    • I think you can change your div class="attribution" to footer class="attribution" this way you add a more semantic tag in your HTML 😉
    • I'm not sure why you used display: flex in your body but this is causing two columns, so the layout looks a bit weird.
    • Stars in .review are using inline styles, I consider you can include a class or play with selectors to easily add the margin that you need. Maybe something like .review > img { margin-right: 9px } could work.

    Hope this helps! 😃

    Marked as helpful
  • Juan Bonilla•610
    @juanpb96

    Hi Marina! 👋

    Congrats on your solution! 🙌

    I've seen some things that you can do to improve your project:

    • In your 'Proceed to Payment' button: You could increase its font-weight and make it use the same font-family as it is taking the default from browser styles. Also, include cursor: pointer so the user will know that this button is clickable.
    • Try not to use <br> and play with margin instead 😋
    • Adding hover states for links and buttons could be awesome 😎

    Hope you find this useful!

    Marked as helpful
  • Juan Bonilla•610
    @juanpb96

    Hi Staniuu! 👋

    Good job in this one! 😃 I was looking at your solution vs the design and I found out few things you can do to improve your project:

    • You could add a gray background color
    • Are you using the correct font for your card titles? And don't forget to make them uppercase 😉
    • Try including border-radius in the first and third card
    • Learn more buttons could have more padding on the left and right sides

    Hope this helps!

    Marked as helpful
View more comments