آموزش طراحی وب ریسپانسیو در مرورگر

مدرس Morten Rand-Hendriksen

انتشار 2016/03/28

مدت زمان 1h 51m

سطح متوسط

فایل تمرینی دارد

آموزش Learning Responsive Web Design in the Browser

با همه نرم افزارهای طراحی وب موجود، چرا در مرورگر طراحی می کنید؟ ما در دنیای جدید و شجاع طراحی واکنشگرا زندگی می کنیم. وب‌سایت‌ها را می‌توان در دستگاه‌های تلفن همراه، تبلت‌ها، رایانه‌های رومیزی و حتی بر روی ساعت‌های هوشمند روی مچ دست خواند. اکثر ابزارهای طراحی وب استاتیک این را در نظر نمی گیرند. مرورگر یک بوم بی پایان و انعطاف پذیر است. این مکانی طبیعی برای کدنویسی است و سطح طراحی پویا و بازخورد فوری آن اجازه می‌دهد تا طراحی‌های وب واکنش‌گرای بیشتری داشته باشید.nn او نشان می دهد که چگونه می توان طرح را روی کاغذ تعریف کرد و یک "زبان" برای سایت ایجاد کرد و سپس یک سند پایه با HTML5 ایجاد کرد. سپس از CSS برای هدایت ظاهر سایت و طرح‌بندی استفاده می‌کند، از پرسش‌های رسانه‌ای و Flexbox برای افزودن رفتارهای واکنش‌گرا استفاده می‌کند. در فصل 3، مورتن تعامل سایت را با استفاده از انتقال و تبدیل CSS بهبود می بخشد. در نهایت، او نحوه استفاده از این تکنیک ها را برای ساخت تم های وردپرس در مرورگر نشان می دهد.nn

Content Management Systems (CMS) Front-end Development Responsive Web Design WordPress

Introduction

Welcome ()

What to know before you start this course ()

1. Design Preparation

Use the browser as a design canvas ()

Establish a design language for your site ()

Draft layouts with pen and paper ()

Map out containers by drawing boxes ()

Modularize the design ()

✓ Challenge: Create a container map and modularize the design ()

✓ Solution: Create a container map and modularize the design ()

2. Visual Design in the Browser

Tools and setup ()

Start with a core setup ()

Create a baseline document with HTML5 ()

Sidebar: A simple RWD principle ()

Apply fonts and responsive typography ()

Work on one module at a time ()

A practical approach to responsive web design ()

Use modern technologies to simplify the design process ()

Create responsive layouts with Flexbox ()

Color tools in the browser ()

Color experimentation and the value of HSLA ()

✓ Challenge: Design the article page in the browser ()

✓ Solution: Design the article page in the browser ()

3. Interaction Design in the Browser

Interaction design through CSS ()

CSS transforms ()

Experimentation through image filters ()

4. Designing WordPress Themes in the Browser

Design responsive WordPress themes in the browser ()

Next Steps

Thank you! ()

Ex_Files_Responsive_Web_Design_Browser.zip (285.8 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

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