Skip to content
OverviewSolutions
13
Comments
4

Jack Shelton

@thejacksheltonDallas, TX210 points

Hey everyone, I'm Jack! I'm a front-end developer that loves the process of continual learning. I use Front-end Mentor to practice, improve my layouts, and help others get to the next level in their front-end journey. I wish you the best! -Jack

I’m currently learning...

React, Styled Components, CSS & JS Mental Models

Latest solutions

View more solutions

Latest comments

  • Jack Shelton•210
    @thejackshelton

    Hey Zou!

    I know this isn't exactly related to your challenge, but I thought I'd give some interesting feedback when it comes to positioned elements since it seems like you had some trouble with absolute.

    When we set something to position absolute, we are taking it "out of flow". Where other elements will take up the space that absolute was.

    Now you can use top, left, right, or bottom to position the absolute element.

    The interesting part is where we want to position the element.

    If there is no positioned parent, the absolute element is tied to the viewport. On the other hand, let's say you give the parent position relative, then that absolute element is bound to the constraints of its parent.

    top: 0px; and left 0px would put it in the top left of the parent container.

    Marked as helpful
  • Jack Shelton•210
    @thejackshelton

    Hey, my man! You did a great job!

    The image isn't showing up because you need to add a period before your slash (/) in the src file.

    Try adding it like this: <img src="./image-qr-code.png" alt="">

    side note: try adding alt text to each of your images, just describe what the picture is for. (It's good for SEO & accessibility)

    Another thing is flex is affected by the parent container. In this case, you have a class called a container, and another div called content.

    If you wanted to center the content in the middle, you would need to add the following:

    .content { display: flex; justify-content: center; align-items: center; }

    That way, you can remove your margin-top that is in your container class.

    If this helped, I'd appreciate it if you hit the "Marked As Helpful" button. If you need any more help hop in the slack community :)

  • Jack Shelton•210
    @thejackshelton

    Hey felipe!

    I see a typo on the submit button type in the footer.

    You can also use the CSS :focus selector to make the different ratings appear selected orange on click.

    Otherwise amazing job! Wish you the best on your React Journey!

    (If this was helpful friend please hit the helpful button xd)

    Marked as helpful
  • Jack Shelton•210
    @thejackshelton

    Hey Caleb!

    I recently did the same challenge as you and you did a really good job man.

    You can use the CSS :focus keyword like hover for the buttons to change color on interaction.

    Also, try to use the <main> tag in all of these solutions. Otherwise it will show as an accessibility issue in Front End Mentor.

    Once again, great job!

    (If this was helpful please hit the helpful button for me friend haha)

    Marked as helpful