Skip to content
OverviewSolutions
26
Comments
30
Loai Esam
@LoaiEsam37

All comments

  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    Your solution is truly impressive and legit . Keep going !!! and i have some suggestions to make it more incredible than it is.

    Look i don`t know much about tailwindcss so i will just write css so you can get the idea

    You can add these propeties to <main> tag so that it become responsive to extra large screens :-

    main {
max-width: 1400px;
margin: auto;
}

    and then remove the padding from the media query so that the <main> tag can take its full width:-

    @media (min-width: 768px) {
.md\:p-40 {
padding: 10rem; /* remove this property */
}
}

    there are more details to make it responsive for small screen sizes but to do that i will need to read the full structure of your code and this will be very painful šŸ˜…

    hope you found this helpful šŸ˜Š

    Marked as helpful
    1
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You're a true expert at coding and Your skills are truly impressive and you can make it more incredible if you use this html structure to wrap the elements and center the container

    <body>
<main>
<div class="container">
<div class="wrapper">
<div class="description">
...
</div>

<div class="ratings">
...
</div>
  
<div class="reviews_container">
...
</div>
</div>
</div>
</main>
</body>

    give the <div class="container"> tag max-width: 1200px; and padding: 0 15px; and remove the padding and display grid from the main tag and give it these properties :-

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

    and you can use the <div class="wrapper"> for making some padding. there are some more changes but i don`t have time to say it all šŸ˜… also you can checkout my solution for this chalange if you want to see my source code

    hope you found this helpful !!! šŸ˜Š

    Marked as helpful
    1
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    Wow, your code is truly exceptional! It's so well written and efficient that I think it would be a disservice to try and review it. You've clearly put a lot of time and effort into it, and it shows. Keep up the amazing work!

    1
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You have made it pixel perfect !!! You're really talented at coding man and I think you are even better than me. Keep going !!!

    0
  • Qumrranā€¢410
    @qumrranSubmitted over 1 year ago

    I have a question for the users: I encountered a problem with applying a shadow to the semi-circular elements of individual sections. After applying the shadow underneath, I can see the div's corners in the background color. Unfortunately, the shadow didn't become rounded. Could someone please explain what's going on?

    Single Price Grid Component HTML/CSS GRID

    2
    Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You're really talented at coding! Your solution is truly impressive. Keep going !!!

    0
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You're a true expert at coding. Your skills are truly impressive. and if you make your code fully responsive it will be incredible. note that the smallest screen size is 320 px. Keep going !!!

    0
  • Gazdik Tamasā€¢40
    @tamasgazdikSubmitted over 1 year ago

    Hi all,

    Couple of questions from my side regarding the solution:

    #1 Semantic HTML and accessibility:

    • Do you think I overdid the accessibility with all the aria-label and aria-labelledby properties on pretty much all of my elements? It kind of felt redundant providing IDs only to be used by other elements for the aria-labelledby attribute.
    • I used article elements for the two main parts of the content, because I thought they'd make sense on their own. Later I used section elements for different the attribute sections. Would you have done it differently?

    #2 CSS

    • For mobile layout I I used Flexbox for the body display style and changed it to Grid for desktop layout. Even though it looks the way I want it, it feels like a lot of extra work. Do you think the same could be achieved with less code?
    • Can you tell me an easier way to create a layout where we have the main content in exactly the middle of the page and some footer at the bottom? I used below solution, but once again it's seems too complicated for a relatively easy problem:
    body {
display: grid;
grid-template-rows: auto min-content auto min-content;
justify-content: center;
}

    then for main content:

    main {
grid-row: 2 / 3;
}

    and for the footer:

    footer {
grid-row: 4 / -1;
}

    As always, any feedback on the code or best practices is appreciated, but I'd be really glad if someone could answer the questions above. Thanks for the opportunity, happy coding!

    Result Summary Component - semantic HTML5 & CSS3

    3
    Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You're really talented at coding! Your work is impressive. Your solution is so elegant and efficient. Keep going !!!

    1
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    You're really talented at coding! You make coding look easy! Your skills are really top-notch. Your solutions is so elegant and efficient. and if you make it responsive it will be incredible to do that you can change the grid-template property in the media query to be one column only at mobile screen sizes.

    happy coding !!!

    0
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    you can use input tag type range to make the range of the price

    happy coding !!!

    0
  • Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    Wow, you're a coding wizard! Your solution is so elegant and efficient. Keep going !!!

    Marked as helpful
    1
  • Karthikā€¢220
    @Bi-ByeeSubmitted over 1 year ago

    Hey guys did a new component, hope it's met up with the challenge. Could anyone recommend resources to easily understand responsive design and @media query.

    Bless up, Karthik

    Product preview card component

    3
    Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    Wow, you're a coding wizard! Your solution is so elegant and efficient. and also if you add these properties to your code it will be better.

    body {
display: flex
justify-content: center
align-items: center
}

    this will make you .wrapper element in the center of the page.

    happy coding !!!

    0
  • UnFikā€¢50
    @UnFikSubmitted over 1 year ago

    difficult part with this is centering the component vertically and horizontally but the solution is the parent div just need static height other than %. in this case we should've add static height to body element

    Product Card Component

    2
    Loai Esamā€¢670
    @LoaiEsam37Posted over 1 year ago

    Very Good keep going man. but LOL!!!, you know that you submitted the solution for the wrong chalange, right ?!?

    Marked as helpful
    0