My first project using HTML, CSS and Flex box

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Nice! 🙌🏻

  I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

  You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  0

  ---

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @catherineisonline

  Thanks for your advice, every comment is useful for my learning.

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY ORLANDO!

  As this is your first challenge, I am impressed by how close your solution is to the design, but I would just like to point out a few things.

  This code

    <p class="ofert">
     $149.99
    </p>
    <p class="price">
     $169.99
    </p>
  

  should be wrapped around a div instead of giving them both a display of inline, doing so will not only make your code cleaner, but it will enable you to align the two elements as well because I see that it is not aligned vertically, so what you could do is put both elements in one div then give that div a display: flex then use the code align-items: center, this should help.

  I also noticed that the discount price is not in the required font, just something to remind you of.

  IF YOU FOUND THIS IN ANYWAY USEFUL, DON'T HESITATE TO MARK IT AS USEFUL :)

  HAPPY CODING!

  Marked as helpful

  0

  ---

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @Nadine-Green

  Thank you very much. In fact, centering the prices was one of the things that I couldn't do completely correctly, so I did what you told me and it worked for me.

  Great!

  0

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @Nadine-Green I have a question, why in the DESIGN COMPARISON section, where solution/design appears along with a screen to compare the challenge with the solution, the solution that I have uploaded is different from the one that appears in this part, for example my solution has the same number of lines as the image of the challenge. But in this comparison section, it seems that my solution has more lines than it should have and if you go to the preview site you will see the number as it should be, I don't know if I'm making myself understood. Is this happening to anyone else or why is it happening to me? The same thing happened to me with the new challenge that was recently uploaded from the QR code. Can you help me with that if you can please?

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @orlando-caceres

  Oh, for that you will simply have to generate a new screenshot, the button to do so should be located just above the screenshot itself.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Congrats on completing your first challenge!

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This component requires the use of two images 🎑 at different breakpoints. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @vcarames

  Thank you very much for your feedback.

  I will take into account the alt image, to be more detailed.

  I have seen your work for this same challenge and wow, I have saved it for reference, I thought it was fantastic, very good work.

  0

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @vcarames I have a question, why in the DESIGN COMPARISON section, where solution/design appears along with a screen to compare the challenge with the solution, the solution that I have uploaded is different from the one that appears in this part, for example my solution has the same number of lines as the image of the challenge. But in this comparison section, it seems that my solution has more lines than it should have and if you go to the preview site you will see the number as it should be, I don't know if I'm making myself understood. Is this happening to anyone else or why is it happening to me? The same thing happened to me with the new challenge that was recently uploaded from the QR code. Can you help me with that if you can please?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @orlando-caceres

  I assuming it has to do with how their screenshot works. You try taking another screenshot but honestly, I would not worry too much about it as long your code is good.

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  Please, have your styles in a separate CSS file, not inside HTML.

  Also, try to use semantic elements in your HTML. Errors in your report are because of that.

  This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.

  This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @SinisaVukmirovic

  Oh thank you very much.

  I'm in a new challenge so I'll take it into account and I'll also fix this one in my files.

  It's nice to get feedback like this.

  1

  

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  @orlando-caceres No problem, buddy!

  Learn from mistakes and keep building new projects!

  0

  

  orlando-caceres•20

  @orlando-caceresPosted almost 2 years ago

  @SinisaVukmirovic I have a question, why in the DESIGN COMPARISON section, where solution/design appears along with a screen to compare the challenge with the solution, the solution that I have uploaded is different from the one that appears in this part, for example my solution has the same number of lines as the image of the challenge. But in this comparison section, it seems that my solution has more lines than it should have and if you go to the preview site you will see the number as it should be, I don't know if I'm making myself understood. Is this happening to anyone else or why is it happening to me? The same thing happened to me with the new challenge that was recently uploaded from the QR code. Can you help me with that if you can please?

  0