🔥 ถามมากันเยอะ ว่าอยากทำเว็บแบบนั้น แบบนี้ต้องรู้อะไรบ้าง !? วันนี้แอดจะมาบอกแนวทางการเรียนรู้ไปพร้อมกันน <3
.
โดยจะต้องบอกคร่าว ๆ ก่อนว่า "ไม่ว่าเราจะทำเว็บอะไร แบบไหนก็แล้วแต่ ล้วนต้องมีพื้นฐานมาก่อนเหมือนกันทั้งสิ้น !!"
.
คล้าย ๆ กับการเรียนภาษาอังกฤษนั่นแหละ ถ้าเราเริ่มต้นเราก็อาจจะต้องเริ่มจากตัวอักษรภาษาอังกฤษ การใช้ Tense ต่าง ๆ ของเว็บก็มีเช่นกัน โดย Basic ของเว็บจะมีเรื่อง
.
✅ HTML
เป็นโครงหลักของเว็บไซต์ทั่วไป โดยหน้าตาของภาษา HTML นั้นจะเป็นการใช้ tag ที่เริ่มต้นด้วย <> แล้วปิดด้วย > เพื่อสร้างชิ้นส่วนต่างๆในหน้าเว็บเรียกว่า Element
.
✅ CSS
CSS นั้นเป็นสิ่งที่ช่วยเพิ่มความสวยงามให้กับหน้าตาของเว็บ เราสามารถปรับแต่งหน้าตาของเว็บได้จาก CSS ไม่ว่าจะเป็นสี รูป ไปจนถึงตำแหน่งของสิ่งต่างๆ หรือแม้แต่การทำ animation ก็สามารถทำได้
.
✅ JavaScript
JavaScript นั้นเป็นส่วนที่เพิ่มความสามารถให้กับเว็บของเราเป็นอย่างมาก ทำให้ส่วนต่างๆของเว็บสามารถทำงานได้ตามที่เราต้องการ
.
และ เมือเรารู้พื้นฐานตรงนี้แล้ว เราจะมีเส้นทาง 2 ทางหลักให้เลือก โดยมีทางที่ชื่อว่าสาย Front-End และ Back-End ส่วนถ้าใครชอบทั้งคู่ จนไปครบจบกระบวนการที่เว็บควรมีเราจะเรียกว่า Full-Stack นั่นเอง
.
⭐️ โดยเริ่มจาก Fornt-End กันก่อน
มันเป็นส่วนหน้าตาการแสดงผลของเว็บไซต์ ที่ผู้ใช้งาน(Client)มองเห็นทั้งหมดไม่ว่าจะเป็น ตัวหนังสือ ปุ่ม หรือแถบเมนูต่างๆ ทุกๆส่วนที่ผู้ใช้เห็นและมีปฏิสัมพันธ์ด้วยนับว่าอยู่ใน Frontend ทั้งหมด ซึ่งภาษาที่ใช้ในฝั่ง Frontend ก็คือ HTML, CSS และ JavaScript
.
✅ Framework
สิ่งอำนวยความสะดวกในการเขียนโปรแกรม ซึ่งประกอบด้วยชุดคำสั่งหรือองค์ประกอบต่างๆ ให้เราสามารถนำมาใช้ได้ง่ายๆ โดยไม่ต้องเขียนเองทั้งหมด
.
Js CSS
Angular Bootstrap
Vue.js Materialize
React Semantic UI
Backbone.js Bulma
.
⭐️ ตามมาด้วย Back-End กันต่อ
ส่วนการทำงานประมวลผล และ จัดเก็บข้อมูลของเว็บไซต์ เพื่อทำให้ส่วนของ Frontend สามารถทำงานได้อย่างถูกต้องสมบูรณ์
.
✅ Programming language
เราจะต้องใช้ภาษาโปรแกรมมิ่งในส่วนของการทำงานใน Backend เช่น เมื่อรับข้อมูลสินค้าที่ผู้ใช้เลือกมาจาก Frontend, Backend ก็จะนำมาคำนวนโปรโมชั่นแล้วนำมาหักลบกับเงินในบัญชีจากนั้นเก็บข้อมูลใน Database เป็นต้น
.
PHP
Python
C#
Java
JavaScript
Ruby
.
✅ Framework
สิ่งอำนวยความสะดวกในการเขียนโปรแกรม ซึ่งประกอบด้วยชุดคำสั่งหรือองค์ประกอบต่างๆ ให้เราสามารถนำมาใช้ได้ง่ายๆ โดยไม่ต้องเขียนเองทั้งหมด
Django
Express.js
Flask
Laravel
Ruby on Rails
ASP.NET
.
⭐️ส่วนสำคัญอื่นๆ
นอกจากส่วนของการแสดงผลและการติดต่อกับผู้ใช้อย่าง Frontend และ ส่วนของการทำงานด้านหลังของระบบอย่าง Backend แล้ว การเขียนเว็บยังมีส่วนที่สำคัญที่ขาดไปไม่ได้ เช่น ส่วนของการรับส่งข้อมูล
.
✅ API
Application Programming Interface เป็นช่องทางในการเข้าถึงข้อมูลต่างๆ ของเว็บไซต์ ไม่ว่าจะเป็นการอ่านเขียนข้อมูลจากฐานข้อมูลจาก server ไปจนถึงข้อมูลจากภายนอก
.
✅ WebSocket
วิธีการติดต่อเพื่อรับส่งข้อมูลแบบระหว่าง Client กับ Server โดยแต่ละฝั่งสามารถส่งข้อมูลไปหาอีกฝั่งตอนไหนก็ได้ เหมาะสำหรับรับส่งข้อมูลแบบ real-time
.
"ทั้งหมดนี้ก็เป็นเส้นทาง Path คร่าว ๆ ของสายเว็บ หากใครชอบของสวย ๆ งาม ๆ ก็อาจจะทำส่วนหน้าบ้าน ใครชอบ Logic จัด ๆ มาหลังบ้านก็สนุกไม่น้อยนะแอดว่าาา <3"
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有1部Youtube影片,追蹤數超過2萬的網紅hktuto 設計教學,也在其Youtube影片中提到,支持請分享及讚好 ? 第一集 : https://www.youtube.com/watch?v=9dh1GEg3NdQ&t=10s 第二集 : https://www.youtube.com/watch?v=UUvnOid-134 本集教材 - XD File : http://otclou...
「js css animation」的推薦目錄:
- 關於js css animation 在 BorntoDev Facebook 的精選貼文
- 關於js css animation 在 BorntoDev Facebook 的最佳貼文
- 關於js css animation 在 hktuto 設計教學 Youtube 的最讚貼文
- 關於js css animation 在 Trigger CSS Animations in JavaScript - Stack Overflow 的評價
- 關於js css animation 在 daybrush/scenejs-render: Make a movie of CSS ... - GitHub 的評價
- 關於js css animation 在 AOS - Animate on scroll library 的評價
js css animation 在 BorntoDev Facebook 的最佳貼文
🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
js css animation 在 hktuto 設計教學 Youtube 的最讚貼文
支持請分享及讚好 ?
第一集 : https://www.youtube.com/watch?v=9dh1GEg3NdQ&t=10s
第二集 : https://www.youtube.com/watch?v=UUvnOid-134
本集教材 -
XD File : http://otcloud.synology.me:5000/d/f/474276844682620069
GitHub : https://github.com/hktuto/xd-auto-animate-tutorial
TinyPNG : https://tinypng.com/
VS Code : https://code.visualstudio.com/
CSS Gradient: https://cssgradient.io/
Hammer js : https://hammerjs.github.io/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html 入門系列
https://hktuto.org/%E5%9F%BA%E7%A4%8E-html-css-js-%E6%95%99%E5%AD%B8/
css 排版系列
https://hktuto.org/css-%E5%9F%BA%E7%A4%8E%E6%8E%92%E7%89%88/
![post-title](https://i.ytimg.com/vi/bixS-Qb1XIk/hqdefault.jpg)
js css animation 在 daybrush/scenejs-render: Make a movie of CSS ... - GitHub 的推薦與評價
Make a movie of CSS animation through scenejs. Contribute to daybrush/scenejs-render development by ... Scene.js Render. npm version. Make a movie of CSS ... ... <看更多>
js css animation 在 AOS - Animate on scroll library 的推薦與評價
AOS - Animate On Scroll library using CSS3. ... JS. <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>. Initialize AOS. ... <看更多>
js css animation 在 Trigger CSS Animations in JavaScript - Stack Overflow 的推薦與評價
... <看更多>