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

สวัสดีครับ โพสนี้ผมมาแนะนำแหล่งเรียนรู้เกี่ยวกับการทำเว็บไซต์ด้วย 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.

Learn to Code HTML & CSS

CSS-Tricks

CSS-Tricks is a website about websites.

CSS-TricksGeoff Graham

Learn HTML

This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.

web.dev

Learn CSS

An evergreen CSS course and reference to level up your web styling expertise.

web.dev

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.

Codecademy

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

GitHubmicrosoft

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).

Codecademy

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…

Educative: Interactive Courses for Software Developers

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.

Scrimba

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!

Dash

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.

MDN Web Docs

CSS Almanac | CSS-Tricks

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.

A free visual guide to CSS

CSS Entries | Codrops

This is the archive page for CSS Entries.

Codrops

HTML Reference

A free guide to all HTML elements and attributes.

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

A List ApartColin Eagan

Smashing Magazine — For Web Designers And Developers

Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.

Smashing MagazineLouis Lazaris

DEV Community 👩‍💻👨‍💻

A constructive and inclusive social network for software developers. With you every step of your journey.

DEV Community 👩‍💻👨‍💻

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.

Medium

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.

Hashnode