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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Opolis, congrats for finishing the challenge ! 🎉

    It look really good, you really did a great job.

    About the overall design of the project :

    • You forgot the main background image, if you look closely you can see there is like a wavy blueish background on the main container. You can add it using the CSS property background-image

    For your code and how to use better practice :

    • You can use min-height or max-height instead of height, this will prevent the content from overflowing its container and maintain aspect ratios. You can replace height: 100vh by min-height: 100vh for example.
    • Don't rely too much on fixed dimensions. Fixed values can lead to layout issues and don't forget to use relative units (like REM and EM) instead of px.
    • Code indentation is important and you don't want to add so many blank line through your index.html.
    • About code/files organization, it's depend on where you work. Everyone have is own method to organize files, components... and it can be really different from one to another company. For HTML/CSS, you can do what you've done by putting the index.html and the readme at the root, maybe you can create a style folder where you will add the style.css and the image folder. Also, no need to keep the readme.md and the styleguide.md they are just documentation to help you trough the challenge.

    You have used Flex, create a nice HTML architecture and even used color variable. It's really nice. Keep going ! If you any questions, don't hesitate to ask !

    Have a nice day.

    Marked as helpful

    0
  • Lucas Kalks• 120

    @kalkslucas

    Submitted

    Hey! Could you give me your feedback please? I did this project some time ago, but only now am I uploading it to the platform and I am resuming my studies on Web tools.

    Order Summary Challenge

    1

    Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Lucas, congrats for finishing this project, it look great 🥳

    First thing first, about the design of the component :

    • Box shadows on the main card and the payment are missing.

    • Main background image have some issue, we can see a little empty space underneath it.

    • Font weight variations, line-height variation and also font-color variation are missing.

    About the code itself, the files organization is really clean, that's great. I can find some improvements you can made :

    • Use GoogleFont instead of adding the font in your project locally, add it to your project with <link> in your index.html, you will be able to import all the font weight variations you also need.

    • Don't use absolute position on your main component, try to use Flexbox or Grid. Absolute need to be used when it's really needed on small details or element.

    • Rely more on Grid/Flex as they provide powerful and flexible ways to arrange elements without relying heavily on fixed dimensions. Fixed values can lead to layout issues.

    • Consider using max-width and max-height properties with relative units like percentages. This will prevent the content from overflowing its container and maintain aspect ratios.

    • Avoid using px and use relatives units instead like REM or EM, you used them well on the font-size 😉

    I didn't understand why JS were needed here, it's also minified so hard to read and I can't give you a review.

    If you have any questions, don't hesitate !

    Have a nice day 😇

    0
  • Charles Lughas• 40

    @lordlughas

    Submitted

    I found it really difficult using the desktop and mobile background svg image as background image. Please review the code and help with suggestions Also applying border radius to the hero image proved abortive as i couldnt edit the svg image. suggestions thank you..

    Responsive Order Summary Component

    1

    Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Charles 👋

    Good job on going that far ! For your issues, it might help you :

    • Delete your <svg> tag in your index.html. Instead, in your CSS file, use the CSS property "background-image" and "background-color" directly on <body>. As you can see, the background have a transparent part, it's a little bit tricky but you need to set the blue color as your body color background, and your SVG as your background image.

    • About the border radius, you can try to make a new <div> inside your "container", that contain both "hero-img" and "summary-container". You will add the border radius on this new one.

    Good luck 🍀

    0
  • Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Adan, your component look super nice 🤩 I'm not a pro, but I have two suggestions for you :

    • Instead of < article class="main-container"> you can just use <main>. It will also correct your accessibility issue.

    • Keep the alt text on your images, but let them empty as they are just decorative. Alt text is here to be helpful with accessibility and give a nice image's description. For example : <img src="./images/pattern-background-desktop.svg" alt="bg" />, here "bg" don't give any useful information, you can let the alt empty then.

    Hope it can help you. Have a nice day ☺️

    Marked as helpful

    2
  • zerozucker• 50

    @zerozuckerx

    Submitted

    I'm very happy with how it turned out visually but my code is, I think, quite messy - especially the positioning.

    The hover state of the etherium picture took a very long time. The eye-icon should be 100% opacity while the rest of the background should be around 30%. Also the eye-icon is not square and I didn't know how to get the borders overlapping on each side.

    I'm still confused of the standard positioning of the items inside the divs (balancediv, timediv and creator). The picture seemed to be positioned top left inside the div, while the text (p) was positioned on the bottom.

    Any insight would be highly appreciated.

    my first challenge ever - feedback appreciated

    2

    Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Zero, you did such a great job !

    For your hover state on the image, your problem might come from the fact that you didn't set any width and height on your container. Your imgWrap need to have some so both of your img-equilibrium and imgHover can herit of those properties.

    Also, for the view icon, as it's contain in your imgHover and you lower the opacity, the icon herit of it too and appear super fade. I'm sure there is plenty of solution but I used some display: none and display: inherit. Hope it can help you :)

    Good luck !

    1
  • Caroline L.• 150

    @CarolineLienard

    Posted

    Hi Enrico, good job on your second challenge ! As you want to learn the best practices, I can recommand you to not write your CSS on HTML <head>, it's not false and it work but it's not the best practice.

    You need to create an extern CSS file and link it to your HTML. Good luck !

    0