Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
ใช้ CSS และ SCSS สร้าง Responsive website ตั้งแต่เริ่มต้น!
Rating: 4.8 out of 5(8 ratings)
66 students

ใช้ CSS และ SCSS สร้าง Responsive website ตั้งแต่เริ่มต้น!

ปูพื้นฐานสำหรับการเขียนเว็บไซต์ ด้วยภาษา HTML และ CSS ไปจนถึงการทำเว็บไซต์ให้รองรับการแสดงผลในหลายขนาดหน้าจอ
Created byJirayu Limjinda
Last updated 1/2024
Thai

What you'll learn

  • เรียนรู้พื้นฐานการเขียนหน้าเว็บไซต์ด้วยภาษา HTML/CSS ตั้งแต่เริ่มต้น
  • สามารถสร้างเว็บไซต์ที่สามารถรองรับการแสดงผลได้ทุกอุปกรณ์
  • เรียนรู้เทคนิคเฉพาะส่วนในการจัดแต่งหน้าเว็บไซต์
  • นำเทคนิคและความรู้ไปปรับใช้กับทำงานให้ง่ายขึ้น รวดเร็วขึ้น

Course content

3 sections46 lectures11h 53m total length
  • Course Overview5:58

    เรากำลังจะได้เรียนรู้เรื่องอะไรกันบ้างในคอร์สนี้

  • Setup & Tools12:27
  • HTML Basic12:05
  • HTML Basic : Heading Text, List & Link and Image19:42
  • HTML Basic : Div, Section, Header, Footer, Table and Form22:16
  • โลกของ CSS และการเรียกใช้งาน (CSS Selector)15:14
  • หน่วยที่ใช้ใน CSS (CSS Units)11:39
  • CSS Box Model10:34
  • Basic Layout: Card16:03
  • Basic Layout: Buttons and Menus17:13
  • Basic Layout: Stats Box14:05
  • เรื่องของสี (Color)7:29
  • ตัวอักษร (Font)11:42
  • ว่าด้วยเส้นขอบ (Border)7:12
  • Basic Layout: ปุ่มมน (Button Radius)11:02
  • เงา (Box Shadow)7:24
  • ตำแหน่งการแสดงผล (Position)11:52
  • Advance Position9:35
  • Basic Layout: Header and Footer11:54
  • Basic Layout: Custom Header Part 19:28
  • เลเยอร์ หรือลำดับการแสดงผล (Z-Index)13:48
  • Basic Layout: Custom Header Part 214:38
  • ควบคุมเนื้อหาที่เกิน (Overflow)4:44
  • Basic Layout: กล่องข้อมูลเลื่อนได้ (Scrollable Box)7:47
  • จัดเรียงซ้ายขวา (Float and Clear)8:52
  • การแสดงผลใน CSS (Display)11:51
  • Flexbox28:24
  • Basic Layout: ฟอร์ม (Form)27:41
  • Basic Layout: ฟอร์มแนวนอน (Horizontal Form)8:23
  • Basic Layout: ออกแบบ App Layout2:09
  • Basic Layout: สร้าง App Layout20:46
  • CSS Transform10:22
  • Basic Layout: Caret8:13
  • Basic Layout: Seperator7:35
  • Animation16:23
  • Basic Layout: Animate Button6:50
  • Media Query12:57
  • Basic Layout: Media Query17:48
  • Basic Layout: Responsive17:57
  • Basic Layout: Responsive Header14:19

Requirements

  • ไม่จำเป็นต้องมีพื้นฐานการเขียนโปรแกรมมาก่อนก็สามารถเรียนได้

Description

หลังจากทำคอร์สเขียนธีม WordPress ด้วยตัวเอง และมีนักเรียนให้ความสนใจกันเยอะ หลายคนก็สอบถามเข้ามาเรื่องคอร์สพื้นฐานการเขียนเว็บไซต์แบบ Resposive design หรือทำยังไงให้พัฒนาเว็บไซต์แบบเริ่มจากศูนย์ ไปจนถึงเอาไปใช้งานจริงได้ วันนี้ผมเลยทำคอร์สนี้ขึ้นมาครับ


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


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

Who this course is for:

  • ผู้ที่สนใจหรือต้องการพัฒนาทักษะการเขียนโค้ดเพื่อนำไปสร้าง Responsive Website