سلام دوست عزیز😃👋

به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!

مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آن‌ها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript می‌باشند. برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی می‌باشد.

سوالات به گونه‌ای تنظیم شده‌اند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.

رتبه‌بندی بر اساس مجموع امتیازاتی که از سوالات کسب می‌کنید صورت می‌گیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدت‌زمان کمتری حل کرده باشد، رتبۀ بهتری کسب می‌کند.

در صورتی که درمورد سوالی ابهام داشتید، می‌توانید از قسمت «سوال بپرسید» آن را مطرح کنید.

برای کسب اطلاعات بیشتر به لینک‌های زیر مراجعه کنید:

موفق باشید 😉✌

Favorite Games


CSS

  • Grid Layout
  • Pseudo Selectors (:hover, :focus, ...)
  • Pseudo Elements (::before, ::after, ...)
  • Font Management

یکی از قابلیت‌هایی که شرکت Mockstar دارد این است که می‌تواند با استفاده از الگوریتم‌های پیشرفتۀ هوش‌ مصنوعی، بازی‌هایی را که ممکن است برای بازیکنان جذاب باشد، به آن‌ها پیشنهاد دهد.

برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبت‌نام کرد، بازی‌های مورد علاقۀ خود را انتخاب کند. بنابراین از پمبه خواسته شده است تا این قسمت را پیاده‌سازی نماید.

مدیر پمبه از او خواسته است که در کد خود حتماً از grid برای چیدمان المان‌های مختلف استفاده کند. همچنین پمبه به تازگی متوجه شده که چیدمان‌های چگال (dense) بسیار کاربردی هستند و قصد دارد در پروژه، آن‌ها را امتحان کند.

توضیحات سوال🔗

تصاویر خروجی نمونه

عرض 1920px: خروجی نمونه برای عرض 1920px

عرض 1366px: خروجی نمونه برای عرض 1366px

عرض 800px: خروجی نمونه برای عرض 800px

می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، این فیلم را مشاهده کنید.

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌ها
initial-project-04.zip
├── images
│   ├── large
│   │   ├── cod.jpg
│   │   ├── elden-ring.webp
│   │   ├── forza.webp
│   │   ├── god-of-war.jpg
│   │   ├── hellblade.jpg
│   │   ├── rainbow.webp
│   │   ├── rdr2.jpg
│   │   ├── satisfactory.png
│   │   └── spider-man.webp
│   └── small
│       ├── ac.jpg
│       ├── bioshock.jpg
│       ├── blood-born.jpg
│       ├── dark-souls.webp
│       ├── dota2.jpg
│       ├── fortnite.jpg
│       ├── horizon.jpg
│       ├── house-flipper.jpg
│       ├── mortal-kombat.jpg
│       ├── witcher.jpg
│       ├── wow.jpeg
│       └── wow2.jpg
├── dynamic.css
├── index.html
└── static.css
Plain text
راه‌اندازی پروژه
  • ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس فایل index.html را در مرورگر خود باز کنید.

خواسته‌های مسئله🔗

  • استفاده از grid برای ایجاد چیدمان و فاصله بین المان‌ها
  • چیدمان صحیح المان‌ها در ابعاد مختلف صفحه نمایش
  • چگال‌بودن چیدمان المان‌ها
  • اشغال فضای 1x1 توسط المان‌هایی که دارای کلاس large نیستند
  • اشغال فضای 2x2 توسط المان‌هایی که دارای کلاس large هستند
  • عدم نمایش checkbox پیش‌فرض مرورگر
  • نمایش checkbox شخصی‌سازی‌شده
  • بزرگ‌شدن مقیاس تصویر در صورتی که ماوس بر روی آن برود
  • بزرگ‌شدن مقیاس تصویر در صورتی که checkbox فعال باشد
مقدار ویژگی وضعیت المان
1rem فاصله بین فرزندان - ul
1 مقیاس - img
1.025 مقیاس hover img
1.025 مقیاس checked img
محتوا - checkmark
--color--checkmark-background رنگ پس‌زمینه - checkmark
--color--checkmark-foreground رنگ - checkmark
4.8rem اندازه فونت - checkmark
700 وزن فونت - checkmark
وسط المان موقعیت - checkmark

نکات🔗

  • شما تنها مجاز به تغییر در فایل dynamic.css هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
  • توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
  • برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
[your-zip-file-name].zip
└── dynamic.css
Plain text
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.