Still having some difficulty overlaying color into the image.
I found a solution by adding a pseudo-class ::after into the div where my image is, however, I am not sure if this is the most effective and easiest way to do it. Would like to know if there is any better way to streamline overlaying color into the image.
Thanks!
Hi @h415232,
There is a slightly easier way to do the overlay. Based on your code, since you're using a background-image, you can also use a background-color and the background-blend-mode property. The MDN article has some explanation of the values, but this article shows examples of what all the different values for this property look like IRL when applied with an image and color.
A pseudo-element is an alternative way to solve this, you're on the right track with that! 😊 We'll often use a pseudo-element in combination with the mix-blend-mode property. Mix-blend-mode is best if we're trying to blend the content of an element (instead of just its own backgrounds) or we have a child element we want to blend with its parent. This article covers both background and mix-blend-mode properties with some use cases and examples if you want to see them side-by-side.
A quick note on semantics, you're using <span> and <br> elements inside of a <p> element to style your text in the statistics section. It's better to use semantic elements and CSS to achieve this. You're correct with using a <p> element here, go ahead and make each piece of text it's own <p> (like 10k is a p, Companies is a p, etc.). This is a good place for a list (you could change your .card-info-stats div to a <ul>), and you can put more than one p inside each li element, which will get you the vertical stacking of the text and the horizontal overall layout you already set up with Flebox (you may need to adjust your alignment/justification slightly).
This also makes it more accessible, since not all screen readers will read the content of those spans, but they will read semantic elements like paragraphs and lists.
Hopefully this helps and happy coding!
Per usual when I post a solution on here, I am open to all feedback and tips! Questions: Curious about my use of certain elements in the form, if they are used the right way?
I didn't have anywhere to send the form, so I just made the button type on the submit button to ''Button" so it wouldn't submit and break the page. I added an event listener to the button to toggle a class that hid the rating component and the results component.
I also didn't know how to get the "You selected X out of 5" to show the actual number that I chose on the rating component. Any advice on that would be awesome as well!
Hi Scott,
Well done! Great job with using the type=button on your form (you're spot on with that, we only need a type=submit if there's a server somewhere to send the data to) and toggling the classes 💯
For the selectable ratings, a button element works, as you've done. Another type of input that is a bit more accurate meaning-wise (since we're providing a list of options and a user can only select 1 option) is a set of radio buttons. It takes some styling for the visual overlay of the label over the input, but the ability to select a radio button by selecting its label works to our advantage here.
I also suggest the radio buttons because there's another property of this input that feeds into your question about populating the "you selected X out of 5". We can set the value attribute of each radio button to represent the selected value (the number rating, just like you've done with your buttons), then iterate through the radio group with JavaScript to identify which button is checked, store the checked value as a variable and use that to dynamically update your <p> element with each new selection. In a form, only the radio button that's checked will be submitted, so it cuts down on the looping/checking you need to do.
You've already got the iterating through a loop handled but here's an example that loops through a radio group to see which input is checked so you can see it applied to the radio group. They use a for...of loop, and I'll stick to that with my example, but don't feel like you're locked into doing it that way.
To update the "you selected X", you can create a variable from your #ratingSelected element (let's call this variable confirmRating). To store the checked value, let's create a variable called yourRating. Then update the .innerText property of confirmRating with the value of the selected input (yourRating). So you're dynamically updating the content of the <p id="ratingSelected"> element with yourRating. Altogether, it'd look this:
const confirmRating = document.getElementById('ratingSelected');
function findChecked() {
let yourRating;
for (const radioButton of radioButtons) {
if (radioButton.checked) {
yourRating = radioButton.value;
break;
}
confirmRating.innerText = `You selected ${yourRating} out of 5`;
}
I put it inside a function so we can call the function with our event listener, like the class toggling you've already got 😊
Great job incorporating global variables on the root and making sure your images have alt text!! 🙌 I just noticed you've got two <h1> elements, go ahead and make the heading in the thank you card an <h2> since we should only have one h1 per page.
Hopefully that helps and happy coding!
Hi everyone!
If anyone would like to review my code, that would be great. I would like to know if I structured my HTML correctly, and how I could improve on that front. Also, if there are any modifications I could improve in my CSS file.
Any other feedback, both positive and constructive is always welcome. I'm still new to web development and would like to keep improving my skills.
Thanks :-)
Hi @joshua-cornelsen,
This looks really good! Well done using semantic elements, separating your structure and styling, including alt text, clearing default values and using Flexbox.
Minor tweak to your HTML structure, I suggest replacing the first section element (.qr-code) with an article element since you set this up as your card element and it represents "self-contained" content, basically something (like a widget, a card, a blog post) that can be re-used in multiple places, like we could make 3 more QR cards just like this one and use them around the site.
Sections are good for grouping content (which this does), with a few caveats: they almost always need a heading (h1-h6) and they're a second-choice/fallback if a better element exists, like article in this first case. Your second section element (.details) fulfills this, grouping the content and including a heading. There's not a better element for this one, and you could go either way with a section or a div here. Does the difference between those two cases make sense?
Have you tried using variables on the :root? Your CSS is looking good, this is a next step to play with for a future build 😊. On more complex builds, variables can help a lot with keeping styles straight (like if you have a ton of colors) and avoiding repetition of code. Technically they're custom properties and not "real" variables like in other languages since they're computed instead of stored, but they're often referred to as variables, and we use var(--name) for them (go figure ha).
Well-structured and easy to follow, great job!
please help me im loosing hope to becoming a frontend developer
Hi @Enis67
You did so many things well on this project, don’t give up!
You did a great job using semantic HTML elements including main and h1 👏, you recognized the rating options as a list (nicely done!), you’re following good practices resetting defaults, using global variables on the root, and keeping specificity low AND you’re employing Flexbox for responsiveness in your CSS, AND you recognized elements you needed to manipulate, you iterated through a list, AND used JavaScript to make your component interactive displaying a new message on clicking the submit button. That is a lot! 🙌
One of the most important skills a front-end developer needs is problem-solving. The ability to look at a problem, break it down into individual pieces and then put those pieces back together to create a solution. It is paramount to being a good developer, and that is exactly what you’re doing so keep it up! The tools and the frameworks and all the rest will come. And know that you are not alone, we all struggle with this. (The top photo in that article is exactly how I feel sometimes too)
Here are a few suggestions for your code:
In the html, if you scroll to the bottom you’ll see some commented out sections (Rating state end, thank-you state start/end) from the starter file. Think of these as hints toward one way of solving this.
In your code, you’re using a single card and dynamically updating the content items inside the card. This is one way to solve it. My suggestions are for another way to solve it, that you might find slightly easier when it comes to manipulating the JS.
Another way to do this is to create 2 separate divs for the card that we show at different times. At first, we’d see 1 div with the initial content (How did we do, ratings, submit button) - I’ll call that the ‘rating-div’. And after clicking the submit button, we’d see a 2nd div with the thank-you content (thanks message, image, you selected x of 5 rating), I’ll call that the ‘thankyou-div’. That’s what those commented-out sections in the starter file were alluding to.
See if you can create a new ‘thankyou-div’ in the “thank you state start/end” portion of the html file that includes all of the thank-you content. Essentially you’re creating two “faces” of the card that we’ll show to a user. Or if you want to think of them as 2 cards (like a card-flip), whatever works for you.
After you’ve created the thankyou-div, now we need to put this div on the page, where it takes up the exact same position and size as the rating-div. Essentially we’re stacking the thank-you div on top of the rating-div.
By creating a second thankyou-div, we can keep the content of this div static (creating it in HTML and styling in CSS so you can remove those content items from JS) instead of updating all of the content dynamically. (We do still have to update the ‘you selected x of 5’ later). And once we have the thankyou-div positioned (stacked on top of the rating div), now we need to figure out how to display this div.
Obviously we want to see the rating-div when we first load the page, so we need to make the thankyou-div invisible at first, and then show after a user clicks the submit button. We have 2 primary properties for visibility: display and visibility. We want to make sure the thankyou-div is invisible both visually and to screen readers so it doesn’t confuse anyone.
I’m impressed with the solution you came up with and you’ve hit on all of the concepts you need in your code. The reason I’m suggesting this alternate approach is because it moves the content creation into HTML and styling into CSS so you’re not adding and styling elements from JS. You can add/style from JS and it works to do some things (like dynamic updates of a line), but for the majority of your content it’s better practice to keep the structure (HTML), style (CSS), and interactivity (JS) separate, also makes it easier to debug, update, and maintain in the long run.
I’ll stop there because this answer is already super long, but try that out. On that website you’ll also find tutorials for lots of other common tasks including manipulating elements (like iterating over elements - which you already did - and manipulating the HTML of an element). If you have any questions or want to go over the next steps, let me know. Coding is hard and you are doing awesome, so keep going! You've got this. 😊 🙌
Hope this helps and happy coding!
im not sure about this method i use rn , any suggestion will be very very appreciated
Hi! Congrats on completing the single price grid component!
Here's a couple of suggestions:
<h1>-<h6>) are section headings; semantically, they act as indicators that "hey here's a new section of content!" Join Our Community is perfect as the h1 (nicely done!) and both Monthly Subscription and Why Us are great as lower-level headings (like an h2 or h3), as they represent new sections of content inside the card.<p> element. You can use CSS to make the font-size of this element bigger and bolder, instead of using an h2 element.Good job using CSS Grid and global variables in your build! My suggestions were for semantic HTML, is there a particular area you were not sure of? Like how you structured or styled a specific element?
Hope this helps and happy coding!
The most difficult thing here was centering the product card on the body itself. Honestly, centering anything is really difficult because CSS seems to have so many different properties relating to it. I went with
body {
display: grid;
place-content: center;
}
and I honestly couldn't tell you why this works.
I have found that to center something, you need to add properties to its parent. Is this generally true? IE for the product card, I can't add a css property to the card itself
.product-card {
my-centering-code
}
as this seems to only center its content, not the element inside of its own container.
Hi! Congrats on completing the product preview card!
You're right, there are a TON of ways to center things in CSS. In answer to your question, how to center items depends on whether you're trying to center a block-level element like a <div> or an inline-level element like a <span>.
Here's a reference on centering in CSS that might help, it gives specific examples of what you want to center and what properties to use to do that.
It's generally better practice to avoid putting too much styling on your <body> element. Looking at your code, one thing you can do is add a <main> element between your body and article elements. It's a semantic element, containing the main topic or content of the page and also helps assistive devices with navigation (as a landmark). And you can apply the CSS styling to the main element instead of the body, so win-win 😊
I'll use Flexbox in my example, a lot of people find it easier with flow in 1 dimension, versus Grid's 2 dimensions. But you'll see solutions with both Flebox and Grid. For centering the single card (block-level element) inside the main (parent) element with Flexbox, like this:
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
First, we're setting the height of the main element to be equal to the height of the viewport, or 100vh. Next, we're setting the layout to Flexbox, then using the last two properties to center the card horizontally and vertically. Flexbox is slightly different from Grid here because in Flexbox you can decide which direction (horizontal rows or vertical columns) you want the content to flow, so you'll see references to the "main-axis" and "cross-axis". The default direction is horizontal (since I didn't specify flex-direction in the above code, it's using the default). Here's a Guide to Flexbox so you can see the various properties all in one place.
As to why your code worked, here's a Guide to Grid that does a good job explaining what the properties are and how they work. You'll find an explanation of place-content toward the bottom of the page (~3/4 of the way down) on the left-side.
You did a great job using semantic elements and global variables in this build! One thing I'd suggest here is turning your h2 into an <h1>. You were spot on with where to put it, just bump it up one level, since every page needs one h1 element (just like every page should have one main element) explaining what the page is about.
There's a lot here but I've found those references pretty useful for builds. Hopefully this helps and happy coding!
it seems I still can't get the greyish blue color right,,
Hi! Congrats on completing the single price grid component!
That bottom right "Why Us" portion (I'm guessing that's the one you meant?) isn't a single color, it's actually two background colors blended together, which might be why you feel it's a bit off color-wise. Are you familiar with the CSS property mix-blend-mode?
If not, there's another challenge, stats preview card with an image and single background color that's good practice to play around with mix-blend-mode (hint: you'll also need opacity). This single price component challenge is slightly more difficult application-wise because you've also got the text elements to worry about.
Quick note about semantics, you've got multiple <h1> elements in your build. A page should only ever have one h1. The other headings (monthly subscription, why us) should be h2's. Good job incorporating semantic elements in this build!
Hope this helps and happy coding!
I am not sure about the method i have used to add purple filter over the image. Its not working properly on mobile version. Any feedback or suggestion would be really helpful. Thank you.
Hi! Great job completing the stats preview card component!
In answer to your question about the image and color, here’s some of suggestions:
It looks like you’ve created a pseudo (::before) element for your .image-section container to give it a background color. I think this is where the little bit of overlap in the mobile version is coming from. You don’t need a pseudo element for this, you can remove the pseudo element and add the background color declaration directly to the .image-section.
Nice job declaring global variables on the root for your colors! You’ve got a variable for the correct color (--accentColor), go ahead and use that variable for the background color instead of ‘purple’ so your styling matches up with the text span color 😃
What we’re looking to do here is control the blending, or blend-mode, of the image and its background. CSS has a couple different properties to do this. In your code, you’ve got the image as a child of the .image-section, and you want to blend that image with the background-color of .image-section (its parent), so mix-blend-mode is the property you want to use.
For the value of the mix-blend-mode property, (the blend mode article has good descriptions of what each value means and looks like) the look we’re going for here comes from multiplying the top and bottom layers, and the end result is similar to a transparent film.
You were right about applying an opacity, but apply it to your image element instead of .image-section.
Make sure to apply both the mix-blend-mode and opacity properties to your image and not .image-section. (if you apply it to .image-section, you’ll get a dark blue as its trying to blend the .image-section div with its parent element instead). If you find the color’s still a little off, try increasing your opacity.
Hopefully that helps and happy coding!
I found a little bit tricky how can I change the image source because they are 2 versions(mobile and desktop) of the image.
I'm a little bit unsure about the way I placed the image. I did it using background css property
I think srcset could be better solution. What do you think about it?
Hi! Congrats on completing the product preview card!
For this card, the image is more informative for the user and not decorative, it would be better to use an element (like <img> or <picture>) for this image instead of CSS background.
You are spot-on with your question about changing sources for the 2 images! Since the provided images are a full-size desktop image and cropped version for mobile, we're looking at the art direction problem. A great way to do this is with the <picture> element, which uses the srcset attribute. 😃
Can someone help me figure out why my image is messed up
Hi Stanley!
In your CSS you've got a height set to 25% on the img element, this might be what's squishing your top image, since its only taking up a fraction of its container div. Try removing this height and see if that helps.
Hello there! I think I got this one pretty good, however any help trying to clean unnecessary code is helpful!
Thanks!
Hi! Congrats on completing the profile card component!
Not much unnecessary code here, but one thing you could do is remove the <img> tag for the pattern and set a background-image on your first <div> instead, since the pattern on the card behind the profile photo is just decorative.
You do need an <h1> tag for your page. This one's a bit tricky, I'd replace your <p> for Victor Crest with an <h1>, since the whole page is about the profile card for Victor.
Hope this helps, good job tackling responsive layouts with both Flexbox and Grid!
Hey everyone! This is my first challenge from frontendmentor! I am mostly self-tought so I will really apprecciate feedback from others. I am also trying to met more experience developers so I can learn from.
Hi! I have a couple suggestions:
<section>. The <main> is a semantic container for the content (what the page is about). It also acts as a landmark to help screen readers and other assistive technologies navigate your page.<h2> heading, go ahead and use an <h1> heading here. Every page needs an <h1> heading, this helps both screen readers and search engines understand what your page is about.* instead of typing out all of the elements, like this:* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Hope that helps. Great job completing the QR code component!