Skip to content
OverviewSolutions
9
Comments
19

Carlos Guzman

@guztrilloBuenos Aires, Argentina285 points

I'm looking forward to solve every free challenge, from easier to harder. As I advance, I will go from work vanilla (pure CSS and JS) to use frameworks.

I’m currently learning...

advanced JavaScript, React.JS, GIT

Latest solutions

View more solutions

Latest comments

  • Carlos Guzman•285
    @guztrillo

    Hey Samson, you did a great solution here! About your asking, here I give you my thoughts:

    1. The way you validated the email using HTML and JavaScript is really interesting and I didn't know that method. In my case, I did the validation using a regex expression. Like you said, your solution is more clean. So I think both ways are good because it satisfies the solution. Remember that there's not only one way to solve something. One thing I could say you is that the prompt function you use to confirm that the email was sent successfully is quite aggressive, because users can't do anything until they click 'ok'.

    2. I changed the position of the hero image modifying thegrid-template and then adding grid-column and grid-row to the elements. Thus, I can reorder the entire template. If you have any doubt, you can review my solution or send me a message.

    I hope this can help you.

  • Carlos Guzman•285
    @guztrillo

    Hey Chris, great solution! I know you focused only on the the two resolutions that the challenge indicate you, but you as frontend developer, need to satisfy more than two screen types. You need that your clients can look your website from the right way on any device, or at least, a vast majority of devices.

    You can achieve this by multiple methods, from using just CSS Grid or Flexbox, but one common way is using media queries, that reviewing your code, you already know how to use it. So you only need to add an extra media query.

    Still is a great solution and looks clean. I hope this help you! Keep coding.

    Marked as helpful
  • Carlos Guzman•285
    @guztrillo

    Hey Andy, I loved your solution!!! The tablet design you made is awesome and I didn't expect it at all. Really really good.

    The only thing I think you missed up was the background for the desktop design. The rest of it is great.

    I can't wait to keep reviewing your job.

  • Carlos Guzman•285
    @guztrillo

    Hey Prabhash, awesome job and kudos for using React. But I don't quite sure if this is the reason your solution have a lot HTML issues. You could try to review the report and see if you can fix those problems.

    In the other hand, the image seems to have aspect ratio problems. You could try adding the properties width: 100%; height: auto. Also trying with object-fit: cover. If you already tried this, maybe you overwrote some property from a parent tag.

    I hope this help you. Keep coding!

  • Carlos Guzman•285
    @guztrillo

    Hey Caio, nice job. Just a couple of thing you need to know in case you haven't corrected it yet:

    • Take care the aspect ratio of the image. One classic simple way is to use width: 100%; height: auto. This will prevent the image deforms. In case doesn't work well, you could try to add object-fit: cover.

    • When you click the 'send button', the message and border color from the input remains doesn't hide. You could fix this adding a setTimeOut to the function that is in charge for this behavior.

    I hope this help you.

  • Carlos Guzman•285
    @guztrillo

    Impressive job Navid! The design is really well made.

    I have a suggestion but it depends of personal taste, I guess. You could erase padding left and right from the image on the mobile view. I think this fix would fit so much more with the solution design.

    Also, you should review your report and fix the accessibility issue. It could seem like an minor problem, but could be helped to people with accessibility problems.

    I hope this help you, keep coding!

    Marked as helpful
View more comments