بیایید با نگاه کردن شروع کنیم
به پروژه‌ای که در طول این بخش قصد داریم طراحی کنیم
و همزمان با یادگیری
تمام قوانین مختلف طراحی وب
درست مثل بخش‌های دیگر
اولین چیزی که نیاز داریم گرفتن فایل‌های شروع‌کننده است
از کدی که در ابتدای کار دانلود کردیم
پس اینجا در فایل‌های شروع‌کننده
ما اکنون به این پوشه‌ی design نیاز داریم
پس برای اولین بار
این پروژه روی پروژه قبلی ساخته نمی‌شود
پس واقعاً باید وارد فایل‌های شروع‌کننده خود شوید
و این پوشه را بردارید
سپس آن را هر جایی که در حال کار هستید جای‌گذاری کنید
برای من روی دسکتاپ است
بیایید این را ببندیم
و سپس یک پنجره جدید VS Code باز می‌کنم
خوب سپس می‌توانید روی open اینجا کلیک کنید
یا از نوار منو هم می‌توانید از گزینه open استفاده کنید
پس از دسکتاپ ما به پوشه‌ی design نیاز داریم
و این اکنون پوشه پروژه جدید ماست
پس اینجا از قبل یک فایل indexhtml داریم
و stylecss هم همراه با چند تصویر
که برای این پروژه نیاز داریم
حال چیزی که در این پروژه متفاوت است این است
که این بار من همه HTML مورد نیاز
برای این پروژه را از قبل نوشتم
پس اساساً کاری که در طول این بخش انجام می‌دهیم
تنظیم CSS است
و همچنین یادگیری برخی ویژگی‌های جدید CSS
برای اعمال قوانین مختلف طراحی وب
اما حالا بیایید با کلیک روی go live نگاهی بیندازیم
و این شکل پروژه ماست
در ابتدای کار
پس واقعاً فقط یک صفحه وب ساده است همه چیز سیاه
و سفید و تمام کاری که من اینجا انجام دادم
اعمال کمی حاشیه بود
و همچنین ساختار صفحه را آماده کردم
پس کاری که بعد از این ویدئو می‌خواهم انجام دهید
این است که 10 تا 15 دقیقه وقت بگذارید و این HTML
و CSS که نوشتم را تحلیل کنید
برای مثال اینجا همان ریست جهانی داریم مثل همیشه
ما یک عنصر container داریم و همچنین برخی CSS Grid
روی این صفحه اعمال شده است
برای مثال اینجا سه ستون داریم
و برای آن از کلاس grid-3-cols استفاده کردیم
پس این یکی اساساً یک grid
با سه ستون است داخل این بخش
پس بله این فقط یک grid با سه ستون است
همانطور که گفتم
به همین دلیل است که repeat سه بار یک fr داریم
مثل آنچه در بخش قبلی یاد گرفتیم
سپس در header یک grid دیگر وجود دارد
با این دو عنصر در کنار هم
و بله همانطور که گفتم حاشیه‌های زیادی
از قبل اعمال شده‌اند اما اساساً همین است
پس دوباره فکر می‌کنم ایده خوبی است
که این CSS و HTML را تحلیل کنید
این عنصر اینجا عنصری است که فکر می‌کنم قبلاً استفاده نکردیم
اما اساساً خودش می‌گوید چیست
پس این فقط یک عنصر semantic است
که یعنی یک section است
برای مثال این یکی یک section خواهد بود
سپس این یکی و تمام اینجا
پس این‌ها بخش‌هایی در صفحه وب هستند
و ما یک عنصر در HTML داریم
که دقیقاً section نام دارد
پس یک بار دیگر می‌توانستیم از یک div عمومی استفاده کنیم
اما div هیچ معنایی ندارد و section دارد
پس این انتخاب بهتری است
سپس یک عنصر دیگر که مهم است عنصر span است
این اینجا همین جا
همانطور که گفته شده span در واقع
فقط یک عنصر inline عمومی است که برای متن استفاده می‌کنیم
اما هیچ معنایی ندارد
پس کمی شبیه عنصر div است
که آن هم معنایی ندارد
اما برای عناصر inline
پس وقتی فقط به یک عنصر کوچک برای متن نیاز داریم
همیشه از عنصر span استفاده می‌کنیم
خوب و سپس اینجا عنصر blockquote نیز وجود دارد
که قبلاً درباره آن صحبت نکردیم
و این معمولاً برای نوشتن یک نقل‌قول استفاده می‌شود
پس نقل قول کسی در اینجا
یعنی نوشتن نظر یا توصیه اوست
پس اساساً Mary و Sarah چیزی درباره این صندلی‌ها می‌گویند
و برای آن می‌توانیم از blockquote استفاده کنیم
پس دوباره کمی وقت بگذارید و
تمام این کد را بررسی کنید و سعی کنید آن را بفهمید
و دوباره اگر همه چیز را 100٪ نفهمیدید
کاملاً مشکلی نیست زیرا تمرکز اصلی
این بخش واقعاً روی کد نیست حداقل نه
خیلی زیاد روی HTML بلکه روی قوانین طراحی وب است
و راهنمایی‌هایی که قرار است یاد بگیریم
و درباره آن صحبت کنیم نتیجه نهایی این پروژه
این نخواهد بود بلکه این خواهد بود
پس این کاملاً متفاوت به نظر می‌رسد درست است؟
یک نوع قلم متفاوت دارد پس فونت متفاوت
یک فونت مدرن‌تر
رنگ سبز هم دارد و متن
همچنین سیاه نیست و قوانین زیادی اعمال شده است
که تایپوگرافی را بسیار زیبا نشان می‌دهد
سپس این کارت‌ها را داریم با کمی سایه
و همه چیز به خوبی گرد شده است
و رنگ تأکیدی پایین صفحه هم داریم
پس بله این اساساً اعمال برخی از راهنمایی‌هاست
که در طول این پروژه یاد می‌گیریم و این شکل است 108ل
همانطور که در ابتدای کار به نظر می‌رسد
پس امیدوارم هیجان‌انگیز به نظر برسد
و اکنون بیایید واقعاً شروع کنیم
به یادگیری طراحی وب