ลองสร้างเว็บ E-Commerce ด้วย TailwindCSS

TailwindCSS หนึ่งใน CSS Framework ที่ถูกพูดถึงบ่อยม้ากกในยุคนี้ แถมยังมีการป้ายยาให้ใช้กันต่อกันเต็มไปหมด🫠 แต่จะช่วยให้เราเขียน CSS ได้ง่ายขึ้นจริงไหม?? มาหาคำตอบไปในคลิปนี้พร้อมๆ กันเลย....
ลิงก์ TailwindCSS→ tailwindcss.com/
Figma → bit.ly/Figma-E...
0:10 - Intro
0:31 - ปกติเขียน CSS ยังไง แล้ว Tailwind เขียนยังไง?
0:50 - เว็บหลัก Tailwind และ Demo จาก Official
1:20 - ดู Design จาก Wireframe
1:46 - วิเคราะห์ Component ต่างๆ
2:25 - Installation (CDN)
3:28 - Layout Analysis
3:40 - Start Coding!
4:30 - Display Grid ด้วย Tailwind
5:10 - เริ่มทำ Filter
5:57 - ทำ Checkbox
6:10 - :hover ใส่ใน HTML Class ได้เลย!
7:00 - ทำการ์ดกัน
8:25 - ใส่ grid-gap
9:10 - พระเอกของ Tailwind ทำ Responsive!!
12:30 - เขียน Gradient ได้เลย
12:50 - สรุป ข้อดี/ข้อเสีย
มาแบ่งปันความรู้ แชร์ประสบการณ์ใน Community borntoDev ได้ที่ / discord
เข้าร่วมกลุ่ม Facebook Community ได้ที่ / 24251. .
สนใจจัดอบรมออฟไลน์ ดูรายละเอียดได้ที่นี่ www.borntodev.....
▲ ติดตามช่องของเราได้ที่ : bit.ly/SubBorn...
▲ Facebook : / borntodev
▲ Website : www.borntodev.com/
🦖BorntoDev Channel คือ ช่องยูทูปที่เน้นสาระด้านเทคโนโลยี การพัฒนาโปรแกรม ไปพร้อมกับความสนุกสนาน และ รอยยิ้มเข้าไว้ด้วยกันทั้งในรูปแบบบทเรียน และ vlog เพื่อการเปลี่ยนรูปแบบการเรียนรู้ด้านการพัฒนาโปรแกรม และ เทคโนโลยีแบบเดิม ๆ ที่เป็นเรื่องเฉพาะกลุ่มให้เข้าถึง เข้าใจได้ง่ายยิ่งขึ้น โดยพัฒนาเน้นไปที่รูปแบบการนำเสนอใหม่ ๆ ที่เป็นมิตรกับทุกคน
▲ กิจกรรมใน Channel BorntoDev เป็นส่วนหนึ่งในการดำเนินงานของ บริษัท บอร์นทูเดฟ จำกัด ที่เปิดรับ Partners ที่สนใจร่วมเปลี่ยนแปลงให้สังคมไทยเป็นสังคมด้านวิทยาศาสตร์ และ เทคโนโลยีมากยิ่งขึ้น หากคุณสนใจสนับสนุน และ ก้าวไปพร้อมกัน สามารถติดต่อร่วมงานได้แล้ววันนี้
▲ ติดต่อโฆษณา สนับสนุน และ ร่วมงานได้ที่: [e-mail]

[@Mie_dev]

ขอบคุณครับ แต่ขอนอกเรื่องนิดนะครับ อยากได้เสื้อครับ 😅

[@SahatsawatBoonchit]

เขียนมันส์ดี TailwindCSS

[@haksu6326]

คุณช่วยแนะนำฉันสำหรับการศึกษาWeb Developerได้ที่ไหน

[@PanachaiLikhitpanyarat]

คลิปหน้าเป็น bootstrap ได้ใหมครับ อยากเห็นความแตกต่างครับ ขอบคุณครับ

[@borntodev]

เดี๋ยวแอดจัดไปบอกนิวให้คร้าบบบ 5555

[@PanachaiLikhitpanyarat]

@@borntodev ขอบคุณครับแอด

[@Anastasia-rv8jw]

ขอตอบแทนนิดนึงได้ไหมงับ คือตัว boot จะทำให้เว็บช้ากว่างับ ตัว tailwind จะเบากว่าและเร็วกว่าด้วย สามารถปรับแต่งได้หลากหลายกว่าด้วยนะ

[@PanachaiLikhitpanyarat]

@@Anastasia-rv8jw เห็นหลายคนบอกว่าใช้ boot จะเขียนพัฒนาเว็บเร็วกว่านี่จริงใหมครับ เพราะว่ามันสำเร็จรูปมาแล้วเราแค่หยิบมาใช้ งานเลยเดินเร็วกว่า แล้วกระแสตอนนี้ tail หรือ boot กะลังมาครับ หรือว่าสูสีกันครับ ขอบคุณครับ

[@Anastasia-rv8jw]

@@PanachaiLikhitpanyarat อยู่ที่เนื้องานที่เราทำงับ ถ้าเราต้องการความสะดวกใช้ boot จะง่ายกว่าเพราะมีการวางแพทเทิร์นมาให้แล้ว ข้อเสียก็คือมันไม่ยืดหยุ่น ในการใช้ค่ะ ยกตัวอย่างง่ายๆคือ อย่างสีเขียว มันก็เป็นเขียวเฉดเดียวเลยเปลี่ยนไม่ได้ อะไรประมาณนี้ค่ะ เหมาะสำหรับมือใหม่ที่เริ่มต้นค่ะ เพราะมันกำหนดทุกอย่างมาให้แล้ว แต่โดยส่วนตัวเลยนะคะ5555 ปัจจุบันเราใช้ tailwind อย่างเดียวเลยค่ะ อย่างที่บอกเลยค่ะ tailwind เบา + เร็ว จริงๆง่ายๆพอๆกับ boot เลยงับ แต่ tailwind จะยืดหยุ่นกว่าในการใช้งับ เช่นสีเขียวเหมือนเดิมเลย เราสามารถกำหนดแบบ bg-green-100 (100-900) เลือกเฉดได้เลย หรือจะเป็นเลขฐานก็ใช้ได้เลย bg-[#000000] อะไรแบบนี้ค่ะ มันทำให้เราสนุกกับงานมากยิ่งขึ้นด้วยนะคะ เทียบระหว่าง boot กับ tailwind ในบอเราไม่ค่อยใช้ boot แล้วงับ ส่วนใหญ่ใช้ tail ไม่แน่ใจว่ากระแสดีใหม่ แต่ศึกษามายังไงได้ใช้แน่นอนค่า ❤️

[@iqcangsama]

❣

[@tod.photowalk]

น่าสนใจครับ

[@Alone.Brecker]

พี่ช่วยสอน DaisyUI หน่อยครับว่าดีกว่า tailwind css ยังไง

[@borntodev]

เดี๋ยวรับไว้พิจารณางับบ

[@Alone.Brecker]

@@borntodev ขอบคุณครับ