Coding

ปูพื้นฐานการทำงานเว็บไซต์ เล่าเรื่อง HTML, CSS และเทคโนโลยีเกี่ยวกับการทำเว็บ

twitter bootstrap basic slide 1
[Slide ภาษาไทย] Bootstrap Basic สอนใช้ Bootstrap 3 ฉบับเริ่มต้น

สไลด์ภาษาไทย สอนพื้นฐานการใช้งาน Twitter Bootstrap 3 จากงาน Bangkok WordPress Meetup โดยครอบคลุมเรื่อง Web Elements และ Bootstrap Responsive Grid

designil github css bootstrap 1
เทคนิคการเขียน CSS เว็บไซต์ Github โดยผู้สร้าง Bootstrap

เผยเทคนิคการเขียน CSS อย่างไรให้จัดการได้ง่าย เหมาะกับการทำเว็บไซต์ใหญ่ ๆ อย่าง Github ซึ่งเขียนจากประสบการณ์ของผู้สร้าง Twitter Bootstrap !!

designil bem css
เขียน CSS ให้ดีขึ้นได้ง่าย ๆ ด้วยเทคนิค BEM !!

เวลามีคนเขียน CSS หลายคนในโปรเจคเดียวกัน หรือนำโค้ดของคนอื่นมาแก้ต่อ (เช่น ซื้อจาก Themeforest) จะแก้ CSS ได้ยากเพราะอ่านไม่ออก มาดูวิธีแก้แบบ BEM CSS กัน

website test internet explorer free macbook
[เทคนิคเด็ด] เทสเว็บไซต์ผ่าน Internet Explorer ฟรี ด้วย Mac OS !!

ทริคเล็ก ๆ น้อย ๆ สำหรับคนทำเว็บไซต์โดยใช้คอมตระกูล Macbook Pro / Air ซึ่งจะมีปัญหาเวลาต้องทำเว็บไซต์ให้รองรับ Internet Explorer แต่ไม่มีเครื่องให้เทส (IE6)

responsive website big
4 วิธีการทำเว็บไซต์แบบ Responsive ที่ใช้กันทั่วโลก !!

การทำเว็บไซต์แบบ Responsive ซึ่งก็คือ การทำให้เว็บไซต์รองรับหน้าจอ Smartphone, Tablet, และ Desktop ในเว็บไซต์เดียว เราจะมาดูวิธีทำเว็บไซต์ Responsive 4 วิธี

designil frontend 2015
รวมสุดยอด Web Design CSS Framework ที่น่าใช้ในปี 2014 !!

แนะนำ CSS Framework ช่วยให้ทำเว็บไซต์ได้เร็วขึ้น ทั้ง Twitter Bootstrap ยอดฮิตใช้กันทั่วโลก, Zurb Foundation คู่แข่งสำคัญ และ Gumby Framework ตัวใหม่ล่าสุด

free 404 not found code1
[FREE CODE] แจกฟรี หน้า 404 Not Found สวย ๆ เขียนด้วย CSS3 Animation !!

หน้า 404 Not Found มีหน้าที่สำหรับบอกคนเข้าเว็บไซต์ว่า URL ที่คุณเข้ามาผิด หรือไม่พบในระบบ มีผู้อ่านใจดีแจกโค้ดหน้า 404 เขียนด้วย CSS3 Animation ฟรีครับ

icon font big
Icon Font คืออะไร? สอนวิธีใช้และเทคนิคเด็ด ๆ ที่คนทำเว็บห้ามพลาด !!

แนะนำการใช้ Icon Font ไอคอนแบบใหม่ที่ย่อขยายได้โดยรูปไม่มีวันแตก แถมใช้งานง่ายกว่ารูป PNG หลายเท่า และแน่นอนว่าดาวน์โหลดใช้ในงานได้ฟรี ไม่ผิดลิขสิทธิ์

retina display
[Hot Topic] สอนทำเว็บไซต์ให้รองรับ Retina Display หน้าจอความละเอียดสูง

เทคนิคการทำ Website ของเราให้รองรับ Retina Display หน้าจอความละเอียด 2x จากปกตินั้นไม่ยากเลยครับ มาดู 4 วิธีในการทำ Graphics ของเว็บไซต์เราให้รองรับ Retina

designil sass prepros less css
SASS คืออะไร? เทคนิคช่วยให้การเขียน CSS เป็นเรื่องง่าย ๆ ใช้กันทั่วโลก !!

SASS คือ CSS Preprocessor ซึ่งทำงานเหมือนกับ LESS CSS หลักการเขียนจะคล้ายเขียน CSS ทั่วไป แต่มีฟีเจอร์พิเศษช่วยให้เขียนเร็วขึ้น หรือเขียนน้อยแต่ได้มาก

4556156477 c21fa939a8
CSS Guideline – เปิดตำราสอนเทคนิคเขียน CSS อย่างมืออาชีพ !!

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

screen shot 2013 07 16 at 12.01.37 pm
5 ความจริงเกี่ยวกับ Themeforest ที่คนอยากขายธีมต้องรู้

ช่องทางการหาเงินจากการขายของ กราฟฟิก ธีม ได้รับความนิยมมากขึ้นเรื่อย ๆ ครับ คนที่อยากลองเข้าไปขายงานกราฟฟิก ขายธีมในป่า Themeforest มาดูกันว่าควรรู้อะไรบ้าง