معرفی دوره Css از صفر

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

در جلسه دوم این دوره، گام مهمی در مسیر تسلط بر CSS برمی‌داریم. موضوع اصلی این جلسه، آشنایی با برخی سلکتورها است. با بررسی دقیق سلکتورهای ترکیبی مانند (فرزندی) و (فرزند مستقیم) و همچنین شبه‌کلاس‌های کاربردی مانند not، توانایی شما در نشانه‌گیری دقیق المان‌های وب افزایش خواهد یافت. یکی از بخش‌های کلیدی این جلسه، بررسی مکانیزم Specificity و نقش !important در تعیین اولویت استایل‌هاست که با مثال‌های عینی از کد ارائه شده، این مفاهیم را برای همیشه به خاطر خواهید سپرد. //////////// مهم: همچنین به عنوان یک هدیه آموزشی، فایل پیکربندی Neovim را از طریق مخزن گیت‌هاب در اختیار شما قرار می‌دهیم تا محیط توسعه خود را حرفه‌ای‌تر از قبل بسازید.»/////////////

در این جلسه، دو مفهوم اساسی در دنیای استایل‌دهی وب را مورد کاوش قرار می‌دهیم: پالت رنگی و سیستم واحدها در CSS. ابتدا با انواع روش‌های تعریف رنگ شامل RGB، RGBA، کدهای هگزادسیمال و مدل HSL آشنا می‌شویم و نحوه استفاده از آن‌ها را در پروژه‌ها را برسی می کنیم. سپس به سراغ واحدهای اندازه‌گیری می‌رویم و تفاوت میان واحدهای مطلق (مثل پیکسل) و واحدهای نسبی (مانند em، rem، درصد، vh و vw) را با تأکید بر کاربرد آن‌ها در طراحی واکنش‌گرا تشریح خواهیم کرد. در پایان جلسه، شرکت‌کنندگان قادر خواهند بود با آگاهی کامل، رنگ‌ها و اندازه‌های مناسب را برای هر بخش از وب‌سایت انتخاب کنند.

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

در این جلسه، تمرکز خود را بر روی یکی از پرکاربردترین و در عین حال چالش‌برانگیزترین المان‌های HTML معطوف می‌کنیم: جدول. در این جلسه سراغ ویژگی‌های دسترسی‌پذیری مانند headers می‌رویم که ارتباط بین سلول‌های داده و سرستون‌ها را برقرار می‌کند. در ادامه، تکنیک‌های پیشرفته استایل‌دهی با CSS را بررسی می‌کنیم: استفاده از border-collapse برای حذف فاصله‌های ناخواسته، کاربرد شبه‌کلاس :nth-child برای ایجاد ردیف‌های زوج و فرد با رنگ‌های متفاوت. همچنین به چالش‌های رایج در طراحی جداول واکنش‌گرا اشاره خواهیم کرد. در پایان جلسه، شرکت‌کنندگان توانایی طراحی هر نوع جدولی، از ساده تا پیچیده، را به دست خواهند آورد. در این جلسه به برسی position ها هم پرداختیم و دکمه بازگشت به بالا و همچنین قرار دادن یک تصویر در مختصات معین نسبت به والد خود را نیز برسی کردیم

بالاخره رسیدیم به Flexbox، یکی از قدرتمندترین ابزارهای CSS که زندگی طراحای وب رو متحول کرده! در این جلسه، با یکی از انقلابی‌ترین ماژول‌های CSS آشنا می‌شویم: Flexbox. این تکنولوژی که برای چیدمان در یک بعد (ردیف یا ستون) طراحی شده، به طراحان وب امکان می‌دهد تا به سادگی و با کمترین کد، چیدمان‌های پیچیده و واکنش‌گرا ایجاد کنند. تمرکز این جلسه بر روی کانتینر فلکس به عنوان عنصر والد است. ابتدا با مفهوم کانتینر و آیتم‌های فلکس آشنا می‌شویم و نحوه فعال‌سازی این مدل چیدمان را با display: flex مرور می‌کنیم. سپس به بررسی دقیق ویژگی‌های اصلی کانتینر می‌پردازیم.

در این جلسه، به عمق مفاهیم Flexbox نفوذ می‌کنیم و بر روی رفتارشناسی آیتم‌های فلکس تمرکز می‌کنیم. اگر در جلسه قبل یاد گرفتیم که کانتینر چگونه فضای کلی را مدیریت می‌کند، اکنون نوبت به آیتم‌ها رسیده تا نحوه تقسیم این فضا را مشخص کنند. با درک این سه ویژگی و رابطه‌شان با یکدیگر، می‌توانیم چیدمان‌های پیچیده و واکنش‌گرایی طراحی کنیم که در مواجهه با اندازه‌های مختلف صفحه، رفتاری هوشمندانه از خود نشان می‌دهند. همچنین با ویژگی کوتاه‌نویس flex آشنا می‌شویم که ترکیبی از هر سه ویژگی را در یک خط ارائه می‌دهد.

در این جلسه، یک گام مهم در مسیر تبدیل شدن به یک طراح front-end برمی‌داریم. قصد داریم با تلفیق مفاهیم جلسات گذشته، یک صفحه فروشگاهی کامل طراحی کنیم که شامل نمایش کارت‌های محصول با قابلیت واکنش‌گرایی باشد. این پروژه فرصتی است تا با چالش‌های واقعی طراحی وب مواجه شویم و راه‌حل‌های عملی را تجربه کنیم. در این مسیر: از Flexbox برای چیدمان کارت‌ها در کنار هم و ایجاد طرحی واکنش‌گرا با flex-wrap استفاده می‌کنیم در پایان جلسه، شرکت‌کنندگان قادر خواهند بود یک صفحه فروشگاهی کامل و حرفه‌ای طراحی کنند که در اندازه‌های مختلف صفحه نمایش، رفتاری مناسب از خود نشان دهد.»

در این جلسه، به بررسی یکی از پیشرفته‌ترین و در عین حال ساده‌ترین روش‌های چیدمان در CSS می‌پردازیم: CSS Grid Layout. این تکنولوژی که به طراحان اجازه می‌دهد چیدمان‌های دو بعدی پیچیده را به سادگی آب خوردن پیاده‌سازی کنند، انقلابی در طراحی وب مدرن ایجاد کرده است. در پایان جلسه، شرکت‌کنندگان با ترکیب این مفاهیم قادر خواهند بود چیدمان‌های پیچیده‌ای مانند صفحات مجلات، داشبوردهای مدیریتی و گالری‌های پیشرفته را طراحی کنند.

در این جلسه به برسی پروژه نهایی که در معرفی دوره نشان داده بودیم پرداختیم. این جلسه آخر این دوره می باشد به امید دیدار شما در سایر دوره ها. https://github.com/Malibakhtiarvand/css_toplearn_bakhtiarvand مجدد لینک ریپازیتوری گیت هاب رو ارسال کردم