Skip to content
OverviewSolutions
11
Comments
23
Aatypic
@Aatypic

All comments

  • Ric•210
    @Ripra87Submitted almost 2 years ago

    Hello guys and thanks for watching and sharing your comments and suggestion with me! There are 2 main things i'm not happy about this project: 1-Again, and again, and again.. i'm not able to get a real, round, borders on my projects.. i always use border-radius, and for the images it always works, but when i use it on the general layout (divs, sections, etc) i never get a completly round borders.. anybody knows what i do wrong? 2- In the Main design, when you hover on the pic, the opacity is "bright", kind white, mine is darker.. i tryed to change the background color of the section.image and div.eye (check the code if you want) with a white colo, but nothing changed.. Btway, thank you for any suggestion you can give me to code better!

    NFT card

    3
    Aatypic•490
    @AatypicPosted almost 2 years ago

    Hello and congratulations on your solution !

    I don't understand what you're trying to achieve with your 1st question. Sorry ^^

    For the 2nd question, you need to add a layer inside your <div class="image">, you could create an empty <div class="layer"> and then play with it to match the original. There is a guide on https://www.w3schools.com/howto/howto_css_image_overlay.asp.

    Be careful with the semantic, others here would also say that you should respect the semantic tags. In your case only ONE <section> would be good. Knowing that what we are building is ONE component.

    Oh and also you have a little scroll issue ;)

    Hope it helped, good luck ✌️

    Marked as helpful
    0
  • Real uNondaba•90
    @NondabaSubmitted about 2 years ago

    I found the active state to be hard due to the hover color that was supposed to be on the button and the change link which was not given in the style guide. Is my color for the button and change link in the active state accurate? Did I depict similar shadow of the card and button?

    Order summary card with active state built using CSS and HTML

    1
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution!

    Concerning your question, yes the color for the effect is not in the style guide. But from what I understand is that it's the same color with less opacity something like .7 hsl(245deg 75% 52% / 70%)

    Yes the shadow of the button is maybe too big but that's personal preference. Or if you space it out more and give more size to the price/plan bubble to make it stand out better 🤷‍♂️

    Anyway this is great stuff.

    Good luck ✌️

    1
  • Hibiscuit•30
    @Hibiscuit0Submitted about 2 years ago

    Hi,

    I've seen that at some screen sizes, my footer comes next to my main component and I don't understand why (for example, on Edge "Nest Hub" screen 1024 x 600 and on my Samsung galaxy S7). I guess that it is because of my flexbox but I don't understand the reason of this problem.

    Do you have any clue why it is happening ?

    Thanks a lot

    Hibiscuit0 NFT component

    2
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    Concerning your problem, you are right it is because of flexbox ;) Is is actually the flex-flow: column wrap you have in this case the wrap saying if you have enough space be in one line if not wrap it. To fix it you could instead remove le line and do a flex-direction: column.

    Again some devices are weird, I never tried any of my design on a Nest hub haha.

    I think your design looks good.

    Good luck ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Salut et félicitations pour ta première solution ! Je me permets en francais c'est rare :)

    Pour ta question concernant le responsive, tu devrais mettre un break-point plus large actuellement tu es a 376px c'est assez bas sachant que toute la partie tablette est du coup ecrasé.

    Tu peux donc dire que la partie tablette, elle aussi aurait le même design que en mobile pour te faciliter le tout (genre 768px).

    Ensuite tu pourrais avoir les mêmes résultats visuelles avec un nombre moindre de <div> container. En effet les 2 divs parents de <main> pourrait être enlevées. Suffit ensuite de mettre display: flex sur le <body> pour centrer ta carte.

    Aussi je vois que tu charges l'image avec le css et surtout tu utilises une <section> uniquement pour l'image, c'est pas idéal. Il est conseillé de le faire via le html avec le tag <picture> pour un resultat comme ceci:

    <picture>
  <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg" >
  <img src="images/image-product-desktop.jpg" alt="..." >
</picture>

    Plus d'infos ici > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Bonne chance à toi ✌️

    Marked as helpful
    0
  • John•20
    @john-jpannSubmitted about 2 years ago

    Do you have any questions about best practices?

    So, I am curious about the following code snippet, is wrapping an image tag inside of a wrapper in this case a figure tag a good idea? I personally find it easier to deal with images this way.

    <figure class="product-preview-card__image-container">
   <img
      src="./images/image-product-desktop.jpg"
      srcset="./images/image-product-mobile.jpg 2x"
      alt="Gabrielle Essence Eau De Parfum in a bottle"
  />
</figure>

    On another note, I don't often use SRCSET. Was this a good use case for it, or are there better ways of working with multiple images?

    Thanks for checking out my project!

    Product Preview Card | BEM, SASS

    1
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    Concerning your question it is best practice to use a <picture> tag especially when using multiple images depending on the devices width thanks to the <source> tag. You may seem to have forgotten about the 2 images changing if on desktop or mobile view, I can see only one being used ;)

    You can learn more about this here > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    You could do something like this:

    <picture>
  <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg" >
  <img src="images/image-product-desktop.jpg" alt="..." >
</picture>

    So now the image will be the mobile one until 768px wide. If bigger it will use the default <img>

    Oh and on mobile view there is a little gap between your image and the text. Don't forget a display: block in your img css reset. That should fix it.

    Good luck ✌️

    Marked as helpful
    1
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    On this project maybe the easier approach was to use Grid instead of flexbox for the <main>. There is some weird behavior between the cards, when shrinking the devices width e.g. on tablet the 2 cards in the .container are not responding the same way as the 2 on the sides.

    And if you noticed on the design, the spacing between the cards is like an H and the spacing is equal.

    I know everyone's site doesn't need to match the exact design but I don't think you did this on purpose.

    For the grid you could do something with 3 columns, and not forget that you have to remove the <div class="container" >. Now your 4 different cards are direct children of <main> and you can place them individually on the grid.

    main {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

    Here is help to place the cards > https://css-tricks.com/snippets/css/complete-guide-grid/

    Nice hover effect on cards !

    Good luck ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your first solution !

    You can achieve the same results with less <div>s. Not everything needs to be contained in a <div>, I've been there :D

    For this project you can actually do it without any <div>. In your html you could do :

    <body>
  <main class="card">  //the container
    <img>
    <h1>...
    <p>...
  </main>
</body>

    Good luck ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution, it's looking good !

    To match better the design and readability you could change the font-weight of the <p> 's under the header and inside the cards, I think everyone finds it hard to read.

    You could also try and remove the tiny scrolling you have.

    After checking your code it has to do with your spacings. E.g. your <body> has a default margin on it for that you need a margin: 0 in order to remove the default value. You can also add a min-height: 100vh. Those are actually resets you can find more about here https://piccalil.li/blog/a-modern-css-reset/

    Good luck ✌️

    Marked as helpful
    0
  • Angus Turnbull•70
    @echoturnbullSubmitted about 2 years ago

    Had a few issues with this.

    I tried to use grid for the lay out of the web page and i think this may have been a bad idea..

    I also had some issues with adding the star images. I couldn't quite figure out the best way to do this. The way i did do it, meant that i couldn't change the location of the img for the web page and it was stuck in the same position.

    HTML CSS FLEX/GRID

    2
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello, just a quick help for grid

    Your <section class="container"> you applied:

    .container {
...
grid-template-areas:
  "title review"
  "cards cards";
}

    Meaning on this template you said you have 3 different items that are taking specific areas "title" taking one space " review" too, and "cards" taking 2 grids bottom. Therefore you need in your html, so inside .container 3 children to work, right now you have 8 children inside:

    -.heading and .description should be together in one.

    -.star-rating divs all together in one.

    -etc .. you get it ;)

    Now I really encourage you to learn more about semantic, you cannot only use <div> everywhere. And not every content needs to be wrapped in a <div> ;)

    Concerning your question about the stars. You could have them as a ::pseudo-element background-image, or you can make a list with 5 separate <li>'s each holding the svg inside. I've seen both work.

    I'm looking forward to see the end results ✌️ Good luck !

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your first solution, it's looking very good !

    Concerning your question, I'm a newbie but I think on others challenges with more content would be easier to point out what can be improved accessibility wise.

    -For the prices you could have a <span> with an .sr-only class explaining which one is, kind of like their class name. Other than that the texts are self explanatory.

    -Another thing in the button you can achieve the same results without the <p> element and I don't think it's appropriate for it's content, you already have the <img> and the <span>.

    Anyway some minor stuff

    Good luck ✌️

    Marked as helpful
    0
  • Ljr777•150
    @Ljr777Submitted about 2 years ago

    I couldnt get to horizontal center my price div, but I will work on it later. really just had to submit this for some morale, onto the next haha

    NFT Card done using CSS flexbox

    2
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    Concerning your problem,

    To be able to center the card you need it's parent the <body> to be bigger, hence we use a min-height: 100vh on it. Also an easy way is to set a display:flex and center properties on the <body>.

    So as last step you could remove the margin auto on the child <div class="main-div"> since the <body> takes care of the positioning.

    Good luck ! 👌

    Marked as helpful
    0
  • Gabriela•100
    @ga-bri-elaSubmitted about 2 years ago

    Hi everyone!

    It took me quite some time to figure out this challenge. I thought it was going to be easier to break it down, but I soon learned that I was mistaken.

    The big game changer for me was understanding how to better uses classes with JavaScript. This has opened so many possibilities for problem solving and that was very exciting.

    I do have a question for the community: I have chosen to disable the buttons that allow the user to select a percentage, after the first selection is done. But I find that it is quite bad UI that when the user hovers on top of the disabled buttons they would see the changes in the hovering state. I have tried to find a solution to disable the hovering style once the buttons were disabled, but I was not successful. Does anyone have any idea how I could tackle that?

    Thank you in advance for your help, comments or feedback!

    Responsive Tip Calculator App

    3
    Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    I am a newbie so I won't be able to comment on your work, only about your question. Although I think It's weird not being able to change.

    You could do it with the selector in css :not()

    Something like this:

    button:not(.selected):hover {
  background-color: #00494d;
  color: white;
}

    Good luck 🙂

    Marked as helpful
    0