Skip to content
OverviewSolutions
31
Comments
33
Andreas Remdt
@andreasremdt

All comments

  • Andreas Remdt•950
    @andreasremdt

    PS: I just noticed that the preview screenshot is broken. That might be because I used the latest CSS features, such as color-mix and CSS Nesting which might not be supported yet by the image generator. If you encounter the same issue, you might have to enable experimental feature flags in your browser.

  • Andreas Remdt•950
    @andreasremdt

    Hey @ricardosilvasx,

    Congrats on solving the challenge, well done! Your solution looks good, I like that you wrapped everything in a main tag which is a good practice. Here are some additional suggestions:

    • Try and incorporate a heading. Every website needs at least one heading to explain the content. Always start with the highest level (h1) and then descend down when it makes sense. In this example, I would make the text Improve your front-end skills by building projects the main heading.
    • You don't need the div.qrcode, just apply the styles of it to the main element directly.
    • Your image doesn't have any width and height attributes, which I would advice you to set. They allow the browser to better calculate the image dimensions and hence optimize rendering, which results in a better loading experience.

    Keep up the good work and let me know if you have any questions!

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @MikeLee0358,

    Congrats on finishing the challenge! Let me try and answer your questions:

    To limit the width of the container, you can use max-width. I see that you used the clamp() function, which also works but is a little overkill for your needs. Setting max-width: 450px will prevent the container from growing any bigger but still stay flexible on smaller screen sizes.

    The image inside the container is already set to width: 100%, which is great. It won't grow any bigger than the container and will shrink with it. I'd suggest adding the width and height attributes in the HTML, so that the browser knows how big the image is. This improves the loading experience, as the space is being "reserved" until the image has loaded. Also, don't forget to set height: auto in your CSS to maintain the correct aspect ratio at all times.

    For this challenge, you don't need to change the font size for smaller devices if I remember correctly. So you're good already. Try to set the correct font family though, as this will improve the visuals a lot :-)

    Some other things I noticed:

    • I would choose an h1 for the heading, as it's the first and only one. Headings in HTML should start from the highest level and descend down if necessary. Since you don't have any other headings, h1 is the best choice here.
    • Try and use more semantic HTML tags. For example, you could replace the div#QRCode with a main#QRCode to mark the card as the main landmark on this page. Semantics are an important aspect of HTML development and make life easier for search engines, screen readers, and others. Have a look here for more information.

    By the way, the method you used to align and center everything (display: grid) is really clever, nice one!

    Let me know if you have any questions, keep it up!

  • Andreas Remdt•950
    @andreasremdt

    Hey Giorgian,

    Congrats on finishing this challenge, your solution looks good! I found a few issues that you might want to fix:

    • The interactive elements (input, buttons) don't have clear focus or hover states, which should definitely be added for a better user experience and accessibility.
    • The input and button are not within a form, which makes you lose some important functionality like pressing Enter to submit and send it. This also hurts accessibility.
    • The error appears once I try to submit with an invalid email, which is great. However, once I type in a correct email address and submit, the error stays there, which is confusing to users. A good practice would be to hide the error when the email is correct and the user leaves the input (blur), presses the button, or even while typing (input event). So, make sure that you add an else condition in your JavaScript for when the email is valid.
    • Using regular expressions for validation is a common practice, but I don't recommend using these for emails, as there are tons of variants out there, and hardly any of them get it right. Some are too strict, others are too lax, and most don't cover all edge cases. Browsers these days already offer APIs to validate input. I recommend you look into constraint validation, which makes it so much easier validating HTML forms.
    • The social icons at the bottom are wrapped inside a button. I think that's okay for this challenge, as there's no action behind these; I would still advice using an a element, as social links tend to redirect you to a different website, whereas buttons are more suitable for triggering interactive JavaScript.

    I hope my feedback helped you out, let me know if you have any questions. Keep up the great work!

  • Andreas Remdt•950
    @andreasremdt

    Hey @ricochet69!

    Congrats on solving this challenge, the result looks great - it's very close to the design!

    Your initial idea of using a main tag to wrap everything is good. To be accessible and semantically correct, every page needs a main landmark, which in this case is the card itself. However, I would alter your HTML structure slightly: you can remove the main.container and apply its styles to the body element. Then, you can change the div.card to main.card. This way, you save on unnecessary elements and make your code clearer while still being semantically correct.

    Your margin and padding look good to me, but you could make it even simpler if you applied the padding to div.card-details. Since both the heading and paragraph are direct children, they would be moved into position by that change. I am not sure if you even need this padding, though, might be unnecessary. The margin on both elements looks good.

    I am not sure why you went with height: calc(100vh - 1px) on the container? You should be able to use min-height: 100vh without the need for calculations.

    Let me know if you have any questions and keep up the good work!

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @JorgeAMendoza,

    Great job on this challenge! I played around with it and everything works as expected. I especially love the fact that you wrote good E2E test coverage and used ESLint and TypeScript. Your code is very organized and clear, the folder structure and naming are consistent and sensible. I also noticed your attention to accessibility, which is appreciated. So, very well done :)

    I found a couple of minor things you might want to fix, but these are only little details:

    • The theme and font choice are not remembered in the browser. If I refresh after switching to dark mode or another font, it's back to default. Persisting the user's choice in local storage would be a nice addition.
    • While the audio playback works fine, you could think about adding a "play" state, which disables the button and renders a different icon, like a spinner.
    • Some fonts are not set correctly. For example, if you select the serif font, the main heading is still set to monospace. Additionally, the font dropdown doesn't have the right font families.
    • Inside font-context.tsx, you are using 2 contexts. If you don't think that this is necessary, you can have the font value and setter function on the same context and avoid the overhead.
    • You wrapped the search input inside a label, but the label doesn't have any text content. While technically speaking this is not an error, you can omit the label and rely on placeholder and aria-label. It's usually an UX anti-pattern to not have a label, but since the design is this way there's nothing us developers can do...

    Not an issue, just a tip: you implemented your own solution for the font dropdown, which is really good. For the future, I highly recommend using a headless library such as Headless UI or Radix UI. These libraries make it incredibly easy to build such components, because in reality it's quite hard to cover all bases (accessibility, keyboard navigation, edge collision, etc.).

    Keep up the great work and let me know if you have any questions :)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @andyjv1,

    Nice job finishing this challenge! Since @grace-snow already mentioned some things, I'll purely focus on the React/JavaScript part:

    • You have 2 fetchAdvice functions, one in App.jsx and the other in Dicecontainer.jsx. This is duplicated code that you should try and avoid. Ideally, you keep the fetch function inside App.jsx and trigger it with a prop like onClick, which you pass into Dicecontainer. You can then remove the fetchAdvice inside this component and connect the prop with the button's click event.
    • The logic inside fetchAdvice can be improved. You don't need a timeout to disable/enable the button, this should be depending on the state of the promise. Consider something like this:
      const fetchAdviceClicked = async () => {
    setDisabled(true);
    const API_LINK = "https://api.adviceslip.com/advice";
    const response = await fetch(API_LINK);
    const advice = await response.json();
    props.setText(advice.slip)
    setDisabled(false);
  };

    Right before the request is made, you disable the button. Once the request went through (and assuming it was successful), you enable it again.

    • You don't have any error handling in your code. As an example, what happens if the request can't be made because the user is offline? In the DevTools, you'd see an error, but the common user doesn't have DevTools open :D Try thinking about ways to show an error, even if it's not part of the design. As an example, you could use try/catch:
      const fetchAdviceClicked = async () => {
    try {
        setDisabled(true);
        const API_LINK = "https://api.adviceslip.com/advice";
        const response = await fetch(API_LINK);
        const advice = await response.json();
        props.setText(advice.slip)
        setDisabled(false);
    } catch (ex) {
        setError("Something went wrong...");
    }
  };
    • Even though you disabled the button while disabled is truthy, it still has a hover state, which is confusing. Consider adding hover and focus states only when the button is enabled, otherwise, just gray it out. One way to solve this would be by using CSS pseudo classes: button:not(:disabled):hover { ... your code here }
    • Your initial state in App.jsx is an empty array, but the advice slip is an object with properties, such as id. Changing a variable type rarely a good thing, so consider changing the initial state to {} or null.

    Let me know if you have any questions, I hope my comments are helpful. Keep up the good work and happy coding!

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @bhoamikhona,

    Nice job finishing this challenge. I really like how close it is to the design and what you did with the hover effect! Also, your HTML and CSS look good. I only have a couple of minor suggestions:

    • Your div.pattern-background, which you used for the pattern background and profile image, has a role of img and an aria-label. I don't think you need this. How I see it, the background pattern is purely for visual purposes and has no importance to screen readers or search engines whatsoever, meaning that you can remove the role and aria-label. Besides, the img element inside has a role of img by default, which would make this markup incorrect as images can't contain other images.
    • The stats section could confuse screen reader users, because it will read something like "80K 803K 1.4K Followers Likes Photos" instead of "80K Followers, 803K Likes...". Plus, 3 paragraphs should be enough. Most screen readers announce that there's a paragraph, making it extra confusing. Hence I suggest the following structure:
    <p>
  <span class="stat">80K</span>
  Followers
</p>
<p>
  <span class="stat">803K</span>
  Likes
</p>

    Using CSS, you can then lay it out properly, for example with Flexbox.

    Hope my comments help you, let me know if you have any questions. Happy coding!

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @2023course,

    Congrats on solving this challenge and welcome to Frontend Mentor! Your solution looks good already, it's close to the design and only has some minor issues.

    First, you should be able to get the exact colors from the style-guide.md file that's part of the starter code package. It usually contains all colors, font sizes, and more information, depending on the challenge. You are still left to match the correct color to an element, so you either need to be good at guessing or you can use an editing software like Gimp or Photoshop, which contain a color picker. That's what I would do. Same for dimensions, most editing software contains measuring tools.

    Secondly, I've got a few suggestions for your solution:

    • Make sure to add a title to the HTML to make it more accessible and SEO friendly.
    • The HTML is lacking a semantic structure, which makes it harder for screen readers and search engines. A good start would be to wrap the card in a main element instead of a div.
    • You went with an h3 for the title, but an h1 would be more appropriate, as it's the only and therefore most important heading of the page. Headings should always start from the highest level and descend down.
    • You don't really need the div.container, you can apply the same CSS rules to your body and remove the container. One element less ;)
    • Using @import to load fonts is not considered a best practice, as it's render blocking and could lead to decreased performance. Prefer using the <link .../> code from Google Fonts instead.

    That's about it. Let me know if you have any questions, otherwise, keep up the good work!

  • Andreas Remdt•950
    @andreasremdt

    Hey @ChrysKoum!

    You did a great job on the challenge, I like that the design looks so close. The hover transitions are nicely done. I found a couple of things that you could improve:

    • Make sure to use some semantic HTML elements, such as main or section. That's also a complaint on your accessibility report. For example, div.card could be replaced by main.card to indicate that this is the page's main content.
    • You used an h5 for the only page title, while an h1 would be the better choice. Each page should have a main title, and then go lower from there. Since "Equilibrium #3429" is the only title, using an h1 would be much better for accessibility and semantics.
    • The solutions appears to have a couple of interactive elements (like links), but there are no proper HTML tags for that. For example, it's confusing that the title and author have hover effects, but I can't click on them. To fix this, you can use a a or a button for these elements.
    • You don't need all these div elements to center your card. With just a couple lines of CSS, you can make your life much easier:
    <body>
  <main class="card">
    Your card content here...
  </main>
</body>

    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    Hope that these tips help you improve the solution. Let me know if you have any questions :-)

  • Andreas Remdt•950
    @andreasremdt

    Hey @mayor-creator!

    Nice job on this challenge, it looks good! Don't worry, responsive design is hard to do right in the beginning, you'll get better. If you like learning from videos, I can highly recommend Kevin Powell's YouTube channel, he explains things about web development in a great way, like this one about responsive design.

    I went over your code and can give you a couple of tips:

    • For the title ("Order Summary"), you used an h2. Since it's the only title on the page, it would be better to use an h1. Each website should start with an h1, since it's the most important title describing the page. If there are more headings, you can lower with h2, h3, and so on.
    • The design contains three interactive elements, and it was a good decision to use a button for "Proceed to Checkout". However, you didn't use interactive elements for the remaining two, which is confusing and hurts UX. Even though they are styled as links, clicking on them doesn't do anything. I recommend using a elements, for this challenge they don't need to point to anything.
    • Sticking to your interactive elements such as the button, it's a good practice to think about hover and focus styles. For example, you could make the blue darker on hover and even darker on focus, so that mouse and keyboard users know that this button is currently "selected".
    • You have an img.music_icon element for the music icon. In this case, I would leave the alt text empty, because it's mostly for screen reader users. They don't gain any benefit from this icon, it's purely for styling purposes and doesn't add anything to the content. So, you could write alt="" to indicate that the image is not important, or even add aria-label="hidden" to hide it from screen readers.
    • On smaller screens, the card is stuck to the bottom of the browser. Adding some margin (like you did for the top) would give it more breathing room and improve the styling.

    Hope these tips help you out, let me know if you have any questions :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @mclanecorp,

    Congrats on solving the challenge! I like the fact that you used semantic HTML, considered accessibility, and don't have any HTML issues in your solution. Also, it's not far from the design. A couple of things you could improve:

    • Use focus styles for keyboard users. Right now, your interactive elements only have hover styles, which can hurt accessibility.
    • You've imported many different web fonts in styles.css, but only use 2 of them. @import statements are expensive performance-wise, so it's advisable to use them as sparingly as possible and without loading resources you don't need.
    • You could improve your layout by centering everything on the page. One easy way is to wrap the entire application code in a div.container, set a max-width and align everything inside the body using the below code:
    body {
  display grid;
  place-items: center;
  min-height: 100vh;
    • Try using other CSS units, such as em or rem, especially for sizing and spacing. These units are more flexible when it comes to zoomed in viewports and scaling your UI based on font size. This video gives a good explanation of choosing the right units.
    • You don't need to wrap your button in a div, this element can be removed.
    • On smaller screen sizes, the footer icons are stuck to the bottom. Giving them some more spacing would improve the design.

    Hope this helps, let me know if you have any questions :)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @mohamedshawgi,

    Your solution looks awesome, close to the design and technically great - no HTML or accessibility issues. I only have a couple of small suggestions:

    • For improved accessibility, I'd recommend adding some hover and focus styles to the button to indicate that it's interactive.
    • Instead of using div elements for each section, you could use section elements. This would make it slightly more semantic, since each section contains its own type of content, but they are still related.
    • Speaking of semantics, I would use a p element instead of an h2 for "30-day, hassle-free money back guarantee". Each section should ideally have one heading, followed by content. While having two headings isn't the worst thing to do, it could be confusing because screen reader users might expect more content than there is, since the first sub heading indicates that there are more sub headings further down, which isn't the case.
    • You could tweak your media query breakpoint to be a bit lower, since it starts breaking quite early, which looks weird. I think a good value would be around 600px.

    Other than that, you are good! Hope this helps you improving your solution, let me know if you have any questions :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @sujeong054,

    Nice job on finishing this challenge! It looks really good and you made good use of Flexbox. To answer your question:

    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    With these three CSS properties, you can center everything within your body to the center. min-height: 100vh is important because it makes the body as big as your browser viewport. Without that line, the body always takes up only the space of its children, so you won't get the effect.

    With the above, you can reduce your CSS on the .main element:

    .main {
  display: flex;
  background-color: var(--White);
  border-radius: 15px;
  height: 650px;
}

    Besides that, a couple of additional suggestions:

    • Try to use more semantic HTML elements. As the accessibility report already indicates, your page should have at least one main landmark, meaning that you should wrap your application in a main element. You can replace the div.main with a main.main to make that work.
    • The page is also missing a title. You've used a lot of div and span elements for the text content, which don't convey any semantic meaning. Screen readers and search engines will have trouble understanding what's the product title, its category, or description. I'd recommend the following HTML structure:
    <p>Perfume</p>
<h1>Gabrielle Essence Eau De Parfum </h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<div>
  <p><span class="sr-only">Current price:</span>$149.99</p>
  <p><span class="sr-only">Old price:</span>$169.99</p>
</div>
<button type="button">Add to Card</button>
    • With the above code, you get an h1 as the page title and a p for the description. From a perspective of accessibility, the pricing section a bit challenging - while we can visually indicate that the price is reduced, we have to explain it to those who can't see. I included span elements for that, made invisible via the .sr-only class. If you want to learn more about this technique, here's a great explanation.
    • All interactive elements like buttons or links should have some hover and focus styles. Your button lacks these, making it unclear whether it's clickable or not. You could change the background color on hover to be darker or brighter, just as an idea.

    Hope this answers your question and gives you some help. Let me know if you have any questions :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @VaporDusk,

    Congrats on finishing this challenge! Overall, it's pretty good, your implementation looks very close to the design and works well in browsers. I can give you a couple of suggestions to further improve your code:

    • Make sure to use semantic HTML elements. Since this challenge is really small, there's no need for header, nav, or similar, but you should wrap your entire structure inside a main element to mark it as the main landmark to browsers and screen readers. You can replace <div class"container"> with <main class="container">.
    • You've used an h2 for the first and only heading, but HTML headings should always start at the highest order (h1) and descend down until h6 is reached. Since this challenge only has a single heading, assign it to an h1 to further increase your semantics.
    • Instead of wrapping your entire page in .container, you can use the body to set the background color and alignment.
    body {
  background-color: hsl(212, 45%, 89%);
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    • If you align your content with the above method, there's no need for a media query. The card is already small enough to fit on most mobile devices.
    • You've used this selector to set the font family: .qr-code h2, .qr-code p. In this challenge, but also in general, it's much easier to set the font family inside the body or html selector, so that it's applied globally and you don't have to target each typography element specifically. Right now, if you were to add another element like a ul, you'd need to update your selector, which becomes annoying quickly.

    I hope you found these tips helpful, let me know if you have any questions :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @Toxgem,

    Nice work on this challenge! It looks quite close to the design and has no HTML or accessibility issues, which is great!

    Here are a couple of possible improvements I can give you:

    • Using the below code, you can easily align your card in the horizontal and vertical center of your page. min-height is used to make the page as big as your browser's window, otherwise the body will only grow as much as the content inside requires it to.
    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    • The way you solved the image hover effect is quite creative and interesting, but there are better ways. Try looking into CSS pseudo-elements, like ::before and ::after. They allow you to style HTML elements that are not really in your markup, but are still there for you to use. It's a bit tricky to explain in text, so you can check out my solution to see how I solved it.
    • You can try to reduce the amount of HTML used. For example, your h1 contains a span, which in return has a CSS class for color. You can remove the span and apply the class directly on the h1. The same applies to the below paragraph, which is inside a div without any styling. You can safely remove the div, as it doesn't do anything.
    • Using custom margins for spacing is the way to go, I don't see anything wrong with how you did it :-)
    • I would also go with rem in most cases. However, I use other units depending on what I am trying to style, e.g. px for border widths. Kevin Powell has a great video explaining when to use which unit, maybe this clears things up for you. https://www.youtube.com/watch?v=N5wpD9Ov_To
    • For the Ethereum and clock icon, you used img elements. While this works, it's not optimal in terms of semantic meaning. img elements should be used whenever you want to show an image that's relevant for the content, like a picture of a car on a car sharing site. These two graphics, however, are more for styling purposes and to make the layout look good, so it's better to use CSS background-image for that and remove them from the HTML. If you want to keep using img elements, make sure to apply aria-hidden="true" to them so that screen readers don't think that this is an important piece of content. Also, you can remove the alt text by setting it to alt="". Alt texts should only be present on images that have a meaning to the content.

    Hope that my tips made things clearer for you, if you have any questions feel free to drop them in the comments :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @SpiderBear714,

    Congrats on solving the challenge! I love Next.js and Tailwind, both are great tools and make an awesome tech stack together.

    However, especially in the beginning, I would focus on the basics. While Next.js is a great skill to have, I'd stick to HTML and CSS while solving these simple challenges. Next.js is a fullstack framework that offers so many features, but none of them can be used in this challenge (there's no routing, no client-side logic, no images, no data fetching, etc). All you need is an HTML page and some CSS styles. Adding Next.js, React, JavaScript, Tailwind, and so on just adds a ton of mental and technological overhead you need to get straight in order to get good results, and that's hard for beginners (as well as professionals, I have been writing code for 7+ years and still I am occasionally overwhelmed ;))

    So, my tip for you is to focus on HTML and CSS first - get good at it, and then introduce yourself to more of these advanced tools and libraries.

    I collected a couple of suggestions to make your code better and cleaner:

    • Don't forget title elements, your solution doesn't have one. A good title describes your website or page in very few words, but is incredibly important to your users and search engines. With Next.js, you can add a title like so:
    <Head>
  <title>My page</title>
</Head>
    • You could use article elements for each of your cards. This would make it slightly more semantic and describe the content better.
    • Your headings are written in uppercase, and while this works fine, you could utilize the CSS property text-transform: uppercase instead. HTML content rarely needs to be written in uppercase, it's mostly about appearance. The disadvantage of having uppercase words or sentences in your HTML is that search engines index and display it accordingly, which might look unexpected. In Google, you might want your page to read "Sedans", not "SEDANS".
    • Your layout jumps slightly when hovering over a button. The reason for this is that you apply a border on hover, but without hover there's no border. Borders add to an elements content box, meaning that it grows by however big the border itself is (in your example 2px on each side). That's a common problem, and the simplest solution is to always have a border, but style it properly:
    <button class="bg-white border-2 border-white hover:bg-transparent></button>

    In this example, the border is always there, but it's not really visible due to the background and border having the same color. Only on hover can you see the border, because the background color changes.

    • Don't forget about keyboard users - while you have hover styles, which is good and important, keyboard users don't get any visual indications that they focused an element. In Tailwind, you can use focus: to target focus styles, similar to hover:.
    • A simple fix to make all three cards the same height is to not used items-center on the surrounding wrapper. Remove this class and it should look much better. By default, all children inside a flex container stretch to take up the available height, so they should look the same. Setting items-center makes them only take up the space they need and aligns them horizontally.
    • Try adding Google Fonts to your app, it makes a huge difference when the correct typography is used in an app. If you want to stick with Next.js, then here's a good guide on how to use Google Fonts.

    Your responsive styles look good, not much to say about from my side. It's easy with Tailwind to apply responsive styles, though your HTML code tends to suffer in terms of readability from all those classes.

    Keep the good work up, things will become easier if you keep writing code :-)

    Marked as helpful
  • Andreas Remdt•950
    @andreasremdt

    Hey @agnar-nomad,

    Nice job on the challenge! It looks so close to the design, great work! ::before and ::after can be tricky to understand, keep going and these things will become easier. :-)

    Some ideas to improve your code:

    • Your title "Equilibrium #3429" uses an h3 element, but since it's the first (and only) heading on the page it makes more sense to use an h1 instead. That's also the only remark on your accessibility report. Page headings should always start at the highest (h1) and incrementally go down until the lowest (h6).
    • You don't need to use both pseudo-classes, you can achieve the same result with just one (either ::before or ::after, it doesn't matter).
    .nft-container::before {
  content: "";
  position: absolute; 
  inset: 0;
  background: var(--cyan) url(images/icon-view.svg) center no-repeat;
  opacity: 0;
}

    The above code achieves the same but is quite simplified:

    • You can combine background-color, background-image, background-position, etc. into a single shorthand property called background.
    • inset: 0 is a shorthand for top: 0; left: 0; bottom: 0; right: 0. It just saves time and lines of code :-)
    • Also, by using inset: 0, you don't need width and height as the element will stretch all the way.
    • content should be an empty string, since you set the background image via the background property.

    Additionally, I wouldn't use an ul element for the Ethereum price, since semantically it doesn't make the most sense. A simple div or p should do the job as well and is semantically more correct.

    I hope my feedback helped you, let me know if you have any questions :-)

    Marked as helpful