این دوره CSS جامع ترین و به روزترین راه برای یادگیری آنلاین CSS است. با یادگیری تکنیک های مدرن و پیشرفته CSS شما را گام به گام از مبتدی کامل به تسلط واقعی می رساند. بعلاوه، شما در طول مسیر پروژه های دنیای واقعی شگفت انگیزی خواهید ساخت تا مهارت های خود را تمرین کرده و نمونه کارهای خود را بسازید.
در دورده The CSS Bootcamp: Zero to Mastery چه چیزی یاد خواهید گرفت؟
با استفاده از HTML و CSS، چیدمان، تایپوگرافی و رنگ، صفحات وب را بنویسید و استایل دهید
وب سایت های واکنش گرا طراحی کنید که در هر دستگاهی با پرس و جوهای رسانه ای، فلکس باکس و شبکه عالی به نظر می رسند
عناصر چندرسانه ای مانند تصاویر، ویدیوها و صدا را برای بهبود تجربه کاربر جاسازی کنید
تسلط بر تکنیک های پیشرفته CSS، از جمله انیمیشن ها، انتقال ها و استفاده از پیش پردازنده هایی مانند SCSS
گردش کار حرفه ای توسعه وب، از جمله کنترل نسخه با Git و استفاده از ابزارهای توسعه دهنده را بیاموزید
ایجاد پروژه های وب جامع، با استفاده از اصول طراحی و ویژگی های پیشرفته برای وب سایت های کاملاً کاربردی
اگر به دنبال ایجاد یک نشان در دنیای فناوری هستید، چه از طریق ایجاد وب‌سایت‌های خیره‌کننده، اطمینان از تجربه کاربری یکپارچه یا بهینه‌سازی عملکرد وب، CSS بلیط طلایی شماست. این چیزی بیش از یک کد است. این آینده طراحی وب است که اینترنت را به مکانی جذاب تر، کارآمدتر، در دسترس و زیباتر برای همه تبدیل می کند.
CSS چیست؟
CSS یا Cascading Style Sheets قهرمان گمنام دنیای توسعه وب است. این زبان شیت زیبا تماماً در مورد جذاب کردن وب است، اطمینان حاصل می کند که همه چیز از متن و دکمه ها گرفته تا انیمیشن ها و ویدیوها از نظر بصری جذاب و هماهنگ هستند، مهم نیست از چه دستگاهی آنها را مشاهده می کنید.
CSS جادویی است که در پشت ظاهر و احساس ثابت سایت های مورد علاقه شما قرار دارد و تضمین می کند که برندسازی در نقطه مقابل شما قرار دارد و تجربه کاربر عالی است. اما این فقط برای زیبا کردن چیزها نیست.
این همچنین ستون فقرات طراحی واکنشگرا است که در دنیای امروز بسیار مهم است! طراحی ریسپانسیو به سایت ها اجازه می دهد تا به سرعت با هر وسیله ای که شخص استفاده می کند، اعم از تلفن، تبلت یا دسکتاپ، سازگار شوند.
اما بخش مورد علاقه من هنوز هم قدرت آن در زنده کردن صفحات با جلوه های جالب مانند گرادیان ها، انتقال ها و انیمیشن ها است – که اغلب نیاز به تصاویر سنگین یا جاوا اسکریپت پیچیده را کاهش می دهد.
و CSS فقط یک چهره زیبا نیست! این اسباب کاری است که در صورت استفاده مؤثر، می تواند وب سایت ها را سریعتر بارگذاری کند، در موتورهای جستجو رتبه بالاتری داشته باشد و در دسترس تر باشد.
درست است، این فقط به ظاهر خوب نیست. این در مورد عملکرد و فراگیر بودن نیز هست.
بنابراین، چه کسی از تسلط بر CSS سود می برد؟ تقریباً هر کسی در بازی توسعه وب. از توسعه‌دهندگان وب که بوم دیجیتال را طراحی می‌کنند، تا طراحان UI/UX که رابط‌های بصری و چشم‌نواز ایجاد می‌کنند، تا مهندسان فرانت‌اند و توسعه‌دهندگان تمام پشته که سمت کلاینت و سمت سرور برنامه‌های کاربردی وب را با هم ترکیب می‌کنند. و بیایید طراحان وب را فراموش نکنیم، آن ذهن‌های خلاقی که تمرکزشان را روی تبدیل اینترنت به مکانی زیباتر گذاشته‌اند!
این دوره CSS چه چیزی را پوشش می دهد؟
ماژول 1: اصول HTML
جنبه های اساسی HTML را معرفی می کند و موضوعات کلیدی مانند عناصر HTML، ویژگی های آنها و نشانه گذاری معنایی را پوشش می دهد. یادگیرندگان از طریق ساختار و نحو HTML با تمرکز بر درک چگونگی ترکیب این عناصر برای تشکیل ستون فقرات صفحات وب هدایت می شوند. چالش‌های عملی برای تقویت این مفاهیم گنجانده شده است و تجربه یادگیری عملی را تضمین می‌کند.
ماژول 2: فرم ها و متن HTML
به ایجاد و مدیریت فرم ها و متن در HTML می پردازد. این ماژول انواع مختلف ورودی، اعتبار سنجی فرم و قابلیت دسترسی و همچنین پیاده سازی جداول را بررسی می کند. این یک مثال کاربردی در دنیای واقعی است و چالش هایی را ارائه می دهد که به زبان آموزان اجازه می دهد دانش خود را در سناریوهای عملی به کار گیرند.
ماژول 3: HTML Media
بر روی ادغام عناصر چندرسانه ای مانند تصاویر، ویدئوها و صدا در صفحات وب تمرکز می کند. استفاده و جاسازی این عناصر رسانه ای را پوشش می دهد و مثال ها و چالش هایی را برای افزایش درک عملی ارائه می دهد. هدف این ماژول تجهیز زبان آموزان به مهارت های لازم برای ایجاد محتوای غنی و رسانه محور برای وب است.
ماژول 4: مقدمه ای بر CSS
به عنوان یک راهنمای مبتدی برای CSS عمل می کند و نحو، انتخابگرهای اصلی و ویژگی های اصلی آن را توضیح می دهد. این ماژول همچنین مفاهیم آبشار CSS و ویژگی را مورد بحث قرار می دهد. چالش‌هایی برای کمک به زبان‌آموزان برای تمرین استفاده از CSS در طراحی وب، با تأکید بر استفاده از چارچوب‌های خارجی مانند Bootstrap گنجانده شده است.
ماژول 5: مبانی طرح بندی CSS
اختصاص به ویژگی‌های CSS که بر طراحی طرح‌بندی تأثیر می‌گذارند، مانند ویژگی‌های حاشیه، padding، حاشیه و نمایش. این ماژول یک رویکرد عملی به این ویژگی‌ها، از جمله یک مثال پس‌زمینه ویدیویی، به یادگیرندگان ارائه می‌دهد. چالش‌هایی برای تقویت درک فراگیران از تکنیک‌های چیدمان CSS ارائه شده‌اند.
ماژول 6: نمونه های عملی CSS
تجربه عملی را در استفاده از CSS در سناریوهای مختلف طراحی وب ارائه می دهد. موضوعاتی مانند جداول، چند رسانه ای، فرم ها و صفحات وب معنایی را پوشش می دهد و رویکردی عملی برای برنامه CSS ارائه می دهد. این ماژول برای تقویت مهارت های فراگیران از طریق مثال ها و چالش های دنیای واقعی طراحی شده است.
ماژول 7: راه اندازی محیط توسعه دهنده
فراگیران را در فرآیند راه اندازی یک محیط توسعه وب راهنمایی می کند. این ابزارها و نصب نرم افزارهای ضروری مانند Visual Studio Code و برنامه های افزودنی را پوشش می دهد، کنترل نسخه را با Git و GitHub معرفی می کند، و ابزارهای توسعه دهنده مرورگر را بررسی می کند. این ماژول برای یادگیرندگان برای درک گردش کار و ابزارهای مورد استفاده در توسعه وب بسیار مهم است.
ماژول 8: اصول طراحی و تایپوگرافی
به نکات ضروری طراحی وب و تایپوگرافی می پردازد، از جمله مقدمه ای برای استفاده از فونت های گوگل و نمادهای فونت عالی. این ماژول شامل بازی‌ها و تمرین‌های مرتبط با طراحی است که بر روی استایل دادن به متن با CSS متمرکز شده‌اند. همچنین دارای پروژه‌هایی است که این اصول طراحی را به کار می‌گیرند و زبان‌آموزان را قادر می‌سازد تا نگاه دقیقی به زیبایی‌شناسی وب داشته باشند.
ماژول 9: تئوری رنگ و اشکال
استفاده از رنگ و اشکال در طراحی وب را بررسی می کند. زبان آموزان تئوری رنگ، دسترسی در طراحی و پیاده سازی متغیرهای CSS را از طریق چندین ابزار رایگان درک خواهند کرد. این ماژول شامل بازی ها، پالت رنگ و ابزارهای تولید شکل و همچنین پروژه های عملی برای اعمال مفاهیم رنگ و شکل است که جذابیت بصری طراحی های وب را افزایش می دهد.
ماژول 10: طراحی واکنشگرا
اصول ایجاد طرح های وب را که با دستگاه ها و اندازه های مختلف صفحه نمایش سازگار است را آموزش می دهد. موضوعاتی مانند پرسش های رسانه ای، تصاویر پاسخگو و متن را پوشش می دهد. این ماژول شامل پروژه ای است که بر ایجاد یک طراحی واکنش گرا تمرکز می کند و زبان آموزان را برای ایجاد وب سایت هایی آماده می کند که تجربه کاربری بهینه را در دستگاه های مختلف ارائه می دهند.
ماژول 11: CSS Flexbox
حول مدل طرح بندی Flexbox در CSS متمرکز شده است. از طریق بازی‌های تعاملی، مثال‌ها و پروژه‌ای که طرح‌های Flexbox را در بر می‌گیرد، درک جامعی را فراهم می‌کند. این ماژول برای دانش آموزان برای تسلط بر طرح های چیدمان انعطاف پذیر و کارآمد در CSS حیاتی است.
ماژول 12: CSS Grid
سیستم طرح بندی CSS Grid را معرفی می کند. زبان آموزان خواص و الگوهای چیدمان رایج آن را از طریق مثال های عملی کشف خواهند کرد. این ماژول شامل یک پروژه گالری است که به زبان آموزان اجازه می دهد مفاهیم CSS Grid را در یک سناریوی واقعی اعمال کنند.
ماژول 13: CSS Transitions
تمرکز بر استفاده از انتقال در CSS برای ایجاد صفحات وب پویا و جذاب. این شامل پروژه ها و ابزارهای عملی است که به یادگیرندگان کمک می کند تا بفهمند چگونه رابط های کاربری را با انتقال صاف و جذاب بهبود بخشند.
ماژول 14: انیمیشن های CSS
به دنیای انیمیشن های CSS می پردازد. این ماژول ویژگی های انیمیشن، انیمیشن های بی نهایت و ابزارهای مختلف انیمیشن را پوشش می دهد. پروژه هایی مانند جلوه های ماشین تحریر و بارگذاری انیمیشن ها برای ارائه تجربه عملی در ایجاد پروژه های کوچک پویا گنجانده شده اند. با یادگیری در مورد رابط کاربری صفحه نمایش اسکلت، که اغلب برای پر کردن طرح‌بندی وب‌سایت‌هایی که محتوای پویا را بارگذاری می‌کنند، مانند فیس‌بوک و لینکدین، به اوج خود می‌رسد.
ماژول 15: گرافیک پخش
اختصاص داده شده به ایجاد گرافیک و انیمیشن به سبک پخش با استفاده از CSS و جاوا اسکریپت. این ماژول بر طراحی پویا و تعاملی تأکید می کند، دانش آموزان را با مهارت هایی برای ایجاد محتوای وب جذاب بصری تجهیز می کند و مهارت های انیمیشن سازی آنها را در این فرآیند اصلاح می کند.
ماژول 16: تکنیک های پیشرفته CSS
موضوعات پیشرفته CSS مانند انتخابگرهای کاذب، تولید تصویر هوش مصنوعی، گرادیان ها، برش دادن، ماسک کردن، حالت های ترکیبی، فیلترها، انواع مکان نما و موارد دیگر را بررسی می کند. ما همچنین کمی به Houdini می پردازیم که امکان گسترش عملکرد CSS را فراهم می کند. این شامل یک پروژه وب سایت نمونه کارها مدرن است که به زبان آموزان اجازه می دهد تا از این تکنیک های پیشرفته در زمینه طراحی وب جامع استفاده کنند.
ماژول 17: بهینه سازی
تکنیک های بهینه سازی ضروری برای طراحی وب را آموزش می دهد. این ماژول تست دسترس‌پذیری، پرسش‌های رسانه‌ای که خارج از طراحی واکنشگرا (برای کاربرانی که حالت تاریک، حرکت کمتر را ترجیح می‌دهند)، و تکنیک‌های بهینه‌سازی رسانه، با تمرکز بر بهبود عملکرد وب‌سایت و تجربه کاربر را پوشش می‌دهد.
ماژول 18: SCSS (SASS)
SCSS را معرفی می کند، یک پیش پردازنده CSS که قابلیت های CSS استاندارد را گسترش می دهد. این ماژول ویژگی‌های SCSS مانند متغیرها، تودرتو، میکس‌ها، توابع و دستورالعمل‌های کنترل را پوشش می‌دهد و درک عمیق‌تری از اینکه چگونه می‌توانیم عملکرد CSS را با این پیش پردازنده قدرتمند گسترش دهیم، ارائه می‌دهد. ما یک پروژه قبلی را دوباره فاکتور می کنیم تا به ساختار پوشه و تنظیم پروژه عادت کنیم.
ماژول 19: پروژه نهایی
تمام مهارت های آموخته شده در یک پروژه نهایی جامع را ادغام می کند. زبان آموزان دانش خود را از HTML، CSS و SCSS برای ایجاد یک وب سایت کامل به کار می گیرند و توانایی های خود را در توسعه وب به نمایش می گذارند. این ماژول به بهینه سازی رسانه ها، انیمیشن ها و انتقال ها، عملکرد فرم تماس و طراحی پاسخگو می پردازد.
ماژول 20: جمع بندی دوره
دوره را با خلاصه ای از مفاهیم کلیدی، آمادگی برای مصاحبه های CSS و راهنمای منابع پیشرفته برای به چالش کشیدن خود به عنوان یک توسعه دهنده به پایان می رساند. هدف این ماژول آماده سازی زبان آموزان برای کاوش بیشتر و رشد حرفه ای در زمینه توسعه وب است.
نتیجه چیست؟
این بوت کمپ CSS شما را از مبتدی به یک توسعه دهنده برتر CSS با 10% می رساند!
این دوره در مورد این نیست که شما فقط بدون درک اصول کدنویسی کنید تا وقتی دوره را تمام کردید ندانید به جز تماشای یک آموزش دیگر چه کاری انجام دهید… نه!
این دوره شما را تشویق می کند و شما را به چالش می کشد تا از یک مبتدی مطلق در CSS به فردی تبدیل شوید که قادر به ساخت پروژه های دنیای واقعی شما باشد که کاربران و کارفرمایان بالقوه را شگفت زده می کند.
لینک دانلود
دانلود پارت 01 با حجم 2 گیگابایت
دانلود پارت 02 با حجم 2 گیگابایت
دانلود پارت 03 با حجم 2 گیگابایت