درخواست منبع آموزش سطح فوق حرفه ای html css

[marasiali]

با سلام
میخواستم بدونم جایی وجود داره بشه از طریقش سطح فوق حرفه ای html و css رو بهش مسلط شد.میخوام یاد بده طرح های پیشرفته ای مثل اون هایی که تو کد پن هست رو پیاده سازی کنم.چند نمونه ببینید:

http://codepen.io/msurguy/pen/tDCvp/
http://codepen.io/akm2/pen/rHIsa
http://codepen.io/DonKarlssonSan/pen/ZerjNj

قاعدتا تو منابع فارسی همچین چیزایی اصلا نیس که اگه بود بهتر بود که الگوریتم رو به زبون خودمون یاد بده بهتر بفهمیم ولی ممکنه تو منابع انگلیسی باشه که ممنون میشم معرفی کنید.
همونطور که میبینید بیشتر این طرح های فوق العاده با canvas بودن که من آموزش پیشرفته canvas تو سایت های خارجی هم ندیدم.اما شدیدا علاقمندم یاد بگیرم اما همه منابع مقدماتی تا نهایت نیمه پیشرفته ان.
ممنون میشم راهنماییم کنید.

[samdoft]

سلام دوست عزیز canvas یکی از ویژگی های HTML5 هستش و برای کار با اون و یادگیریش باید به جاوا اسکریپت مسلط باشید

این کتاب:
https://www.sitepoint.com/premium/books/javascript-novice-to-ninja

رایگان هستش و جاوا اسکریپت رو با زبانی ساده اموزش میده و در کتاب هم API های کار با canvas رو پوشش داده
شما موقعی که کار با API هارو یاد بگیرید برای ساخت چنین پروژه هایی که لینک دادید باید الگوریتم خودتون رو طراحی کنید

کتابهایی غیر رایگان و پیشرفته مثل :

professional javascript for web developer (http://it-ebooks.info/book/483/)
هم جاوااسکریپت رو به صورت عمیق توضیح دادن
و هم گرافیک canvas رو.
شما بعد از اینکه جاوااسکریپت رو یاد گرفتید
میتونید API های Canvas رو به صورت توضیح کامل
هم در سایتهایی مثل :
https://developer.mozilla.org/en-US/docs/Web/JavaScript
پیدا کنید.

این مجموعه کتاب هم برای یاد گیری عمیق جاوااسریپت خیلی مناسبه:
OReilly.You.Dont.Know.JS.Async.And.Performance.
OReilly.You.Dont.Know.JS.ES6.And.Beyond.Jul.2015
OReilly.You.Dont.Know.JS SCOPE AND CLUSOR
OReilly.You.Dont.Know.JS.Up.and.Going.
OReilly.You.Dont.Know.JS.Type and Grammer.

[marasiali]

ممنون از پاسختون
جایی وجودنداره چند تا الگوریتم اینچنینی مثال بزنه ذهنمون باز شه؟؟؟

[samdoft]

ممنون از پاسختون
جایی وجودنداره چند تا الگوریتم اینچنینی مثال بزنه ذهنمون باز شه؟؟؟

فقط باید سرچ کنید کتاب ها و سایتهای زیادی هستن که با مثال قدم به قدم پیشرفتن مثل:

https://www.amazon.com/Core-HTML5-Canvas-Animation-Development/dp/0132761610 (https://www.amazon.com/Core-HTML5-Canvas-Animation-Development/dp/0132761610)

https://www.amazon.com/HTML5-Canvas-Native-Interactivity-Animation/dp/1449334989/ref=pd_sim_14_1?_encoding=UTF8&pd_rd_i=1449334989&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER (https://www.amazon.com/HTML5-Canvas-Native-Interactivity-Animation/dp/1449334989/ref=pd_sim_14_1?_encoding=UTF8&pd_rd_i=1449334989&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER)

https://www.amazon.com/HTML5-Games-Experts-Voice-Development/dp/143024710X/ref=pd_sim_14_2?_encoding=UTF8&pd_rd_i=143024710X&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER (https://www.amazon.com/HTML5-Games-Experts-Voice-Development/dp/143024710X/ref=pd_sim_14_2?_encoding=UTF8&pd_rd_i=143024710X&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER)

https://www.amazon.com/Core-HTML5-2D-Game-Programming/dp/013356424X/ref=pd_sim_14_3?_encoding=UTF8&pd_rd_i=013356424X&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER (https://www.amazon.com/Core-HTML5-2D-Game-Programming/dp/013356424X/ref=pd_sim_14_3?_encoding=UTF8&pd_rd_i=013356424X&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER)

https://www.amazon.com/Build-HTML5-Game-Developers-JavaScript/dp/1593275757/ref=pd_sim_14_5?_encoding=UTF8&pd_rd_i=1593275757&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER (https://www.amazon.com/Build-HTML5-Game-Developers-JavaScript/dp/1593275757/ref=pd_sim_14_5?_encoding=UTF8&pd_rd_i=1593275757&pd_rd_r=NKFKV0ZRBDQZTPZPA9ER&pd_rd_w=0Rg8e&pd_rd_wg=7HUhW&psc=1&refRID=NKFKV0ZRBDQZTPZPA9ER)