Skip to content
OverviewSolutions
5
Comments
9

Ayoub1Dev

@Ayoub1devLeeds, UK195 points

I am front end developer. I have used HTML, CSS, SASS, JS and some node.js in my projects. I am looking for freelance opportunities. If you know someone check my portfolio/website, I am available :)

I’m currently learning...

Practising JavaScript and good development practices.

Latest solutions

Latest comments

  • Ayoub1Dev•195
    @Ayoub1dev

    Really nice. Looks, works and feels awesome.

    Did you use any frameworks?

    I have seen that you made it accessible for different devices using aria-label, but, you did not make it accessible for us XD. I dont't know what each icon does when I hover over it it should display a message saying what it does.

    I guess you already know, but just in case you don't, you have to add the title attribute with the function of the btn.

    <button type="button" class="menu__btn" aria-label="upload file" 
style="user-select: auto;" ** title="Upload File" ** > .... </button>
  • Ayoub1Dev•195
    @Ayoub1dev

    You want me to critic, OK.

    You have a vertical scroll, it needs removing, : -0

    Joy how much to you like lambos :)

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    Hola amig@, he econtrado un problema de accesibilidad muy molesto. Cambio a ingles : ) , para que otros tambien aprendan de este fallo

    PROBLEM

    The accessibility is that when any of the input fields is click the 0 stays on the input field.

    • Example If I try to type 21 euros the value typed is 210 instead of 21.

    WHAT CAUSED THE PROBLEM

    The problem is because you have set the value of the input to 0 in your HTML value="0"

    SOLUTION

    Remove the value atribute from your HTML and add a placeholder attribute. placeholder="0"

    chupado

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    When I previewed your site I found a vertical scroll. Using DevTools I found that you did not reset the margin of the body.

    • Like this:
    body {
   margin: 0;
}

    This will remove the extra space and your wrapper will be 100% of the viewport.

    TIP It is a good practice to start with this on your projects, which will set all elements to the styles inside the curly { } brackets.

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

    Hope this helps.

    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    HTML

    <div class="img"></div>

    CSS

    .img {
    grid-area: img;
    background: url(/images/image-header-mobile.jpg);
    background-color: var(--img-1-color);

    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
}
    Marked as helpful
  • Ayoub1Dev•195
    @Ayoub1dev

    I did not use an img tag in HTML, I just set the background image of the container div. Check out my code for insight!!

    Marked as helpful
View more comments