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

Building the card by using HTML CSS

ThapaKarn 40

@KarnThapagon

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

nerometa 250

@nerometa

Posted

ค่อนข้างตรงดีไซน์เลยฮะ ถือว่าทำได้ดีมากสำหรับโปรเจคท์แรก ผมมีข้อแนะนำอยู่ประมาณนึง คิดว่าคุณต้องแก้ไขได้แน่ๆ เลยฮะ

  1. การเอา .svg เข้ามาใช้ เราใช้แท็ก <img> ได้ครับ เช่น <img src="assets/little-icon.svg"> จะประหยัดโค้ดมากขึ้นครับ
  2. การจะทำ wrapper อันใหญ่ครอบตัวคอนเทนต์ของเรา แล้วปรับให้คอนเทนต์อยู่กลางจอ <body> จะต้องมีความสูงเท่าจอ (100% หรือ 100vh) ตัว wrapper ใช้เป็น 100vw, 100vh หรือหน่วยเปอร์เซนต์จะดีกว่าฮะ แล้วทำให้เป็น display: flex, justify-content: center, align-items: center จะทำให้ตัวคอนเทนต์อยู่กลางจอฮะ
  3. ลองเรียนเรื่อ Semantic HTML เพิ่มนิดนึง แทนการใช้ div เยอะๆ ในโปรเจคท์ฮะ เช่น <main>, <section>, <article> หรืออะไรทำนองนี้ อาจจะยังไม่ต้องลงลึกมากเรื่องการกำหนด attribute

โดยรวมถือว่าทำดีมากๆ ฮะ พัฒนาต่อไป💪

Marked as helpful

0

ThapaKarn 40

@KarnThapagon

Posted

@nerometa ขอบคุณมากๆครับ

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