Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Log in with GitHub
OverviewSolutions5Comments9

All comments

  • Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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>
    0
  • Joy Shaheb• 215

    @JoyShaheb

    Submitted

    If I Missed any web dev best practices, let me know. Suggestions & Criticisms are highly appreciated 💖

    Single price grid component

    2

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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

    1
  • Fran• 25

    @FranciscoMi

    Submitted

    Pardon this little license. To do something different, I decided to transform the tip calculator into a new version in Spanish.

    On the other hand, to establish concepts, I chose not to use flexbox, in this way I settled basic knowledge

    I recognize that I have had a big jam designing the CSS classes so that they can be organized. I have heard about the BEM methodology and I don't know if it would be appropriate to learn it. I would appreciate your most humble opinion. Thank you all

    Interest rate calculator with HTML, CSS and Javascript

    2

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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

    0
  • Jan• 135

    @trostjan

    Submitted

    My second challenge, now really starting to understand how powerful mobile-first approach in combination with using rems and ems can be for quickly building a responsive website. Any feedback is highly appriciated. :)

    Mobile-first using Flex

    3

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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

    0
  • Zaid• 225

    @ZaidMarrie

    Submitted

    I have been having difficulty with controlling images and I was unable to get the image to fill its parent container without a min-width. If there is another I could accomplish simple or better results please let me know. Feedback is always much appreciated.

    Stats Preview Card with Flexbox

    2

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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

    0
  • Zaid• 225

    @ZaidMarrie

    Submitted

    I have been having difficulty with controlling images and I was unable to get the image to fill its parent container without a min-width. If there is another I could accomplish simple or better results please let me know. Feedback is always much appreciated.

    Stats Preview Card with Flexbox

    2

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    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

    0
  • Aaryan Nayyar• 60

    @Arreyawn

    Submitted

    1. I just couldn't find out how to get the purple overlay on the photo, I tried to get the overlay but it only came on the left side, not on the photo itself.

    Stats Website using Html and CSS

    3

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    You can also do that by setting another div* to position: absolute; over the image.

    *The div should have a transparency value like rgba()

    1
  • Aaryan Nayyar• 60

    @Arreyawn

    Submitted

    1. I just couldn't find out how to get the purple overlay on the photo, I tried to get the overlay but it only came on the left side, not on the photo itself.

    Stats Website using Html and CSS

    3

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    I didn' check your code but I think I can help you.

    Hope this helps :)

    1. To display the overlay you just need <div class="img"></div> without an img tag.

    2. In CSS you set the width and height of the container

    3. You have to set the background property (NOT background-image) to the url() of the image and following the url specify the color, like this: background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);

    4. Here the intersting part. There is a property in css called background-blend-mode, it contains many values but we are intersted in the overlay value, like this : background-blend-mode: overlay;

    HTML

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

    CSS

    .img {
    width: 460px;
    background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: 100%;
}
    1
  • P
    Ivan Dodig• 70

    @IvanDodig

    Submitted

    This is my first project on a frontend mentor. I couldn't figure out how to position the circles in the background, any feedback is welcome.

    Profile card component - HTML CSS

    3

    Ayoub1Dev• 195

    @Ayoub1dev

    Posted

    Great job @IvanDodig i have also just started on front mentor and i have just uploaded my challenge. I have used just HTML and CSS so make sure to check my code because you will understand how to use the background-image property and the background-position property. Good luck and lets continue the journey together. :-}

    1