Skip to content
OverviewSolutions
28
Comments
21

Sean Gray

@seangray-devToronto - Canada690 points

Hi! My name is Sean Gray, I am currently pursuing a new career in web development. I previously was a freelance audio engineer working on many genres of music.

I’m currently learning...

TailWind, Astro, Javascript, React,

Latest solutions

View more solutions

Latest comments

  • Sean Gray•690
    @seangray-devPosted about 2 years ago

    Nice work bro! I'm currently working on this one myself with Vite.

    I love the hover effects you added as well as the loading page that was a nice touch 👏

    Some small details I think could help to look into some layout issues when adjusting screen sizes for example one was on the homepage zx-9 speaker.

    Otherwise I really enjoyed this, good work!

    Marked as helpful
    0
  • Sean Gray•690
    @seangray-devPosted about 2 years ago

    Hey Hanzala,

    Similarly to a previous comment. Here is some of my CSS for this challenge:

    • Setting the parent element to position relative:
    .card-top {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}


.card-top img {
    width: 100%;
    display: block;
}
    • And then the overlay image to take up the entire space of it's parent element while hiding it:
    .img-overlay {
    position: absolute;
    left: 0; 
    top: 0; 
    height: 100%;
    width: 100%;
    background-color: hsla(178, 100%, 50%, 0.3);
    display: none;
}

.img-overlay img {
    position: absolute;
    width: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
    • And then to show it upon hovering:
    .card-top:hover .img-overlay {
    display: block;
}

    Hopefully this helps. Keep it up! 😁

    Marked as helpful
    1
  • Sean Gray•690
    @seangray-devPosted about 2 years ago

    Hey Emir, a fellow TailWind user! Nice job on completing this challenge! I have a couple suggestions for you:

    • It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
    • Instead you can use JS to dynamically update the contents of existing HTML.
    • You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.

    Here is the JS code I wrote for my solution to this challenge for reference:

    const toggle = document.getElementById('toggle');
const package = document.getElementById('package'); 

toggle.addEventListener('change', on => {
    package.classList.toggle('show-monthly');
});

    As for your cards increasing in size after you toggle...It seems you didn't set the appropriate utility classes using TailWind. I believe you can use max-w-[value] to achieve what you are looking for. Instead you are using max-[value] on the cards.

    Hope this helps! Keep up the work! 😁

    Marked as helpful
    0
  • Sean Gray•690
    @seangray-devPosted about 2 years ago

    Hey Jary, nice job on completing this challenge! I have a couple suggestions for you:

    • It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
    • Instead you can use JS to dynamically update the contents of existing HTML.
    • You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.

    Here is the JS code I wrote for my solution to this challenge for reference:

    const toggle = document.getElementById('toggle');
const package = document.getElementById('package'); 

toggle.addEventListener('change', on => {
    package.classList.toggle('show-monthly');
});

    Hope this helps! Keep up the work! 😁

    Marked as helpful
    1
  • Sean Gray•690
    @seangray-devPosted over 2 years ago

    Hey Ralph! Nice job on this.

    Here are some tips for your question:

    The em unit em are relative to their parent’s font size When used on anything else other than font-size it’s relative to the font-size of it’s own element font-sizes is an inherited property, so if you don’t declare it anywhere, it’s getting it from the body (or the default which is normally 16px) The problem with em: when we use em for font-size of an element, it can create a cascading effect.

    The rem unit The rem unit is short for Root Em That means it’s always relative to the ‘root’ of our document The root of an HTML page is always the HTML element

    How to decide which unit to use?

    Pixels used to cause a lot of problems, as they were a fixed unit (1 dot on the screen) Now it follows the reference pixel.

    General rule of thumb (not hard and fast rules) :

    • Font-size = rem
    • Padding and Margin = em
    • Widths = em or percentage

    Hopefully you find this helpful! Happy coding, keep it up 😁

    Marked as helpful
    1
  • Sean Gray•690
    @seangray-devPosted over 2 years ago

    Hey Markhadi! Nice job on this, I recently completed this one too!

    I have a couple suggestions that could help with this challenge. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:

    • the author of the article if we wanted to see more articles by this author.
    • the article title as it would probably link to the full read of what it belongs to

    I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

    The same would apply to the author of the article. Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

    Marked as helpful
    0
View more comments