@denik1981Submitted over 3 years ago
Hi Devs! Any feedback will be very welcome.
Thanks in advance :)
Ayoub1Dev
@Ayoub1devAll comments
- @Ayoub1devPosted over 3 years ago
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 - @JoyShahebSubmitted over 3 years ago
If I Missed any web dev best practices, let me know. Suggestions & Criticisms are highly appreciated π
@Ayoub1devPosted over 3 years agoYou want me to critic, OK.
You have a vertical scroll, it needs removing, : -0
Joy how much to you like lambos :)
Marked as helpful1 - @FranciscoMiSubmitted over 3 years ago
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
@Ayoub1devPosted over 3 years agoHola 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
0stays on the input field.- Example
If I try to type
21euros the value typed is210instead of21.
WHAT CAUSED THE PROBLEM
The problem is because you have set the value of the input to
0in your HTMLvalue="0"SOLUTION
Remove the
valueatribute from your HTML and add aplaceholderattribute.placeholder="0"chupado
Marked as helpful0 - Example
If I try to type
- @trostjanSubmitted over 3 years ago
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. :)
@Ayoub1devPosted over 3 years agoWhen 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 helpful0 - @ZaidMarrieSubmitted over 3 years ago
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.
@Ayoub1devPosted over 3 years agoHTML
<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 helpful0 - @ZaidMarrieSubmitted over 3 years ago
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.
@Ayoub1devPosted over 3 years agoI did not use an
imgtag in HTML, I just set the background image of the containerdiv. Check out my code for insight!!Marked as helpful0 - @ArreyawnSubmitted over 3 years ago
- 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.
@Ayoub1devPosted over 3 years agoYou can also do that by setting another div* to
position: absolute;over the image.*The div should have a transparency value like
rgba()1 - @ArreyawnSubmitted over 3 years ago
- 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.
@Ayoub1devPosted over 3 years agoI didn' check your code but I think I can help you.
Hope this helps :)
-
To display the overlay you just need
<div class="img"></div>without animgtag. -
In CSS you set the
widthandheightof the container -
You have to set the
backgroundproperty (NOT background-image) to theurl()of the image and following the url specify the color, like this:background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119); -
Here the intersting part. There is a property in css called
background-blend-mode, it contains many values but we are intersted in theoverlayvalue, 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 - @IvanDodigSubmitted almost 4 years ago
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.
@Ayoub1devPosted almost 4 years agoGreat 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
