Skip to content
OverviewSolutions
11
Comments
6
Maykol Vallejos
@maykol-vallejos

All comments

  • Kari•40
    @kouglasSubmitted over 1 year ago

    live link doesn't render correctly in chrome but does in firefox, safari, sigmaos

    qr-code-component-main

    3
    Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hi, I was reviewing your code and I have some suggestions to make:

    -The first one is that you should use a CSS reset to remove the default styling of the different browsers. I think a previous comment mentioned it to you, for that you could use the following code:

    *{ margin: 0 padding: 0; box-sizing: border-box; }

    • Once the CSS is reset, you can center your card with flexbox or grid, in this case use grid to center it in your code, add the following code to your stylesheet and it will be centered for any responsive browser:

    body{ display: grid; place-items: center; min-height: 100vh; }

    -Lastly I would like to suggest you to try not to use "px", it is a bad practice when you are just starting in responsive web scope, especially with font size, for that I recommend you the 62.5% trick, you can check it in the following link:

    https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

    I hope the suggestion helps you, congratulations for your coding, keep it up, success in future projects!

    Marked as helpful
    0
  • Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hi, how are you? I was reviewing your code and I saw that you had problems to center your card, which is not very responsive to use custom margin for accessibility issues, responsiveness and resizing on smaller screens (such as 768 px), your card will be displayed sideways and not in the center. So to correct this you can center it using flexbox or grid, in this case use grid with respect to your code, if you replace the following classes in your stylesheet you will see that it will be centered before any resizing:

    body { width:100%; display:grid; place-items:center; min-height:100vh;

    font-family: Red Hat Display, sans-serif;
background-image: url(./images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-color: hsl(225, 100%, 94%);
font-size: 1rem;

background-size:contain;

    }

    .card{ width: 25rem; margin-top:8rem; }

    section{ display: block; background-color: white; border-radius: 2rem; }

    Finally remove in your stylesheet the classes named: "body,html{ }" and ".attribution{ }".

    I hope these tips will help you, keep it up and may you succeed in your future coding! ;)

    Marked as helpful
    0
  • Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hi, how are you? I was reviewing your code and I saw a very good code structure, readable for changes and with a very good development logic.

    I had a small observation to make regarding accessibility, try not to use "px", it is a bad practice for future projects, maybe now is not a very strong error in this that you developed but in future projects can affect you a lot, and it is not your fault, is that each browser handles its own settings, especially the font settings .., (If you like you can corroborate it on a 768px screen and you will see that there is a brief resizing failure of your project created. )

    So a good practice for it is to use the 62.5% font size technique, you can check the following article to learn about it and apply it for a more efficient work:

    https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

    So you don't worry about making changes if changes are made in the browser. I hope this advice is useful for you. Keep up the good work. Success in future coding! Best regards! ;)

    Marked as helpful
    0
  • Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hello, how are you? I was reviewing your code and has a very good structure, as I saw you used Hexadecimal codes for the colors, I found a small observation that maybe you could help you:

    according to the exercise you mention that when the cursor points to the number buttons change the background to another color (#959EAC;), and when a number is selected change the background to another color (#FC7614), then just replace in your stylesheet the background color of the ".btnRating:hover" class by "background-color: #959EAC;"

    and for the selection of a number I was talking about before, add the following code to your stylesheet:

    .btnRating:focus{ background-color: #FC7614; color: #FFFFFFFF; }

    this more than everything so that when it is selected the change is immediate, I saw that there is a delay when changing it in your class ".is-active".

    I hope this comment helps you Very good code structure and semantics, keep it up, success! ;)

    0
  • Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hello, how are you? Regarding your question it is a very good practice to use a divs structure for a better ordering and understanding of code, maybe suddenly it would be good to understand the difference between section and divs, but both are valid according to the convenience of use. You can see some differences in the following link:

    https://www.educba.com/html-section-vs-div/

    Now I have two observations to make, the first one is that you try not to use "px" for accessibility issues between different browsers, which causes that in some browsers it does not resize or render or is not responsive for not having accessibility to it. Una buena practica para ello es utilizar la tecnica de tamaño de fuente 62.5%, puedes revisar el siguiente articulo para aprender sobre el y aplicarlo para un trabajo mas eficiente:

    https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

    And the second observation is regarding the elements inside the div of type class="section3". It is not a good practice to put a button inside a "p" or "a" tag, if you want to use an "a" tag that redirects you would simply style that tag and not a button as such, for example (following your code in the section3):

    in your html you could replace all your elements with these two lines of simple code

    <a href="#" class="payment">Proceed to Payment</a> <a href="#" class="order">Cancel Order</a>

    and in your stylesheet change the names of the classes ".change:hover button" to .change:hover , and also change the name of your ".payment:hover button" to ".payment:hover".

    In the same way in your stylesheet, change the class name ".payment button" to ".payment" ...inside the class ".payment" add the following elements: width: 250px; text-align: center; (I don't usually use pixels but I do it according to the semantic of your code for this case)

    and finally in your stylesheet change the class name ".order button" to ".order".

    With this you will have a better structure of the html code.

    Very good programming logic, keep it up, good luck in your other coding, success!

    Marked as helpful
    0
  • Maykol Vallejos•200
    @maykol-vallejosPosted over 1 year ago

    Hi, how are you? Look, I have two suggestions to make, the first one is that you try not to use "px" since it is a relative unit, which many times in different browsers do not respond due to accessibility issues.

    For this I suggest you to use the 62.5% font size trick, you can review the following link for a better understanding and study:

    https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

    And the second suggestion is that before coding in your stylesheet you write the following code to standardize your own styles and control the proper resizing, so you will not have problems in any browser you try, since each one has its own style:

    *{ margin:0 padding:0 box-sizing: border-box; }

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING!!

    Marked as helpful
    0