Skip to content
OverviewSolutions
24
Comments
7
Adeniyi Smart
@Iamweird2

All comments

  • Matheus Pergoli•130
    @matheuspergoliSubmitted over 2 years ago

    I don't know yet how to validate an email properly, so if you have any feedback I'd appreciate it :)

    Ping Coming Soon Page

    2
    Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Hi Matheus👋, nice job so far👏. To improve your code, follow these tips

    1. Avoid styling elements by name or id, but style elements via class

    2. According to the generated report, you used an element not currently supported by many web browsers, try using an alternative.

    3. Check the generated report and try to resolve as many HTML issues most of which are issues from the CSS transform property.

    4. For form validation, you can use regex in your javascript file, you can find a link to a very simple example below:

    Text

    I hope this helps, Do have a nice day 👍

    1
  • Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Very nice work @AnniK93 to improve your code, you can do the following

    1. use class selector allthrough and avoid styling elements via tag name and id to avoid issues with specificity. for example, add a class(.body) to the body element then

    2. center the container by .body{ display: flex; justify-content: center; align-items: center }

    3. avoid using static units for font sizes such as pixels but use units that resizes based on browser size such as em or rem.

    I hope this helps. Have a nice day.

    Marked as helpful
    0
  • Andrew•90
    @L1m1tzSubmitted over 2 years ago

    This is one of my first js projects

    I've done most of the challenge just missing the right colors for the inactive buttons and some styling for the response.

    any tips on ways to improve will be greatly appreciated.

    Interactive rating component using HTML, CSS & JS

    2
    Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Hi, nice work so far.

    1. To be very sure of the colors, you can open the design file on your browser, then open developer option by (control shift i) and search around for a dropper. you can also search online how to find a color dropper for your web browser.

    2. You can also center the details on the submit page to improve the aesthetics.

    3. Endeavor not to use style elements by tag name or with id, using classes all through saves time debugging and prevent issues with specificity

    4. Using static units such as pixels for font size is also not advisable since page sizes vary, specify for font size in relation to the browser window size using rem or em.

    I hope this helps. Have a nice day.

    Marked as helpful
    1
  • Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Hi, nice job so far, In your HTML, add <html lang="en"> Then try generating a new report, I think most accessibility issue is because of the report.

    Marked as helpful
    0
  • Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Hi, nice job so far. To improve your code, you can do the following

    1. Add an hover effect to the button by .dice-btn:hover{ cursor: pointer; box-shadow: 0px 0px 40px hsl(150, 100%, 66%); }

    2. Try not to style via id and tag name but use classes instead

    3. One should be able to input an advice number and then call the advice when you click the button

    I hope this helps even a little. Have fun

    0
  • Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Nice job so far,

    From previewing the site, i found a few things that needs adjusting

    1. validate the input fields
    2. add an hover effect on the button
    3. change the background-color of the button om hover
    4. to validate the email, you can check this site on hint Text
    Marked as helpful
    0
  • Adeniyi Smart•520
    @Iamweird2Posted over 2 years ago

    Hey, nice work so far, To center the container, add the following to the body:

    display: flex; justify-content: center; align-items: center;

    then you can remove margin: auto; from the container.

    also you can move the attribution all the way down by adding the following:

    body{ position: relative; } .attribution{ display: absolute; bottom: 10px; }

    1