Arturo Simon

@artimys New Rochelle, NY

Mentor Score

1,730

Years of backend work and not enough frontend.

Latest Solutions

Latest Comments

  • Arturo Simon has commented on Harold's "HTML & CSS USING GRID" solution

    0

    Well done Harold, looks good and is responsive.

    Design Feedback:

    • the styling for your btn-trial is better applied to your anchor tag inside. If you need to make the anchor tag behave like a div. Add display: block to your link. Currently the only section that is clickable is the text. If clicking on the purple background nothing happens.
    • add a focus style to your form submit. At the moment I can't see any visual cue when I tab to it.
    • the "Terms and Services" usually would redirect a user to a separate page. Anchor tag with a hover state is recommended

    Javascript Feedback:

    • There's two classes you toggle between in your form but I don't see any styling for .valid and .invalid, could be removed.

    • Add an event listener using the "submit" event instead of the onclick=validate. So when the form fails validation you can stop the form from submitting.

    form.addEventListender("submit", validateForm);
    
    function validateForm(event) {
        event.preventDefault();
    }
    • For the error styling of the text boxes. I suggest wrapping "each field with their error span" into one div. Example below then when "First name" becomes invalid you can add the .validate class to the div which takes care of the error styling like the border color.
    .validate {
       input {
          borderColor: "red";
       }
    }
    <div id="some-identifier-for-first-name" class="validate">
        <input type="text" id="fname" name="fname" placeholder="First Name">
        <span id="error-fname"></span>
    </div>
    <div id="some-identifier-for-last-name">
        <input type="text" name="lname" id="lname" placeholder="Last Name">
        <span id="error-lname"></span>
    </div>
    • I would challenge yourself to make a new function that accepts two arguments, the id of the field error div and an error message. That way you consolidate calling activating the error styling and messages.

    Overall great job πŸ‘πŸ‘

  • Arturo Simon has commented on Bumble Bee's "profile card component using html and css" solution

    0

    Nice work Blessing Peter. I'll leave some feedback below. Hope it helps.

    • The 2 background images are tricky. An easier solution I highly suggest is using multiple background images. Link here for more info

    To improve on your current background solution because they are position: relative they are part of the flow of elements and is possible that it makes your content wider than the viewport (browser screen). You can try position: fixed and play with positioning using left, right, top, and bottom.

    • The <font> tag is old and obsolete. Instead use <span> as a replacement. For this tag I would recommend the <small> tag.

    Keep on coding!! πŸ‘

  • Arturo Simon has commented on Harold's "HTML & CSS USING GRID & JS" solution

    0

    Nice work Harold πŸ‘ the site responds well. I have a few suggestions.

    Design feeback

    • The "Try it Free" and "Get Started For Free" button could use hover styles
    • The 3 middle sections could be centered on desktop layout. Add a max-width and margin: 0 auto to center it

    HTML feedback

    • Huddle logo - add a more descriptive alt text like "Huddle Logo"
    • For footer phone anchor tag, use tel: in the href tag. Example: <a href="tel:15431234567">+1-543-123-4567</a>
    • For footer email anchor tag, use mailto: in the href tag. Example: <a href="mailto:[email protected]">[email protected]</a>
    • Try the <input type="email"> for your input email address
    • I recommend making the footer social icons with anchor tags so it can utilize the tab key

    Keep on coding!! πŸ‘

  • Arturo Simon has commented on Esteban CastaΓ±o Rivera's "Testimonials grid section" solution

    1

    Great job with the challenge Esteban πŸ‘πŸ‘. You captured the testimonial card details really well.

    The only feedback I will provide is to organize your css classes to remove duplicating styles. For classes div.testimonial__grid1 through div.testimonial__grid4, they share a lot of common styles that make up the card.

    I'll leave a simple example on how to approach it below. You can change the names to your liking. I'm just naming them using the BEM way. More info on BEM if interested

    .testimonial-card {
        display: flex;
        flex-direction: column;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 10px 10px 110px -51px rgba(0, 0, 0, 0.75);
    }
    .testimonial-card--grid1 { 
    // add specific styles that make grid1
    }
    .testimonial-card--grid2 { 
    // add specific styles that make grid2
    }
    
    <div class="testimonial-card testimonial-card--grid1">
        ....
    </div>
    <div class="testimonial-card testimonial-card--grid2">
        ....
    </div>

    Great work!! Keep on coding πŸ‘

  • Arturo Simon has commented on Rayane's "Huddle landing page with a single" solution

    1

    Nice job Rayane, πŸ‘ the mobile and desktop layout looks great. The typography looks great

    To answer your question about using the wrong image version on mobile. Depending on the size of the image it could greatly affect the user experience who don't have the best cell network connection(slow 3G) or have a limited data plan for their phones. It creates a longer wait time for your site to load and could make a user impatient and move on. For most who have fast cell speeds and on desktop computers will most likely not feel it. Which is why we should aim to make our sites as optimal as we can and always consider users with slower speeds

    Design feedback

    • I tried tabbing through your links and button and noticed the outline: none was removed from your button. For accessibility purposes it's actually a crucial thing to not remove any styling that that can help identify a focus state of interactive controls. If you do remove it then it's highly advise to customize the styling so it at least fits with your design.
    • Look into the resizing the desktop illustration when the design switches to desktop layout. It creates a horizontal scrollbar for the viewport.
    • Hover styling for the social icons would be helpful.

    Keep on coding!! πŸ‘