Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions28Comments21

All comments

  • Adriano• 34,000

    @AdrianoEscarabote

    Submitted

    👨‍💻 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

    #next#redux#styled-components#typescript#axios

    2

    Sean Gray• 690

    @seangray-dev

    Posted

    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-dev

    Posted

    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-dev

    Posted

    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-dev

    Posted

    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

    @delacruzralph

    Submitted

    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-dev

    Posted

    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-dev

    Posted

    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
  • CY Chan• 290

    @CYCHAN00

    Submitted

    Please don't hesitate to comment below if you have any comment~ Thanks~

    Article preview component

    #react#tailwind-css#next

    1

    Sean Gray• 690

    @seangray-dev

    Posted

    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

    @jbingham223

    Submitted

    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-dev

    Posted

    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-dev

    Posted

    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-1407

    Submitted

    ** 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

    #sass/scss#accessibility

    1

    Sean Gray• 690

    @seangray-dev

    Posted

    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-dev

    Posted

    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

    @RSmith484

    Submitted

    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-dev

    Posted

    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
  • syybiecoder• 160

    @syybiekarim

    Submitted

    i know i did stuff wrong here can yall please tell me i also have some questions :

    • how can i have the background image ( the small blue one behind the profile pic ) skip the profile image border like the challenge has? i tried margin and padding but it didnt work
    • I STRUGELD a lot to get that background image to that place on top left but i never figured how to have 2 background images like the one in the challenges so i can put 1 in top left and the other one in the bottom right?
    • why is there a big vertical space between the profile image and h1 out of nowhere (i had to add negative 2rem to fix this weird problem)
    • why border radius on the main tag doesnt do anything even tho it contain all the card
    • i used hr tag for the line how can i make it lighter?

    responsive Profile card component

    1

    Sean Gray• 690

    @seangray-dev

    Posted

    Hey there, nice job on this challenge. I got a couple suggestions that may help 😁.

    • To answer your first question you could try something like this on your profile pic:
    #profile-pic {
    border: 5px solid white;
}
    • You can add multiple background images by separating them with a comma, and same with the positioning.
    body {
background-image: url(...), url(...); 
background-position: top left, bottom right; 
}

    • By default heading elements come with a default margin property to them. I personally reset a lot of my CSS, which you can check this here to avoid this issue in the future: https://gist.github.com/Asjas/4b0736108d56197fce0ec9068145b421

    • Instead of using the hr tag you could use a border top or bottom to one of the other elements.

    section#second-section {
border-top: 1px solid hsl(0, 0%, 59%);
}

    Hope this helps! Keep it up and good luck 😁

    Marked as helpful

    1
  • Sean Gray• 690

    @seangray-dev

    Posted

    Hey Rachel,

    I like the solution to your design! The only thing I would suggest is to make the "Sign-Up" button more obvious that it's clickable and that its an interactive element by adding pseudo element selectors when hovering or focused on it. The button should also redirect users somewhere so we could use a <a class= "btn-sign-up" href="#">Sign-Up</a> instead by also giving it a class for us to select it. Here is some code you could also add:

    .btn-sign-up {
cursor: pointer; 
transition: all .3s ease; 
}

.btn-sign-up:hover,
.btn-sign-up:focus {
background-color: white;
color: hsl(71deg, 73%, 54%);
}

Hope this helps! Keep it up 😁
    0
  • Sean Gray• 690

    @seangray-dev

    Posted

    Looks good! One small suggestion is to increase the line-height on your paragraph text. It can be difficult to read if the text is too bunched up together, and can cause eye strain. To give it some more breathing room you can try something like this:

    line-height: 1.5;

    I hope this helps! Keep it up! 😁😁

    Marked as helpful

    1
  • Sean Gray• 690

    @seangray-dev

    Posted

    Hey Alana!

    Looks good! 👍 One thing you may not have noticed is your background image does not cover the entire screen at larger screen sizes. To fix this you can simply change the background size from contain to cover: background-size: cover;

    To try and fix the spacing on your grid layout I did a couple things:

    main {
max-width: 1200px;
margin: 0 auto;
}

    By default grid containers will utilize the maximum space provided, so by applying a max-width we are saying this grid container cannot exceed the set value you applied. And then using margin: 0 auto to center the grid again. Thus decreasing the spacing you had between the two columns.

    Hope this helps!

    0
  • Sean Gray• 690

    @seangray-dev

    Posted

    Hey Rupom! Looks great, only thing missing from this is to vertically center that box. An easy fix for this on this challenge you could add this to your body element

    body {
min-height: 100vh;
}

    Also add a cursor pointer & hover + focus transition effect on the 'Learn More' buttons. You could do this:

    button {
cursor: pointer; 
transition: all .3s ease;
}

    Hope this helps, keep it up!

    0
  • Marcos• 40

    @Toxgem

    Submitted

    -Is the code clean enough? -What changes should i be doing to keep best practices? -What would be your approach to this challenge? I wonder what other ways are to clear this one, maybe the usage of buttons, and how many tags i am missing to make it simpler.

    Interactive Rating Component Vainilla JS

    #accessibility

    2

    Sean Gray• 690

    @seangray-dev

    Posted

    Hey Marcos! Looks pretty good

    A better way to build this is to create a Form element and inside of it, the “rating buttons”would be built using Radio Input elements with Label Elements attached to it.

    After submitting the illustration margin collapses with your rating div. You could try this instead:

    .thanks {
display: flex;
flex-direction: column;
}

    Hope this helps! Keep it up

    Marked as helpful

    1
  • Sean Gray• 690

    @seangray-dev

    Posted

    Hey Jose! Nice job, couple small things I noticed you could improve with this design.

    The card element should be vertically centred in the page. You could do this by adding: min-height: 100vh to the body

    Considering this would be a component attached to a larger site, I would change the h1 to an h2.

    Try adding a transition to your "Proceed to Payment" button

    button {
transition: all .3s ease; 
}

    Hope this helps :)

    Marked as helpful

    0
  • Anurag• 100

    @gpt-anurag

    Submitted

    1. How to decide which relative unit to select, "em" or "rem"? (I understand how they work. I just want to know when to use one or another)
    2. Any suggestions to maintain CSS would be helpful.
    3. Any other suggestions to improve would be wonderful.

    Interactive Rating Component using React

    #react

    1

    Sean Gray• 690

    @seangray-dev

    Posted

    Hey Anurag,

    Here are some tips for your first 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

    1
  • Sean Gray• 690

    @seangray-dev

    Posted

    Looks like you submitted the wrong project for this design. Try submitting again. The project you submitted was for: 3-column preview card component

    0