آموزش یادگیری کد با ایجاد هنر: توسعه مهارت های CSS در CodePen
Learn Code by Creating Art: Developing CSS Skills in CodePen
در این کلاس ما دانش CSS شما را به شیوه ای سرگرم کننده و خلاقانه افزایش می دهیم. شما در حین ایجاد یک پروژه هنری که از اشتراک گذاری آن با دیگران هیجان زده خواهید شد، CSS متوسط و پیشرفته را یاد خواهید گرفت.
مجموعه تصاویر CSS من در CodePen چیزی است که به من کمک کرد به عنوان یک توسعه دهنده شغلی پیدا کنم. همانطور که هنر ایجاد می کنیم، برخی از مواردی که به آنها خواهیم پرداخت این است که چگونه با Sass، عناصر شبه، مسیر کلیپ، سایه جعبه، تبدیل ها و انتقال ها، انیمیشن ها و موارد دیگر شروع کنیم.
این کلاس برای دانش آموزانی است که به دنبال راهی سرگرم کننده برای یادگیری CSS متوسط تا پیشرفته هستند.
دانش‌آموزان باید HTML و CSS اولیه را بدانند.
ما از یک منبع رایگان به نام برای پروژه خود استفاده خواهیم کرد .
شما می‌توانید شروع را دریافت کنید کد، کد تمام شده برای هر ویدیو و SVG مورد نیاز برای پروژه ما در مجموعه کلاس:
در طول دوره ما مهارت های شما را با فراتر رفتن از CSS اولیه و یادگیری ویژگی های جدید به روشی سرگرم کننده افزایش خواهیم داد. برای کمک به تقویت آنچه در حال یادگیری هستید، هر ویژگی جدید را در یک تصویر CSS که همانطور که یاد می گیریم می سازیم، اعمال می کنیم.
در زمان پایان دوره، چندین ویژگی CSS جدید را یاد گرفته و اعمال خواهید کرد و یک تصویر CSS تکمیل شده با انیمیشن خواهید داشت.
لطفاً کار خود را در طول دوره در بخش پروژه های کلاس ما به اشتراک بگذارید. برای کسانی که مایلند، پروژه های نهایی را در مجموعه CodePen کلاس جمع آوری و به اشتراک خواهم گذاشت. شما می توانید خلاقیت به خرج دهید و پس از اتمام پروژه خود، رنگ ها، شکل ها، سایه های جعبه و غیره را تغییر دهید. من دوست دارم هر گونه تغییر یا تصاویر دیگری را که پس از اتمام دوره ایجاد می کنید ببینم و آنها را در توییتر و در مجموعه CodePen کلاس خود به اشتراک بگذارم.
https://codepen.io/cgorton/pen/XZqXKp/
درس ها Lessons
-
بسته بندی آن Wrapping it Up
-
عناصر شبه Pseudo Elements
-
انیمیشن های CSS CSS Animations
-
تبدیل و انتقال Transforms and Transitions
-
پروژه کلاس Class Project
-
قاب کردن آن در Framing it In
-
معرفی Introduction
-
افزودن عمق با Box-Shadow Adding Depth With Box-Shadow
-
با استفاده از SVG Using SVG
-
Clip-Path و Border Radius Clip-Path and Border Radius
-
گرفتن ساسی Getting Sassy
https://donyad.com/d/59ced6
Christina Gorton
آموزش کد از طریق خلاقیت
من مادر سه کودک در خانه هستم که به توسعه‌دهنده کنترل از راه دور تبدیل شده‌اند.
برنامه‌نویسی را از طریق کدنویسی خلاقانه به بهترین شکل یاد گرفتم. من در جوامعی مانند #dailyCSSimages و #100daysofcode شرکت کردم و یاد گرفتم. امیدوارم شما هم مانند من از یادگیری به روشی جدید و سرگرم کننده لذت ببرید.
من یکی از اعضای فعال انجمن Moms Can Code هستم و به زودی سخنران خواهم بود. بیشتر کارهای کدنویسی خلاقانه من را می توان در CodePen در https://codepen.io/cgorton/# پیدا کرد.
نمایش نظرات