دوره آموزشی ایجاد یک طراحی وب سایت واکنش گرا
3 ساعت 48 دقیقهمبتدی2015-11-09
مدرسین

Chris Converse
Applies design and UX principles to technology
جزئیات دوره
یاد بگیرید که چگونه طراحی وب واکنشگرا (Responsive Web Design) را به کار ببرید تا وبسایت شما در تمام دستگاهها خوانا و کارآمد باشد. Chris Converse در این دوره تکنیکهای خاص خود را برای ترکیب HTML و CSS در یک چیدمان تطبیقپذیر آموزش میدهد.
این آموزش از مرحله ابتدایی تا نهایی طراحی یک سایت را پوشش میدهد؛ از ایجاد صفحات HTML و کانتینرها گرفته تا استایلدهی برای نمایش در صفحههای کوچک، متوسط و بزرگ.
همچنین، یاد میگیرید که چگونه:
✅ منوی سایت را برای نمایش بهتر در موبایل تغییر دهید
✅ افکتهای انیمیشنی به سایت اضافه کنید
✅ فهرستهای نقطهدار را به منوهای تعاملی تبدیل کنید
✅ از Pseudo-Elements در CSS برای بهینهسازی طراحی استفاده کنید
✅ چیدمان صفحه را برای چاپ بهینه کنید تا جوهر و کاغذ کمتری مصرف شود
اهداف یادگیری:
برنامهریزی برای طراحی چیدمان سایت
ایجاد ساختار HTML شامل کانتینرها، محتوا و لینکها
طراحی و استایلدهی چیدمان سایت با CSS
ایجاد یک سیستم منو برای سایت
استایلدهی برای سربرگها، متن اصلی و فوترها
تغییر موقعیت لینکهای ناوبری برای موبایل
تعویض تصاویر معمولی با گرافیکهای رزولوشن بالا برای نمایشگرهای Retina
بهینهسازی محتوا برای چاپ
این آموزش از مرحله ابتدایی تا نهایی طراحی یک سایت را پوشش میدهد؛ از ایجاد صفحات HTML و کانتینرها گرفته تا استایلدهی برای نمایش در صفحههای کوچک، متوسط و بزرگ.
همچنین، یاد میگیرید که چگونه:
✅ منوی سایت را برای نمایش بهتر در موبایل تغییر دهید
✅ افکتهای انیمیشنی به سایت اضافه کنید
✅ فهرستهای نقطهدار را به منوهای تعاملی تبدیل کنید
✅ از Pseudo-Elements در CSS برای بهینهسازی طراحی استفاده کنید
✅ چیدمان صفحه را برای چاپ بهینه کنید تا جوهر و کاغذ کمتری مصرف شود
اهداف یادگیری:
برنامهریزی برای طراحی چیدمان سایت
ایجاد ساختار HTML شامل کانتینرها، محتوا و لینکها
طراحی و استایلدهی چیدمان سایت با CSS
ایجاد یک سیستم منو برای سایت
استایلدهی برای سربرگها، متن اصلی و فوترها
تغییر موقعیت لینکهای ناوبری برای موبایل
تعویض تصاویر معمولی با گرافیکهای رزولوشن بالا برای نمایشگرهای Retina
بهینهسازی محتوا برای چاپ
مهارت ها
Responsive Web DesignCSSWeb StandardsWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source
سرفصل ها
0. مقدمه
- 01 - مقدمه ای بر این دوره
- 02 - در مورد این دوره
- 03 - شرایط و فناوری که ما پوشش خواهیم داد
- 04 - آنچه برای تکمیل این دوره نیاز دارید
- 05 - در مورد فایلهای تمرین
1. آماده سازی محتوا و ساختار HTML
- 06 - راهاندازی پروژه ما
- 07 - استراتژی برای چیدمان ما
- 08 - ایجاد کانتینرهای اصلی HTML
- 09 - اضافه کردن محتوا به هدر
- 10 - افزودن محتوا به قسمت اصلی
- 11 - افزودن محتوا به قسمت اتمسفر
- 12 - افزودن محتوا به قسمت نحوه انجام
- 13 - اضافه کردن ناوبری
- 14 - افزودن محتوای فوتر
2. ایجاد Style و Layout با CSS
- 15 - وارد کردن فونت گوگل
- 16 - تعریف سبکهای متن اصلی
- 17 - حالت دادن به عنوان و ظرف صفحه
- 18 - استایل دادن به لوگو و آیتم قهرمان
- 19 - ایجاد سبک دکمه
- 20 - تنظیم یک ردیف سه ستونی
- 21 - افزودن گرافیک به قسمت اصلی
- 22 - پاکسازی شناورها با شبه عناصر
- 23 - حالت دادن به بخش اتمسفر
- 24 - حالت دادن به عناصر کنار بخش چگونه
- 25 - استایل کردن عنصر blockquote بخش how-to
- 26 - افزودن محتوا با شبه عناصر
- 27 - حالت دادن به پاورقی
3. ایجاد یک سیستم منو با CSS
- 28 - تغییر موقعیت ناو
- 29 - سبک دادن به موارد و پیوندهای فهرست ناوبری
- 30 - نمایش و مخفی کردن زیر منوهای nav
- 31 - گزینههای سازگاری دستگاه برای nav
- 32 - اضافه کردن فلشهای نشانه
4. ایجاد تنظیمات چیدمان برای صفحه نمایشهای بزرگ و متوسط
- 33 - انجام تنظیمات جزئی برای نمایشگرهای بزرگتر
- 34 - انجام تنظیمات برای نمایشگرهای بزرگ
- 35 - انجام تنظیمات صفحه نمایش متوسط
5. ایجاد تنظیمات برای صفحه نمایشهای کوچک
- 36 - حرکت ناوبری برای نمایشگرهای کوچکتر
- 37 - تنظیم لوگو و عناصر قهرمان
- 38 - تنظیم مجدد قسمتهای اصلی و جوی
- 39 - تنظیم مجدد بخش چگونه
- 40 - تنظیم مجدد مسیریابی
- 41 - تنظیم فاصله ناوبری و پاورقی
6. ایجاد تنظیمات برای کوچکترین صفحه نمایش
- 42 - تنظیمات برای هدر و قهرمان
- 43 - تنظیم بخش چگونه
- 44 - تنظیم پاورقی
7. ایجاد تنظیمات چیدمان و محتوا برای چاپ
- 45 - استراتژی برای چاپ
- 46 - پیوند دادن یک فایل CSS برای چاپ
- 47 - راهاندازی سبکهای پایه
- 48 - تنظیم هدر
- 49 - نمایش URLها هنگام چاپ
- 50 - بخش اصلی
- 51 - بخش اتمسفر
- 52 - تگهای img خود را با CSS تغییر دهید
- 53 - حالت دادن به پاورقی
- 54 - تنظیم شکستگی صفحه با CSS
نتیجه
- 55 - بعدش چی
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid