Skip to content
OverviewSolutions
28
Comments
21
Sean Gray
@seangray-dev

All comments

  • Adrianoβ€’38,330
    @AdrianoEscaraboteSubmitted over 1 year ago

    πŸ‘¨β€πŸ’» Hello everyone!

    This is, without a doubt, my biggest and best project so far. I am very happy with the result and I believe I did a good job. During development, I faced many challenges as I used technologies I didn't have much experience with, but it was very rewarding.

    In addition to all the functionality required by the mentor front-end I added:

    • Control of items in the cart made with Redux
    • Pre-loading with React Loading Skeleton
    • View the items in the cart even if you refresh the page

    If you have any suggestions for code improvements, feel free to share!

    Thanks! 😊

    Audiophile ecommerce website w/ NextJs, Typescript, Styled-Components

    2
    Sean Grayβ€’690
    @seangray-devPosted over 1 year 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 almost 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 almost 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 almost 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
  • Ralphβ€’190
    @delacruzralphSubmitted almost 2 years ago

    Although I tried to used rem to style different things like font-size, margins, paddings, and widths, I'm not sure how effective some of it was. I also didn't use percentages because I don't think it would have been necessary for this challenge in particular. What are some general rules of thumb that I can use to figure out which measurement to use?

    NFT preview card component

    1
    Sean Grayβ€’690
    @seangray-devPosted almost 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 almost 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
  • Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

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

    I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. 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 the share button
    • I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

    and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:

    a {
transition: all .3s ease;  
}
a:hover, a:focus {
cursor: pointer; 
color: (add new color that matches design or see specs); 
}

    Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

    0
  • Jason Binghamβ€’20
    @jbingham223Submitted almost 2 years ago

    The hardest part about this first project for me was figuring out how to properly set up GitHub Pages, and I'm still not sure I'm using best practices. My biggest question right now: Do I have to put everything I want to go live on Github Pages in my local username.github.io folder?

    Simple flex-based solution.

    1
    Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

    Hey Jason! 😁

    Nice job on the project it looks good! One suggestion with writing your CSS and HTML is to use classes instead of ID's. You can check out this to learn a little bit more about the two and when to use one over the other:

    https://css-tricks.com/the-difference-between-id-and-class/

    Your site is live on github pages so you did it correctly. In terms of best practices many believe using the command line for git and github as most companies will require that you do and is a fundamental skill as a developer. I found this video that may be useful to you:

    https://www.youtube.com/watch?v=qMck70tLDuo

    Also one last thing you can check out is the article Matt Studdert (creator of FME) wrote about how to get the most of this platform!:

    https://medium.com/frontend-mentor/how-to-get-the-most-out-of-frontend-mentor-bdd6fdc25cb8

    Hope you found this useful! Happy coding 🫑

    Marked as helpful
    1
  • Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

    Hey novadior1k,

    Nice job other than missing that image haha! You could do so by simply adding the element into your element and link to it within your files. <img src="./"></img>

    Hope this helps! Happy coding πŸ‘πŸ˜

    Marked as helpful
    0
  • Siddharthβ€’230
    @siddharth-1407Submitted almost 2 years ago

    ** Hello everyone.**

    I was not coding for 2 weeks so i ended up spending a lot more time styling it then i should have.

    • Added a fade in animation for the social links window.

    I wanted to practice media queries, but didn't know what breakpoints i should use. I decided to go with the breakpoints that bootstrap uses. Now my issue is that, i finished this challenge with a default CSS targeting the mobile first approach, and then i have CSS for 4 breakpoints, targeting small, medium, large and extra large devices. And Of course after having so make break-point, i think my sass looks kinda messy. Plus the final CSS file is huge!! So i was thinking, isn't it ridiculous that I've to write this much CSS for such a small component like this. Am i writing too much or this is how it should be?

    Feel free to leave comments on how I can improve my code. Thanks!

    Article preview component Solution

    1
    Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

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

    I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. 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
    • the share button

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

    and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:

    a {
transition: all .3s ease;  
}
a:hover, a:focus {
cursor: pointer; 
color: (add new color that matches design or see specs); 
}

    Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

    Marked as helpful
    0
  • Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

    Hey Cristhyam,

    I like your solution, the design is looking pretty good! I have a suggestion to improve this challenge though:

    A better way to build this challenge is to create a Form and inside of it, the β€œrating buttons” should be built using an Input Radio and it should have a Label Element attached to it for accessibility. Since you used an ordered list, I was able to select multiple ratings to submit.

    Hope you found this useful! Happy coding! 😁

    Marked as helpful
    3
  • Renee Smithβ€’190
    @RSmith484Submitted almost 2 years ago

    Can anyone assist in advising how to align the buttons in each column? At the moment they are manipulated by the amount of content in the paragraph. Any advice would be appreciated.

    3-column preview card component

    2
    Sean Grayβ€’690
    @seangray-devPosted almost 2 years ago

    Hey Renee, I came up with a solution for your question. You could add this to each of your columns:

    column-1, column-2, column-3 {
display: flex; 
flex-direction: column; 
justify-content: space-between;
}

    You could also add a helper class to each of the divs instead of having to repeat yourself.

    Hope this helps! Keep it up! πŸ‘πŸ˜

    0