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!
Hello devs, I would like an analysis about this challenge and about the source code that was developed for this project. I accept constructive criticism and tips on how to improve it, thanks for the advance.
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 :-)
First completed challenge! I seem to have some issues with padding when it comes to smaller sizes (~450 px or smaller), the screen seems to force a scroll and I'm not sure why. Advice on how to write more concise code and advice about responsive design would be particularly helpful. Thank you.
EDIT: Oct 22, 2021 - I re-uploaded the code with some semantic corrections as well as a fix to the responsive design. Thanks for the great feedback!
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 :-)
Hello, this is my first challenge, and i'm learning css and html, so any constructive criticism is welcome, p.s. sorry for my english, i'm brazilian and i'm still learning english so i'm using google translator
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 :-)
Hey everyone !
With this projet, I realize that I wasn't good enough in responsive design.
So I'll reread doc for it, but if you have any site where I can learn some tips, feel free to send it !
Have a good one !
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!
@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 :-)
Any suggestions would be greatly appreciated.
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.
Keep coding :-)
Hi Nayana, the overall result is nice, it looks good on desktop but i can't say the same for mobile screen.
Experimenting is always a great thing because it means you are curious and you want to understand deeply what you do. This is the kind of attitude that allow you to grow, well done :-)
Now i tell you what i learned (and i'm still learning) about positioning! Basically position absolute, relative, block are not longer in use when the main goal is to make something responsive, so a good question to ask to yourself (before starting the project) would be: Do the items need to be responsive? If so, then the best choice is to apply flexbox or grid technique! Rarely you need positioning items with float etc.. But it happens! The main focus though it must be responsiveness. The problem in your implementation is also the workflow, it's not mobile first! I suggest you to change approach, you will understand the benefit of doing so!
Honestly it's the first time i saw variables written that way, i'd rather write variables for --font-size. Usually larger projects have lots of different measures. Personally i wouldn't do the way you do, it's very time consuming.
Hope it helps a little, keep coding :-)
I'm done with this project but something confuss me. How to make the line or in my code is border-top is full width, not crash with the padding? Please give me your feedback
Hi, in your case you could delete border-top, in HTML add a <hr> tag right here:
<p class="city">London</p>
<hr>
<div class="social">
then you can style it like so
hr {
padding-right: -3em;
padding-left: -3em;
border: 0 none;
height: 1px;
background-color: choose a very light grey color
color: choose a very light grey color
}
you have padding: 3em in class .content if you want an extended line you need to take that padding (left and right) off! It should work.
Try in your text editor the above code, hope it helps, keep coding :-)
Hi, I am a total beginner in programming can you please check my codes if I write it correctly or is it bad so I can improve it. Please critic my work. Thank you.
Hi, great result on this challenge, full responsive; in my opinion you used correct semantic HTML elements.
<div></div> , <main></main> etc... Of course that's a small project but for a larger code base it's better when the code is legible! With that being said, well done!Keep up the good work :-)
I struggled the most with the background elements on this one. But once I figured it out, the rest was smooth.
Something I'm not certain about is how to fix the accessibility issues that the solutions page shows. The documentation provided when I visit the error is confusing to me. I've tried to fix it on other projects but just end up with more errors.
Hi, it looks good, good result on this challenge! The root of the problem for what i see is the absence of semantic HTML, that's the reason you have those issues, i try to explain something.
<body> opening you have 2 <img> tags, starting right away like this it's not a good practice, you should open a <main></main> element after body and wrap all the code up to <footer> element, like so:<body>
<main>
all your code
</main>
<footer>
footer code
</footer>
</body>
The main element contains the card which is the only thing in the page, so it's the main content; the footer though is not part of the main content because <footer></footer> has a specific meaning in a web page, typically contains information about the author of the section, copyright data or links to related documents. I guess by now you're starting to understand what a navigational region is.
<div></div> elements which are used mostly for styling purpose! For example i saw the last part of the card is kinda messy in HTML, you wrapped all individual headings in divs whereas you could use an appropriate element like an <article></article> and group together what it needs to be together, like so:<article>
<h3>80k</h3>
<p>followers</p>
</article>
I saw you used <h1><h1> heading, i used <h3></h3> instead because h1 can't be reused and heading have a discending order in the page.
Hope it helps, keep coding :-)
Hello, please feel free to make corrections this is my first HTML & CSS project.... I really hope to get a feed back from y'all
Hi, nice result on this challenge, it looks good either mobile and desktop with no media query. Well done!
font-size should be smaller and it should be position at the bottom edge of the page. I'd also recommend checking the report and try to resolve those issues, some of them are quite important for accessibility!Keep coding :-)
I still thinking that I need help with media queries. (?)
Hi, good result on this challenge. Well done!
min-width: ..., that's it! You wrote the last media query max-width: 900px in which there's the background-image, you could do it at the beginning, what you've done doesn't really make sense because it's like saying "make changes when the width is smaller and equal to 900px" but you already took care of that, so you can delete it and move that code in your first body. The first media query is right!Hope it helps a little! Keep coding :-)