مدرس: زمان یک چالش کدنویسی هیجان‌انگیز دیگه رسیده
تا بتونی مهارت‌های جدید HTML خودت رو بیشتر تمرین کنی.
و در این چالش، می‌خوام این کامپوننت رو بسازی
برای این کفش Converse All Star.
و اینجا می‌گم کامپوننت
چون می‌خوام تصور کنی این محتوا رو
در زمینه چیزی مثل یک فروشگاه آنلاین.
پس، تصور کن که ما یک فروشگاه کفش داریم
و چند تا کفش مختلف داریم،
و برای هر کدومشون بعد
مثل این کامپوننت کوچیک با این توضیحات وجود داره.
پس، چیزهایی مثل قیمت، توضیح کوتاه،
یک لینک و بعد جزئیات محصول اینجا.
حالا، من دارم این کامپوننت رو می‌سازم، پس دارم این HTML رو می‌نویسم
روی یک پلتفرم کدنویسی خاص به نام CodePen.io.
پس، این یک جای آنلاینه که اساساً می‌تونیم بنویسیم
یا کد بزنیم و بعد اتوماتیک کد رو اجرا می‌کنه
و رندر می‌کنه و همچنین اشتراک‌گذاری کد رو آسون می‌کنه.
حالا، البته، لازم نیست از CodePen استفاده کنی
برای کامل کردن این چالش.
می‌تونی فقط بری سراغ ویرایشگر کدت
و مثلاً
یک فایل HTML جدید اضافه کنی اینجا،
و بعد همه کد رو اونجا بسازی.
دلیل اینکه من این کار رو اینجا در ویدیو نمی‌کنم
اینه که در واقع قراره بسازیم
روی این چالش بعداً.
پس، ما به توسعه این پروژه کوچیک ادامه می‌دیم
در چند بخش بعدی و اونوقت یک آشفتگی ایجاد می‌کنه
از فایل‌های مختلف و کلی کد متفاوت.
اما البته، چون تو داری روی کامپیوتر خودت انجام می‌دی
آسون‌تره برات.
و پس می‌تونی فقط، همونطور که گفتم، اگر بخوای
یک فایل HTML جدید بسازی و اینجا انجام بدی.
اما از طرف دیگه، فکر می‌کنم مفید هم هست
و سودمند برات که کمی یاد بگیری
در مورد CodePen.io و چالش رو اونجا بسازی.
پس، اجازه بدید فقط بهتون بدم
یک دمو خیلی سریع از CodePen.
پس، فقط گوگل کن CodePen رو می‌گم، یا می‌تونی بری
به Codepen.io و بعد فقط باید کلیک کنی اینجا
روی Start Coding.
حالا، شاید در آینده چیزی تغییر کرده باشه
در مورد CodePen، پس در مورد این اینترفیس
اما همیشه می‌تونی یک CodePen جدید بسازی به سادگی
با رفتن به CodePen.io/pen.
پس، دقیقاً مثل این.
پس، اینجا اساساً یک پنل داریم که می‌تونیم HTML بنویسیم
CSS و JavaScript اگر بخوایم،
یا می‌تونیم این پنل‌ها رو جمع کنیم
اگر لازم نداریمشون، که الان همینطوره.
و پس اینجا می‌تونیم HTML خودمون رو بنویسیم.
بیاید فقط یک المنت H1 بنویسیم،
سلام دنیا مثلاً.
و می‌بینی که اینجا دوباره باید دستی
المنت رو ببندیم، اما به هر حال، می‌بینی که بعد از مدتی
نتیجه رو پایین رندر می‌کنه.
پس در این پنل Results
اساساً، می‌تونی نام CodePen خودت رو هم تغییر بدی
خب، بیاید بگیم چالش شماره ۲
که اسم این جلسه آموزشیه، باشه.
و بعدش هم می‌تونید ذخیره‌اش کنید.
حالا برای ذخیره کردن، باید یک حساب رایگان بسازید
ولی من می‌گم واقعاً ارزشش رو داره که این کار رو بکنید.
البته اختیاریه
و مجبور نیستید حتماً اینجا حساب جدید بسازید.
ولی اگه بسازید، خیلی کمک می‌کنه
چون بعدش برای هر CodePen یک URL اختصاصی می‌گیرید
و بعد می‌تونید اون CodePen رو با بقیه به اشتراک بذارید.
پس، اگه بخواید مثلاً یه مثال سریع درست کنید
یه دموی سریع از چیزی که بخواید به یکی نشون بدید
اونوقت می‌تونید بیاید توی CodePen، همونجا درستش کنید
و بعد URL رو کپی پیست کنید
از اینجا وقتی ذخیره‌اش کردید.
راستی
چیزی که تازه گفتم در واقع بهترین راهه
برای به اشتراک گذاشتن کد توی بخش پرسش و پاسخ
در مورد HTML اگه به مشکلی برخوردید، باشه.
خب، دوباره می‌گم احتمالاً ایده خوبیه
که اینجا یه حساب بسازید
چون خیلی کاربردیه
و خیلی خیلی از برنامه‌نویس‌ها از CodePen استفاده می‌کنن.
این یه ابزار خیلی پرطرفداره.
ولی به هر حال، حالا برگردیم به چالش
بذارید چند تا نکته بهتون بدم، باشه.
خب این چیزیه که نتیجه نهایی باید بشه
که می‌خوام شما بسازید.
ولی برای اینکه یه کم بهتون کمک کنم
در واقع باید یه کم کد رو براتون تغییر بدم.
خب، اینجا توی change view، می‌تونیم...
حالا بریم به editor view
که بعدش همون چیزی می‌شه
که قبلاً بهتون نشون دادم.
باشه، خب حالا ما اینجا ویرایشگرها رو داریم بالا
و بعد نتایج رو اینجا پایین.
خب، یه سری چیزها هست که باید توضیح بدم
قبل از اینکه بتونید شروع کنید.
خب، اول از همه، می‌خوام که شما کل این محتوا رو
داخل یک المنت article بپیچید.
و یادتون باشه که چطور گفتم
که المنت article فقط برای چیزی مثل یک مقاله وبلاگی نوشته‌شده نیست
بلکه برای یه شیء فیزیکی هم می‌تونه استفاده بشه.
و خب یه کفش مثل این یه مثال عالیه برای این موضوع.
پس، این یه article هست، و بازم برمی‌گردیم
به مثال فروشگاه آنلاین
که هر کفش یه article جداگونه خواهد بود.
و به این ترتیب برای هر کدوم از کفش‌ها، آره
یه المنت article جدا خواهید داشت، درسته؟
برای هر کدوم از کفش‌ها.
بعد اینجا پایین یه المنت داریم که قبلاً استفاده نکردیم
که این دکمه قابل کلیک کردنه.
و خب اینجا پایین می‌بینید که این المنت button هست
و می‌تونید مستقیم ازش استفاده کنید.
و در نهایت یه چیز دیگه هم هست
که این علامت اینجاست.
خب، این پیکان اینجا.
حالا یادتون بیاد تو پروژه‌مون قبلاً
گفتم که این علامت اینجا
این علامت کپی‌رایت یه HTML entity هست، درسته؟
یادتونه؟
و خب این پیکان اینجا فقط یه HTML entity دیگه‌ست.
و اون موقع هم گفتم
که یه لیست خیلی کاربردی
توی صفحه منابع من هست، که اینه.
حالا، اگه دارید این رو توی آینده می‌بینید
احتمالاً این صفحه خیلی فرق کرده،
ولی فعلاً این چیزیه که من دارم
و مرجع HTML entity که قبلاً گفتم، اینه.
خب، بیاید بازش کنیم.
و بعد کلی چیز
هست که می‌تونید استفاده کنید.
خب، همه این علامت‌های مختلف، و مثلاً اینجا
علامت کپی هست که قبلاً توی VS Code استفاده کردیم.
حالا این یه لیست خیلی بزرگه و من فقط قراره از یه دستور
یا Control F برای جستجو توی صفحه برای پیکان‌ها استفاده کنم.
و اینجاست.
خب، اینجاست.
پس، همه این پیکان‌های مختلف اینجان
و اونی که من استفاده کردم اینه.
پس برای اینکه این پیکان رو توی کد HTML خودتون بذارید
فقط کافیه این HTML entity رو بنویسید، باشه؟
و آره، من این رو می‌ذارم.
اوه، خب در واقع دیگه لازمش نداریم، درسته؟
اوه، و فقط یه چیز دیگه، که تصویره.
خب، شما نمی‌تونید واقعاً تصویر آپلود کنید توی CodePen
مگر اینکه حساب پولی داشته باشید
که فکر کنم منطقی نباشه.
و خب من در واقع تصویر رو براتون روی این URL آپلود کردم.
خب، می‌بینید که این در واقع یه راه دیگه‌ست
برای اضافه کردن تصاویر.
پس، اساساً یه تصویر که از یه URL خاص میاد.
خب، برعکس اینجا
وقتی قبلاً کد می‌نوشتیم
منبع همیشه یه تصویر توی کامپیوتر خودمون بود.
پس، در این مورد
توی پوشه تصاویر و بعد اسم این تصویر.
و اگه دارید این چالش رو روی کامپیوتر خودتون می‌سازید
اونوقت می‌تونید از این تصویر چالش اینجا استفاده کنید.
خب، دقیقاً همونه، باشه؟
ولی اگه دارید مثل من روی CodePen می‌سازید
اونوقت به این تصویر نیاز دارید که توی این URL هست.
خب، این رو یه جوری از صفحه کپی کنید
و برای پروژه خودتون استفاده کنید.
بعد، ابعاد تصویر باید 250 در 250 باشه.
و با این،
فکر کنم همه چیزی که لازم بود بدونید رو گفتم.
خب، برید و این URL رو کپی کنید
و حالا من می‌رم به حالت نمایش تمام‌صفحه
تا بتونید همه‌چیز رو یه جا ببینید.
و حالا شما رو باهاش تنها می‌ذارم
و پنج یا ده دقیقه دیگه برمی‌گردم وقتی آماده شدید.
خب، برگشتیم، و امیدوارم خیلی سخت نبوده باشه
این چالش براتون،
که خیلی دشوار نبوده باشه.
خب، امیدوارم تونسته باشید مهارت‌هاتون رو
یه کم بیشتر تمرین کنید.
و حالا اگه شک یا مشکلی دارید
یا به چیزی برخوردید،
حالا من راه‌حلم رو اینجا بهتون نشون می‌دم.
خب، همون‌طور که گفتم، ما اینجا از article استفاده می‌کنیم،
برای تیتر، من در واقع از h2 استفاده کردم
و نه h1، به خاطر این ایده
که این یه کامپوننت توی یه صفحه بزرگ‌تره، باشه؟
و خب هر صفحه فقط باید یه h1 داشته باشه.
و اگه ما چند تا article داشته باشیم
هر کدومشون فقط باید h2 باشن.
خب، Converse، Chuck، Tailor All Star.
خب، می‌تونستم فقط این رو کپی کنم
از دمو ولی به هر حال،
پس img، و حالا من در واقع می‌رم و کپی می‌کنم،
این URL رو اینجا، توی editor view، باشه.
بعد alt text رو فقط حالا اینجا کپی می‌کنم
و این باید کافی باشه اینجوری، و بعد height
و width روی 250
و ایناهاش، این تصویر ماست.
عالیه، حالا بیاید برگردیم اینجا
و در واقع همه این محتوا رو کپی کنیم.
چرا که نه؟
بعد می‌تونیم فقط
بعد از اون همه‌چیز رو توی المنت خودش بپیچیم.
خب، اینجا ما قیمت رو داریم،
و من همچنان از پاراگراف استفاده می‌کنم
برای هر کدوم از این المنت‌ها.
پس، برای هر کدوم از المنت‌های متنی،
بعد ما ارسال رایگان داریم، باشه؟
حالا، و می‌بینید که CodePen
خودش یه سری تورفتگی‌ها رو اتوماتیک انجام داد
که خیلی کمک می‌کنه.
بعد اینجا، یه پاراگراف دیگه، درسته؟
خب، ما داریم محتوامون رو فرمت می‌کنیم، به جز البته
محتوایی که داخل هیچ المنتی نیست.
خب، یادتون باشه گفتم که HTML به فاصله‌ها یا خط جدید
اهمیتی نمی‌ده، یعنی مثلاً خطوط شکسته
همه‌چیز فقط توی یه خطه.
و به همین دلیل باید محتوامون رو
به‌صورت منطقی ساختاربندی کنیم.
حالا اینجا ما المنت anchor داریم
و در واقع من بهتون نگفتم
که این لینک باید به کجا اشاره کنه.
خب، می‌تونستید یه لینک خالی درست کنید
مثل این اساساً
یا می‌تونستید به وب‌سایت Converse لینک بدید.
خب، بذارید اون لینک رو بگیرم.
احتمالاً converse.com،
و من دارم این‌جوری انجامش می‌دم
یه لحظه می‌بینید چرا؟
و دلیلش اینه که ما در واقع به https:// نیاز داریم.
پس، کل URL.
اینجا لازم نیست.
و حالا، اینجا، بذارید این رو ببندیم.
و اینجا، البته، ما فقط این علامت رو نمی‌خوایم
چون این واقعاً درست نیست.
پس، به جاش می‌خوایم اون HTML entity رو
که امیدوارم استفاده کرده باشید.
خب، این پیکان راست هست.
پس، اینجا مخفف R یعنی right،
و بعد R برای arrow.
و خب واقعاً، این نتیجه‌ایه که گرفتیم.
خب، پس ما همه این بخش رو داریم.
حالا بیاید این لیست رو درست کنیم
و این تیتر، و در نهایت هم این دکمه.
خب من یه h2 از قبل اینجا دارم، درسته؟
و خب برای این یکی
حالا از h3 استفاده می‌کنم، h3، و می‌بندمش.
عالی، و حالا یادتون باشه، برای ساخت یه لیست
که اینجا می‌خوایم، یعنی یه لیست بولت‌دار
ما از المنت unordered استفاده می‌کنیم
یا در واقع المنت unordered list.
و حالا فقط همه این‌ها رو
توی یه المنت LI می‌پیچیم، درسته؟
خب امیدوارم تا اینجای کار
این المنت‌ها رو دیگه بلد باشید،
پس خیلی تمرین کردید، و مطمئنم
که حالا این کار براتون خیلی آسون‌تر شده
بیاید فقط این نقطه رو اینجا حذف کنیم، و تقریباً تمومه.
خب، حالا فقط چیزی که لازم داریم اون دکمه‌ست در آخر.
و همون‌طور که قبلاً بهتون نشون دادم، برای اون
می‌تونیم به‌سادگی از المنت button توی HTML استفاده کنیم.
خب، "اضافه به سبد خرید" و البته اون دکمه.
خب، کلیک کردن روی اون دکمه هیچ کاری نمی‌کنه،
برای این کار به JavaScript نیاز داریم
ولی حداقل اینجا قابل‌مشاهده‌ست، باشه؟
و اینجا می‌بینیم که ۸۰ تا تغییر ذخیره‌نشده داریم.
خب، اگه می‌خواید این تغییرات رو نگه دارید، دوباره
باید CodePen رو ذخیره کنید
و برای این کار یه حساب رایگان بسازید.
اوه، فکر کردم که کلاً با این چالش تموم کردیم
ولی یه تکه کوچیک هنوز باقی مونده.
خب، این متن توی نسخه اصلی در واقع بولد شده.
پس، این تنها تفاوتشه.
خب، این چیزیه که ما جا انداختیم.
و حالا بیاید این مقدار رو اینجا بپیچیم.
خب، کل این متن رو توی یه المنت strong
نه string، strong.
و حالا می‌بینید که توی این مرحله، ما این تگ رو نبستیم
این المنت strong، و حالا کل بقیه محتوا
اساساً strong شده.
پس، حالا همه‌چیز بولد شده چون این المنت هیچ‌وقت تموم نمی‌شه.
ولی البته این یه اشتباه می‌تونه باشه
حتی HTML معتبر هم نیست، ولی مرورگرها
یه جورایی هنوز می‌تونن یه جوری رندرش کنن.
ولی به هر حال، با این کار، ما این چالش رو تموم کردیم
و در واقع بخش مقدمه HTML رو هم تموم کردیم.
پس، مطمئن بشید که همه‌چیزایی که تازه یاد گرفتید رو مرور کنید
تو این بخش، همه مهارت‌های جدیدتون.
و بعد وقتی آماده شدید، می‌تونیم با هم بریم سراغ
بخش بعدی، که اصول اولیه CSS خواهد بود.
و اونجا بالاخره یاد می‌گیرید
چطور واقعاً محتوای خودتون رو استایل کنید
و کاری کنید که یه کم شیک‌تر و قشنگ‌تر به نظر بیاد.
پس، این واقعاً خیلی هیجان‌انگیزه.
و آره، وقتی آماده شدید، بیاید بریم اونجا.
به‌زودی می‌بینمتون.