HTML (Hypertext Markup Language) คือภาษาที่สำคัญที่สุดในด้าน front-end หรือ client-side ของการพัฒนาเว็บไซต์หรือ Web apps ใดๆ ถ้าจะให้เปรียบแล้ว HTML เปรียบเหมือนกับลำต้นใหญ่ที่เป็นโครงสร้างค้ำจุนทุกส่วนของสิ่งที่ผู้เข้าชมจะเห็นเว็บไซต์ของคุณเลยครับ
ส่วน CSS (Cascading Style Sheets) คืออีกภาษาหนึ่งที่ช่วยในการนำเสนอข้อมูล, รูปภาพ และอื่นๆ อีกมากมายใน HTML ทั้งนี้ CSS จะช่วยเพิ่มความสวยงาม ความยืดหยุ่น รวมไปถึงฟังก์ชันต่างๆ ของเว็บไซต์และ web apps ให้ทำหน้าที่ต่างๆให้ได้มากขึ้น ดังนั้นในปัจจุบันไม่ว่าเว็บไซต์ใดก็ไม่อาจจะขาด CSS ไปได้เลยครับ
ทั้ง HTML และ CSS นั้นเป็นพื้นฐานที่ขาดไม่ได้ของการพัฒนาเว็บทุกรูปแบบ รวมไปถึงการเรียนภาษาระดับสูงขึ้นอย่างเช่น JavaScript และ Framework/Library ของ JavaScript อีกมากมายอย่างเช่น React หรือ Vue เป็นต้น
ดังนั้นในโพสนี้ผมจะมาแนะนำคอร์สสอน HTML และ CSS ที่น่าสนใจ โดยคอร์สทุกคอร์สจะใช้เทคโนโลยีล่าสุด นั่นคือ HTML 5 และ CSS 3 ครับ ในการเรียนคุณไม่ต้องมีพื้นฐานใดๆ มาก่อน เพราะทั้ง HTML และ CSS เป็นพื้นฐานแรกสุดของการเขียนโปรแกรมเลยก็ว่าได้ครับ
เราไปเริ่มต้นกันเลยดีกว่า
ข้อควรทราบ: ราคาและเงื่อนไขต่างๆ ในคอร์สอาจจะเปลี่ยนแปลงไปได้ โปรดตรวจสอบกับทางเว็บไซต์อีกครั้งหนึ่งเพื่อความแน่นอนครับ
Udemy
คอร์สที่ 1-5 อยู่ในแพลตฟอร์มของ Udemy
Udemy เป็นแพลตฟอร์มที่น่าสนใจมากสำหรับการเรียน HTML และ CSS สาเหตุก็คือ Udemy มีคอร์สมากมายให้คุณเลือกสรร คอร์สเหล่านี้จำนวนมากยังถูกจัดทำอย่างดีเยี่ยม พร้อมกับเนื้อหาอัดแน่นที่จะช่วยให้คุณเรียนการเขียน HTML และ CSS เป็นระบบและมีประสิทธิภาพครับ
การเรียนกับ Udemy นั้นสะดวกสบายมาก เพราะคุณจะเรียนช่องทางไหนก็ได้ ไม่ว่าจะเป็น Smartphone, Smart TV, Tablet หรือ PC แถมการเรียนยังไม่มีการจำกัด เพราะเป็นแบบซื้อขาด คุณจะเรียนแบบเข้าถึงได้ตลอดชีพครับ และถ้าในอนาคต ผู้สอนของคุณใส่เนื้อหาใหม่ในคอร์ส คุณจะได้เนื้อหานั้นฟรีในทันที แบบไม่ต้องซื้อ DLC ครับ
แต่ที่ดีที่สุดเห็นจะเป็นการลดราคาของ Udemy ที่มีทุกสัปดาห์ และลดแรงมากถึง 90% ทำให้คุณซื้อคอร์สได้ในราคาที่ถูกมาก (ส่วนมากไม่เกิน 600 บาท ส่วนใหญ่จะอยู่ที่ 300-400 บาท) ดังนั้นคุณจะเข้าถึงความรู้ดีๆ โดยที่ไม่ต้องลงทุนมากนักครับ
สมมติว่าคุณเปิดเว็บเข้าไปแล้วพบว่าคอร์สอยู่ราคาเต็ม (อย่างที่ปรากฏในรูปในโพสนี้) ผมแนะนำให้คุณจับคอร์สที่ต้องการใส่ Wish List แล้วรอ 2-5 วันก่อนที่จะย้อนกลับเข้าไปใหม่ หรือว่าจะสมัครแจ้งเตือนกับ Victory Tale ก็ได้ครับ เพื่อที่ผมจะได้แจ้งให้คุณทราบเมื่อมีการลดราคาเกิดขึ้น
1. HTML & CSS Tutorial and Projects Course
คอร์สสอน HTML5 และ CSS3 ที่จัดทำโดย John Smilga นักพัฒนาเว็บไซต์ที่มีความเชี่ยวชาญใน HTML, CSS, JavaScript และ framework อีกมากมายครับ ผมเองก็ได้เรียนผ่านคอร์สนี้มาแล้วครับ
จากประสบการณ์คือตัวคอร์สเหมาะสำหรับมือใหม่ด้านการเขียนโปรแกรมและการสร้างเว็บไซต์มาก เพราะอธิบายทุกอย่างแบบละเอียดจริงๆ ตั้งแต่ระดับพื้นฐานสุดๆ อย่างการใช้งานโปรแกรม VS Code เลยทีเดียว แต่ละจุดจะเต็มไปด้วยทริคดีๆ ที่นำไปใช้ได้จริงครับ
เนื้อหาในคอร์สนี้ประกอบด้วย
- HTML – สอนทุกอย่างเกี่ยวกับ HTML อย่างละเอียด รวมไปถึงเครื่องมือต่างๆ ที่คุณจะต้องใช้ในการสร้างเว็บไซต์ (อย่างเช่น VS Code)
- CSS – ปูพื้นฐานของคุณในการใช้งาน CSS ตั้งแต่ระดับเบื้องต้น อย่างเช่นการจัดการกับสี ฟ้อนต์ และขนาด ฯลฯ
- การตบแต่งเว็บไซต์ เช่นการใส่ background images, การทำ transform และ Transition
- CSS Flexbox, CSS Selectors และ CSS Grid
- Project อีกมากมาย – คุณจะได้เรียนการใช้งาน HTML และ CSS แบบบูรณาการด้วยการทำโปรเจคดีๆ อีกมากมายด้วยกัน อาทิเช่น Tea Station Project, Backroads Tour Company, Web Agency
โดยรวมแล้วคุณจะได้เรียนทั้งทฤษฎีและปฏิบัติอย่างเข้มข้น ซึ่งเนื้อหาแบบวีดิโอจะรวมแล้วถึง 43.5 ชั่วโมงเลยทีเดียวครับ คุณจะได้สร้างเว็บไซต์จาก scratch ด้วยมือของคุณเอง โดยไม่ได้ใช้ตัวช่วยอย่าง WordPress หรือว่าเว็บไซต์สำเร็จรูปแต่อย่างใด
อย่างไรก็ดีข้อเสียของคอร์สนี้มีอยู่อย่างเดียวคือ ผู้สอนจะมีสำเนียงที่อู้อี้เล็กน้อย ทำให้ฟังยากนิดนึง (นิดจริงๆ ครับ) ผมจึงแนะนำให้คุณดู Course Preview ในลิงค์ก่อน ถ้าคุณไม่มีปัญหาถึงค่อยสมัครครับ
คอร์สนี้ได้คะแนนรีวิวสูงถึง 4.7/5.0 จากนักเรียนกว่า 6,500 คนครับ
2. Build Responsive Real World Websites with HTML5 and CSS3
คอร์สนี้เป็นคอร์สสอน HTML5 และ CSS3 ของ Jonas Schmedtmann นักพัฒนาแบบ Full Stack Developer ที่มีทักษะการพัฒนาเว็บมานับสิบปี นอกจากนี้ทักษะการสอนของเขาก็ไม่ธรรมดา เห็นได้จากการที่คอร์สของเขามีในแพลตฟอร์มแค่ 5 คอร์สแต่มีนักเรียนที่ลงเรียนไปแล้วมากกว่า 900,000 คนเลยทีเดียว
สำหรับเนื้อหาในคอร์สจะเน้นไปที่ภาคปฏิบัติ กล่าวคือคุณจะได้ลองสร้างเว็บไซต์แบบ Responsive ขึ้นมาจริงๆ โดยใช้ HTML และ CSS3 สิ่งที่คุณจะได้เรียนมีดังต่อไปนี้
- Dive into HTML – เรียนเนื้อหา HTML แบบรวบรัด (ใช้เวลาประมาณ 30 นาที)
- Formatting with CSS – ปูพื้นฐาน CSS และ Web Design
- Project – ในส่วนนี้คุณจะได้ลองทำ Project แบบไปตามเป็นขั้นตอน และเรียนรู้เนื้อหา HTML และ CSS ไปตามลำดับ
- การสร้างเว็บไซต์ให้เป็นแบบ Responsive
- พื้นฐานของ jQuery และใส่ฟีเจอร์ต่างๆ อย่างเช่น Sticky Navigation
- การทำ Optimization เว็บไซต์ของคุณ
- และอื่นๆ อีกมากมาย
ในการเรียนคอร์สนี้จะไม่เน้นทฤษฎีมากนัก และจะเน้นไปที่การเรียนผ่านการลองสร้างเว็บไซต์จริงเป็นส่วนใหญ่ ดังนั้นถ้าคุณไม่ชอบการอธิบาย syntax ว่าตัวโน้นตัวนี้ทำอะไรบ้าง คอร์สนี้จะเป็นทางเลือกที่น่าสนใจมากๆ เลยครับ อย่างไรก็ดีข้อเสียของคอร์สนี้คือไม่มีเนื้อหาระดับสูงอย่าง Flexbox, Grid และ animation ซึ่งคุณจะต้องเรียนเพิ่มในคอร์สที่ 4 หรือ 5 ครับ
ปัจจุบันคอร์สนี้มีนักเรียนเรียนไปแล้วกว่า 200,000 คน และได้คะแนนรีวิวสูงมากถึง 4.6/5.0 ครับ
3. Modern HTML & CSS From The Beginning (Including Sass)
คอร์สนี้สอนโดย Youtuber ชื่อดังอย่าง Brad Traversy ที่มีประสบการณ์การเขียนโปรแกรมแบบ Full Stack Developer มานานกว่า 12 ปี ในคอร์สนี้เขาพร้อมแล้วที่จะถ่ายทอดความรู้ดีๆเกี่ยวกับการใช้งาน HTML และ CSS รวมไปถึง Sass ให้กับคุณครับ
สิ่งที่เขาจะสอนคุณในคอร์สนี้คือ
- HTML Basics – พื้นฐานของ Markup Language อย่าง HTML ตั้งแต่ Headings, Paragraphs, Typography ไปจนถึงการใส่ Link, Images, Attributes และ HTML5 Semantic Layout
- CSS Basics – พื้นฐานเบื้องต้นของ CSS ตั้งแต่ CSS Selectors, Fonts, Colors, Background ฯลฯ
- การสร้าง Responsive Layouts และ Flexbox
- Advanced Selectors, Animation, Shadows, CSS Transitions
- CSS Grid
- พื้นฐาน Sass และการสร้าง Portfolio เว็บไซต์โดยใช้ Sass
- และอื่นๆ อีกมากมาย
นอกเหนือจากเนื้อหาด้านบนแล้ว คุณจะได้ลองสร้างเว็บไซต์หลายประเภทด้วยกันเป็น Project อาทิเช่นเว็บไซต์โรงแรม หรือเว็บไซต์ข่าวเป็นต้น โดยรวมแล้วคุณจะได้พัฒนาทั้งด้านทฤษฎีและปฏิบัติไม่แพ้คอร์สแรก แต่ความซับซ้อนและจำนวน project จะน้อยกว่าพอสมควร
รวมแล้วคอร์สนี้มีความยาว 21 ชั่วโมง และได้คะแนนรีวิวสูงถึง 4.7/5.0 จากนักเรียนเกือบ 42,000 คนครับ
4. CSS – The Complete Guide 2020 (incl. Flexbox, Grid & Sass)
คอร์สสอน CSS ที่จัดทำโดย Maximilian Schwarzmüller ครูผู้สอนที่ได้รับความนิยมมากที่สุดคนหนึ่งใน Udemy ตัวเขานั้นเรียนรู้การเขียนโปรแกรมด้วยตนเองจาก 0 จนในปัจจุบันได้กลายเป็นโปรแกรมเมอร์มือทองไปแล้วเป็นที่เรียบร้อยครับ นักเรียนที่เรียนคอร์สต่างๆ ของเขามีมากถึง 1.2 ล้านคนเลยครับ
สำหรับคอร์สนี้จะสอนแบบเจาะลึกในส่วนของ CSS ล้วนๆ (ไม่สอน HTML) โดยคุณจะได้เรียนเนื้อหาดังต่อไปนี้
- พื้นฐานของ CSS อย่างเช่น Inline Styles, การ import Google Fonts, การใส่ Combinators
- CSS Box Model, การใส่ Header ลงใน Project รวมไปถึงทุกสิ่งที่เกี่ยวข้องกับ Styling
- CSS Selectors
- การ Position ตัว Element โดยใช้ CSS
- การใส่รูปและจัดการกับ Background image
- Sizes & Units
- การใช้ CSS กับ JavaScript (คุณไม่จำเป็นต้องเรียน JavaScript มาก่อนแต่อย่างใด)
- การทำให้เว็บไซต์ของคุณเป็นแบบ responsive (รูปลักษณ์แปรตาม device)
- การใส่ Forms, การจัดการกับ Text และ Fonts
- การใส่ Flexbox และการใช้ CSS Grid
- การทำ Transforming และ Animations โดยใช้ CSS
- พื้นฐานของ Sass
- และอื่นๆ อีกมากมาย
เนื้อหาแบบวีดิโอของคอร์สนี้ยาวกว่า 22.5 ชั่วโมงและภายในคอร์สเองก็มีทั้งแบบฝึกหัดและโปรเจคต่างๆ มากมายที่ให้คุณลองทำ เมื่อคุณเรียนจบ คุณจะพร้อมทุกอย่างสำหรับการใช้ CSS รังสรรค์เว็บไซต์ของคุณให้ออกมาสวยงามครับ
นอกจากนี้ผู้สอนคนนี้ยังอัพเดตเนื้อหาของทุกคอร์สที่เขาทำขึ้นให้ทันสมัยอยู่เสมอ ดังนั้นคุณไม่ต้องกังวลเลยว่าคอร์สของคุณจะเก่าและล้าสมัยครับ
อย่างไรก็ดีคอร์สนี้ไม่เหมาะจะเป็นคอร์สแรกที่คุณจะเรียน เพราะคุณควรจะเรียน HTML มาก่อน แต่เป็นคอร์สส่วนเสริมที่ perfect สำหรับคอร์สที่สอน HTML และ CSS แต่ไม่ลงลึกอย่างคอร์สที่ 2 ครับ
คะแนนรีวิวของคอร์สนี้ได้ไป 4.7/5.0 จากนักเรียนมากถึง 44,000 คนเลยทีเดียว
5. Advanced CSS and Sass: Flexbox, Grid, Animations and More!
คอร์สนี้เป็นคอร์สสอน CSS ระดับสูงที่จัดทำโดย Jonas Schmedtmann (ผู้สอนคอร์สที่ 2) คอร์สนี้จะเจาะลึกในส่วนของการใช้งาน CSS ระดับสูง โดยการเรียนจะเน้นไปที่การทำโปรเจคแบบเต็มสูบ โดยคุณจะได้ทราบถึงวิธีการใช้งานผ่านทางการได้ลองทำจริงนั่นเองครับ
เนื้อหาส่วนใหญ่จะเน้นไปที่การใช้งาน Flexbox, CSS Grid, Animations รวมไปถึงการออกแบบเว็บไซต์แบบ Responsive โดยคุณจะได้เรียนสิ่งต่อไปนี้
- เทคนิคการใช้งาน CSS แบบล่าสุดสำหรับการออกแบบเว็บไซต์ที่ดูสวยงามและทันสมัย
- โครงสร้างการทำงานของ CSS อย่างเช่น Cascade, Specificity และ Inheritance
- การใช้งาน Flexbox
- การใช้ Sass ในการออกแบบเว็บไซต์
- การใช้ Responsive Images สำหรับการทำให้เว็บไซต์โหลดเร็วขึ้น
- CSS Animations ระดับสูง
- CSS Architecture อย่างเช่นการเขียน reusable code และการออกแบบแบบ component-based
- Responsive Design ระดับสูง และการใช้ SVG Images และ Videos
- และอื่นๆ อีกมากมาย
คอร์สนี้จะครอบคลุมทุกสิ่งของ CSS ระดับสูง ดังนั้นคุณจะต้องเรียนคอร์สสอน HTML และ CSS อื่นๆ มาก่อนที่จะเรียนคอร์สนี้ ความน่าสนใจของคอร์สนี้อยู่ที่ตัวคอร์สจะสอนให้คุณสร้างเว็บไซต์ชั้นยอดจริงๆ ที่เป็นเว็บไซต์จากทศวรรษ 2020 (Responsive, มี Animation, มี Video Effect) เรียกได้ว่าเก็บเป็นผลงานใน Portfolio ของคุณได้เลยครับ
เนื้อหาทั้งหมดในคอร์สจะอยู่ที่ 28 ชั่วโมง โดยประกอบด้วยการทำโปรเจคมากถึง 22 ชั่วโมง ทำให้เป็นคอร์สสอน CSS แบบ project-based ที่ละเอียดที่สุดใน Udemy เลยก็ว่าได้ครับ
Coursera
Coursera เป็นแพลตฟอร์มที่น่าสนใจอีกแห่งหนึ่งสำหรับการเรียนออนไลน์ ภายในแพลตฟอร์มมีคอร์สสอนออนไลน์มากมายของมหาวิทยาลัยและสถาบันชั้นนำของโลกให้คุณได้ลองเรียน
การเรียนกับ Coursera มีความเป็นทางการแบบมหาวิทยาลัย คุณจะได้เรียนคอร์สที่มีโครงสร้างดีเยี่ยม มีการประเมินผลทุกอย่างแบบครบถ้วน และคุณยังจะได้ประกาศนียบัตรจากมหาวิทยาลัยหลังจากเรียนจบอีกด้วย
ทั้งนี้การเรียนกับ Coursera จะมีสองแบบนั่นคือแบบ Course หรือแบบคอร์สเดี่ยว และแบบหลักสูตร (Specialization) รูปแบบการคิดราคารวมไปถึงค่าใช้จ่ายก็จะแตกต่างกันออกไป ในส่วนนี้ผมจะให้ข้อมูลตอนที่ผมแนะนำคอร์สแต่ละคอร์สครับ
คอร์สสอน HTML และ CSS ที่น่าสนใจบน Coursera ได้แก่
6. HTML, CSS, and Javascript for Web Developers
คอร์สเดี่ยวที่จัดทำโดย John Hopkins University หนึ่งในมหาวิทยาลัยชั้นนำของประเทศสหรัฐอเมริกา สำหรับคอร์สนี้คุณจะได้เรียนการพัฒนาเว็บไซต์โดยใช้ HTML, CSS และ JavaScript ซึ่งจะเตรียมคุณให้พร้อมสรรพสำหรับการสร้างเว็บไซต์ใดๆ ในระดับเบื้องต้นครับ
สิ่งที่คุณจะได้เรียนในคอร์สนี้จะแบ่งออกเป็น 5 ส่วนด้วยกันได้แก่
- Introduction to HTML5 – เรียนรู้พื้นฐานของ HTML5 อย่างเช่น Document Structure iวมไปถึง Semantic Tags
- Introduction to CSS3 – คอร์สนี้จะสอนการใช้งาน CSS3 อย่างเช่น Floating, Box Model, Background Property, Responsive Design
- Coding the Static Restaurant Site – ลองใช้ความรู้ HTML และ CSS ที่เรียนไปสร้างเว็บไซต์ธุรกิจสำหรับร้านอาหาร
- Introduction to JavaScript – เรียนพื้นฐานของการพัฒนาเว็บโดยใช้ภาษายอดนิยมอย่าง JavaScript
- Using JavaScript to Build Web Applications – ลองสร้าง Web Apps โดยใช้ JavaScript อย่างเช่นการจัดการ Ajax Requests, การ process JSON Data และลองเชื่อมเว็บไซต์ร้านอาหารที่คุณได้สร้างเข้ากับ Backend Service
โดยรวมแล้วคอร์สนี้จะปูพื้นฐานให้คุณทั้งหมดในการพัฒนาเว็บ นั่นคือ HTML, CSS และ JavaScript แต่ตัวคอร์สจะไม่ได้ลองลึกมากนักในส่วนใดๆ คุณจะได้รับเนื้อหาเบื้องต้นที่พร้อมสำหรับการเรียนคอร์สต่อไป (อย่างเช่นคอร์สสอน CSS ที่ 4-5 เป็นต้น)
เนื่องจากเป็นคอร์สเดี่ยว คุณสามารถเรียนเนื้อหาทั้งหมดได้ฟรี แต่ถ้าต้องการการประเมินผล และประกาศนียบัตร คุณจะต้องจ่ายเงินซื้อคอร์สในราคา $79 หรือประมาณ 2,370 บาทครับ
7. Web Design for Everybody: Basics of Web Development & Coding Specialization
สำหรับคอร์สนี้ไม่ใช่คอร์สเดี่ยวครับ แต่เป็นหลักสูตรที่มีคอร์สย่อยหลายคอร์ส ผู้สอนคอร์สนี้คือทีมอาจารย์ของ University of Michigan ครับ
โครงสร้างของคอร์สนี้จะเหมือนกับคอร์สที่ 6 โดยจะแบ่งได้เป็น 5 ส่วนได้แก่
- Introduction to HTML5 – คอร์สนี้จะสอนพื้นฐานของกรพัฒนาเว็บโดยเริ่มต้นที่ HTML5 คุณจะได้เรียนทฤษฎีและปฏิบัติอย่างเข้มข้น ไม่ว่าจะเป็น Syntax หรือ Semantic Standards หลังจากที่เรียนเนื้อหาทั้งหมดแล้ว คุณจะได้ลองทำโปรเจคสั้นๆ เพื่อวัดความรู้ด้วยครับ
- Introduction to CSS3 – คอร์สนี้จะสอนแบบเจาะลึกในการใช้งาน CSS3 ตั้งแต่การใส่ฟ้อนต์ สี และการจัดการ layout ไปจนถึงการทำ Styling อื่นๆ
- Interactivity with JavaScript – ในคอร์สนี้คุณจะได้เรียน JavaScript เบื้องต้น และสร้างเว็บไซต์ที่ตอบสนองได้ต่อ input ต่างๆ ครับ
- Advanced Styling with Responsive Design – คอร์สนี้จะสอนคุณในเรื่องของการออกแบบเว็บไซต์แบบ responsive ซึ่งจะเปลี่ยนแปลงไปตาม device ของผู้ใช้งาน และเหมาะเป็นพิเศษสำหรับ mobile
- Capstone – รวมความรู้จากคอร์สย่อยทั้ง 4 มาสร้างเว็บไซต์ระดับมืออาชีพ
หลักสูตรนี้จะช่วยปูพื้นฐานที่คุณต้องใช้สำหรับการสร้างเว็บไซต์ทั่วไป (เช่นเดียวกับคอร์สที่ 6) แต่หลักสูตรนี้ไม่ได้เจาะลึกลงในทักษะใดๆ เลยไม่ว่าจะเป็น HTML5, CSS3 หรือ JavaScript ดังนั้นถ้าคุณต้องการจะสร้างเว็บไซต์ หรือ Web Application ที่มีฟีเจอร์ที่ซับซ้อนขึ้น คุณจะต้องหาคอร์สอื่นเรียนเพิ่มอยู่ดีครับ
สำหรับคอร์สนี้ ทางมหาวิทยาลัยแจ้งว่าถ้าคุณเรียนสัปดาห์ละ 3 ชั่วโมง คุณจะใช้เวลาเรียนประมาณ 6 เดือนถึงจะเสร็จสิ้น แต่คุณอาจจะเรียนได้เร็วกว่านั้นมากครับ เพราะเนื้อหาในหลักสูตรไม่ได้ซับซ้อนมากนัก
ค่าเรียนหลักสูตรนี้จะใช้ระบบสมาชิกรายเดือน โดยจะอยู่ที่ $49 หรือประมาณ 1,470 บาทต่อเดือนครับ ซึ่งแน่นอนว่าคุณไม่ควรดองคอร์สเอาไว้เหมือนกับ Udemy ที่ดองเท่าไรก็ได้ การรีบเรียนให้จบเป็นทางเลือกที่ดีที่สุดครับ