Skip to content
OverviewSolutions
11
Comments
10
Daniel Montoya
@dnewbie25

All comments

  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    I really loved your changes on this one! The contrasts are pleasing to the eye and even with the bright colors it is easy to read. For this one, the design is on point, you already got the layout concepts solid. The only issue is with the HTML tags. It would be good that you start using semantic tags and not just div elements. Also, regarding the heads, it is a good accessibility practice to increase the <h> tags by one. You should have at least one <h1>, and the next tags should increase by one, h2, h3 and so on. It is not a big deal, but it will do wonders when people with vision impairment use screen readers, making the device to read more accurately the content on the page.

    Marked as helpful
    0
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hi! This is a good project and you did a great job with the alerts when the fields are empty. The only issue is that I can still click on the "claim your free trial" button with all the fields empty, and it reloads the page without showing any warning messages. For this case, there should be an event listener for the button, so once it is clicked, it checks if the fields are empty and if the regex for the email is correct. Apart from that, everything is working great. Remember that in Javascript you might want to use preventDefault() when you don't want that the page gets reloaded when a form is submitted.

    Here's the link in case you want to give it a look: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

    Marked as helpful
    0
  • Biljana Kotevska•130
    @BiljanaKotevSubmitted over 2 years ago

    I tried to center the image vertically with align item but it would'nt work so I used margin, want to make sure that's OK. Also if the classes I used are OK.

    QR Code Component

    1
    Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hello! I see you had some trouble centering vertically. When you have this type of components, you can use display: flex as an easy way to center the container. You declare the display as flex for the body and then adjust the alignment. It would look something like this

    body {
   display: flex;
   justify-content: center;
   align-items: center;
}

    The above should center your container as well as the element with the class attribution you have.

    Flex can be sometimes hard to manipulate when you have many elements, but this challenge is a good place to start getting used to it. Take a look at this guide:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    After that, you can use flexbox inside the container to position the QR and the text.

    0
  • HutHut•310
    @j-hutchisonSubmitted over 2 years ago

    The suggested languages for this challenge didn't incl. javascript, is there a way of implementing the validation messages on form submit w/o using javascript?

    Sign up form using Flexbox / Grid

    1
    Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hi! Yes, there are a couple of ways to make a validation without javascript. You can use plain HTML with the pattern attribute, so you can specify a specific regular expressiom for that field. After having a good pattern you can use CSS to customize the error message, but sometimes it takes a good amount of CSS code. This is the best tutorial I have seen about it:

    https://css-tricks.com/form-validation-ux-html-css/

    If you want to try another programming language, you would need to use a framework like Django, Flask or Ruby on Rails. This is because by default only Javascript is natively supported by the browsers. You can use many languages, but only through a framework. Ruby on Rails is a good framework since it allows you to manipulate the frontend smoothly.

    https://stevepolito.design/blog/rails-real-time-form-validation/

    Marked as helpful
    0
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hi! Your design was on point. I see you created the desktop version first and would like to see the mobile as well. The only thing I would modify is the button border. When you hover over the button, that action creates a border of 1px, so when that happens it seems like all the text goes up a little bit. An easy way to solve it is by defining a border for the button the same size as the border you want when the users hover the cursor over it.

    You create that border, but set the color as transparent. That way, when people hover the button, the text won't go up. It would be like this:

    button {
   position: relative;
   cursor: pointer;
   border: 1px solid transparent; //->>the border is defined but left as transparent
   border-radius: 100px;
   padding: 15px 35px;
   margin: 5px;
   font-size: 14px;
}

button:hover{
   border-color: hsl(0, 0%, 95%); // this will change the color without make that movement in the text
}

    The above is only if you don't want that text movement. Otherwise, there's no need to change it.

    Marked as helpful
    0
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hi! I liked the design and how you accomplished it. The responsiveness is smooth and items flow in a good way. The only thing that I would change is that the Bill, Custom, and Number of People fields accept 0 and negative numbers as input, giving Infinity or -Infinity as a result since a division by zero is not defined. This is the only thing I would modify, that the tip calculation should be done only with positive numbers to avoid that kind of result.

    Overall, you did a really good job!

    Marked as helpful
    1
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Hi! Really good project you have here. The design was on point and the functionality is good. The only thing that should be modified is the input for the number of people. When I try to use zero as the input it shows the alert message in red, but I can still use negative numbers and it accepts the input, making the tips a negative number as well. Try to make the alert message to be displayed with negative values as well.

    But, apart from that, you did a wonderful job!

    Marked as helpful
    1
  • Elena Barden•170
    @metehnaySubmitted over 2 years ago

    i couldn't figure out how to color overlay image without lowering opacity. so image ended up with 0.5 opacity :(

    Stats Preview Component

    1
    Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Excellent job with the design. A simple solution to color the image is to create another <div> element that lies on top of the image. Set the height and width of that new div the same as the image, and then change the background color and opacity of that new <div> to the desired one. That way you won't need to start editing the image properties.

    Also, try to use semantic tags for the following challenges. For example a <main> tag and at least one <h1> tag. You completed the challenge, which was replicating the design, but it would be a great bonus to apply semantic HTML for people with vision impairment. Screen readers will work better when the semantic tags are used.

    Apart from that, you did a really good job!

    Marked as helpful
    0
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Really good job! The HTML code is neat and you have great responsiveness applied. One thing that you could do to improve accessibility is to increase the heading tags by one. If you want to have headings of different sizes, you can change them using CSS, but it is a better practice to increase headings in order. You have a <h1> tag, so instead of using an <h5>afterward, you should use an <h2> tag and modify its size with CSS. This should improve accessibility for people who uses screen readers.

    Marked as helpful
    1
  • Daniel Montoya•320
    @dnewbie25Posted over 2 years ago

    Good job with the design. As a suggestion, Frontendmentor offers an HTML validation when you're submitting your solution. It would be good to correct the accessibility issue marked down by the platform. Try using a footer tag, like this one at the end: <footer class="attribution"></footer>

    1