Skip to content
OverviewSolutions
31
Comments
12
Fox
@urboifox

All comments

  • Fox•550
    @urboifoxPosted almost 2 years ago

    I dont understand the comment but i hope Gabriel explained how 😄

    0
  • Muhamed•50
    @Madmohammed22Submitted almost 2 years ago

    The hardest part of this challenge is whitespace and the ability to figure out How much font size is.

    Product Preview Card (Grid)

    1
    Fox•550
    @urboifoxPosted almost 2 years ago

    Hey Mohamed, Congrats on completing this challenge🔥

    I have some tips that you might find interesting!

    first things first:

    html 📄

    • you shouldn't use the <main> element as your card in the page, The content inside the <main> element should be unique to the document 🙌. It should not contain any content that is repeated across documents, (it just contains the main elements in the page)
    • instead of using the img element you can use the picture element and change the img depending on the user screen size 👀, you can learn more about picture element from here📌
    • instead of using the <div class="container"> element you could have used the <article> element, the <article> element represents a self-contained composition in a document, page and it's perfect for such cases when you have one or multiple cards.

    CSS 🎨

    • you dont have to use values like 0.875rem and 0.625rem thats not practical, if you want to come up with a solution that matches the original design you can use extenstions like perfectPixel🙌 keep in mind that on style_guides.md you had the recommended font size, and for the padding sizes you shouldnt write more than one decimal point so keep that in mind.
    • you should use @media media queries to change the style of your card depending on the user screen width, you can learn more about media queries from here💻: for example on the screens that are smaller than (767px) you want your card flex-direction to be column instead of row so the code will be something like this:
    media (max-width:767px) {
  .card {
    flex-direction:column;
  }
}

    I hope this helps!🙌

    good luck on your next solutions😄

    Marked as helpful
    0
  • Claudia118•10
    @Claudia118Submitted almost 2 years ago

    This is my solution for this challenge, I'm thrilled to have completed this challenge. I tried to create this project using mobile first approach.

    Responsive grid/flexbox

    1
    Fox•550
    @urboifoxPosted almost 2 years ago

    hey there, congrats on completing this challenge! I have some small tips that might interest you! css 👀:

    • you can change the justify-content: space-evenly in the .product-price-section element to justify-content: space-between
    • you shuoul use the rem and em instead of px since pixel value is not responsive! away from that I think It's a great solution! good job
    Marked as helpful
    0
  • Fox•550
    @urboifoxPosted almost 2 years ago

    Hey Pi3guss, you solution looks pretty fine heres some more tips that might interest you and help you in future projects tho😊

    • in your solution you made the numbers as buttons, and when the user focuses them then the color changes, and thats cool but heres the problem: when the user clicks outside the buttons the focus gets removed then the style also gets removed 🫤 and that is not so practical in bigger projects🫤 so heres my advice: you can add this function to your buttons
    rates.addEventListener(("click"), (e) => {
  if (e.target.classList.contains(btn)) {
    rates.forEach((rate) => {
      rate.classList.remove("active");
    })
    e.target.classList.add("active")
    rating.innerHTML = e.target.innerHTML;
  }
})

    this basically add a class named active on the button you click on and removes it from the other buttons.🙌 then in your css file you can select the .active class and style it the same as the button:focus element and this should give you the same result without the click away problem 👌😁.

    • another problem is when the user doesnt choose a number he still can hit submit and send the data... in this case: the <span id="rate"></span> element will be empty in the second card🫤 to solve this problem you can check if the user selected a number then you will only excute the condition that switches the card. heres an example:
    submit.addEventListener(("click"), (e) => {
  if (rating.innerHTML !== "") {
    secondCard.classList.remove('hidden')
    mainCard.style.display = 'none'
  }
})

    and I hope this solves the problem !😁📌 and i also really hope this helps you in the future and with your JS code, if you need any thing else just ask! good luck!🌹

    Marked as helpful
    0
  • Fox•550
    @urboifoxPosted almost 2 years ago

    Hey Marcus, nice solution!😁 I have some tips that might help you👨‍💻 -📌you might want to wrapp your button (<p>) with an <a href=""> element to make it clickable.

    • 📌in smaller screens (smaller that 767px) your card goes out of the frame! here are some solutions to fix it! you might want to decrease the font size in normal screens, and make the height and width of the card fit-content so they wont be static and change depending on the font size of the inside content!
    • 📌the <section> element represents a generic standalone section of a document, or we can call it the whole section in a website. as for this challenge you could switch the <section> element with an <article> element or a <div> with a class of card! I hope this helps! goodluck Marcus🌹⌨️
    Marked as helpful
    1
  • Michel Moreira•300
    @michel-moreiraSubmitted almost 2 years ago

    Hello frontend mentor community! This is my solution to Preview Card!

    • I wrapped the card in the article tag, should I use another tag to have more meaning and semantic?

    • I've putted some hover state by myself apart from the requesition of the challenge, in the mobile device's screen did it stuck in interection mode?

    • The tag header inside the card makes sense or should i replace by a div tag or any other?

    Profile Card Preview with CSS Flexbox and semantic HTML

    1
    Fox•550
    @urboifoxPosted almost 2 years ago

    Hey Michel, nice solution!

    • the <article> tag is fine here because it specifies independent, self-contained content.

    • a tip for using hover state is to put a transition: .3s on the element with the hover state so it makes it animate smoother 👌 and there are a lot of css shadows and gradient generators out there which can help you make more cool shadows! like this one

    • the <header> element is intended to usually contain the section's heading (an h1 – h6 element or an h group elements) in this case it's not a section it's a card so in the big projects you might just use a <div> with a class name called heading or header or anything you like😊👌

    I hope this helps atleast a little bit, good luck 👨‍💻🌹

    Marked as helpful
    1
  • Fox•550
    @urboifoxPosted almost 2 years ago

    Hey, amazing solution! keep up the good code. just a quick tip that might interest you! you should contain all you page contents with <main> tag why use main tag‬‏? The HTML <main>Tag is used to given the main information of a document. The content inside the <main> element should be unique for the document. Which includes the sidebars, navigation links, copyright information, site logos, and search forms. I hope this helps! goodluck on your next coding project! 😊

    0
  • Fox•550
    @urboifoxPosted almost 2 years ago

    Hey Rafael, nice solution! maybe it can use some more work on responsive side, you can make the height of the card depending on the content with this code:

    @media screen and (max-width: 740px)
.container {
    height: fit-content;
}

    I hope this helped you a little, happy coding! :)

    Marked as helpful
    0
  • Fox•550
    @urboifoxPosted almost 2 years ago

    Nice Solution there! just put in mind to take care of the README.md file, so you wont have to change them in all your repos in the future! happy coding :)

    2
  • Fox•550
    @urboifoxPosted almost 3 years ago

    if someone knows where I can practice responsive designs please tell me. thanks

    0
  • Fox•550
    @urboifoxPosted almost 3 years ago

    amazing design, i have a quick tip the used blend mode is multiply not overlay

    Marked as helpful
    1
  • Fox•550
    @urboifoxPosted almost 3 years ago

    and i didnt notice that its big :) my bad

    0