Photo by Luca Bravo / Unsplash

แหล่งเรียนรู้การทำเว็บไซต์ (HTML/CSS/JS)

Web Dev Mar 1, 2023

สวัสดีครับ โพสนี้ผมมาแนะนำแหล่งเรียนรู้เกี่ยวกับการทำเว็บไซต์ด้วย HTML/CSS และ JavaScript นะครับ โดยในโพสนี้ไม่ได้เรียงลำดับว่าต้องเริ่มจากคอร์สนี้ไปคอร์สนี้นะครับ แต่เป็นแหล่งเรียนรู้รวมๆ ที่ผู้เรียนก็ต้องไปลองเรียนเองครับ แต่ละคนชื่นชอบ ความถนัดและพื้นฐานไม่เหมือนกันครับ บางคนชอบอ่าน บางคนชอบดูวิดีโอ บางคนชอบแนว Interactive Text หรือบางคนมีพื้นฐานอยู่แล้ว ก็อาจจะไม่ชอบบางคอร์สที่มันสอนช้า ก็เป็นได้

Text Tutorial

HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Building Your First Web Page - Learn to Code HTML & CSS
Before learning HTML and CSS it is important to understand the differences between the two languages (content vs. style), their syntax, and some common terminology.
CSS-Tricks
CSS-Tricks is a website about websites.
Learn HTML
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.
Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.
The Modern JavaScript Tutorial
Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.
HTML & CSS Courses & Tutorials | Codecademy
HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.
GitHub - microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
24 Lessons, 12 Weeks, Get Started as a Web Developer - GitHub - microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
HTML and CSS Tutorial: The Basics
Basic HTML and CSS Tutorial for the beginners

แนว Interactive Text

แนวนี้จะเป็นแนวที่สอนแบบ Text แต่ให้เราโต้ตอบได้ ด้วยการพิมพ์โค๊ดครับ

Learn to Code - for Free | Codecademy
Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new career (or advance in their current one).
freeCodeCamp.org
Learn to Code — For Free
Become a Front End Developer - Learn Interactively
Front-end web developers are proficient in HTML, CSS, and JavaScript, and their primary role is to create web applications so users can view and interact with websites. Front-end developers are in high demand as tech companies are always looking to improve the visuals and interactivity of their appl…
HTML and CSS course: Learn HTML and CSS for free
This course will teach you HTML and CSS through building and deploying five awesome projects. It is also fully interactive, with over 75 coding challenges. There are no prerequisites, so it is suitable for absolute beginners.
Learn to code HTML, CSS, and JavaScript with Dash
Dash is a fun and free online course from General Assembly that teaches you how to program with the basics of web development through projects you can do right in your browser. Get started today!

Reference / Docs

ส่วนนี้จะเป็นส่วนที่ไม่เหมาะสำหรับมือใหม่ในการเริ่มต้น แต่เป็นเหมือน Reference เอาไว้ให้เราอ่านทบทวน อ่านเพิ่มความรู้นะครับ ไม่จำเป็นต้องจำทั้งหมด เราอ่านและจำเฉพาะที่ต้องใช้ก็พอ

MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
CSS Almanac | CSS-Tricks
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
CSS Entries | Codrops
This is the archive page for CSS Entries.
HTML Reference
A free guide to all HTML elements and attributes.

แบบ Video

รวมแหล่งเรียน HTML & CSS สำหรับมือใหม่ที่ชอบการดู Video มากกว่าการอ่าน แนะนำสำหรับคนที่ไม่มีพื้นฐานเลย สามารถเรียนรู้ได้จาก Video ด้านล่างนี้ครับ ส่วนพวก Reference ต่างๆ เราไม่จำเป็นต้องจำทั้งหมด เราอ่านเฉพาะที่ต้องใช้

ส่วนตัวผมไม่ค่อยได้เรียนผ่าน Video เพราะรู้สึกว่าความเร็ว ขึ้นอยู่กับผู้สอน เราไม่สามารถข้าม หรือรู้ว่าเนื้อหามีอะไรบ้างนอกจากดูให้จบ รวมถึง Video มันแก้ไขยากกว่า Text มีโอกาสที่เนื้อหามันจะเก่า และใช้งานไม่ได้อยู่เสมอ ในสาย Web Dev

HTML & CSS for Beginners | FREE MEGA COURSE (7+ Hours!)

Blog

ส่วนนี้อาจจะไม่เหมาะกับมือใหม่ครับ แต่เอาไว้ติดตาม หาความรู้เพิ่มเติม บางบล็อกก็อาจจะมีเนื้อหา Technical หรือ Advanced เกินก็ข้ามๆไป เอาแค่เนื้อหาที่เราพอเข้าใจ และสนใจก็พอครับ ความรู้เราพัฒนาขึ้นได้ เมื่อเรามีความรู้มากพอ เราก็จะเจอเรื่องใหม่ๆ ต่อไปครับ

A List Apart
For people who make websites
Smashing Magazine — For Web Designers And Developers
Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.
DEV Community 👩‍💻👨‍💻
A constructive and inclusive social network for software developers. With you every step of your journey.
Medium – Where good ideas find you.
Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.
Hashnode - Blogging community for developers, and people in tech
Start a blog for free instantly and share your ideas with people in tech, developers, and engineers. Hashnode is a free blogging platform.

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com