با استفاده از HTML5 و CSS3 یک قالب وب را پاسخگو کنید

Make a Web Template Responsive Using HTML5 & CSS3

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره: آموزش ساخت یک قالب وب شگفت انگیز به یک قالب واکنش گرا فقط با استفاده از HTML و CSS آموزش تبدیل یک قالب وب غیر ریسپانسیو به یک قالب وب واکنش گرا مواجه شدن با مشکلات مختلف در طراحی قالب وب سازماندهی و اصلاح قوانین CSS چند نکته و ترفند در مورد OOCSS پیش از این نیازها:آشنا با HTML5 و CSS3 هر کامپیوتری: ویندوز، لینوکس یا مک یک مرورگر وب و یک ویرایشگر کد (VS Code ترجیح داده می شود)

به دوره آموزشی "Responsive Web Template Using HTML5 CSS3" خوش آمدید

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

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

برای داشتن طراحی وب ریسپانسیو در این دوره در مورد:

صحبت خواهم کرد

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

علاوه بر این، با تعدادی چالش و مشکلات (مثلاً همپوشانی عناصر) روبرو خواهیم بود که در این دوره با هم بررسی و حل خواهیم کرد.

در پایان دوره، در مورد چگونگی بازسازی CSS، مرتب‌سازی قوانین تعریف‌شده، و همچنین CSS شی‌گرا (OOCSS) صحبت خواهیم کرد و نکاتی در مورد چگونگی بهبود قوانین CSS ارائه خواهیم داد.

اگر قبلاً با HTML و CSS آشنایی دارید، اما نمی‌دانید چگونه یک قالب واکنش‌گرا بسازید، توصیه می‌کنم این دوره را تماشا کنید.

سرفصل ها و درس ها

مقدمه Introduction

مقدمه Introduction

اصول طراحی واکنشگرا Responsive Design Fundamentals

هدر پاسخگو Responsive Header
بخش مقدمه Intro Section
پاسخگو درباره و بخش دوره Responsive About and Course Section

مواجهه با مشکلات طراحی قالب وب Facing Web Template Design Problems

مشکل منابع خارجی External Resource Problem
فرم جستجو بهم ریخته Messed up Search Form
مشکل با دکمه های ورود و تصویر مقدمه Problem with login buttons & intro image

Refactoring و نکات Refactoring & Tips

CSS refactoring - قسمت 1 CSS refactoring - Part 1
CSS refactoring - قسمت 2 CSS refactoring - Part 2
OOCSS و نکات OOCSS & Tips

برای ارسال نظر ثبت نام کنید.

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.