Skip to content
OverviewSolutions
17
Comments
70

Marlon Passos

@MarlonPassos-gitBrazil920 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Marlon Passos•920
    @MarlonPassos-git

    hey bro. i try to acess the site but. Always when i try start a looping when is not possible for me finish the register

  • Marlon Passos•920
    @MarlonPassos-git

    hi John, nice solution.

    I really liked the way you used to style the hover color of the social icons. What was your strategy to get to that role and the color is the same as the designer?

  • Marlon Passos•920
    @MarlonPassos-git

    Hi Dave, great job as always. Flexible, accessible, functional and very beautiful. I really liked the care you gave when the user has JS disabled (It doesn't happen much but it's good to be careful). It becomes more and more difficult to find something wrong 😅. However I wanted to point out 2 little things that I noticed.

    .that shortcut at the beginning to skip navigation was a good thing, but I tried to access it through the tab "Speedy Searching" and "Easy Sharing" and it wasn't possible, it goes straight.

    • I liked that when I access via Tab the buttons also activate the hover effect, it would be nice if the elements of footer and "Ask" also activated.

    Keep up the good work 👏

    Marked as helpful
  • Marlon Passos•920
    @MarlonPassos-git

    Wow this project was very cool, it must have been a lot of work. Congratulations man. It really looks good, flexible, functional and ok with the original version. I don't know anything about the framework, so I don't have much to suggest, but a few things I saw and I'm going to point out.

    • In the form on the phone part it is accepting letters as something valid, I recommend you leave only numbers

    • both "3886 Wellington Street Toronto, Ontario M9C 3J5" and "Australia" "USA" could be <adress> tags make more semantic sense

    • "OUR COMPANY LOCATIONS CONTACT" should be inside a <nav> tag

    • Items inside "App Design; Web Design Graphic Design" are not accessible by TAB, this is not very good for accessibility

    • The tablet version in the location area is very strange, I don't know if that's how it was in the designer, but I found it weird. I would increase the size of the map, make it centered or something. See the screenshot https://prnt.sc/1vwev9g

    • Where you put phone numbers you could have used a <a href="tel:+496170961709"> tag that would cause the user to click would already take them to make a call

    • Put <input type="number"> in the phone form to show only numbers on the android keyboard

    • And type="email" in the email part to pop the @ easily for the mobile user

    • There are a lot of accessibility errors in your project report, it would be nice to read it, we always learn something new there.

    Again congratulations for the project was very good. (I hope to reach this level someday 😅)

  • Marlon Passos•920
    @MarlonPassos-git

    Good job,

    some suggestions

    • "Proceed to Payment" could be a <a> tag
    • It would decrease the font size a little
    • Increase the size of the card a little
    • change the repeat to background-repeat: repeat-x; because in this way the background breaks on big screens
    • Add a hover effect to "cancel" and "change"
    • Change your card padding to clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);, this would automatically change the value from 20 to 40px flexibly and without media query
    Marked as helpful
  • Marlon Passos•920
    @MarlonPassos-git

    Congratulations on your completed 10 Challenge 🎉🎉🎉

    I really liked your solution, flexible, functional and similar to the original version.

    However I have some suggestions for you to improve even more.

    • "Terms and Services" should be an <a> tag as this usually takes the user to another page

    -As a good practice and to avoid future bugs, I recommend putting the script tag just before the closing </body> tag rather than in the <head> section of your HTML, any doubt I recommend reading https://levelup.gitconnected.com/all-about-script-87fea475b976

    • Another nice thing to do is enable the hover effect when using TAB, just add , :focus-visible to your hover CSS. Example
    .intro__button:hover, .intro__button:focus-visible {
        cursor: pointer;
        opacity: 0.65;
 }

    • When I get out of 750px width the designe shrinks at once, I think if you set a maximum width in the form and only changed the button it would leave a lot more space for the user to interact.

    • About the title, there is a really cool technique where you could make the font size of the title flexible media query using clamp(), I recommend you read this article https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case

    Marked as helpful
View more comments