دفترچه خاطرات یک گروه مطالعه مقدماتی

زمینه سازی

در طول ماه مارس، ششمین چالش جلویی آنلاین Alura Cursos. چالش اجرای یادگیری مبتنی بر چالش است که در آن با یک مشکل درگیر می‌شوید، راه‌حل‌ها را بررسی می‌کنید و در نهایت پروژه خود را به جریان می‌اندازید. همه اینها با اظهار نظر و کمک به پروژه های دانش آموزان دیگر است.

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

در هفته اول از چالش ها، هدف توسعه عناصر صفحه نمایش اسپلش، تجربیات ارائه شده و بخش های جشنواره است. و درست مانند یک کلاس درس، ما چندین دانش آموز داریم که در مورد رویکردهای مختلف در مورد چگونگی ادامه توسعه پروژه بحث می کنند.

گروه مطالعاتی

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

و بیهوده نبود، بیایید مطالبی را که در طول گفتگو آورده شده است برجسته کنیم:

• تفاوت بین تگ چیست؟ <span> ه <div>?

هر دو هیچ ارزش معنایی ندارند، اما در حالی که تگ span کد را با ویژگی نمایش درون خطی ارائه می دهد، تگ div کدی را با ویژگی بلوک نمایش ارائه می دهد.

• آیا تفاوتی در دسترسی بین ساخت منوی همبرگر فقط با HTML و CSS و با جاوا اسکریپت وجود دارد؟

نتیجه این بود که احتمالاً نه، تا زمانی که توسعه دهنده مراقب عناصر انتخابی باشد و در صورت لزوم از ویژگی های مرتبط با دسترسی استفاده کند.

• چه ویژگی هایی کمک می کند تا عناصر من در دسترس باشند؟

به طور خلاصه در مورد “نقش های ARIA” بحث شد. این ویژگی است که اجازه می دهد تا “موقعیت” را به عناصر اختصاص دهیم و معنای معنایی آنها را بهبود بخشد. این رویکرد برای توسعه منوی همبرگر، در مسئله‌سازی نحوه درج تصویر به عنوان انجام شد background-image در یک <span> اما همچنان به دسترسی به آن دکمه احترام می گذارد.

• چگونه استایل های پیش فرض صفحه را حذف کنیم؟

می توانید از فایل استفاده کنید reset.css که از قبل این را آماده تحویل می دهد. هم استفاده از یک فایل css به طور انحصاری برای این کار و هم وارد کردن یک بسته.

همچنین مقاله “reset.css چیست؟” از آلورا که در این مورد نظر می دهد.

• چگونه استایل ها را از یک عنصر حذف کنیم؟

کنجکاوی ارائه شده، ویژگی CSS به نام “همه” است. به طور خلاصه، تمام ویژگی های یک عنصر را دوباره تعریف می کند. می‌تواند مقادیر را به‌عنوان مقادیر اولیه، به‌عنوان ارث رسیده از عناصر والد، یا مقادیر مشخص‌شده در جای دیگر، تنظیم کند.

یک مکان عالی برای مطالعه بیشتر در مورد این ویژگی، اسناد وب MDN است.

• چگونه افکت ها را روی تصاویر مانند Figma قرار دهیم؟

وقتی روی عنصر کلیک می کنیم، معمولاً می توانیم به بازرسی Figma اعتماد کنیم. در مورد طرح کدچلا، ویژگی مورد استفاده عبارت است از mix-blend-mode.

این ویژگی توضیح می دهد که چگونه یک عنصر محتوا باید با عناصر زیر آن در پس زمینه ترکیب شود. چندین مقدار وجود دارد که می توان وارد کرد. در مورد پروژه، آن است multiply. می توانید سایر موارد را در مستندات MDN Web Docs مشاهده کنید.

• چگونه با تصویر پس زمینه بخش ها برخورد کنیم؟

در اینجا بستگی به مورد دارد، ما چندین ویژگی CSS داریم که می توان از آنها استفاده کرد. بعضی از آنها … هستند: background، background-size، background-position ه background-repeat.

بودن background یا background-image جایی که url تصویری که درج خواهد شد، قرار می دهیم background-size با اشاره به اندازه ای که اشغال خواهد کرد، background-position موقعیت شروع تصویر پس زمینه را تنظیم می کند background-repeat چگونگی تکرار تصاویر را تعیین می کند.

با وجود اینکه این املاک را دیده ایم اما مشکلات برخی از دانش آموزان حل نشده است. بنابراین برای گروه بعدی مطالعات ادامه خواهد یافت که در این موضوع ادامه خواهد داشت.

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

با تشکر ویژه از Caio Marcellus که بیشتر پیوندهای موجود در اینجا را ارائه کرد 🙂

لینک های جالب