NakornCode นครโค้ด
🏠 หน้าแรก 📰 บทความ 👨‍💻 เกี่ยวกับนครโค้ด
รายละเอียดคอร์สเรียนทั้งหมด
  • คอร์สเรียนทั้งหมด
  • HTML + CSS สำหรับพัฒนาหน้าเว็บสายงาน Front-end

คอร์สเรียน HTML + CSS สำหรับพัฒนาหน้าเว็บสายงาน Front-end

คำอธิบายคอร์สเรียน

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

สิ่งที่คุณจะได้เรียนรู้

  • มีชีทเป็นกระดาษสูตรโกง ช่วยสรุปหลังผู้เรียน เรียนจบไปแล้วแต่อาจจะลืมรูปแบบคำสั่งต่างๆได้
  • มีแบบทดสอบ สำหรับการรับใบประกาศนียบัตรที่ออกให้โดยทาง SkillLane
  • ได้เห็นวิธีการปฎิบัติจริง ที่ทำให้รู้จักคีย์ลัดต่างๆ และเทคนิคเสริมมากมายที่จะทำให้เราทำงานได้เร็วและง่ายขึ้น
  • มีการเปิดวิธีการอ่านเอกสารผ่านออนไลน์ให้ดูโดยเฉพาะที่เว็บไซต์ MDN เพื่อหัดอ่านเอกสารต่อด้วยตนเองได้
  • มี Workshop ให้ฝึกทำเป็นระยะ พร้อมเฉลยต่างๆ
  • สอนการวาง Layout โดยพื้นฐานทั้งหมดอย่างครอบคลุม รวมทั้งการทำ Responsive Web Design
  • แนะนำการทำเว็บไซต์ให้มีประสิทธิภาพ ด้วยการใช้เครื่องมือ PageSpeed (Lighthouse)
  • แนะนำการทำ SEO โดยพื้นฐาน และแนะนำข้อแตกต่างของ SPA, SSR ที่จะส่งผลต่อ SEO ต่างๆ
  • แนะนำเรื่อง UX/UI โดยพื้นฐาน สำหรับการต่อยอดเพื่อการเรียนรู้ด้วยตนเองต่างๆ
  • แนะนำการใช้ GitHub Pages เพื่อทำ Webpage อย่างง่ายและฟรีในการใช้งานจริง

ประโยชน์ที่คุณจะได้รับ

  • การเรียนภาษา HTML5 และ CSS3 จะทำให้เราสามารถสร้าง Webpage อย่างง่ายด้วยตนเองได้
  • เป็นความรู้ระดับเริ่มต้นที่ต้องมีกันทุกคน สำหรับสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ ก่อนที่จะสามารถสร้าง Web Application เต็มรูปแบบในอนาคตได้ ที่จะต้องเรียนรู้เครื่องมืออื่นๆอีก
  • คนที่เป็น Back-end Web Development จะสามารถเริ่มต้นเข้าสู่สายงาน Full-stack Web Development ได้โดยการเรียนรู้สิ่งนี้เป็นสิ่งแรก
  • คุณรู้หรือไม่ว่า: เทคโนโลยีการพัฒนาเว็บในปัจจุบัน ยังสามารถทำเป็น Desktop Application หรือ Mobile Application ได้อีกด้วย โดยการใช้ Framework ต่างๆที่มีหรือใช้ PWA ช่วยเหลือ ซึ่งผมจะมีการแนะนำไว้ในคอร์สเรียนต่อๆไป
  • คุณรู้หรือไม่ว่า: ภาษา HTML, CSS ถูกจัดว่าเป็นภาษายอดนิยมอันดับสองประจำปี 2022 โดยอ้างอิงจาก survey.stackoverflow.co
  • ปัจจุบัน Application ส่วนใหญ่จะอยู่ในรูปแบบ Website โดยส่วนใหญ่ เพราะไม่จำเป็นต้องติดตั้งลงเครื่อง สามารถทำงานได้หลายอย่างมาก เราก็สามารถเข้าถึงผ่าน Web Browser ทำให้ลูกค้าใหม่ไม่จำเป็นต้องเปลืองพื้นที่การติดตั้งลงในเครื่องของตัวเอง
  • ถึงแม้ Web Application จะยังมีข้อจำกัดอยู่บ้าง แต่ส่วนใหญ่จะครอบคลุมกับงานโดยทั่วไปอย่างครบถ้วน และสมัยนี้ Web Browser สามารถขออนุญาตการเข้าถึงอุปกรณ์ต่างๆได้อีกด้วย เช่น การสื่อสารกับกล้อง การสื่อสารกับสถานที่อยู่ปัจจุบัน การติดต่อกับโปรแกรมในเครื่องที่มีอยู่แล้ว เป็นต้น

ทักษะที่ผู้เรียนจะต้องมีก่อนเรียนคอร์สเรียนนี้

  • มีความรู้ทั่วไปในระดับประถมต้น
  • เข้าใจวิธีการใช้งานอุปกรณ์ต่างๆทางคอมพิวเตอร์โดยพื้นฐาน
  • สามารถใช้งานอินเทอร์เน็ตโดยทั่วไปได้

เหมาะสำหรับ

  • นักเรียนระดับประถม
  • นักเรียนระดับมัธยม
  • นักศึกษาที่กำลังศึกษาในสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ
  • ผู้ที่สนใจในสายงาน Web Development
  • ผู้ที่สนใจในสายงาน Front-end Web Development
  • ผู้ที่สนใจในสายงาน Full-stack Web Development

เนื้อหาที่มีทั้งหมด

บทนำ

  • แนะนำคอร์สเรียน

    09:18 นาที
  • แนะนำเทคโนโลยีของเว็บโดยพื้นฐาน

    04:42 นาที

ดาวน์โหลดโปรแกรม และการเตรียมความพร้อมก่อนเรียน

  • ดาวน์โหลด Workshop

    00:45 นาที
  • ดาวน์โหลด Cheat Sheet (สูตรโกง)

    01:45 นาที
  • ดาวน์โหลดและติดตั้ง Visual Studio Code (VSCode)

    02:16 นาที
  • Visual Studio Code: Live Server

    15:44 นาที
  • Visual Studio Code: HTMLHint

    02:03 นาที

HTML5

  • HTML Element - ส่วนประกอบและโครงสร้าง

    24:01 นาที
  • HTML Head - ข้อมูลเพิ่มเติบ

    09:40 นาที
  • HTML Formatting Text - การจัดข้อความ

    25:59 นาที
  • HTML Entities - ข้อความพิเศษ

    04:50 นาที
  • HTML Semantic Tag - แท็กพิเศษ

    05:59 นาที
  • Workshop 1 - การจัดข้อความกับ HTML

    10:15 นาที
  • Website - การทำเว็บไซต์และการทำลิงก์เชื่อมโยง

    12:00 นาที
  • HTML Document Fragments - การทำลิงก์เชื่อมโยงกับส่วนประกอบภายในเว็บ

    09:00 นาที
  • HTML Media - การแนบสื่อต่างๆลงหน้าเว็บ (รูปภาพ, วิดีโอ, เสียง)

    17:38 นาที
  • HTML Iframe & Embed - แนวทางการแนบข้อมูลจากภายนอก เช่น Google Maps, YouTube

    10:46 นาที
  • Workshop 2 - การทำหน้าเว็บหลายหน้า

    15:19 นาที
  • HTML Table - การจัดเนื้อหาตาราง

    09:53 นาที
  • Workshop 3 - การแสดงเนื้อหาแบบตาราง

    04:46 นาที
  • Web Form - ทำความรู้จักกับการส่งข้อมูลผ่านแบบฟอร์มหน้าเว็บ

    10:57 นาที
  • HTML Form (Submit) - วิธีการส่งข้อมูล

    22:05 นาที
  • HTML Form (Types) - ประเภทของ Input ต่างๆ

    21:04 นาที
  • HTML Form (Attributes) - คุณสมบัติพิเศษบน Input

    21:40 นาที
  • HTML Form (Other) - การใช้แบบฟอร์มอื่นๆเพิ่มเติม

    12:11 นาที
  • Workshop 4 - การทำ Shorten link ด้วยการใช้ API ของผู้อื่น

    08:12 นาที

CSS3

  • CSS Structure - โครงสร้างหลัก

    13:49 นาที
  • CSS Unit & Value - แนวทางการกำหนดค่าลงใน Property ต่างๆ

    14:22 นาที
  • Workshop 5 - ทดลองปรับสีและรูปแบบบนหน้าเว็บ

    04:18 นาที
  • CSS Framework - แนวทางการใช้ชุด CSS ของผู้อื่น

    25:42 นาที
  • Workshop 6 - ทดลองใช้งาน Bootstrap CSS

    15:54 นาที
  • CSS Selector - วิธีการเลือก HTML Element

    20:15 นาที
  • CSS Combinator - การใช้ Selector แบบประสาน

    14:27 นาที
  • CSS Inheritance - การสืบทอดเนื้อหา

    07:33 นาที
  • Workshop 7 - การปรับ Dark Theme

    04:55 นาที
  • CSS Pseudo - การใช้ Selector แบบกำหนดตามสถานะและตำแหน่ง

    32:38 นาที
  • Workshop 8 - การปรับปรุง Dark Theme เพิ่มเติม

    06:09 นาที
  • CSS Box Model - การกำหนดขนาด ขยายเนื้อหา ขอบ และ ระยะห่าง

    28:32 นาที
  • CSS Background - การกำหนดพื้นหลัง

    17:39 นาที
  • Workshop 9 - แก้ไขรูปภาพที่กว้างมากเกินไป

    02:57 นาที
  • CSS Text & Font - การปรับรูปแบบข้อความต่างๆ

    34:01 นาที
  • CSS em, rem - ทำความรู้จักกับหน่วยกำหนดขนาดฟอนต์พิเศษ

    08:51 นาที
  • CSS Shadow - วิธีการกำหนดเงาให้กับ Element

    06:01 นาที
  • Workshop 10 - สร้างเนื้อหาแบบ Card

    09:48 นาที
  • CSS Display - การแสดงผลของเนื้อหาต่างๆ

    15:25 นาที
  • Workshop 11 - การทำรอยต่อของ Card อื่นๆร่วมกัน

    02:47 นาที
  • CSS Position - การกำหนดตำแหน่ง Element

    18:51 นาที
  • เทคนิคเพิ่มเติมการใช้ CSS Position

    14:44 นาที
  • Workshop 12 - เว็บไซต์ขาย Smartphone

    16:16 นาที
  • CSS Float - การทำวัตถุลอยตัวในเนื้อหา

    03:54 นาที
  • CSS Flexbox - การจัดเนื้อหาเสมือนตารางแบบ 2D

    29:51 นาที
  • Workshop 13 - แก้ไขวิธีการแสดงผลหน้าเว็บขาย Smartphone

    01:41 นาที
  • CSS Transform - การดัดแปลงเนื้อหา Element

    04:17 นาที
  • CSS Transition - แสดงผลการเคลื่อนไหวของเนื้อหาตามที่ถูกเปลี่ยนแปลง

    09:54 นาที
  • CSS Animation - การสร้างแอนิเมชั่นบนหน้าเว็บ

    07:07 นาที
  • CSS Filter - การเพิ่ม Filter ให้กับเนื้อหา Element

    05:19 นาที
  • CSS Variable - การกำหนดตัวแปรให้กับ CSS

    06:23 นาที
  • Workshop 14 - หน้าเว็บพร้อมแอนิเมชั่นของพื้นหลัง

    14:08 นาที

บทเสริมเพิ่มเติม สำหรับการศึกษาต่อด้วยตนเอง

  • Responsive Web Design - การทำหน้าเว็บตอบสนองกับทุกๆอุปกรณ์

    35:11 นาที
  • Search Engine Optimization (SEO) - การทำให้หน้าเว็บติด Google ที่ดีกว่าเดิม

    16:25 นาที
  • PageSpeed Insight (Lighthouse) - การตรวจสอบคุณภาพของเว็บที่เรามีอยู่

    06:48 นาที
  • UX/UI - พื้นฐานสำหรับการสร้างเว็บให้สวยงาม และมอบประสบการณ์แก่ผู้ใช้งานที่ดี

    33:21 นาที
  • Workshop 15 - บทส่งท้ายสำหรับการฝึกลอกหน้าเว็บของผู้อื่น

    48:18 นาที
  • ทำความรู้จักกับ Server-side Rendering (SSR) & Single Page Application (SPA) เพื่อเป็นแนวทางการเรียนรู้ต่อ

    19:00 นาที
  • Static Website Hosting - การใช้ Hosting Free กับ GitHub

    08:09 นาที
  • บทส่งท้ายการเรียนรู้

    03:25 นาที

รีวิวจากผู้เรียน (ทั้งหมด 35 รีวิว คะแนนเฉลี่ย 4.9)

BoBo C.

good

⭐⭐⭐⭐⭐

สรวิศ ก.

คุ้มค่ากับความรู้ที่ได้มากครับ ที่สำคัญมี ชีทสรุปให้ด้วย ไว้ทวนความจำ ได้เป็นอย่างดี ครับ

⭐⭐⭐⭐⭐

NIWAT T.

เนื้อหาครบ อธิบายดี เหมาะสำหรับ ผู้เริ่มต้น ครับ แนะนำครับ

⭐⭐⭐⭐⭐

Pawit M.

เนื้อหาครอบคลุมแทบหมด ลองไปกด F12 เว็บอื่นดูสามารถอ่านโค้ดเข้าใจ 90%

⭐⭐⭐⭐⭐

Ratchanon T.

⭐⭐⭐⭐⭐

Thanakit C.

⭐⭐⭐⭐

Nookky N.

⭐⭐⭐⭐⭐

สุชาติ ส.

⭐⭐⭐⭐⭐

Thanatchayakorn K.

⭐⭐⭐⭐⭐

Hi H.

⭐⭐⭐⭐⭐

Supansa P.

⭐⭐⭐⭐⭐

Pranisa S.

⭐⭐⭐⭐⭐

Anuwat P.

⭐⭐⭐⭐

Somsupa P.

⭐⭐⭐⭐⭐

TuDz S.

⭐⭐⭐⭐⭐

Thayakorn M.

⭐⭐⭐⭐⭐

Wee B.

⭐⭐⭐⭐⭐

Kanathip S.

⭐⭐⭐⭐⭐

ธีรภัทร น.

⭐⭐⭐⭐⭐

visut c.

⭐⭐⭐⭐⭐

McFc P.

⭐⭐⭐⭐⭐

นุ่มฟู c.

⭐⭐⭐⭐⭐

Panuwat K.

⭐⭐⭐⭐⭐

Panya P.

⭐⭐⭐⭐⭐

นายดลรอฮีม พ.

⭐⭐⭐⭐⭐

Adul T.

⭐⭐⭐⭐⭐

นาย เ.

⭐⭐⭐⭐⭐

So U.

⭐⭐⭐⭐⭐

Nakhunkhun A.

⭐⭐⭐⭐⭐

เด่นภูมิ น.

⭐⭐⭐⭐⭐

ธนเสฏฐ์ น.

⭐⭐⭐⭐⭐

Pongsapak N.

⭐⭐⭐⭐⭐

Latte A.

⭐⭐⭐⭐⭐

kittipon b.

⭐⭐⭐⭐⭐

จิรายุส แ.

⭐⭐⭐⭐⭐
คลิกเพื่อดูคอร์สเรียนอื่นๆทั้งหมด
คอร์สเรียน HTML + CSS สำหรับพัฒนาหน้าเว็บสายงาน Front-end
จากราคาปกติ 1,690 บาท
ช่วงโปรโมชั่นทุกเดือนคู่ราคา 890 บาท
🛒 คลิกเพื่อสั่งซื้อผ่าน SkillLane
  • จำนวน: 66 วิดีโอ
  • ความยาว: 14 ชั่วโมง 41 นาที
  • ความรู้ที่จะได้: Visual Studio Code, HTML, CSS, Responsive Web Design, UX/UI, SEO, SSR, SPA, GitHub Pages
ระดับเริ่มต้น เหมาะสำหรับ Front-end Web Developer
รีวิวจากผู้เรียนทั้งหมด 35 คน
คะแนนที่เต็ม 5.0 ได้ 4.9 คะแนน
คะแนนอัปเดตเมื่อวันที่ 13/12/2022

ผู้สอนคอร์สเรียน

นคร สินผดุง Nakorn Sinpadung

นคร สินผดุง
(Nakorn Sinpadung)

โปรแกรมเมอร์มืออาชีพ

  • ปัจจุบันเป็นติวเตอร์ออนไลน์ สอนพัฒนาโปรแกรม
  • ปัจจุบันเป็นพนักงานประจำระดับ Senior Programmer ที่ CareerVisa Digital
  • มีประสบการณ์ทำงานจริงในบริษัทต่างๆมากกว่า 4 ปี
  • มีประสบการณ์สอนผ่านออนไลน์นานกว่า 6 ปี
ดูคอร์สเรียนอื่นๆที่นครโค้ดสอนทั้งหมด
นครโค้ด NakornCode

นครโค้ด สอนเขียนโปรแกรม

สำหรับสายงาน Full-stack Web Developer ใช้ MEVN Stack

  • หน้าหลัก
  • คอร์สเรียนทั้งหมด
  • บทความทั้งหมด
  • เกี่ยวกับนครโค้ด

Copyright © 2023 NakornCode.com All rights reserved.

Online illustrations by Storyset. ติดต่อผ่าน Facebook

คอร์สเรียนสำหรับนักพัฒนาโปรแกรมสายงาน Full-stack Web Developer โดยการใช้ MEVN Stack ทั้งระบบ สอนตั้งแต่ระดับเริ่มต้น ระดับพื้นฐาน จนถึงระดับเชี่ยวชาญ จัดการเรียนการสอนโดย นครโค้ด | คอร์สเรียน คอร์สเรียนออนไลน์ คอร์สเรียนฟรี ขายคอร์สเรียนออนไลน์ เขียนโปรแกรม สร้างโปรแกรม พัฒนาโปรแกรม Certificate มีใบเซอร์ มีใบประกาศ SkillLane ระดับประถม ระดับมัธยม ระดับมหาวิทยาลัย ระดับปริญญาตรี ระดับเริ่มต้น ระดับเชี่ยวชาญ ระดับทำงาน คอร์สเรียนขั้นสูง สอนละเอียด ภาษาไทย ราคาถูก โปรโมชั่น 2023 2566 ภาษา HTML HTML5 CSS CSS3 Python JavaScript JS ES5 ES6 TypeScript TS Node.js Nodejs Express.js Expressjs MongoDB Vue.js Vuejs Vue Vue3 Nuxt.js Nuxtjs Nuxt Nuxt3 Bootstrap Vuetify Tailwind Tailwindcss Git GitHub DevOps CI/CD Docker สายงาน Full-stack Fullstack Front-end Frontend Back-end Backend Web Development Web Developer