css display มีอะไรบ้าง

#พื้นฐานการเขียนเว็ปไซต์ ##cssdisplay

CSS display คือคุณสมบัติที่ใช้กำหนด รูปแบบการแสดงผล ของ HTML Element แต่ละตัว ซึ่งมีผลต่อการจัดวางองค์ประกอบ (เช่น การขึ้นบรรทัดใหม่ หรือการแสดงผลเรียงกัน) และการใช้พื้นที่บนหน้าเว็บ โดยมีค่าที่นิยมใช้เช่น block (ขึ้นบรรทัดใหม่, กินพื้นที่เต็มความกว้าง), inline (ไม่ขึ้นบรรทัดใหม่, กินพื้นที่เท่าที่ต้องการ), inline-block (เรียงกันในบรรทัดเดียว แต่กำหนดความกว้างและสูงได้), none (ซ่อนองค์ประกอบทั้งหมด ไม่กินพื้นที่) รวมถึงค่าสำหรับเลย์เอาต์แบบซับซ้อนอย่าง flex และ grid.

คุณสมบัติพื้นฐานของ display:

display: block;:

กำหนดให้องค์ประกอบนั้นแสดงผลเหมือนบล็อก โดยจะขึ้นบรรทัดใหม่ทุกครั้ง และใช้ความกว้างเต็มที่เท่าที่สามารถทำได้.

สามารถกำหนดค่า width, height, margin, และ padding ได้.

ตัวอย่าง block-level element โดยธรรมชาติคือ <div> หรือ <p>.

display: inline;:

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

ไม่สามารถกำหนด width และ height ได้โดยตรง เพราะไม่ได้กินพื้นที่เต็มความกว้าง.

ตัวอย่าง inline-level element โดยธรรมชาติคือ <span>, <a>, หรือ <img>.

display: inline-block;:

เป็นการผสมผสานระหว่าง inline และ block.

องค์ประกอบจะเรียงต่อกันในบรรทัดเดียวกันเหมือน inline แต่สามารถกำหนด width, height, margin, และ padding ได้เหมือน block.

display: none;:

ใช้ซ่อนองค์ประกอบอย่างสมบูรณ์ ไม่เพียงแต่จะหายไปจากหน้าจอ แต่จะ ไม่กินพื้นที่ใดๆ บนหน้าเว็บเลย ราวกับว่าองค์ประกอบนั้นไม่มีอยู่จริง.

display สำหรับการจัดเลย์เอาต์ที่ซับซ้อน:

นอกจากคุณสมบัติพื้นฐาน ยังมีค่าอื่น ๆ ที่ใช้สำหรับการจัดเลย์เอาต์แบบใหม่ ๆ:

display: flex;:

ใช้สำหรับสร้างเลย์เอาต์แบบ Flexbox เพื่อจัดวางองค์ประกอบในทิศทางเดียว (แถวหรือคอลัมน์) ได้อย่างยืดหยุ่น.

display: grid;:

ใช้สำหรับสร้างเลย์เอาต์แบบ CSS Grid ที่สามารถควบคุมการจัดวางองค์ประกอบทั้งในแนวแกนแถว (row) และคอลัมน์ (column) พร้อมกันได้.

คุณสมบัติ display มีความสำคัญมากในการควบคุมรูปลักษณ์และพฤติกรรมการแสดงผลขององค์ประกอบบนเว็บเพจ ทำให้เราสามารถสร้างเว็บไซต์ที่มีโครงสร้างที่ดี และมีประสบการณ์ผู้ใช้ (UX) ที่น่าประทับใจได้

2025/8/22 แก้ไขเป็น

... อ่านเพิ่มเติมเวลาเจอคำว่า CSS display หลายคนจะนึกถึงแค่ inline กับ block แต่พอทำหน้าเว็บจริง ๆ จะเริ่มสับสนว่า “ทำไมมันไม่ขึ้นบรรทัดใหม่?” “ทำไมกำหนด width ไม่ได้?” หรือ “ซ่อนแล้วมันยังเว้นที่ว่างอยู่ไหม?” อันนี้คือสิ่งที่ฉันใช้เช็กเป็นขั้น ๆ เวลาจัดเลย์เอาต์ 1) เช็กก่อนว่า element ตัวนั้นเป็นอะไรโดยธรรมชาติ - div, p มักเป็น block อยู่แล้ว เลยขึ้นบรรทัดใหม่อัตโนมัติ - span, a มักเป็น inline เลยเรียงต่อกัน และ width/height ไม่ค่อยมีผล ถ้าอยากให้ลิงก์ (<a>) คลิกง่ายขึ้น (พื้นที่ใหญ่ขึ้น) ฉันมักเปลี่ยนเป็น display: inline-block; หรือ block; แล้วค่อยใส่ padding 2) ความต่างที่เจอบ่อย: inline vs inline-block vs block - inline: ไม่ขึ้นบรรทัดใหม่ และขนาดขึ้นกับเนื้อหา (กำหนด width/height ตรง ๆ ไม่ค่อยได้) - inline-block: ไม่ขึ้นบรรทัดใหม่เหมือน inline แต่กำหนด width/height ได้ ใช้ทำปุ่ม เมนู หรือ badge บ่อยมาก - block: ขึ้นบรรทัดใหม่ กินความกว้างเต็มแถว (ตามพื้นที่ที่มี) เหมาะกับ section ต่าง ๆ ของหน้าเว็บ ทริคที่ช่วยชีวิต: ถ้าอยากให้หลายกล่องเรียงกันแต่ยังคุมขนาดเองได้ ให้ลอง inline-block ก่อน (โดยเฉพาะงานง่าย ๆ) 3) display: none; ซ่อนแบบ “หายไปจริง” display: none; คือซ่อนและไม่กินพื้นที่บนหน้าเว็บเลย เหมือนไม่มี element นั้นอยู่ เหมาะกับการซ่อนเมนู/ปุ่มชั่วคราว ถ้าต้องการ “ซ่อนแต่ยังเว้นที่ไว้” (เช่น กันเลย์เอาต์กระโดด) ปกติจะใช้ visibility: hidden; แทน (อันนี้หลายคนชอบสับสน) 4) ตัวอย่าง layout แบบ display: block + inline-block (ง่ายและเร็ว) ฉันมักทำการ์ดสินค้า/บล็อกเล็ก ๆ แบบนี้: - กล่องการ์ดใช้ display: inline-block; - กำหนด width เช่น 200px และ margin ให้มีช่องว่าง เหมาะกับงานที่ไม่ต้อง responsive ซับซ้อนมาก แต่ถ้าจอเล็กแล้วอยากให้จัดเรียงยืดหยุ่น แนะนำไปทาง flex/grid จะคล่องกว่า 5) เริ่มจัดเลย์เอาต์จริงจัง: flex กับ grid ใช้ต่างกันยังไง - display: flex; เหมาะกับการจัดเรียง “แนวเดียว” เป็นหลัก (แถวหรือคอลัมน์) เช่น แถบเมนู ปุ่มเรียงกัน กล่องซ้าย-ขวา และจัดกึ่งกลางแนวตั้ง/แนวนอนได้ง่าย - display: grid; เหมาะกับเลย์เอาต์แบบ “ตาราง” คุมทั้งแถวและคอลัมน์พร้อมกัน เช่น หน้า dashboard, gallery, layout หลายคอลัมน์ที่ต้องกำหนดสัดส่วนชัด ๆ ถ้างานเป็นแถวเดียวฉันจะเริ่มที่ flex ก่อน แต่ถ้าต้องวางเป็นช่อง ๆ หลายมิติ grid จะตรงโจทย์กว่า 6) ใช้ .style.display (JavaScript) เวลาโชว์/ซ่อน ถ้าคุณทำปุ่มกดแล้วให้กล่องแสดง/หาย มักเจอการตั้งค่า element.style.display = 'none'; และตอนโชว์กลับเป็น 'block' หรือ 'flex' ข้อควรระวังจากที่เคยพลาด: ตอนโชว์กลับควรคืนค่าให้ถูกกับเลย์เอาต์เดิม (เช่น เดิมเป็น flex ก็ต้องกลับเป็น flex ไม่งั้น layout จะเพี้ยน) สรุปจำง่ายจากภาพรวม 6 แบบหลัก: none, inline, block, inline-block, flex, grid - จัดตัวอักษร/ลิงก์: เริ่มจาก inline/inline-block - ทำโครงหน้าเว็บเป็นส่วน ๆ: block - ซ่อนแบบไม่เหลือพื้นที่: none - จัดเรียงยืดหยุ่น: flex - ทำตารางเลย์เอาต์: grid

โพสต์ที่เกี่ยวข้อง

css display บรรยายด้วยเสียง
#พื้นฐานการเขียนเว็ปไซต์ #css display CSS display คือคุณสมบัติที่ใช้กำหนด รูปแบบการแสดงผล ของ HTML Element แต่ละตัว ซึ่งมีผลต่อการจัดวางองค์ประกอบ (เช่น การขึ้นบรรทัดใหม่ หรือการแสดงผลเรียงกัน) และการใช้พื้นที่บนหน้าเว็บ โดยมีค่าที่นิยมใช้เช่น block (ขึ้นบรรทัดใหม่, กินพื้นที่เต็มความกว้าง),
ขีดเขียน

ขีดเขียน

ถูกใจ 4 ครั้ง

tailwind css คืออะไรทำไมถึงนิยมใช้กันนะ
#tailwindcss #tailwind #kumoriiz #ไอที #CSS
kumoriiz

kumoriiz

ถูกใจ 3 ครั้ง

💻 Tips & Tricks CSS รู้แล้วดูเซียนทันที ! 🌟
🎯 อยากให้เว็บของคุณดูโปรสุด ๆ ด้วย CSS? มาดูกันเลยว่าเคล็ดลับและทริคเล็ก ๆ น้อย ๆ ที่จะทำให้การเขียน CSS ง่ายขึ้นและดูดีขึ้นทันตาเห็น! ไม่ว่าจะเป็นการจัดการ layout อย่างชาญฉลาด การใช้ padding magin หรือการทำ animations อย่างมืออาชีพ ทุกอย่างรวมอยู่ที่นี่แล้ว! #programmer #โปรแกรมเมอร์
GoldenDev 🦮

GoldenDev 🦮

ถูกใจ 295 ครั้ง

ความแตกต่างcss display none กับ visibility hidden
#พื้นฐานเว็ปไซต์ #css #display none #visibility hidden ความแตกต่างระหว่าง display: none และ visibility: hidden คือ display: none จะลบองค์ประกอบออกจากเค้าโครงของหน้าเว็บทั้งหมด ทำให้พื้นที่ที่เคยครอบครองอยู่หายไป และผู้ใช้อินเทอร์เฟซ (เช่น โปรแกรมอ่านหน้าจอ) จะมองไม่เห็นองค์ประกอบนั้นเลย
ขีดเขียน

ขีดเขียน

ถูกใจ 6 ครั้ง

css display nonoe
#พื้นฐานเขียนเว็ปไซต์ css display: none คือ คำสั่งใน CSS ที่ใช้ซ่อนองค์ประกอบ HTML อย่างสมบูรณ์ โดยองค์ประกอบนั้นจะถูกลบออกจากหน้าเว็บ ไม่ปรากฏให้เห็น และ ไม่กินพื้นที่บนเลย์เอาต์ อีกต่อไป ทำให้องค์ประกอบอื่นๆ ที่อยู่รอบข้างขยับเข้ามาแทนที่ ต่างจาก visibility: hidden ที่เพียงแค่ทำให้องค์ปร
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพแล็ปท็อปที่มีข้อความ 'Coding 50 คำศัพท์ CSS ที่คนเขียน Code ควรรู้' บนคีย์บอร์ด พร้อมโลโก้ Lemon8 และหน้าจอแสดงซอฟต์แวร์ ACME POS สื่อถึงบทความเกี่ยวกับคำศัพท์ CSS พื้นฐานสำหรับนักพัฒนาเว็บ
50 คำศัพท์ CSS 👨‍💻 ที่คนเขียน Web ควรรู้
50 คำศัพท์ที่คนเขียน CSS ควรรู้ #หมวดพื้นฐานของ CSS 1. CSS (Cascading Style Sheets) – ภาษาที่ใช้กำหนดรูปแบบของ HTML 2. Selector – ตัวเลือกที่ใช้กำหนดว่า CSS จะใช้กับองค์ประกอบไหน 3. Property – คุณสมบัติที่ใช้กำหนดค่าต่าง ๆ เช่น color, font-size 4. Value – ค่าที่กำหนดให้กับ property เช่น
NerdDailyDose

NerdDailyDose

ถูกใจ 285 ครั้ง

daisyui คืออะไรทำไมต้องรู้จัก
#daisyui #tailwindcss #tailwind #css #kumoriiz
kumoriiz

kumoriiz

ถูกใจ 1 ครั้ง

ภาพการ์ตูนเด็กผู้หญิงสวมแว่นและชุดนักเรียน ยืนข้างโลโก้ CSS3 และข้อความว่า "CSS คืออะไร" เพื่อแนะนำภาษา CSS
พามารู้จัก CSS สำหรับการตกแต่งเว็บไซต์
CSS คือภาษาสำหรับตกแต่งและจัดรูปแบบเว็บไซต์ให้สวยงาม ทำงานร่วมกับภาษา HTML ที่ทำหน้าที่วางโครงสร้างเนื้อหาของเว็บไซต์ พูดง่ายๆ คือ HTML เป็นโครงสร้างบ้าน ส่วน CSS เป็นการทาสี, จัดเฟอร์นิเจอร์ และตกแต่งบ้านให้สวยงามน่าอยู่ การทำงานหลักของ CSS CSS (Cascading Style Sheets) จะใช้ชุดคำสั่งที่เรียกว่า
TechTalk by Taa

TechTalk by Taa

ถูกใจ 3 ครั้ง

เขียน css ได้ใน 1 นาที ด้วย post นี้ !
วันนี้ The Ladder พามารู้จัก CSS เครื่องมือเสกเว็บให้สวย ปรับสี ปรับขนาดตัวอักษรได้ได้ตามใจ ถ้าลองเขียนตามแล้วรู้สึกใช่ โลกของ dev ยินดีต้อนรับคุณครับ 🌈 #CSS #Lemon8ฮาวทู #มือใหม่หัดเขียนโค้ด #เรียนเขียนโปรแกรม #ย้ายสายงาน
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 10 ครั้ง

css flex box
#พื้นฐานเว็ปไซต์ #flexbox CSS Flexbox คือระบบเลย์เอาต์ (layout) แบบมิติเดียวของ CSS ที่ช่วยให้นักพัฒนาสามารถจัดวางองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างยืดหยุ่นและมีประสิทธิภาพ โดยเน้นการจัดเรียงในแนวตั้งหรือแนวแกนหลักเดียว (แถวหรือคอลัมน์) ทำให้สามารถควบคุมการกระจายพื้นที่ การจัดตำแหน่ง และการป
ขีดเขียน

ขีดเขียน

ถูกใจ 3 ครั้ง

CSS vs Bootstrap: Exploring the Differences and Us
CSS vs Bootstrap: Exploring the Differences and Use Cases ! #ติดเทรนด์
FreedomHack 󱢏

FreedomHack 󱢏

ถูกใจ 2 ครั้ง

ภาพปกแสดงแล็ปท็อปที่มีโค้ดและภาพประกอบบ้าน พร้อมข้อความว่า HTML CSS JAVASCRIPT คืออะไร? และ The Ladder จะพามาทำความเข้าใจง่ายๆ ด้วยการเปรียบเทียบกับการสร้างบ้าน
ภาพบ้านสมัยใหม่และแบบแปลน พร้อมข้อความสรุปว่า HTML คือโครงบ้าน, CSS คือสีและสไตล์, และ JavaScript คือฟังก์ชัน
ภาพห้องนอน ห้องครัว หน้าต่าง และไอคอนเบราว์เซอร์ อธิบายว่า HTML คือโครงสร้างบ้านที่กำหนดองค์ประกอบต่างๆ เช่น ห้อง ประตู หน้าต่าง และในเว็บคือ Header, Menu, Content, Footer
🏠 เข้าใจ HTML / CSS / JavaScript แบบง่ายๆ
คิดเหมือน “การสร้างบ้าน” ก็พอแล้วครับ หลายคนพอเริ่มเรียน Frontend จะงงว่า > HTML, CSS, JavaScript มันต่างกันยังไง? ลองนึกภาพง่าย ๆ แบบนี้ 👇 ## 🧱 **HTML = โครงสร้างบ้าน** เป็นเสา เป็นผนัง เป็นพื้น กำหนดว่าเว็บ “มีอะไรบ้าง” เช่น หัวข้อ ข้อความ รูป ปุ่ม ลิงก์ ถ้าไม่มี HTML เว็บก็เหมือนบ้
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 36 ครั้ง

ส่วนประกอบของหน้าเว็ปไซต์
#พื้นฐานเขียนเว็ปไซต์ #css #html ส่วนประกอบหลักของหน้าเว็บไซต์โดยทั่วไปมี 3 ส่วนคือ ส่วนหัว (Header) ซึ่งมีโลโก้ ชื่อเว็บไซต์ และเมนูหลัก, ส่วนเนื้อหา (Body/Content) ที่แสดงข้อมูลหลัก เช่น ข้อความ รูปภาพ วิดีโอ และอื่นๆ, และ ส่วนท้าย (Footer) ที่แสดงข้อมูลเพิ่มเติม เช่น ข้อมูลติดต่อ
ขีดเขียน

ขีดเขียน

ถูกใจ 8 ครั้ง

ภาพแสดงโลโก้ HTML5 และ CSS พร้อมโค้ด HTML, CSS และ JavaScript ประกอบข้อความ “Html และ CSS เกี่ยวข้องกันอย่างไร” ซึ่งสื่อถึงความสัมพันธ์ระหว่างภาษาทั้งสองในการสร้างหน้าเว็บ
ภาษา html กับ ภาษา css สัมพันธ์กันอย่างไร
HTML และ CSS ทำงานร่วมกันเพื่อสร้างหน้าเว็บที่สวยงามและมีโครงสร้างที่ถูกต้อง HTML เปรียบเสมือนโครงกระดูกของหน้าเว็บ โดยทำหน้าที่กำหนดเนื้อหาและโครงสร้างของหน้าเว็บ เช่น หัวข้อ ย่อหน้า รูปภาพ และลิงก์ ในขณะที่ CSS เปรียบเสมือนเสื้อผ้าของหน้าเว็บ ทำหน้าที่กำหนดรูปแบบการแสดงผลของเนื้อหา เช่น สี แบบอัก
ขีดเขียน

ขีดเขียน

ถูกใจ 6 ครั้ง

ภาพแสดงโค้ด HTML และ CSS พร้อมคำอธิบายเกี่ยวกับแท็ก `<style>` ใน HTML ซึ่งใช้สำหรับกำหนดสไตล์ด้วย CSS โดยมีตัวอย่างโค้ดที่แสดงการตั้งค่าสีและขนาดตัวอักษรสำหรับ h1 และ p. มีข้อความ 'CSS เขียนอย่างไร' และโลโก้ Lemon8.
css เขียนอย่างไร
แท็ก <style> ใน HTML คือแท็กที่ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบ HTML โดยใช้ CSS (Cascading Style Sheets). มันเป็นคอนเทนเนอร์สำหรับใส่กฎ CSS ที่จะถูกนำไปใช้กับองค์ประกอบต่างๆ ในหน้าเว็บ. โดยทั่วไปแล้ว แท็ก <style> จะถูกวางไว้ในส่วน <head> ของเอกสาร HTML เพื่อให้แน่ใจว่าสไตล์จะถู
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพชายหนุ่มสวมแว่นตากำลังยิ้มและพิมพ์งานบนคอมพิวเตอร์ที่มีโค้ดแสดงอยู่บนหน้าจอ พร้อมข้อความว่า “อยากเขียน Frontend ได้ ต้องรู้อะไรบ้าง? PART 1/2” และโลโก้ Lemon8
ภาพแล็ปท็อป แท็บเล็ต และสมาร์ทโฟนวางอยู่บนโต๊ะไม้ แสดงหน้าเว็บดีไซน์ พร้อมป้ายสีแดงเขียนว่า “HTML” และข้อความ “เรียนรู้การสร้างโครงสร้างพื้นฐ�านของหน้าเว็บ”
ภาพแล็ปท็อปบนโต๊ะไม้ พร้อมข้อความอธิบายหัวข้อเกี่ยวกับ HTML ได้แก่ “โครงสร้างของ HTML” “การใช้งานแท็กพื้นฐาน” และ “การสร้างฟอร์ม”
อยากเขียน Frontend ต้องรู้อะไรบ้าง ?
หลายคนอยากเริ่มทำเว็บ แต่ไม่รู้จะเริ่มจากตรงไหนก่อน วันนี้เราเอา 2 เรื่องพื้นฐานที่สุด…ที่ถ้าเข้าใจแล้ว การเขียน Frontend จะง่ายขึ้นเยอะมากครับ ✨ ## **1) HTML — โครงสร้างพื้นฐานของหน้าเว็บ** HTML คือ “โครงกระดูก” ของเว็บไซต์ทั้งหมด ถ้าเข้าใจตรงนี้ดี จะจัดหน้าเว็บยังไงก็ไม่หลงครับ สิ่งที่มือ
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 11 ครั้ง

ภาพปกบทความแสดงหัวข้อ 'CODING HTML/CSS/JAVASCRIPT ทำงานร่วมกันยังไง ทำไมถึงขาดกันไม่ได้' บนพื้นหลังสีฟ้าอ่อน มีภาพคนยืนอยู่กลางผืนน้ำสะท้อนเงาและภูเขาเลือนราง พร้อมโลโก้ Lemon8 @nerddailydose สื่อถึงการเรียนรู้และทำความเข้าใจเทคโนโลยีเว็บ
HTML/ CSS / JavaScrip ทำงานร่วมกันยังไง ทำไมถึงขาดไม่ได้✨
การเรียนรู้ HTML + CSS + JavaScript พร้อมกัน เป็นสิ่งสำคัญมากสำหรับคนที่อยากทำเว็บไซต์หรือแอปพลิเคชันบนเว็บ เพราะทั้ง 3 ภาษานี้ทำงานร่วมกันเป็นทีม และมีหน้าที่ต่างกันแต่ “ขาดกันไม่ได้” ⸻ 📌 เปรียบเทียบให้เข้าใจง่าย ลองนึกภาพว่า เว็บไซต์ คือ ร่างกายมนุษย์ HTML โครงกระดูก โครงสร้างเนื้อหา
NerdDailyDose

NerdDailyDose

ถูกใจ 6 ครั้ง

ภาพแสดงแผนภาพ CSS Box Model ที่ประกอบด้วย Content, Padding, Border และ Margin จากด้านในสุดออกไปด้านนอกสุด พร้อมคำอธิบายเป็นภาษาไทยเกี่ยวกับแต่ละส่วนประกอบของ Box Model ซึ่งเป็นพื้นฐานการจัดวางองค์ประกอบบนหน้าเว็บ.
css box model
#พื้นฐานการเขียนเว็ปไซต์ CSS Box Model คือ รูปแบบที่อธิบายวิธีการจัดการและจัดวางองค์ประกอบ HTML ในหน้าเว็บ โดยแต่ละองค์ประกอบจะถูกมองว่าเป็นกล่องสี่เหลี่ยมที่มีส่วนประกอบต่างๆ ดังนี้: เนื้อหา (Content), ระยะห่าง (Padding), ขอบ (Border), และระยะขอบ (Margin). ส่วนประกอบของ CSS Box Model: Con
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพหน้าปกแสดงหัวข้อ "EXTENSION สำหรับสาย Web EP.1" พร้อมโลโก้ Visual Studio Code สีน้ำเงินบนพื้นหลังสีน้ำเงินเข้ม และโลโก้ Lemon8 ที่มุมซ้ายล่าง
ภาพหน้าจอแสดงรายละเอียดของส่วนขยาย "Auto Rename Tag" ใน Visual Studio Code ซึ่งช่วยเปลี่ยนชื่อแท็ก HTML/XML ที่จับคู่กันโดยอัตโนมัติ
ภาพหน้าจอแสดงรายละเอียดของส่วนขยาย "JavaScript Auto Backticks" ใน Visual Studio Code ซึ่งแปลงเครื่องหมายคำพูดเดี่ยวหรือคู่เป็น backticks โดยอัตโนมัติเมื่อจำเป็น
Extension Vscode สำหรับสาย web dev Ep.1
1. Auto rename tag ใช้สำหรับ เปลี่ยนชื่อ tag ตามตัวหน้าอัตโนมัติ 2. Javascript Auto Backticks ใช้สำหรับเปลี่ยนจาก single หรือ double qutoes เป็น backticks เมื่อยามจำเป็น 3. HTML CSS Support ตามชื่อเลย 4. Prettier ใช้ format โค้ดให้ดูเป็นระเบียบ 5. Rainbow Brackets ใช้เพื่อให้ brackets เรา
ITFeature

ITFeature

ถูกใจ 269 ครั้ง

css animation+transform
#พื้นฐานการเขียนเว็ปไซต์ #tranform #animation #css CSS Animation คือ ฟีเจอร์ใน CSS ที่ให้คุณสร้างภาพเคลื่อนไหวหรือการเปลี่ยนแปลงของเอลิเมนต์บนเว็บเพจได้อย่างราบรื่นและมีขั้นตอน โดยใช้ชุดคำสั่งที่เรียกว่า Keyframes ในการกำหนดสถานะต่างๆ ของเอลิเมนต์ และใช้ property แอนิเมชัน ในการควบค
ขีดเขียน

ขีดเขียน

ถูกใจ 6 ครั้ง

css unicity
https://unicityhealthsci.weebly.com/
feel great

feel great

ถูกใจ 0 ครั้ง

position attribute
#พื้นฐานการเขียนเว็ปไซต์ #css #position position ใน CSS คือคุณสมบัติที่ใช้กำหนด วิธีจัดวางตำแหน่งของ Element บนหน้าเว็บ โดยมีค่าที่เป็นไปได้ 5 แบบคือ static, relative, absolute, fixed, และ sticky ซึ่งแต่ละค่าจะมีวิธีการทำงานและผลลัพธ์ที่แตกต่างกันในการกำหนดตำแหน่งและการซ้อนทับของ Elemen
ขีดเขียน

ขีดเขียน

ถูกใจ 4 ครั้ง

CSS Background Animation
Infinite Zoom-In effect #relaxing #background #cssanimation
คนบ้าเขียนโค้ด

คนบ้าเขียนโค้ด

ถูกใจ 2 ครั้ง

ส่วนคอนเทนต์ หน้าเว็ปไซต์
#พื้นฐานการเขียนเว็ปไซต์ #css _ html #content Content หน้าเว็บ คือ ข้อมูลที่อยู่ในรูปแบบต่าง ๆ เช่น ข้อความ รูปภาพ วิดีโอ เสียง ที่สร้างขึ้นเพื่อแสดงให้ผู้เข้าชมเว็บไซต์ได้รับทราบ ก่อให้เกิดความเข้าใจ ให้ความบันเทิง หรือเพื่อโน้มน้าวใจ ซึ่งประกอบด้วยองค์ประกอบหลัก ได้แก่ หัวข้อเรื่อง
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพแสดงตัวอย่างการใช้งาน `type` attribute ในแท็ก `<input>` ของ HTML โดยมีโค้ดทางซ้ายและผลลัพธ์ของฟอร์มทางขวา แสดงช่องข้อความ, รหัสผ่าน, อีเมล, ตัวเลข, checkbox, radio button, ปุ่ม submit และปุ่มทั่วไป พร้อมข้อความ "css attributed type in <input>"
css attributed type
#พื้นฐานการเขียนเว็ปไซต์ Attribute type ใน input tag ของ HTML ใช้สำหรับกำหนดชนิดของข้อมูลที่ <input> จะรับจากผู้ใช้. มันเป็นการระบุว่า input field นั้นควรจะเป็นอะไร เช่น ช่องข้อความ, ช่องรหัสผ่าน, ปุ่ม, checkbox, radio button, หรืออื่นๆ. ตัวอย่างการใช้งาน: <input type="text&#
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพอธิบาย Padding ใน CSS คือช่องว่างภายในขอบเขตขององค์ประกอบกับเนื้อหา โดยไม่รวมเส้นขอบ แสดงการกำหนด padding ทั้งสี่ด้าน: บน, ขวา, ล่าง, ซ้าย พร้อมตัวอย่างหน่วยเป็น px
ภาพแสดงโค้ด CSS สำหรับกำหนด padding ทั้งสี่ด้าน (top, left, right, bottom) ให้กับ div ควบคู่ไปกับแผนภาพอธิบายความหมายและตำแหน่งของ padding ใน CSS box model
ภาพแสดงโค้ด CSS ที่กำหนด padding-top เป็น 0px สำหรับ div และแผนภาพที่เน้นการกำหนด padding-top พร้อมคำอธิบายว่า padding คือช่องว่างภายในองค์ประกอบ
padding in css
Padding ใน CSS คือช่องว่างภายในขอบเขตขององค์ประกอบ (element) กับเนื้อหาขององค์ประกอบนั้น เปรียบเสมือนการเพิ่มพื้นที่ว่างรอบๆ เนื้อหาภายในกล่องขององค์ประกอบนั้นๆ โดยไม่รวมเส้นขอบ (border) หรือระยะห่างภายนอก (margin) อธิบายเพิ่มเติม: กล่อง CSS (Box Model): องค์ประกอบ HTML ใน CSS มีลักษณะเป็นกล่อง
ขีดเขียน

ขีดเขียน

ถูกใจ 4 ครั้ง

ภาพปกแสดงหัวข้อ 'Ep.2 คลังศัพท์โค้ดพื้นฐาน ต้องรู้!' พร้อมภาพคนกำลังเขียนโค้ดบนคอมพิวเตอร์และโน้ตบุ๊ก มีไอคอนหลอดไฟและแล็ปท็อปแสดงภาษา HTML, CSS, JS
ภาพอธิบายคำศัพท์เกี่ยวกับการทำงานของโปรแกรม (Execution) ได้แก่ Compile, Run/Execute, Debug, Error/Bug และ Exception พร้อมไอคอนที่เกี่ยวข้อง
ภาพอธิบายคำศัพท์เกี่ยวกับ Networking เช่น API, Request/Response, Protocol (HTTP, TCP), JSON/XML และ REST/GraphQL พร้อมภาพประกอบเครือข่าย
📂แชร์คลังศัพท์ที่ Coding ต้องรู้! - 2
✨มาต่อแล้วค่าทุกคนนน ~ ถ้าอยากเริ่มเขียนโค้ด แต่ศัพท์ยากเต็มไปหมด, 😣 มือใหม่หัดเขียนโค้ดมาทางนี้! 👋🏻 รวมคำศัพท์พื้นฐานที่ต้องรู้ก่อนเริ่ม จะได้ไม่ยืนงงในดงโค้ดกันอีกต่อไป เซฟเก็บไว้ดูได้เลยน้าา ~ 💻✨ หรือใครมีคำไหนอยากมาแชร์ คอมเม้นท์ได้เลยนะคะ🤍 #Coding #codingtips #programmer #มือใ
มัทฉะฮันนี่ไลม์หวานน้อย

มัทฉะฮันนี่ไลม์หวานน้อย

ถูกใจ 14 ครั้ง

👾ชี้เป้า💻 เว็บสอนเขียนโค้ดฟรี !!! (สอนลงลึกด้วย 🤩)
🔥ใครสนใจอยาก #อัพสกิล โดยเฉพาะด้าน #เทคโนโลยี บอกเลยว่าห้ามพลาดโพสต์นี้‼️ 📍วันนี้เรามีเว็บสอน #เขียนโค้ด ที่สอนละเอียด สอนแบบลงลึก และที่สำคัญสอนฟรี ไม่เสียเงินสักบาทจ้า 🤯 💻ชื่อเว็บไซต์ : w3schools.com ℹ️รายละเอียด : 👉🏽เป็นเว็บที่สอนการเขียนโค้ด รวมไปถึงการทำ Data Analytics (sql, excel,
RunnexTech

RunnexTech

ถูกใจ 4446 ครั้ง

ภาพแสดงตัวอย่างการใช้คุณสมบัติ `margin-left` และ `margin-right` ใน CSS โดยมีองค์ประกอบ 3 ชิ้น และโค้ด CSS ที่กำหนดค่า margin ต่างๆ เช่น 50px, 100px และ 0px เพื่อแสดงผลลัพธ์ของระยะห่างที่แตกต่างกัน
ภาพแสดงตัวอย่างการใช้ `margin-left:100px;` และ `margin-right:100px;` กับ 'องค์ประกอบที่2' ซึ่งทำให้มีระยะห่าง 100 พิกเซลจากองค์ประกอบข้างเคียงทั้งซ้ายและขวา พร้�อมโค้ด CSS ที่ใช้
ภาพแสดงตัวอย่างการใช้ `margin-left:0px;` และ `margin-right:0px;` กับ 'องค์ประกอบที่2' ซึ่งหมายถึงไม่มีระยะห่างจากองค์ประกอบข้างเคียงทั้งซ้ายและขวา พร้อมโค้ด CSS ที่ใช้
css margin -left-right
margin-left ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดระยะห่าง (margin) ทางด้านซ้ายขององค์ประกอบ HTML. กล่าวคือ มันจะเพิ่มพื้นที่ว่างระหว่างขอบด้านซ้ายขององค์ประกอบนั้นกับองค์ประกอบข้างเคียง หรือขอบของคอนเทนเนอร์. ค่าของ margin-left สามารถเป็นตัวเลขพร้อมหน่วยวัด (เช่น พิกเซล, em, rem) หรือเป็นค่าร้อยละ หร
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพแสดงโค้ด HTML และ CSS บนพื้นหลังสีดำที่มีรูปทรงเรขาคณิตและจุดสีขาว น้ำเงิน แดง พร้อมลูกโลกข้อมูลตรงกลาง สะท้อนถึงการวางโครงสร้างและการเขียนโปรแกรมอย่างเป็นระบบตามเนื้อหาบทความ
การวางโครงสร้างก่อนที่จะเริ่มโปรแกรมมิ่งสำคัญอย่างไร
การเขียนโปรแกรมที่มีประสิทธิภาพไม่ได้เริ่มจากการลงมือเขียนโค้ดทันที แต่ต้องเริ่มต้นด้วยการวางโครงสร้างและการเตรียมความพร้อมที่ดี เพื่อให้ระบบทำงานได้อย่างราบรื่นและมีความเสถียร การเตรียมการที่เหมาะสมสามารถป้องกันปัญหาที่อาจเกิดขึ้นในระหว่างการพัฒนาและใช้งานจริง เช่น ปัญหาจากการจัดการทรัพยากรระบบที่
suffixworks

suffixworks

ถูกใจ 1 ครั้ง

css transform
#CSS #tranform #พื้นฐานการเขียนเว็ปไซต์ CSS 2D Transform Functions คือ ฟังก์ชันที่ใช้ในคุณสมบัติ transform ของ CSS เพื่อเปลี่ยนแปลงรูปร่างองค์ประกอบ HTML ใน 2 มิติ เช่น หมุน (rotate), ปรับขนาด (scale), เอียง (skew), และ ย้ายตำแหน่ง (translate) โดยไม่ต้องใช้ JavaScript เพิ่มเติม. ฟังก์ชั
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพชายหนุ่มและตัวละครอนิเมะถือโลโก้ HTML5 และ CSS3 พร้อมข้อความตั้งคำถามว่าทำไม HTML และ CSS จึงไม่นับเป็นภาษาโค้ดแบบเต็มตัว
ภาพตัวละครอนิเมะ Furina ยืนข้างจอคอมพิวเตอร์ที่มีข้อความว่า "ต้องบอกก่อนว่า HTML คืออะไร" พร้อมโลโก้ HTML5 และเฟือง
ภาพตัวละครอนิเมะ Furina และแมว ยืนข้างจอคอมพิวเตอร์ที่แสดงคำอธิบาย HTML ว่าเป็นภาษามาร์กอัปสำหรับโครงสร้างหน้าเว็บ
ทำไม HTML และ CSS ไม่ใช่ถาษาตัวโปรแกรมหลัก?😎🖥️
ภาพรวมสั้น ๆ ก่อน HTML (HyperText Markup Language) = ภาษามาร์กอัป โครงสร้างของหน้า — บอกเบราว์เซอร์ว่าอะไรเป็นหัวข้อ อะไรเป็นย่อหน้า รูป ตาราง ปุ่ม ฯลฯ CSS (Cascading Style Sheets) = ภาษาที่กำหนด ลักษณะ/สไตล์ ขององค์ประกอบ HTML — สี ขนาด ระยะห่าง การจัดวาง ฯลฯ ภาษาโปรแกรมอื่น ๆ (เช่น JavaS
Sen sen kung

Sen sen kung

ถูกใจ 17 ครั้ง

css transition
#พื้นฐานการเขียนเว็ปไซต์ #CSS #trasition CSS transitions คือ ฟีเจอร์ใน CSS ที่ทำให้การเปลี่ยนแปลงคุณสมบัติ (property) ขององค์ประกอบเว็บเกิดขึ้นอย่างราบรื่น แทนที่จะเปลี่ยนทันทีทันใด โดยคุณสามารถกำหนดคุณสมบัติของ Transition เช่น การหน่วงเวลา (transition-delay), ระยะเวลา (transition-d
ขีดเขียน

ขีดเขียน

ถูกใจ 5 ครั้ง

ภาพแสดงโครงสร้าง CSS Syntax โดยมี Selector (h1) และ Declaration ({color:blue; font-size:12}) พร้อมระบุ Property และ Value อธิบายว่า Selector ชี้ไปยัง HTML element ที่ต้องการจัดรูปแบบ และ Declaration Block ประกอบด้วย Property และ Value ที่คั่นด้วยเครื่องหมายเซมิโคลอน มีข้อความ “css. seletor คืออะไร”
css. seletor
CSS Selector คือส่วนหนึ่งของภาษา CSS ที่ใช้ในการเลือก (select) HTML elements เพื่อนำไปกำหนดรูปแบบ (styling) ให้กับองค์ประกอบเหล่านั้น. พูดง่ายๆ ก็คือ ตัวเลือก (selector) ใน CSS เป็นเหมือนเครื่องมือที่ใช้ระบุว่า element HTML ชิ้นไหนที่คุณต้องการปรับแต่งสี, ขนาด, ตำแหน่ง, หรือคุณสมบัติอื่นๆ. ประเภท
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

css perspective+tranform
#พื้นฐานการเขียนเว็ปไซต์ #perspective #tranform #CSS CSS Perspective เป็นคุณสมบัติที่ใช้ในการสร้างพื้นที่ 3 มิติให้กับองค์ประกอบในเว็บเพจ โดยกำหนดระยะห่างของผู้ชมจากวัตถุ ทำให้องค์ประกอบต่างๆ ที่ถูกแปลง (เช่น การหมุน) แสดงผลออกมาเหมือนจริงเหมือนกับสิ่งที่ตาเรามองเห็นในชีวิตจริง เช่น ว
ขีดเขียน

ขีดเขียน

ถูกใจ 5 ครั้ง

ภาพแสดงตัวอย่างการใช้ CSS selectors ชนิดต่างๆ พร้อมโค้ดและคำอธิบายภาษาไทย รวมถึงการเลือกแท็ก (p, h3), คลาส (.a1), ID (#a1) และตัวเลือกสากล (*) เพื่อกำหนดสีตัวอักษรเป็นสีแดง
css selector
#พื้นฐานการเขียนเว็ปไซต์ CSS selectors คือรูปแบบที่ใช้เลือกองค์ประกอบ HTML ในหน้าเว็บ เพื่อนำสไตล์ CSS มาใช้กับองค์ประกอบเหล่านั้น พูดง่ายๆ คือ เป็นเหมือนเครื่องมือที่บอกเบราว์เซอร์ว่า "ให้ใส่สีแดงให้ <p> ทุกตัวนะ" หรือ "ให้ขยายขนาดตัวอักษรของ <h1 id='title'&
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพแสดงการใช้งานคุณสมบัติ `margin-top` และ `margin-bottom` ใน CSS โดย `margin-top` กำหนดระยะห่างด้านบนขององค์ประกอบ และ `margin-bottom` กำหนดระยะห่างด้านล่างขององค์ประกอบ พร้อมตัวอย่างโค้ด CSS ที่ใช้กำหนดระยะขอบ
css margin-top. margin-bottom
margin-top ใน CSS คือคุณสมบัติที่ใช้ในการกำหนดระยะขอบด้านบน (ระยะห่างภายนอก) ขององค์ประกอบ HTML. กล่าวอีกนัยหนึ่งคือ เป็นการเพิ่มพื้นที่ว่างระหว่างขอบบนขององค์ประกอบนั้นๆ กับขอบบนขององค์ประกอบอื่นที่อยู่ติดกัน หรือขอบของคอนเทนเนอร์. รายละเอียดเพิ่มเติม: ระยะขอบ (Margin): margin ใน CSS เป็นคุณสม
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพแสดงหน้าจอแล็ปท็อปที่เปิดโค้ด HTML สำหรับการพัฒนาเว็บไซต์ พร้อมข้อความภาษาไทยว่า 'เขียนเว็บแบบไหนดี ลงคอร์ส VS เรียนรู้เอง แบบไหนเหมาะกว่ากัน' ซึ่งเป็นหัวข้อเกี่ยวกับการเลือกวิธีการเรียนรู้การพัฒนาเว็บไซต์
เรียนเขียนเว็บแบบไหนดี
หากใครกำลังสนใจอยากเป็น web developer หรือ programmer ต้องดูทางนี้เลยครับ มีหลายคนถามผมเกี่ยวกับคอร์สว่าควรเริ่มเรียนตัวไหน หรือมีคอร์สแนะนำไหม ผมขอให้ทุกคนเข้าใจประเด็นนี้ก่อน 📌 ศึกษาแหล่งความรู้ฟรีๆเบื้องต้นจากยูทูปหรือแหล่งอื่นๆก่อน - เราควรรู้ก่อนว่าอาชีพนี้ทำอะไร ทำเกี่ยวกับอะไร developer
GaMidGaMian

GaMidGaMian

ถูกใจ 103 ครั้ง

ภาพแสดงแผนการเรียนรู้ 100 วันเพื่อเป็น Frontend Developer ด้วยตัวเอง ตั้งแต่ HTML ถึง React มีรูปแล็ปท็อปแสดงโค้ดและตัวการ์ตูน พร้อมโลโก้ HTML5 และ React เน้นการเรียนรู้ฟรีและเริ่มต้นเส้นทางอาชีพ.
ภาพแสดงการแบ่งเวลา 100 วันสำหรับเรียนรู้ Frontend Development โดยมีหัวข้อหลักคือ HTML (7 วัน), CSS (18 วัน), JavaScript (40 วัน), Git & GitHub (2 วัน), Tailwind (8 วัน) และ React (15 วัน) พร้อมโลโก้แต่ละเทคโนโลยี.
ภาพให้กำลังใจให้เรียนรู้และฝึกฝน Frontend Development อย่างต่อเนื่องเกิน 100 วัน เพื่อพัฒนาตนเองให้เก่งยิ่งขึ้นในสายอาชีพนี้ โดยมีรูปนาฬิกาและนักพัฒนาที่กำลังเขียนโค้ด.
มีเวลาแค่ 100 วัน? อยากเป็น Frontend Dev 💻💡
ถ้าคุณมีเวลาแค่ 100 วัน นี่คือแผนการเรียนรู้ที่จะช่วยให้คุณเป็นงาน และพร้อมในสายงาน Frontend Developer ได้อย่างรวดเร็ว ตั้งแต่ HTML, CSS, JavaScript ไปจนถึง React ! 🌟 คุณอาจต้องแบ่งเป็นหัวข้อย่อยในแต่ละวัน 🖥️ 1. HTML (5 วัน) • วัน 1: พื้นฐาน HTML • วัน 2: โครงสร้างเอกสาร HTML • วัน 3: ก
GoldenDev 🦮

GoldenDev 🦮

ถูกใจ 549 ครั้ง

ภาพแสดง Hard Skills ที่ควรมีในยุคปัจจุบัน ได้แก่ ทักษะด้านเทคโนโลยีและดิจิทัล เช่น Microsoft Office, Data Analytics, Graphic Design, AI และ Machine Learning รวมถึงทักษะด้านการตลาดและการขาย เช่น Digital Marketing, Content Writing
ภาพแสดง Hard Skills ต่อจากภาพแรก ได้แก่ ทักษะด้านภาษา เช่น อังกฤษและภาษาที่สาม ทักษะด้านการจัดการและการเงิน เช่น การวางแผนธุรกิจ, การบริหารโครงการ และทักษะเฉพาะทางตามสายงาน เช่น การเขียนโปรแกรม, การวิเคราะห์ข้อมูลวิจัย
ภาพแสดง Hard Skills ต่อจากภาพก่อนหน้า ได้แก่ ทักษะเฉพาะทางตามสายงาน เช่น การเขียนโปรแกรม, การถ่ายภาพ และทักษะด้านการแก้ไขปัญหาและการวิเคราะห์ พร้อมข้อสรุปว่าการเลือกพัฒนาทักษะขึ้นอยู่กับเป้าหมาย
hard skills ที่ควรมีในปัจจุบัน
ประโยชน์ของการมีทักษะ Hard Skills ติดตัว 1. เพิ่มโอกาสในการได้งานและเติบโตในอาชีพ ทักษะที่เฉพาะเจาะจง เช่น การเขียนโปรแกรม, การวิเคราะห์ข้อมูล หรือความเชี่ยวชาญด้านภาษา จะช่วยให้คุณเป็นที่ต้องการของตลาดแรงงาน ช่วยสร้างความน่าเชื่อถือและโดดเด่นในสายงาน 2. เพิ่มรายได้ ผู้ที่มี Hard Skills มั
กระตั้ว

กระตั้ว

ถูกใจ 65 ครั้ง

ภาพอินโฟกราฟิกแสดงเส้นทางสู่การเป็น Full Stack Development พร้อมไอคอนคอมพิวเตอร์ โทรศัพท์มือถือ และเอกสาร โดยมีข้อความ 'เส้นทางสู่การเป็น Full Stack Development WORTH IT'
ภาพแสดงหัวข้อ 'ความรู้พื้นฐาน' สำหรับการพัฒนาเว็บไซต์ด้วย HTML และ CSS พร้อมแนะนำทักษะที่ควรมี เช่น Git และ Responsive Design
ภาพแสดงหัวข้อ 'Front-end Development' เน้นการเรียนรู้ JavaScript และ React.js เพื่อพัฒนาเว็บไซต์ที่ทันสมัย พร้อมแนะนำทักษะที่ควรมี
สาย IT มาจ้าาา
📌ปฎิเสธไมได้เลยว่า ยุคสมัยนี้อาชีพที่พี่ๆน้อง ๆ หรือใครหลายๆฝันอยากจะเป็น 💸💸สามารถทำเงินและรายได้อย่างมหาศาลอาชีพหนึ่งก็คือ "การเป็นการพัฒนาซอฟต์แวร์หรือแอปพลิเคชัน" แล้วถ้าอยากทำอาชีพนี้ต้องเริ่มยังไง ต้องรู้อะไรบ้าง ?🖥📇 🗂📰วันนี้เติ้ลจะมาสรุปคร่าว ๆ ให้ดูกัน แล้วมาเช็คลิสกัน ว่
ชี��วิตเรียลๆ🌻

ชีวิตเรียลๆ🌻

ถูกใจ 118 ครั้ง

ภาพหน้าปกบทความ Ep.3 คำศัพท์สาย tech ที่ UX/UI ควรรู้ แสดงคนกำลังทำงานหน้าคอมพิวเตอร์ในที่มืด พร้อมโลโก้ Lemon8
ภาพอธิบายคำว่า API (Application Programming Interface) พร้อมตัวอย่างและแผนภาพแสดงการทำงานของ API ระหว่าง Database, Web Server, Internet และ Web application
ภาพอธิบายคำว่า Framework พร้อมตัวอย่าง React, Angular และภาพหน้าจอคอมพิวเตอร์แสดงโค้ดโปรแกรมใน IDE พร้อมพรีวิวแอปพลิเคชันมือถือ
Ep.3 รวมคำศัพท์สาย Dev ที่ดีไซน์เนอร์ควรรู้ 📌
เพราะเวลาเจอทีม Dev เราได้ใช้จริงแน่นอน 💻✨ #uxui #uxuidesigner #developer #tech #worklife
Nashavibes

Nashavibes

ถูกใจ 139 ครั้ง

classlist. JavaScript Dom
#พื้นฐานการเขียนเว็ปไซต์ #javascript #classlist classList ใน JavaScript DOM คือคุณสมบัติ (Property) ที่ช่วยให้เราสามารถ จัดการกับรายการของ Class CSS ที่กำหนดให้กับองค์ประกอบ (Element) HTML นั้น ๆ ได้อย่างง่ายดายและมีประสิทธิภาพกว่าการแก้ไขคุณสมบัติ className โดยตรง💡 classList คืออะไร?เม
ขีดเขียน

ขีดเขียน

ถูกใจ 4 ครั้ง

css persoective
#พื้นฐานการเขียนเว็ปไซต์ #CSS #perspective CSS Perspective เป็นคุณสมบัติที่ใช้ในการสร้างพื้นที่ 3 มิติให้กับองค์ประกอบในเว็บเพจ โดยกำหนดระยะห่างของผู้ชมจากวัตถุ ทำให้องค์ประกอบต่างๆ ที่ถูกแปลง (เช่น การหมุน) แสดงผลออกมาเหมือนจริงเหมือนกับสิ่งที่ตาเรามองเห็นในชีวิตจริง เช่น วัตถุที่อยู่ใก
ขีดเขียน

ขีดเขียน

ถูกใจ 3 ครั้ง

5 Tags HTML มือใหม่ควรรู้ ✅
5 Tags HTML มือใหม่ควรรู้ ✅ . #itfeature #ไอทีน่ารู้ #html #programmer #ไอที
ITFeature

ITFeature

ถูกใจ 179 ครั้ง

ภาพหน้าปกบทความ '10 แอปฯ สอนเขียนโค้ด จบไม่ตรงสายก็เรียนได้' แสดงตัวเลขไบนารีและภาพประกอบแนวเทคโนโลยี เช่น หุ่นยนต์ถือหลอดไฟและไอคอนแอปพลิเคชันต่างๆ
ภาพหน้าจอแอป SoloLearn แสดงส่วนการเรียนรู้พื้นฐานภาษาโปรแกรมต่างๆ เช่น Python, JavaScript, C++, HTML รวมถึงหัวข้อ Data Structures และ Machine Learning
ภาพหน้าจอแอป Encode แสดงรายการบทเรียนสำหรับการพัฒนาเว็บ เช่น การเริ่มต้น, รายการ, ลิงก์, รูปภาพ, คอนเทนเนอร์ และการจัดรูปแบบองค์ประกอบต่างๆ
10 แอปพลิเคชันสอนเขียนโค้ด
การเขียนโค้ด (Coding) ถือเป็นหัวใจหลักที่สำคัญในการทำงานกระบวนการทำงานต่าง ๆ ของหน้าเว็บไซต์และบรรดาแอปพลิเคชันที่มีอยู่ในทุก ๆ ระบบปฏิบัติการ สามารถทำงานได้อย่างราบรื่น ซึ่งในปัจจุบันก็ได้มีการจ้างงานมากขึ้นเพื่อรองรับการเติบโตของสังคมในยุคเทคโนโลยีและตลาดอุปกรณ์อัจฉริยะ (Smart Device) ที่เติบโตขึ
นักเดฟ - NakDev

นักเดฟ - NakDev

ถูกใจ 3588 ครั้ง

ภาพหน้าปกแสดงหัวข้อ "VSCODE Extension สำหรับสาย Web EP.3" พร้อมโลโก้ Visual Studio Code และโลโก้ Lemon8 @itfeature
ภาพแสดงรายละเอียดของ VS Code extension ชื่อ "Auto Close Tag" ซึ่งช่วยปิดแท็ก HTML, XML และภาษาอื่น ๆ โดยอัตโนมัติ
ภาพแสดงรายละเอียดของ VS Code extension ชื่อ "Auto Import" ซึ่งช่วยนำเข้าโมดูล คลาส และฟังก์ชันต่าง ๆ โดยอัตโนมัติ
VSCode Extensions สำหรับสาย web ep.3 ✅
ใช้อันไหนกันบ้างครับ . #ติดเทรนด์ #ไอทีน่ารู้ #dev #developer
ITFeature

ITFeature

ถูกใจ 331 ครั้ง

วิธีสร้าง Drop Down List ใน Google Sheet | To-do List Series EP.2 #iwasjame #googlesheet #iwasjame #googlesheet #todolist #จัดการเวลา #เทคนิคการทำงาน #คลิปนี้ต้องฟีด
iwasjame

iwasjame

ถูกใจ 2 ครั้ง

🧑‍💻 อยากเขียน Frontend ต้องรู้อะไรบ้าง? (Part 2 – JavaS
พอทำเว็บให้ “มองเห็นได้” ด้วย HTML/CSS แล้ว ขั้นต่อไปคือทำให้เว็บ “ตอบสนองได้” และตัวเอกของงานนี้ก็คือ… **JavaScript** ✨ วันนี้เราเลยสรุปพื้นฐาน JS ที่มือใหม่ต้องรู้ให้ครบจบในโพสต์เดียวครับ 1) JavaScript Basic — ทำให้หน้าเว็บโต้ตอบได้** ถ้าอยากให้เว็บคลิกได้ ขยับได้ ส่งข้อมูลได้ ต้องเริ่มจาก
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 10 ครั้ง

ภาพแสดงวิธีการเชื่อมไฟล์ใน App Script สองวิธี: 1. HTML Service สำหรับ UI ที่ซับซ้อนและโต้ตอบได้ โดยมีการเรียกใช้ฟังก์ชันฝั่งเซิร์ฟเวอร์และอัปเดต UI 2. Content Service สำหรับข้อมูลดิบหรือเนื้อหาแบบง่าย โดยแอปพลิเคชันไคลเอนต์จะเรียกใช้ฟังก์ชันฝั่งเซิร์ฟเวอร์เพื่อรับข้อมูลดิบ (JSON, Text)
การเชื่อมไฟล์ใน appscript
#ติดเทรนด์ #ป้ายยากับlemon8 #appscript #พื้นฐานการเขียนเว็ปไซต์ #เชื่อมไฟล์ การเชื่อมไฟล์ในการเขียนเว็บแอปด้วย Google Apps Script นั้น โดยหลักๆ แล้วสามารถทำได้ 2 วิธีหลักๆ ซึ่งแต่ละวิธีก็มีข้อดีและข้อจำกัดที่แตกต่างกันไป ดังนี้ครับ 1. การเชื่อมไฟล์โดยใช้ HTML Service (สำหรับ UI ที่ซั
ขีดเขียน

ขีดเขียน

ถูกใจ 3 ครั้ง

ภาพแสดงการเปรียบเทียบแท็ก div เป็นกล่องสีต่างๆ ที่จัดเรียงและซ้อนกัน เช่น กล่อง 1-8 เพื่ออธิบายการจัดกลุ่มเนื้อหาใน HTML
tag div
แท็ก <div> ใน HTML คือองค์ประกอบหนึ่งที่ใช้สำหรับแบ่งหรือจัดกลุ่มส่วนต่างๆ ของหน้าเว็บ เปรียบเสมือนกล่องที่ใช้บรรจุเนื้อหาต่างๆ เช่น ข้อความ รูปภาพ หรือองค์ประกอบอื่นๆ แท็ก <div> ช่วยให้สามารถจัดโครงสร้างหน้าเว็บให้เป็นระเบียบและง่ายต่อการจัดการด้วย CSS หรือ JavaScript สรุปสั้นๆ: หน้
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ภาพหน้าจอคอมพิวเตอร์แสดงโค้ดโปรแกรม พร้อมข้อความว่า \"Review CS KMUTNB + มหาลัยนิดนึง\" และไอคอนมงกุฎกับดาวสีทอง
ภาพภายนอกอาคารเรียนของมหาวิทยาลัย มีป้ายชื่อคณะและข้อความระบุว่าสาขาอยู่ชั้น 6 และบางวิชาเรียนเป็นภาษาอังกฤษล้วน
ภาพหน้าจอคอมพิวเตอร์แสดงโค้ดโปรแกรม พร้อมข้อความอธิบายการเรียนปี 1 ที่เน้น Python, คณิตศาสตร์, พื้นฐานเว็บ (HTML, CSS), Database และ UX/UI
✨รีวิววิทยาการคอมพิวเตอร์ มจพ (KMUTNB)
รีวิว COM-SCI.KMUTNB แบบเด็กปี 3 เจ้าของแอคอยู่ FULLSTACK DEVน้าา #cskmutnb #comsci #มจพ #kmutnb
Nattazxin.

Nattazxin.

ถูกใจ 312 ครั้ง

ภาพหน้าจอหลักของเกม CSS Diner แสดงชื่อเกม 'Select the plates' และข้อความภาษาไทย 'เกมฝึก css พื้นฐาน' พร้อมจานสองใบวางบนโต๊ะ
ภาพหน้าจอเกม CSS Diner แสดงส่วนแก้ไข CSS Editor ที่ผู้เล่นใช้พิมพ์คำสั่งเลือกวัตถุ และส่วนแสดง HTML Viewer ที่แสดงโครงสร้างจานบนโต๊ะ
ภาพหน้าจอเกม CSS Diner เน้นส่วน HTML Viewer ที่แสดงโครงสร้าง HTML ของจานบนโต๊ะ และเป้าหมายของเกมคือ 'Select the plates'
เกมฝึก CSS พื้นฐาน - CSS Diner
สำหรับใครที่อยากลองฝึก ✨css✨ พื้นฐานเหมาะมากเลยครับ Game Link: https://flukeout.github.io ส่วนตัวผมเข้าไปเล่นแล้วสนุกดีครับ ตัวโจทย์ของเกมจะเป็นแนวให้เราเขียน select วัตถุใน table ตามรูปครับ จะไม่มีเรื่องเกี่ยวกับ style ภายใน element นั้นๆ โดยตัวเกมจะมีทั้งหมด 📈32 level📉 ซึ่งไล่ระดับความยากขึ้นไ
Monchaaaaa

Monchaaaaa

ถูกใจ 66 ครั้ง

ภาพหน้าจอเว็บไซต์ Design Resources แสดงหมวดหมู่และเครื่องมือออกแบบดิจิทัลยอดนิยม เช่น Figma, Dribbble, Mobbin, Muzli พร้อมข้อความว่า “รวมเว็บออกแบบดิจิทัล 300+ รายการ ฟรี!!” และ “Bookmark ไว้ได้ใช้แน่นอน”
ภาพหน้าจอเว็บไซต์ Design Resources แสดงข้อความ “The ultimate collection of digital design resources.” และไฮไลต์ที่อยู่เว็บไซต์ https://designresourc.es/ พร้อมช่องสมัครรับข่าวสารและตัวอย่างเครื่องมือออกแบบต่างๆ
ภาพหน้าจอเว็บไซต์ Design Resources ในหมวดหมู่ “Learn Design” แสดงแหล่งเรียนรู้การออกแบบมากมาย เช่น Webflow, Laws of UX, Google Material Design พร้อมข้อความ “คัดแหล่งความรู้ที่ดีมีให้เลือกเยอะ ทั้งฟรีและเสียเงิน”
รวมคลังแสงสายงานออกแบบ👩🏻‍💻 ตัวเดียวจบ! ได้ใช้แน่นอน ✨
สายงานออกแบบจำเป็นต้องเสพงาน ตามเทรนต์อยู่ตลอดเราเจอของดีย์อีกแล้ววว จากครั้งที่แล้วที่มาแชร์ Design Daily Report ไป ตัวนี้คล้ายๆกันเลย ทำให้ชีวิตง่ายขึ้นมากกว่าเดิมไปอีก ไม่เสียเวลาหาเว็บอีกต่อไป ✨ 💻 ก็คือ design resources เป็นแหล่งรวบรวมเว็บไซต์ที่เกี่ยวกับการออกแบบ เช่น เครื่องมือ ไอคอน ภาพ
Pimtee

Pimtee

ถูกใจ 410 ครั้ง

📌✨แชร์ไอเดียโปรเจคจบ สาย IT
วันนี้ผมจะมาแชร์ไอเดียของผมให้ทุกคนนำไปต่อยอดครับ เป็นการพัฒนาแพลตฟอร์มโซเชียลมีเดียสำหรับผู้สูงอายุเพื่อการดูแลสุขภาพและการเชื่อมต่อกับผู้เชี่ยวชาญด้านสุขภาพ นี่คือบางคำแนะนำเพื่อพัฒนาและนำไปสู่ระดับถัดไป 1. ความต้องการของผู้ใช้ : พยายามระบุความต้องการของกลุ่มเป้าหมายของคุณ (ผู้สูงอายุ) ว่าต้อ
นักเดฟ - NakDev

นักเดฟ - NakDev

ถูกใจ 278 ครั้ง

ภาพชายหนุ่มยิ้มแย้มพร้อมแล็ปท็อป แสดงหัวข้อ '4 SKILLS ที่ต้องมี ถ้าอยากเป็น JAVA DEV' และโลโก้ The Ladder พร้อมข้อความว่าไม่ต้องเก่งตั้งแต่แรก
ภาพกลุ่มคนทำงานร่วมกันบนแล็ปท็อป แสดง Skill #1 Logical Thinking พร้อมคำอธิบายการคิดอย่างเป็นระบบและวิเคราะห์ปัญหา
ภาพพื้นหลังเป็นโค้ดโปรแกรม แสดง Skill #2 Basic Programming พร้อมหัวข้อตัวแปร, เงื่อนไข if-else, loop และ function
☕ อยากเป็น Java Dev ต้องมี skills อะไรบ้าง?
ไม่ต้องเก่งตั้งแต่วันแรก แต่มี 4 Skills นี้ = ไปต่อได้ยาว หลายคนคิดว่า “ต้องโค้ดเก่งมากก่อน ถึงจะเริ่มได้” จริง ๆ แล้ว… Java Dev ที่ทำงานได้จริง เริ่มจาก วิธีคิด + พื้นฐานที่ถูกต้อง ครับ 👇 🧠 Skill ที่ 1: คิดอย่างเป็นระบบ * แยกปัญหาออกเป็นส่วน ๆ ได้ * รู้ว่าควรเริ่มแก้ตรงไหนก่อน * มองงานเ
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 0 ครั้ง

ภาพแนะนำซีรีส์ 5 โพสต์จาก The Ladder เกี่ยวกับโลกของ Frontend โดยมีคำถามว่า 'อยากทำ Website เริ่มจากตรงไหนดี' แสดงบนหน้าจอคอมพิวเตอร์ที่กำลังโค้ดดิ้ง
ภาพอธิบายว่า HTML เปรียบเสมือน 'กระดูก' ที่เป็นโครงสร้างหลักของเว็บไซต์ หากเว็บไซต์คือร่างกายมนุษย์ แสดงบนหน้าจอคอมพิวเตอร์ที่มีโค้ด
ภาพระบุว่าหัวข้อ ข้อความ และรูปภาพที่เราเห็นบนเว็บไซต์ ล้วนมาจาก HTML ทั้งนั้น แสดงบนหน้าจอคอมพิวเตอร์ที่มีโค้ดและเมาส์
เริ่มต้นเขียนเว็บง่าย ๆ กัน !
เริ่มต้นเขียนเว็บ มันอาจจะเริ่มจากแค่บรรทัดเดียว <button>คลิกเลย!</button> แต่สำหรับมือใหม่หลายคน ติดตรงนี้แหละ… ไม่รู้ว่า ควรเริ่มตรงไหนก่อนดี HTML ไม่ได้ยาก แต่ถ้าไม่มีโครงสร้างให้จับ เรียนไปเรื่อย ๆ เดี๋ยวก็หลงทาง 😅 โพสต์นี้เลยอยากรวม “จุดเล็ก ๆ ที่ Frontend มือใหม่คว
The Ladder | เปลี่ยนสายเป็นdev

The Ladder | เปลี่ยนสายเป็นdev

ถูกใจ 1 ครั้ง

ดูเพิ่มเติม