แนะนำ 9 เกม
เอาไว้เรียนรู้ไสตล์ชีท CSS แบบหนุกหนาน (หรือเปล่า)

1) Flexbox Defense

Game: http://www.flexboxdefense.com
Contributions: https://github.com/channingallen/tower-defense
Creator: Channing Allen

2) Flexbox Froggy

Game: https://flexboxfroggy.com
Contributions: https://github.com/thomaspark/flexboxfroggy
Creator: Codepip

3) Grid Garden

Game: https://cssgridgarden.com
Contributions: https://github.com/thomaspark/gridgarden
Creator: Codepip

4) CSS Diner

Game: http://flukeout.github.io
Contributions: https://github.com/flukeout/css-diner
Creator: Luke Pacholski

5) Unfold

Game: https://rupl.github.io/unfold
Contributions: https://github.com/rupl/unfold
Creator: Chris Ruppel

6) Roadmap

Game: http://victordarras.fr/cssgame
Creator: Victor Darras

7) Carnival

Game: https://codepen.io/una/pen/NxZaNr
Creator: Una Kravets

8 ) Tic-Tac-Toe

Game: https://codepen.io/alvaromontoro/pen/BexWOw
Creator: Alvaro Montoro

9) CSSBattle

Game: https://cssbattle.dev
Creators: Kushagra Gour and Kushagra Agarwal
.
.
ที่มา https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

🔥 หากวันนึงคอมเสียแล้วจำเป็นต้องแก้โค้ด ณ. จุดนั้น หรือไม่อยากติดตั้งโปรแกรมให้วุ่นวาย วันนี้แอดมีของดีมาแนะนำกับ
.
🌍 "เครื่องมือให้เราเขียนโค้ด แสดงผลการทำงานแบบฟรี ๆ ผ่าน Web Browser"
.
ซึ่งแต่ละเจ้าก็มีข้อดี จุดเด่นที่แตกต่างกันออกไป เหมาะสุด ๆ ทั้งงานเฉพาะกิจ และ น้อง ๆ ที่ยังไม่อยากซื้อคอมใหม่มาเขียนโค้ด เอาเป็นว่างั้นแอดขอไม่พูดมาก มาดูพร้อม ๆ กันเลย
.
1. codesandbox.io
"ใช้งานได้ง่ายหมือน VS Code, เขียน React ก็ได้ เชื่อมกับ GitHub ก็ยังได้ มี NPM Package ให้ใช้อีก "บอกเลยว่าใครต้องการพัฒนาเว็บ หรือ ฝั่ง JS ใช้เว็บนี้ตัวเดียวจบจ้า แถมตัวฟรียังแทบไม่จำกัดฟีเจอร์หลักด้วย
📌 เข้าใช้งานได้เลยที่ https://codesandbox.io/pricing
.
2. W3Schools Online Code Editor
"จะดีแค่ไหน ถ้าเป็นได้ทั้ง Code Editor และ Tutorial ที่สอนวิธีการเขียนโค้ดไปด้วยกัน" กับ W3School ที่สอนทุกคนทำ HTML, CSS และ JavaScript ออนไลน์เห็นภาพจริงเมื่อสั่งทำงาน !
📌 เข้าใช้งานได้เลยที่ https://www.w3schools.com/tryit/
.
3. CodePen
"ให้การเขียนโค้ด HTML CSS และ JavaScript ของเรา เป็นวิทยาทานแด่ผู้คนทั่วโลก !"
เพราะทุกโค้ดสุดเจ๋งที่เรานำมาทดสอบ สามารถแชร์ไอเดียเหล่านี้ให้เพื่อนดูได้แถวยังดูไอเดียจากเพื่อน ๆ ได้อีกด้วย
📌 เข้าใช้งานได้เลยที่ https://codepen.io/
.
4. Play Code
"จะ jQuery, React, Vue หรือ JS ตัวไหนก็ไม่กลัว" เพราะ Play Code สามารถให้เรารันงานเหล่านี้ได้ง่ายจัด ๆ" ทดสอบได้ผ่านหน้าเว็บรูปแบบออนไลน์ได้เลยไม่ต้องติดตังโปรแกรมให้วุ่นวาย !
.
5. Repl.it
"มี 55 ภาษาให้เลือกเขียน โหดกว่านี้ไมมีอีกแล้ว" สำหรับใครที่ชอบ Python, C, C++,C#, Kotlin, Java และอีกกว่า 50 ภาษาต้องห้ามพลาด แถมยังมีระบบให้แชร์งาน หรือ ทำโจทย์ร่วมกับชาวบ้านอีกด้วยนะ !
📌 เข้าใช้งานได้เลยที่ https://repl.it/
.
6. Dev Lab 3
"Code Editor รูปแบบออนไลน์ที่ช่วยให้คุณได้มาฝึกสกิล พัฒนาทักษะ Algorithm แบบฟรี ๆ" เหมาะสำหรับท่านที่อยากลองของ หรือ อยากอัพสกิลด้านเขียนโปรแกรมให้เก่งยิ่งขึ้น แก้ปัญหาเขียนโค้ดไม่ออกกับเว็บนี้ได้เลย
📌 เข้าใช้งานได้เลยที่ https://www.borntodev.com/intro-devlab-3-pro/
.
ซึ่งทั้งหมดนี้เป็นเว็บไซต์ที่ให้เราเขียนโค้ดรูปแบบออนไลน์ได้ และ บางเว็บมีโจทย์ให้ลองทำกันแบบฟรี ๆ ด้วย เอาไว้อัพทักษะกันได้เลย <3
.
หากเพื่อน ๆ มีเว็บไหนที่อยากแนะนำพิมพ์ไว้ด้านล่างได้เลยคร้าบผม :D
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

先前有直播介紹「毛玻璃特效」
隨著 CSS 的進化，現在更能僅用一行搞定
範例：https://codepen.io/Wcc723/pen/BajgwVm

支援度：https://caniuse.com/#feat=css-backdrop-filter

#沒時間寫文只好做範例

今天(6/11 週一)晚上十點半整 準時直播~
哈囉大家好，這次帶來新口味的系列調酒
老闆也來挑戰 六角學院 精神時光屋的題目啦！
　
在這次範例中如果時間夠，會規劃一些介面設計
在網頁技術部份將使用 Vue + TweenMax + Firebase+animate.css
製作一個動態的代辦清單介面
　
直播範例連結：
https://codepen.io/frank890417/pen/aKJYjm

大家一起來玩XD - 前端修煉精神時光屋挑戰
http://www.hexschool.com/2018/05/09/2018-05-09-the_f2e/
　
------
　
手刀訂閱 老闆 來點寇汀吧 Youtube頻道！
https://www.youtube.com/channel/UCHX_XMhPrtvOmgGOnA2eTmA
　
上次直播-來用socket.io做個即時互動的遊戲吧！
http://to.piee.pw/v-4653934
　
---
　
基礎課程【動態互動網頁程式入門】：
https://hahow.in/cr/monoame-webdesign1
　
進階Canvas+JS應用【動態互動網頁特效入門】：
https://hahow.in/cr/monoame-webdesign2

サムネイルは下記サイトにて作成しお借りしております。
https://codepen.io/jagarikin/full/PGNwAv
#パチンコフォントメーカー

こんにちは！こんばんは！おはようございます！
ぎこちゃん&アシスタントの下ひげです。
今日も動画を観てくれて本当にありがとう！

動画をいいな！と思ってくれたら『高評価』お願いします！
また見たいなと思ってくれたら『チャンネル登録』お願いします！

■ぎこちゃんTシャツ売ってます↓是非見てね！
https://bit.ly/2rk2QUm (こちらからどうぞ)

■Twitterもあります↓フォローお待ちしております！
http://twitter.com/giko_pad (ぎこちゃん)
http://twitter.com/shimohige_giko (下ひげ)

※動画コメント欄のルール (またはYouTuberLiveコメント)
基本的には自由にご利用ください。
但し、誹謗中傷や視聴者様同士での喧嘩や
誰かが一人でも不快に感じる可能性のあるコメント、
小さいお子様に悪影響のありそうなコメントなどは
全てユーザーブロックさせて頂きますので予めご了承ください！
平和で楽しい動画、Liveを目指しているのでご協力お願いします！

■現在、個人的にプレイしているゲームはこちら
・モンスターストライク
・PLAYERUNKNOWN'S BATTLEGROUNDS (PUBG)
・荒野行動
・ドッカンバトル
・クラッシュロワイヤル

動画は毎日3本以上はお届けしております。

#單元介紹 #動態互動網頁特效入門
.
哈囉各位好，不知道有沒有人玩過agar.io呢？
這次在動態互動網頁特效入門的課程單元中，
Project 7 結合物件導向與Canvas做出agar.io，
用90分鐘，從頭建構單機版本＋敵人ai的agar.io遊戲，
.
整合所有在canvas單元中的技巧，一步一步思考從基礎的互吃到進階的分裂、敵人AI、向量控制，
並講解其中控制用到的數學、程式技巧與控制細節，
這邊附上一個限時的教學影片短剪，歡迎到課程參考完整內容
.
實作範例： https://codepen.io/frank890417/pen/aGOgvq
課程網址： https://hahow.in/cr/monoame-webdesign2