چرا خود را به تصاویر درون خطی و متن ثابت محدود کنید، به خصوص در دوران چند پلتفرمی ما؟ رسانه های واکنش گرا به شما امکان می دهند محتوای بیشتری را با افراد بیشتری به اشتراک بگذارید. آنچه را که برای ساختن صفحات غنی از تصویر و تایپوگرافی (با ویدیوی HTML5!) که به درستی در دستگاه های مختلف نمایش داده می شود، بدانید. کریستوفر اشمیت همچنین به شما نشان می‌دهد که چگونه طرح‌بندی‌های با عرض ثابت را به طرح‌بندی‌های شبکه‌ای سیال تبدیل کنید که با اندازه‌های مختلف صفحه‌نمایش سازگار هستند، از پرسش‌های رسانه‌ای برای ارائه تجربیات طراحی سفارشی استفاده کنید، و تصاویر PNG، JPEG و SVG را آماده و بازیابی کنید تا بهترین ظاهر را داشته باشند. .

 در این دوره ، Lachezar Arabadzhiev-بنیانگذار و مدیرعامل در SkildLabs-به شما نشان می دهد که چگونه می توانید وب سایت های پاسخگو و کاربر پسند را با Canva بسازید. ویژگی های طراحی پاسخگو را در Canva کاوش کنید. بیاموزید که چگونه دامنه و الگوهای خود را پیکربندی کنید. نحوه ایجاد عناصر صفحه و سایت را پیدا کنید و سپس محتوا را بسازید. روشهای بهینه تنظیم سایت خود را برای عملکرد ایده آل SEO کشف کنید. به علاوه ، یاد بگیرید که چگونه سایت خود را با استفاده از Canva به وب منتشر کنید.

به دنبال ارتقای مهارت های طراحی وب سایت واکنش گرا به سطح بعدی هستید؟ با نحوه ایجاد منوهای جمع شونده و افزودن گرافیک های برداری مقیاس پذیر (SVG) به طرح بندی های خود آشنا شوید. کریس کانورس تکنیک های پیشرفته ای را برای استایل دادن به منوها و گرافیک های موبایل با HTML، CSS، جاوا اسکریپت و جی کوئری به اشتراک می گذارد. این ویدیوها آموزش‌های عملی و ابتدایی را برای ساخت صفحات وب کارآمدتر و انعطاف‌پذیرتر ارائه می‌دهند که می‌توانند با اندازه‌ها و جهت‌گیری‌های مختلف صفحه نمایش سازگار شوند.

بیاموزید که چگونه تایپوگرافی زیبا، کاربردی و به راحتی در تبلت ها، تلفن ها و رایانه ها در هر نوع و اندازه ایجاد کنید. طراح Val Head به شما نشان می دهد که چگونه فونت های وب با کیفیت را انتخاب کنید، مقیاس و ریتم تایپوگرافی را در سراسر طراحی خود ایجاد کنید، و پشته های فونت ضد گلوله بسازید. به علاوه، نحوه استفاده از پرس و جوهای رسانه ای و قوانین CSS را بیاموزید تا نوع خود را در هر اندازه ای عالی نگه دارید. این دوره مجموعه ای از بهترین روش ها و تکنیک ها است که به زودی بخشی ضروری از جعبه ابزار هر نوع تایپ وب خواهد بود.

طراحی واکنشگرا مستلزم آن است که وب سایت ها با دستگاهی که در آن نمایش داده می شوند سازگار شوند. طرح‌بندی واکنش‌گرا بسیار کلیدی است، و HTML و CSS اکنون ویژگی‌هایی را ارائه می‌کنند که ایجاد طرح‌بندی‌هایی را که در طیف وسیعی از دستگاه‌ها و اندازه‌های صفحه به خوبی کار می‌کنند، آسان‌تر از همیشه می‌کنند. در این دوره، Clarissa Peterson اصول طراحی طرح‌بندی وب‌سایت واکنش‌گرا با آخرین استانداردها از جمله CSS Flexbox و Grid را پوشش می‌دهد. اصول اولیه را مرور کنید، مانند کار کردن با ویژگی های موقعیت و شناور برای تنظیم مکان عناصر روی صفحه، و نحوه استفاده از پرس و جوهای رسانه ای برای به روز رسانی فعال طرح خود را بیابید. سپس وارد CSS Grid شوید، از جمله تراز کردن و سفارش دادن آیتم‌ها در شبکه، و پیدا کردن کار کردن با ظروف flexbox. در نهایت، یاد بگیرید که یک طرح 12 ستونی بسازید که Grid و Flexbox را در یک طرح ترکیب می کند.

یاد بگیرید که چگونه از ابزارهای داخلی در Dreamweaver برای ایجاد فرم های وب غنی و قابل دسترس استفاده کنید. در این دوره، مربی دیوید کارلینز نحوه استفاده از HTML5، CSS3 و ابزارهای ایجاد فرم و ویژگی‌های کمک کد در Dreamweaver را برای ساختن فرم‌هایی با ظاهری مدرن که پاسخگو و آسان برای استفاده هستند، چه بر روی دسکتاپ یا دستگاه تلفن همراه نمایش داده شوند، نشان می‌دهد. او همچنین نشان می دهد که چگونه داده هایی را که دریافت می کنید با انواع ورودی فرم HTML5 اعتبار سنجی کنید. به علاوه، یاد بگیرید که چگونه فرم ها را طوری استایل دهید که با ظاهر وب سایت شما مطابقت داشته باشند. در پایان دوره، مهارت‌های لازم برای ساخت فرم‌هایی برای دریافت سفارش‌ها، جمع‌آوری اطلاعات تماس و درخواست بازخورد از کاربران خود را خواهید داشت که وب‌سایت‌های خود را تعاملی‌تر و جذاب‌تر می‌کند.

با نحوه ساخت طرح های تک صفحه ای پویا و پاسخگو با HTML، جاوا اسکریپت و CSS آشنا شوید. وب‌سایتی که در این دوره ارائه می‌شود، ناوبری اتصال، ستون‌هایی را که بدون درهم ریختن طرح‌بندی سایت شما تنظیم می‌شوند یا نشانه‌گذاری HTML، و افکت‌های پیمایش متحرک که به جهت کاربر پاسخ می‌دهند، ترکیب می‌کند. نویسنده Ray Villalobos به شما نشان می دهد که چگونه آن را بسازید. او با یک الگوی ساده و آسان شروع می‌کند و سپس توضیح می‌دهد که چگونه می‌توان ویژگی‌هایی را که طراحی‌های تک صفحه‌ای را بسیار عالی می‌کنند، با این چهار چارچوب اضافه کرد:
rn این یک پروژه واقع گرایانه است که تجسم بسیاری از چالش های طراحی است که توسعه دهندگان وب سایت در دنیای واقعی با آن روبرو هستند. همین حالا تماشا را شروع کنید و یاد بگیرید که چگونه از HTML، jQuery و CSS برای ایجاد طرح‌های پویا و عمیق پاسخگوی خود استفاده کنید.

توسعه دهندگان وب طیف گسترده ای از ابزارها را برای استفاده و انتخاب دارند. چگونه باید HTML، CSS و جاوا اسکریپت را ترکیب کنید؟ چگونه سرعت و رسانه غنی را متعادل می کنید؟ وقتی محتوای شخص ثالث جابجا شود یا شکسته شود چه اتفاقی می‌افتد؟ به Morten Rand-Hendriksen بپیوندید تا نشان دهد که چگونه تمرکز بر انعطاف‌پذیری می‌تواند به شما کمک کند تا برنامه‌های کاربردی وب ایجاد کنید که برای همه کاربران شما کارآمد باشد. ابتدا، بیاموزید که چه چیزی یک برنامه یا وب سایت را شکننده می کند. سپس تکنیک‌های اساسی زیربنای وب انعطاف‌پذیر، از جمله بهبود تدریجی، دسترسی، تداوم پیوند، اجزای وب و موارد دیگر را بررسی کنید. در مرحله بعد، نحوه جلوگیری از مشکلات معرفی شده توسط چارچوب های جاوا اسکریپت را بیابید. در نهایت، تماشا کنید که مورتن شما را گام به گام در فرآیند معماری یک برنامه کاربردی وب انعطاف‌پذیر، از تعیین اهداف تا حفظ پیوندهایتان، هدایت می‌کند.

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

دریابید که چگونه بوت استرپ 4 می تواند وب سایت های استاندارد HTML شما را به طرح های تک صفحه ای الهام گرفته تبدیل کند. این دوره یک رویکرد پروژه محور برای توضیح نحوه دستکاری طرح‌بندی وب‌سایت با چارچوب بوت استرپ دارد. در طول دوره، مربی Ray Villalobos از طریق الگوهای چیدمان محبوب کار می کند و به شما کمک می کند تا با مفاهیمی آشنا شوید که برای ایجاد یک چیدمان منسجم با Bootstrap هستند. Ray با کلاس‌های چیدمان بوت استرپ مقابله می‌کند و نشان می‌دهد که برای سفارشی کردن CSS خود، به چالش‌های طرح‌بندی مانند شبکه‌ها و ستون‌های متعدد، چه چیزی نیاز است. یاد بگیرید که چگونه از افزونه Scrollspy برای ردیابی ناوبری، نحوه ایجاد چرخ فلک تصویر و نحوه ساخت انیمیشن استفاده کنید. به علاوه، این دوره یک الگوی آماده برای شروع پروژه های جدید را در اختیار شما قرار می دهد.

کار در طراحی وب شامل ایجاد عناصر UI (رابط کاربری) - آیکون ها، گرافیک ها، وایرفریم ها و ماکت ها است. ادوبی فتوشاپ قابلیت های مورد نیاز را برای انتقال راحت و آسان این عناصر طراحی به تولید فراهم می کند. در این دوره آموزشی، نحوه استفاده از فتوشاپ برای گردش کار طراحی وب مدرن را بیاموزید. به امیلی کی بپیوندید تا او شما را در یک پروژه طراحی وب واکنشگرا، از جمله راه اندازی، استفاده از قالب ها، ساخت کامپ ها و صادرات برای وب، راهنمایی کند. امیلی نحوه کار با تابلوهای هنری، کتابخانه ها و اشیاء هوشمند را نشان می دهد. او روند ایجاد چندین محصول قابل تحویل را نشان می‌دهد - قاب‌های سیمی، ماکاپ‌ها، تابلوهای حالت، راهنماهای سبک، عناصر ناوبری و موارد دیگر.

هنگامی که گرایش‌ها و اصطلاحات را حذف کردید، طراحی وب فقط یک چیز و یک چیز است: رساندن پیام شما به مخاطبان آنلاین. این دوره یک نمای 10000 فوتی از فرآیند طراحی وب ارائه می دهد تا اطمینان حاصل شود که هرگز کاربران خود را از دست ندهید. Morten Rand-Hendriksen شما را به سفری از مشاوره و کشف اولیه از طریق استراتژی محتوا و ملاحظات UX، تا توسعه، ایجاد محتوا، طراحی، آزمایش و راه اندازی می برد. در پایان، بازیکنان و مراحل مختلف و نحوه تطبیق آنها با یکدیگر را در یک رویکرد طراحی وب متمرکز بر ارتباطات معنادار و تجربه کاربری عالی خواهید فهمید.

در مورد نحوه استفاده از Webflow، ابزار مبتنی بر وب برای ایجاد آسان وب سایت های واکنش گرا بدون کدنویسی، بیاموزید. مربی جن کرامر ایجاد یک سایت جدید با Webflow، اضافه کردن محتوا و رسانه، سفارشی کردن ناوبری و طرح بصری، و افزودن صفحات اضافی را پوشش می دهد. او همچنین نحوه انتشار یک سایت، نظارت بر عملکرد آن و به روز نگه داشتن آن را با محتوای جدید به اشتراک می گذارد.