Skip to content
OverviewSolutions
11
Comments
10

Mushfiq Rahman

@Ayon95Waterloo, Ontario300 points

Hi, I'm a web developer who enjoys building visually-appealing, responsive, accessible websites and user interfaces.

Latest solutions

View more solutions

Latest comments

  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    Hi, good job completing this challenge. You can make some improvements to your HTML markup and CSS:

    HTML

    • Try to use semantic HTML elements whenever you can.
    • Use the <main> element for the main content of the page.
    • An <article> element is appropriate for a piece of content that makes sense on its own, for example, a card like this.
    • You can use an <ul> and <li> elements for the card stats section (0.041 ETH, 3 days left).
    • A <footer> element is a good choice for the author information section; it'll be like the footer of the article.
    • The attribution section should go inside a <footer> element; this will be the footer of the entire page

    CSS

    • Instead of px, use responsive units like rem and em. These units make it easier to implement responsive web design and they are good for accessibility as well.
    • It's good to use CSS variables (custom properties) for values that you use in multiple places in your stylesheet. This will make your CSS code easier to maintain.

    Some resources

    Hope this helps and good luck on your coding journey :)

    Marked as helpful
    2
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    Hi, your solution looks good. It's a bit tricky to guess the dimensions of elements accurately from images alone. There's a screenshot-taking software called Greenshot that you can use to measure distances and such. The PerfectPixel Chrome extension is also useful. It allows you to put an image overlay on top of the coded website. You can use it to compare the design with the actual website.

    As for good accessibility practices, use semantic HTML elements appropriately whenever you can. Get familiar with some commonly used ARIA attributes and when they are necessary (MDN has an article on each of them). If you're using Windows, you can download NVDA screen reader to test how a screen reader reads your website.

    Hope this helps :)

    Marked as helpful
    1
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    Hi, good job completing this challenge. You can improve the html markup by using semantic elements like <main>, <article>, <ul>, and <li>. The main content of the page should go inside the <main> element. Instead of <div>, it's better to use <article> for the card component. The <article> element is used to mark up a standalone piece of content that makes sense even when it is taken out of the context of the page.

    Also for titles that are also links, you should put the <a> element inside the heading element.

    As for the image overlay, you can use a ::before pseudo-element on the image container. Since the overlay has an icon, you can specify that icon in its 'content' property. To center the content, you can use flexbox.

    <body>
  <main>
    <article class="card">
      <div class="card__header>
        <img class="card__image" />
      </div>
      <h1 class="card__title"><a href="#">Equilibrium #3429</a></h1>
      <p class="card__description"></p>
      <ul class="card__stats">
        <li class="card__stat"></li>
        <li class="card__stat"></li>
      </ul>
    </article>
  </main>
  <footer></footer>
</body>

    .card__header {
  position: relative;
}

.card__header::before {
  content: url("./images/icon-view.svg");
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(178, 100%, 50%, 0.4);
}
    Marked as helpful
    0
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    Hey, just wanted to thank you for the way you used background-position to implement the background image as it is in the design. I found it really helpful and added it to my toolbox. Earned a follow :)

    1
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    Hi, good job on the solution. The problem with background color is happening because you used the universal selector (*) to select all elements and set a background color for them. Instead of doing that, set the main background color on the body element only.

    body {
  background-color: hsl(217, 54%, 11%);
}

    You can use flexbox to center the card within the body element.

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    By the way, you can get rid of some of the accessibility issues by specifying alt text for the images, and using semantic HTML elements like <main>, <article>, <footer>, <ul>, and <li>.

    <body>
  <main>
    <article class="card">
       .... (html code here)
      <ul class="currency-area">
        <li class="currency-area-1>
        </li>
        <li class="currency-area-1>
        </li>
      </ul>
      <footer class="creator-info">
      </footer>
    </article>
  </main>
</body>
    Marked as helpful
    0
  • Mushfiq Rahman•300
    @Ayon95Posted about 3 years ago

    You can wrap the image in a <div> and use a ::before pseudo-element to create the image overlay.

    <div class="image-container">
   <img src="" alt="">
</div>

    .image-container {
  position: relative;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: hsl(274, 100%, 34%);
  opacity: 0.5;
  filter: brightness(80%);
}

    These are the styles that I used to create the purple image overlay.

    Marked as helpful
    0
View more comments