Skip to content
OverviewSolutions
9
Comments
74

Davide

@Da-vi-deItaly1,705 points

An aspiring Frontend web developer.

Latest solutions

View more solutions

Latest comments

  • Davide•1,705
    @Da-vi-de

    Hi, it's good to see you tried to make it work, this project was my first one and i thought it was easy but it's not at all. So, in order to make it work you need Javascript, JS is needed not only for that, the component is called "interactive" because it changes content when you move the bar! The slider should have a mouse event like so:

    slider.addEventListener('mousemove', function() {
 const activeSlider =  slider.value;
 const sliderColor = `linear-gradient(90deg, rgb(165, 243, 235) ${activeSlider}%,
 rgb(234, 238, 251) ${activeSlider}%)`;
 slider.style.background = sliderColor;
});

    As you can see,

    • first you need to get the value, the value is an attribute that resides in your slider range in html file, like so <input type="range" min="0" max="100" value="50" step="25" >

    • i saw your code and you miss the step attribute which is important when you need to make the slider interactive.

    • then you need to set the color so that it changes when you move it and that will be the background.

    • Yes, the slider behave differently across browsers but recently i've found a nice article that teaches how to make a custom range input that looks consistent across all browsers! Here's the link: article link range input

    If you are interested in knowing more you can see my solution where there's the most important JS part needed to make the component interactive! Hope it helps, keep coding!

    Marked as helpful
  • Davide•1,705
    @Da-vi-de

    Hi, congrats, it's a really nice result for this challenge. Good use of semantic HTML. It's nearly perfect, i noticed the instagram card misses that peculiar angle. You need a pseudo element and positioning, i did it this way:

    .instagram {
    position: relative;
}

.instagram::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    top: -1px;
    left: 0;
    background: var(--instagram-color;)
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    The cursor doesn't need to be pointer, it would be great if there was the hover effect on cards.

    Good job, keep coding :-)

    Marked as helpful
  • Davide•1,705
    @Da-vi-de

    Hi Elena, it's not a bad result for this challenge but it will be nice after making some changes in your code.

    • First thing, i'd recommend checking the report and try to resolve those issues. I try to guide you for better understanding:

    • The alt attribute must always be included in images (except decoratives images, the attribute can be left blank) tags.

    • The issues about landmarks is because your HTML is not semantic, that means it can't work properly with assistive technology. You should read about landmaks by clicking the link Learn more but i tell you what you miss in your code.

    • <main></main> element rght after the body tag, read about it here

    • The h2 heading needs to be a h1 instead! Heading elements should be in a sequentially-descending order, there always must be a h1 heading.

    • The attribution goes in <footer></footer> element.

    • The padding problem you referred is casued by a wrong approach, which is not mobile first. You used a media query that indicates a width smaller than 600px in which you applied just the padding but the rest of the code is for desktop, you need to resize your entire card for a small screen. This doesn't happen when the workflow is mobile first because you start working for the smaller device width, you can surf the web and you'll find tons of articles tutorial etc..

    • By the way, that little horizontal scroll bar is there because the card width is larger than the mobile width, the CSS property overflow controls the scrollbar behavior when it's set to hidden you don't see scrollbars anymore.

    Hope it helps a little, keep coding :-)

    Marked as helpful
  • Davide•1,705
    @Da-vi-de

    Hi Caio, it's a nice result as first challenge, well done!

    • Good use of semantic HTML except at the beginning after body tag, the container shouldn't be section but main instead. section is not semantic and it's not the right region landmark for containing big code blocks.

    • On mobile there's a horizontal scrollbar, you can get rid of it by adding overflow: hidden to your body in CSS.

    Keep coding :-)

    Marked as helpful
  • Davide•1,705
    @Da-vi-de

    Hi, i've been there so i know the struggle! I suggest you to follow one of the best instructor, Kevin Powell, here is the link to one of his free videos where he explains clearly the main concept of mobile first approach! You can start from there, for more insight about it or any other subject you can also follow FEM slack channels where you can learn more from the community!

    • The result is not bad but i'm sure it will be nice after making it full responsive. My tip is, if you don't work with you dev tool open, start asap. In order to do that you need to open the dev tool by right clicking the mouse and select inspect and then click the two mobiles icon on the right, set the width to 350px, start from there, once you're done start adding media queries when you see your UI changes like so @media all and (min-width: ...) { } Keep in mind that you need to make a decent/good/as perfect as you can job for three main devices: mobile, tablet, desktop.

    Hope it helps a little, keep coding :-)

  • Davide•1,705
    @Da-vi-de

    Hi, it's a very nice result for this challenge that looks super easy to implement but i rember it has tricky parts! Well done.

    • The only thing i noticed, you skipped the tablet version, maybe because you didin't see the design fot it but that doesn't mean going straight from mobile to desktop, it simply means that there's nothing to add, usually tablet version is more like the desktop one.

    Keep coding :-)

    Marked as helpful
View more comments