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

Submitted

First time using tailwind css

#tailwind-css

@MoHamdy94

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using tailwind-css hope i got it right

Community feedback

Panjiβ€’ 2,110

@pperdana

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

πŸ“Œ Add <main> tag as semantic HTML in code

  • The <main> tag is a semantic HTML element that is used to define the main content of a web page.

  • The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main>
  <div class='container'>
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
  </div>
</main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy codingπŸ€–

Marked as helpful

0

@Sinkycode

Posted

@MoHamdy CongratulationsπŸ‘ πŸŽ‰ I noticed you were in a hurry to finish and submit the challenge. Yes, it's good to submit your solutions but it's more than good to take your time and make your work perfect. Just like your working for a client

You're good but next time give the project your time. I would suggest you consider ( mobile first )

Marked as helpful

0
Abdul Khalid πŸš€β€’ 72,100

@0xabdulkhalid

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE πŸ“Έ:

  • Looks like the background-color has not been set, So let me explain How you can easily apply the background color along with the svg they provided.
  • Add the following style rule to your css, and then experience the changes
body {
    background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
}
  • Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord