آموزش CSS 301: طراحی وب سایت واکنش گرا
CSS 301: Responsive web design
به CSS 301 خوش آمدید: طراحی وب پاسخگو
این "مرحله نهایی" هنگام یادگیری CSS است - چگونه وب سایت خود را "ریسپانسیو" کنید.
ریسپانسیو کردن یک وب‌سایت، عمل نوشتن کدی است که باعث می‌شود وب‌سایت شما در تلویزیون، رایانه‌های رومیزی، لپ‌تاپ، تبلت و تلفن خوب به نظر برسد.
معمولاً یک پایگاه کد برای پشتیبانی از همه این انواع مختلف دستگاه می نویسیم.
مشکل CSS معمولی این است که، برای مثال، یک تصویر می‌تواند 500 پیکسل عرض داشته باشد. اما اگر یک بیننده با تلفن فقط یک دستگاه با عرض 425 پیکسل داشته باشد، چه؟ اکنون وب سایت شما خراب به نظر می رسد. این خوب نیست.
طراحی وب ریسپانسیو عملی است که باعث می‌شود عناصر HTML شما به مکان‌های مختلف بچسبند و در دستگاه‌های مختلف متفاوت به نظر برسند.
در این دوره، شما از دانش خود در زمینه رنگ‌های پس‌زمینه، شعاع حاشیه، رنگ‌های فونت، flexbox و grid استفاده میکنید تا شروع به ساخت یک صفحه وب به صورت واکنشگرا کنید.
در نهایت، شما این دوره را با ایجاد یک طرح‌بندی صفحه با استفاده از flexbox (به طور متناوب می‌توانید از شبکه CSS استفاده کنید) و پاسخگو کردن قالب را به پایان می‌رسانید – یعنی آن را «موبایل پسند» میکنید تا زمانی که کوچک‌تر شوید. اندازه مرورگر شما، در تبلت ها و گوشی ها عالی به نظر می رسد.
الزامات:
- دانش CSS متوسط (سینتکس و دانش پیرامون flexbox مفید خواهد بود)
- یک ویرایشگر متن مانند VS Code، Sublime، Atom، و غیره. هر ویرایشگر متنی رایگان کار خواهد کرد
- اینترنت برای پخش جریانی این دروس ویدیویی
شما این دوره را با ایجاد یک طرح‌بندی صفحه با استفاده از flexbox (به طور متناوب می‌توانید از شبکه CSS استفاده کنید) و پاسخگو بودن قالب را به پایان می‌رسانید – یعنی آن را «موبایل پسند» میکنید تا زمانی که کوچک می‌شوید اندازه مرورگر خود را کاهش دهید، در تبلت ها و تلفن ها عالی به نظر می رسد.
فراموش نکنید که پروژه خود را با بقیه کلاس Skillshare در بخش Skillshare Project اختصاصی خود (نه در قسمت نظرات) به اشتراک بگذارید.
درس ها Lessons
-
پروژه شما Your project
-
پرس و جوهای چند رسانه ای Multiple media queries
-
ساخت یک چیدمان واکنشگرا Making a responsive layout
-
موبایل اول چیست؟ What is mobile first?
-
خلاصه Summary
-
عنصر متا viewport The viewport meta element
-
نحو پرس و جو رسانه Media query syntax
-
به CSS 301 خوش آمدید: طراحی وب واکنشگرا Welcome to CSS 301: Responsive web design
-
تعبیه‌های پاسخگو Responsive embeds
-
تصاویر واکنش گرا Responsive images
https://donyad.com/d/f635
Kalob Taulien
معلم توسعه وب
سلام به همه! من Kalob Taulien هستم.
در اینجا نسخه TL;DR (کوتاه) درباره من است:
- من از سال 1999 کدنویسی می کنم و از سال 2013 به مردم یاد می دهم که چگونه کدنویسی کنند
- من بیش از 350000 دانشجوی توسعه وب در سراسر جهان دارم
- من در تیم توسعه هسته Wagtail CMS هستم (Wagtail شماره 1 محبوب ترین سیستم ساخت وب سایت پایتون است)
- من تمام تلاشم را می کنم که به هر سوالی که دانش آموزانم دارند پاسخ دهم
- من عاشق تدریس هستم - این قطعاً یکی از استعدادهای طبیعی من است
- همچنین من عاشق بز هستم! (اگر ملاقات حضوری داشته باشیم شروع کننده گفتگو با من عالی است)
در زیر می‌توانید تمام دوره‌های Skillshare من را پیدا کنید. دسته بندی ها از ساده ترین به سخت ترین، به جز موارد متفرقه، قرار می گیرند. دوره های کدنویسی در پایان.
اگر در زمینه کدنویسی کاملاً تازه کار هستید، با BEGINNERS WEB DEV شروع کنید. و سپس به سراغ HTML بروید.
اگر یک توسعه دهنده وب با تجربه هستید، می توانید از هر یک از بخش های زیر رد شوید.
اگر می‌خواهید یاد بگیرید که چگونه وب‌سایت‌ها را واقعاً زیبا جلوه دهید و خوب عمل کنید، می‌خواهید به HTML، CSS و جاوا اسکریپت نگاه کنید.
اگر می‌خواهید وب‌سایت‌هایی ایجاد کنید که کاربران بتوانند در آن وارد شوند، حساب کاربری داشته باشند و اطلاعات را ذخیره کنند، می‌خواهید به PHP، Python، Django یا Wagtail نگاه کنید.
آخرین اما نه کم اهمیت، همه باید Git و نحوه استفاده از GitHub را بدانند. این کاملاً حیاتی است که 100٪ همه توسعه دهندگان Git و GitHub را درک کنند. این زبان مخفی است که هر کارفرما به دنبال آن است. من نیز یک بخش کامل در مورد آن دارم.
فراموش نکنید که من را در Skillshare برای دوره های هفتگی جدید دنبال کنید!
کد نویسی مبارک!
نمایش نظرات