آموزش CSS 201: CSS متوسط. وب سایت های زیبا را از ابتدا ایجاد کنید.
CSS 201: Intermediate CSS. Create beautiful websites from scratch.
به CSS 201 خوش آمدید: CSS متوسط
در این دوره، ما قصد داریم با CSS سطح متوسط کار کنیم، به این معنی که به آنچه که CSS واقعاً می‌تواند انجام دهد، می‌پردازیم.
این دومین گام برای نوشتن CSS واقعا قدرتمند است و وب‌سایت‌های خود را شگفت‌انگیز جلوه می‌دهد!
"بدون CSS، هر وب سایتی زشت خواهد بود." – اینترنت
ما با مرور سریع برخی از چیزهایی که در CSS 101 یاد گرفتیم شروع می‌کنیم. سپس به CSS پیشرفته‌تر مانند موقعیت‌یابی مطلق و ایجاد طراحی‌های وب بی‌نقص پیکسل می‌پردازیم.
ما حتی در مورد کار با یک طراح صحبت خواهیم کرد، بنابراین هنگامی که اولین شغل توسعه وب خود را به عنوان یک توسعه دهنده وب ظاهر می کنید، آماده کار با یک طراح حرفه ای خواهید بود.
ما در مورد مدل جعبه یاد می‌گیریم، که مسلماً یکی از مفیدترین مفاهیمی است که در CSS بدون نوشتن هیچ کدی باید بدانید. این تفاوت بین عنصری است که 100٪ عرض صفحه شما را اشغال می کند، و همان عنصر که 100٪ + 2px را اشغال می کند و کار دشواری دارد.
درسی در مورد انتخابگرهای بیشتری وجود دارد، از جمله انتخابگرهای کاذب (مانند قرار دادن ماوس روی یک عنصر و ایجاد تغییر در آن) و عناصر شبه (مانند افزودن یک عنصر HTML به صفحه خود بدون نوشتن HTML).
ما نیز با موقعیت‌یابی‌های زیادی کار خواهیم کرد. اینجاست که یک عنصر را می گیریم و با استفاده از CSS، آن را جابجا می کنیم. می‌توانیم کل عناصر را چسبناک کنیم، یا به قسمت خاصی از ویوپورت (صفحه) بچسبیم، یا حتی فقط یک عنصر را چند پیکسل به کناری بزنیم.
همچنین دروسی در مورد انتقال وجود دارد – اینکه چگونه انیمیشن‌های کوچک کوچک می‌سازیم، مانند یک حرکت صاف هنگامی که با ماوس خود روی یک عنصر می‌روید. همراه با دگرگونی ها – روشی که می توانیم عناصر را از منظر کج به نظر برسانیم.
و موضوع بزرگی که قرار است به آن بپردازیم انیمیشن‌های CSS است - چگونه می‌توان کارها را به خودی خود و بدون هیچ گونه تعاملی حرکت داد. تا آنجایی که می‌توانیم به ایجاد یک شخصیت «کارتونی» نزدیک شویم که به تنهایی حرکت می‌کند، فقط با نوشتن CSS.
نزدیک به پایان دوره، به CSS Flexbox و CSS Grid می پردازیم، که موضوعات پیشرفته CSS هستند – و این شما را برای مرحله بعدی سفر CSS خود آماده می کند: یادگیری توسعه وب پاسخگو.
در این دوره نیز تمرینات عملی زیادی وجود دارد. در پایان بیشتر درس ها یک تکلیف درسی وجود دارد، بنابراین شما به طور موثر با من کدنویسی می کنید.
در نهایت، پروژه شما پروژه بزرگی خواهد بود. شما یک طراحی وب واقعا زیبا پیدا خواهید کرد و سعی می کنید آن را به بهترین شکل ممکن دوباره ایجاد کنید. تلاش زیادی برای تعیین زمان و مکان قرار دادن عناصر HTML و نحوه بازنویسی آنها با استفاده از CSS وجود دارد. این پروژه به گونه ای طراحی شده است که مغز شما را عرق کند - همانطور که در ابتدا، واقعاً آنچه را که می دانید به چالش می کشد و شما را به حداکثر حد مجاز می رساند. اگر بتوانید این پروژه را به پایان برسانید، احتمالاً در آینده می توانید هر وب سایتی را طراحی کنید!
کد نویسی مبارک!
الزامات:
- درک اولیه CSS و HTML
- اینترنت برای پخش جریانی ویدیوها
منابع:
یک طراحی وب الهام‌بخش از pinterest.com پیدا میکنید و آن را با استفاده از HTML و CSS کدنویسی میکنید. این کار ظرفیت ذهنی شما را افزایش می دهد و به شما نشان می دهد که واقعاً چه توانایی هایی دارید.
این پروژه آسان نیست، نه طراحی شده است که آسان باشد.
ایده این است که یک طراحی وب زیبا (و دشوار) داشته باشید و آن را به واقعیت تبدیل کنید. هنگامی که پروژه خود را به پایان رساندید، می توانید آن را در نمونه کار خود به اشتراک بگذارید، زمانی که برای یک کار توسعه وب ظاهری درخواست می دهید.
در نهایت، فراموش نکنید که پروژه خود را در بخش Skillshare Project خود در این دوره به اشتراک بگذارید (حتی می توانید وب سایت در حال انجام خود را به اشتراک بگذارید).
درس ها Lessons
-
نحوه ساخت انیمیشن با استفاده از CSS How to make animations using CSS
-
عناصر شبه قبل و بعد The before and after pseudo elements
-
Grid: سرزمین موعود صفحه‌آرایی‌ها Grid: the promised land of page layouts
-
تحولات چیست؟ What are transformations?
-
انتخابگرهای شبه: شروع به کار Pseudo selectors: getting started
-
ویژگی نمایش The display property
-
تحمیل حداقل عرض بر روی یک عنصر Forcing a minimum width on an element
-
معرفی شبه انتخابگرها Introduction to pseudo selectors
-
تغییر حرف اول و خط اول با استفاده از عناصر شبه Changing the first letter and first line using pseudo elements
-
موقعیت یابی نسبی Relative positioning
-
انتخابگرهای پیشرفته CSS Advanced CSS selectors
-
پروژه نهایی شما Your final project
-
نحوه استفاده از فونت های وب سفارشی How to use custom web fonts
-
موقعیت چسبنده (مانند هدرهای مدرن) Sticky positioning (like modern headers)
-
موقعیت یابی مطلق Absolute positioning
-
نحوه اضافه کردن انتقال های صاف How to add smooth transitions
-
خطوط کلی: مرزهای اطراف مرزها Outlines: Borders around borders
-
مرکز کردن عناصر بلوک در وسط صفحه Centering block elements in the middle of the page
-
خلاصه Summary
-
کنترل متن سرریز Controlling overflowing text
-
مهم: مدل جعبه IMPORTANT: The box model
-
مقدمه ای بر شبه عناصر Introduction to pseudo elements
-
آشنایی با موقعیت های CSS Introduction to CSS positions
-
برجسته کردن متن با انتخاب Highlighting text with selection
-
Flexbox: نوع جدیدی از صفحه آرایی Flexbox: the new kind of page layout
-
CSS 201: CSS متوسط. وب سایت های زیبا را از ابتدا ایجاد کنید. CSS 201: Intermediate CSS. Create beautiful websites from scratch.
-
موقعیت ثابت (مانند هدر) Fixed positioning (like headers)
-
نحوه اضافه کردن پس زمینه گرادیان How to add gradient backgrounds
-
نحوه اضافه کردن سایه به متن How to add shadows to text
-
نحوه لایه بندی پس زمینه ها و گرادیان ها با هم How to layer backgrounds and gradients together
https://donyad.com/d/68ec
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 برای دوره های هفتگی جدید دنبال کنید!
کد نویسی مبارک!
نمایش نظرات