یادگیری HTML و CSS: چگونه کار خود را در حوزه توسعه وب آغاز کنیم

در این ویدئو شما وب‌سایت اول خود را ایجاد خواهید کرد که یک پست وبلاگ درباره کیک‌های مورد علاقه‌تان است. <title> و <h1> تگ به کاربر می‌گوید که ایده اصلی صفحه چیست. <h1> بیشترین ارتباط را دارد و به همین دلیل بزرگترین اندازه سرعنوان است. معمولاً در هر صفحه فقط یک <h1> وجود خواهد داشت. <h6> کمترین ارتباط را دارد و کوچکترین اندازه سرعنوان است. در این ویدئو یاد گرفتید که چگونه پست وبلاگ اول خود را با استفاده از سرعنوان‌ها و پاراگراف‌ها برای نمایش به کاربر ایجاد کنید. در ویدئوی بعدی، لیست‌هایی به پست وبلاگ خود اضافه خواهید کرد تا محتوای شما خواندن آن را برای کاربران آسان‌تر کند.

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

این اولین چالش برنامه‌نویسی شماست. یک قلم (pen) جدید در Codepen بسازید و سپس پس از اتمام کار، لینک قلم خود را در بحث به اشتراک بگذارید و من آن را ارزیابی می‌کنم. اگر گیر کردید، ویدئوهای قبلی را دوباره تماشا کنید. تا زمانی که این چالش را کامل نکرده‌اید، از تماشای ویدئوی بعدی خودداری کنید!! (تقلب نکنید! :-) ) یک صفحه وب جدید بسازید که عنوان آن: "ماشین‌هایی که روزی مالکشان خواهم بود" باشد. به صفحه وب خود یک عنوان h1 با متن "ماشین‌های رویایی من" بدهید. یک لیست بدون ترتیب از افزودنی‌هایی که برای ماشین‌های خود می‌خواهید، ایجاد کنید. یک لیست مرتب از ماشین‌های رویایی خود بسازید. به هر لیست یک عنوان h2 بدهید. باید شبیه تصویر موجود در ویدئوی آموزشی باشد. دوباره، تا زمانی که چیزی مشابه به تصویر ارائه شده در اینجا نداشته‌اید، به ویدئوی بعدی نگاه نکنید. اگر گیر کردید، به ویدئوهای قبلی نگاهی بیندازید یا در گوگل جستجو کنید. در ویدئوی بعدی، نحوه انجام این کار را به شما آموزش می‌دهم.

بیایید راه‌حل چالش کد اول شما را بررسی کنیم: بهترین روش: تگ بسته را بلافاصله پس از نوشتن تگ باز بنویسید یک صفحه وب جدید با عنوان: "ماشین‌هایی که در روزی مالک آنها خواهم بود" ایجاد کنید. به صفحه وب خود یک عنوان h1 با نوشته "ماشین‌های رویایی من" بدهید یک لیست نامرتب از افزودنی‌هایی که می‌خواهید برای ماشین‌هایتان داشته باشید، ایجاد کنید. یک لیست مرتب از ماشین‌های رویایی خود ایجاد کنید. به هر یک از لیست‌ها یک عنوان h2 بدهید به زبانه دانلودها مراجعه کنید تا لینک چالش کد شماره ۱ من و کد آن را ببینید کار عالی انجام دادید! حال شما می‌دانید HTML چیست و چه ساختاری را استفاده می‌کند. همچنین متوجه شدید که چگونه از عناوین و هر دو نوع لیست مرتب و نامرتب برای ساختار دادن به صفحه وب خود استفاده کنید تا محتوای خود را برای کاربران آسان‌تر مرور کنید. شما در زمانی بسیار کوتاه پیشرفت زیادی کرده‌اید. در ویدیوی بعدی خواهید آموخت که چگونه از تگ‌های درون‌خطی برای جان بخشی به پاراگراف‌های خود استفاده کنید.

در این ویدئو شما یاد می‌گیرید که چگونه از تگ‌های اینلاین برای زنده کردن پاراگراف‌های خود استفاده کنید. آن‌ها را تگ‌های اینلاین می‌نامند زیرا می‌توانید آن‌ها را در یک خط استفاده کنید. نمونه‌ها: <strong> <em> <span> می‌توانید فهرستی از تگ‌های اینلاین بیشتر را با کلیک بر روی لینک در تب دانلود در سمت راست نوار کناری پیدا کنید. در این ویدئو شما یاد گرفتید که تگ‌های اینلاین چیستند و چگونه از آن‌ها برای زنده کردن پاراگراف‌های خود استفاده کنید. در ویدئوی بعدی شما درباره تگ‌های خالی و اینکه چگونه با تگ‌های معمولی HTML تفاوت دارند، یاد خواهید گرفت.

در این ویدیو شما تفاوت بین تگ‌های خالی و دیگر تگ‌های HTML که تا به حال دیده‌اید را یاد خواهید گرفت. تگ‌های خالی نیازی به تگ بسته ندارند زیرا نمی‌توانند هیچ چیزی را درون خود داشته باشند. مثال‌ها: <input /> <img /> در تب دانلودها شما لینکی خواهید یافت که متداول‌ترین تگ‌های خالی را به شما نشان می‌دهد. در این ویدیو یاد گرفتید که تگ‌های خالی چگونه با تگ‌های معمولی HTML متفاوت هستند. در ویدیوی بعدی شما با ویژگی‌های HTML و نحوه گنجاندن آن‌ها در تگ‌های HTML خود آشنا خواهید شد.

در این ویدیو یاد خواهید گرفت که چگونه ویژگی‌های HTML را برای افزایش کارایی تگ‌های HTML که تاکنون استفاده کرده‌اید، به کار ببرید. برخی از تگ‌های ما به داده‌های متا اضافی نیاز دارند. ویژگی‌ها این داده‌های متا را برای تگ‌های HTML ما فراهم می‌کنند. مثال: meta description=" " img src=" " a href=" " در این ویدیو یاد گرفتید که چگونه می‌توانید داده‌های متا را به تگ‌های HTML خود با استفاده از ویژگی‌ها ارائه دهید. در ویدیو بعدی درباره کلاس‌های HTML و اینکه چگونه می‌توانید از آن‌ها برای سازمان‌دهی تگ‌های خود استفاده کنید، خواهید آموخت.

در این ویدیو شما یاد خواهید گرفت که چگونه کد HTML خود را با استفاده از کلاس‌ها طبقه‌بندی کنید. سه دلیل اصلی برای استفاده از کلاس‌ها: 1.) کد شما برای کسی که برای اولین بار آن را می‌خواند، معنا خواهد داشت. این موضوع برای کار کردن با چند نفر روی یک پروژه وب‌سایت خوب است. 2.) کلاس‌ها درک آنچه را که به آن نگاه می‌کنید، اگر چندین ماه به کد خود نگاه نکرده‌اید، آسان‌تر می‌کنند. با این حال، به کلاس‌های خود نام خاصی بدهید، نه نام‌های مبهم. مثال: برای ناوبری بالایی یک کلاس با نام "top-nav" به جای "nav" تعیین کنید، زیرا شما همچنین می‌توانید یک ناوبری پاورقی و ناوبری نوار کناری داشته باشید. همچنین شیوه نامگذاری استفاده از خط تیره بین واژه‌ها است. 3.) کلاس‌ها تغییرات در مکان‌های متعدد در صفحه وب را ممکن می‌سازند. این به معنی تولید سریع‌تر است که همان چیزی است که ما می‌خواهیم! به همین دلیل از Codepen استفاده می‌کنیم! مثالی از سازماندهی با استفاده از یک کلاس HTML: پست وبلاگ گروه بندی سرعنوان‌ها گروه بندی محتوا اینجا ما نام‌های خاصی برای کلاس‌های خود داریم تا بدانیم به طور دقیق در نگاه اول چیست. ما همچنین می‌توانیم همزمان سبک هر دو سرعنوان را از طریق CSS تغییر دهیم، به جای اینکه مجبور باشیم به طور فردی این کار را انجام دهیم. در ویدیو بعدی، شما گروه‌بندی تگ‌های HTML خود را با استفاده از IDهای HTML یک مرحله بیشتر خواهید برد.

در این ویدیو شما ادامه خواهید داد به یادگیری نحوه گروه بندی تگ‌های HTML خود با استفاده از IDهای HTML. کلاس‌ها در چندین مکان در وبسایت شما استفاده می‌شوند، مانند آنچه در ویدیو قبلی دیدیم. اگر چندین پست وبلاگ دارید، باید کلاس "blog-post" را در چندین مکان در وبسایت خود داشته باشید. IDها منحصر به فرد هستند و فقط یک بار استفاده می‌شوند. بنابراین اگر دو پست وبلاگ دارید، پست اول یک ID به شماره 1 و پست دیگر یک ID به شماره 2 خواهد داشت. این برای مواقعی که می‌خواهید سبک پست وبلاگ با ID شماره 1 را تغییر دهید اما نه پست وبلاگ با ID شماره 2 اهمیت دارد. حال شما می‌دانید که از کلاس‌های HTML برای گروه‌بندی محتویات مرتبط و از IDهای HTML برای محتویات منحصر به فرد استفاده می‌کنید. در ویدیو بعدی شما اولین آزمون خود را خواهید گرفت. موفق باشید!

در این ویدیو شما به یادگیری نحوه قرار دادن تصاویر در صفحه وب خود ادامه خواهید داد این ویژگی‌ها را مرور کنید: src alt برای اینکه موتورهای جستجو بتوانند آن را شناسایی کرده و در تصاویر گوگل رتبه‌بندی کنند مثال را نشان بدهید تصاویر بخش مهمی از یک صفحه وب هستند زیرا تصاویر توجه کاربر را بیشتر از متن جلب می‌کنند. موتورهای جستجو نیز به همین دلیل بر تصاویر تأکید دارند، زیرا موتورهای جستجو به نیازهای کاربران خود توجه می‌کنند و می‌خواهند بهترین تجربه را برای آن‌ها فراهم کنند. در ویدیو بعدی شما یاد خواهید گرفت که چگونه تصویر خود را به یک لینک تبدیل کنید.

در این ویدئو شما یاد خواهید گرفت که چگونه لینک‌هایی برای صفحه وب خود ایجاد کنید تا قابلیت استفاده را افزایش داده و وب‌سایت خود را در نتایج موتورهای جستجو با رتبه بالاتری قرار دهید. تگ : برای مثال از google.com به عنوان لینک استفاده کنید href target="blank" کاربران را در سایت شما نگه می‌دارد، که برای رتبه‌بندی وب‌سایت شما بهتر است و از آنجا که کاربر همچنان سایت شما را فعال دارد زمانی که می‌خواهد دوباره به آن برگردد. لینک داخلی لینکی که به صفحه‌ای در وب‌سایت شما اشاره می‌کند لینک خروجی لینکی که به صفحه‌ای خارج از وب‌سایت شما اشاره می‌کند متن لنگر متن مورد استفاده در بین تگ‌های <a></a> شما حالا می‌دانید چگونه لینک‌هایی به بقیه صفحه وب خود یا به سایر مقالات و وب‌سایت‌هایی که می‌توانند تجربه کاربر شما را غنی‌تر کنند، ایجاد کنید. در ویدئوی بعدی شما به چالش دوم برنامه‌نویسی خود خواهید پرداخت!

گرفتن عکس و سلفی با غذا یک حسینی در اینستاگرام است که به‌ویژه مورد علاقه دختران نوجوان قرار دارد. امروز شما در این فعالیت شرکت می‌کنید. یک فهرست مرتب از ۴ نوع غذای مورد علاقه خود تهیه کنید اولین مورد فهرست را قوی کنید دومی را برجسته کنید سومی را با متن قرمز با استفاده از span نشان دهید (از مستندات یا جستجوی گوگل استفاده کنید!) برای مورد چهارم به جای متن از یک تصویر استفاده کنید. فقط از تصاویر گوگل برای پیدا کردن یک عکس از آن استفاده کنید یا یک عکس از وعده غذایی خود با دوربین گوشی خود بگیرید به هر عنصر در فهرست یک شناسه از نام خود بدهید تمام موارد غذایی که متن هستند را گروه‌بندی کرده و به آن کلاس food-list بدهید لطفاً قلم را در بخش بحث به اشتراک بگذارید تا بتوانم شما را ارزیابی کنم، همراه با یک چیزی که در این چالش یاد گرفتید. در ویدئوی بعدی شما را راهنمایی می‌کنم که چطور این چالش را انجام دادم

Here is the translation of the provided text into Persian: از لینک اینستاگرام برای سلفی من برای کسب امتیاز اضافی استفاده کنید! یک فهرست مرتب از ۴ نوع غذای مورد علاقه خود تهیه کنید اولین مورد در فهرست را قوی کنید دومین مورد را برجسته کنید سومین مورد را با استفاده از span به رنگ قرمز نمایش دهید (از مستندات یا جستجوی گوگل استفاده کنید!) برای مورد چهارم، به جای متن از تصویر استفاده کنید. فقط از تصاویر گوگل برای پیدا کردن یک تصویر از آن استفاده کنید یا با دوربین تلفن خود از وعده غذایی خود عکس بگیرید به هر عنصر در فهرست یک شناسه از نام خود بدهید تمام آیتم‌های غذایی را در یک گروه قرار داده و به آن یک کلاس food-list بدهید لینک قلم من را در تب دانلود در سمت راست قرار دادم. نگاهی به آن بیندازید و با قلم خود مقایسه کنید. در ویدئوی بعدی یاد خواهید گرفت که چگونه فرم‌هایی ایجاد کنید که بتوانند اطلاعات کاربران شما را ضبط کنند.

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

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

در این ویدیو شما یک صفحه وب با استفاده از تگ‌های معنایی ایجاد خواهید کرد که این یک ویژگی از HTML5 است. شما می‌دانید که یک وب‌سایت از HTML5 استفاده می‌کند اگر ابتدای سند با <!DOCTYPE html> شروع شود. HTML5 اکنون توسط اکثر مرورگرهای مدرن پشتیبانی می‌شود، بنابراین خوب است که هر وقت ممکن است از تگ‌های معنایی استفاده کنید تا به خزنده‌ها کمک کند که صفحه وب شما را بهتر درک کنند. HTML معنایی، ایجاد شده با ترتیب مناسب، استفاده از تگ صحیح برای موقعیت صحیح است، به عنوان مثال، تگ مقاله برای مقاله. پست وبلاگ کیک را با استفاده از تگ‌های معنایی بازنویسی کنید. به تب دانلودها نگاهی بیندازید تا پیوندی که تمام تگ‌های معنایی موجود برای شما را نشان می‌دهد پیدا کنید. حالا می‌دانید که چگونه تگ‌های معنایی مانند مقاله و پاورقی را به صفحه وب خود اضافه کنید تا بتوانید راحت‌تر طراحی کنید و همچنین خزنده‌های موتور جستجو بتوانند صفحه وب شما را بهتر درک کنند تا امتیاز صفحه وب شما افزایش یابد. در ویدیوی بعدی شما سومین چالش کدنویسی خود را دارید، جایی که یک فرم ایجاد می‌کنید تا ایمیل کاربر را بگیرید و سپس آنها را متقاعد کنید که با نمایش مزایای جذب شما به تیم توسعه وب آنها، ثبت‌نام کنند.

برای چالش کدنویسی سوم شما یک فرم ورودی بسازید که با یک دکمه از کاربر ایمیل او را بپرسد یک جدول ۳x۳ ایجاد کنید که مزایای حضور شما در تیم توسعه وب آنها را توضیح دهد قلم خود را ذخیره کنید و آن را در بخش بحث ارسال کنید تا من بتوانم آن را همراه با یکی از چیزهایی که یاد گرفتید نمره‌گذاری کنم. در ویدئوی بعدی شما را راهنمایی می‌کنم که چگونه چالش را حل کردم.

در این ویدیو، من شما را با راه حل چالش کد شماره ۳ آشنا می‌کنم. یک فرم ورودی با دکمه‌ای ایجاد کنید که از کاربر ایمیل او را درخواست کند یک جدول ۳x۳ بسازید که مزایای پیوستن شما به تیم توسعه وب آن‌ها را توضیح دهد برای بونوس، از بوت‌استرپ برای استایل دادن به جدول و فرم استفاده کنید من لینک پن خود را در تب دانلودها گذاشتم. نگاهی به آن بیندازید و آن را با کار خود مقایسه کنید. در ویدیوی بعدی، آنچه را که درباره HTML آموخته‌اید، مرور می‌کنم.

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

در این ویدیو شما از کلاس‌های CSS استفاده می‌کنید تا رنگ یک پاراگراف را سبز کنید و رنگ پاراگراف دیگری را آبی کنید. کلاس‌های CSS با کلاس‌های HTML کار می‌کنند. مثال: به هر پاراگراف یک کلاس بدهید برای آن کلاس‌های HTML یک کلاس CSS ایجاد کنید کلاس CSS همیشه با یک نقطه شروع می‌شود. پاراگراف‌ها را بر این اساس استایل دهید نکته جانبی: می‌توانید از شناسه‌ها (ID) استفاده کنید، اما همیشه می‌خواهید از کلاس‌ها استفاده کنید مگر اینکه به طور قطع نیاز به استفاده از یک شناسه داشته باشید در اینجا می‌بینید که می‌توانید عناصر مختلف را در صفحه وب خود با استفاده از HTML و کلاس‌های CSS استایل دهید. در ویدیوی بعدی شما درباره استفاده از divها برای استایل‌دهی به وب‌سایت خود یاد خواهید گرفت.

در این ویدیو شما یاد خواهید گرفت که چگونه از div برای ایجاد کانتینرها در وب‌سایت‌تان استفاده کنید که به شما قدرت بهتری برای مدیریت در استایل دهی CSS خواهد داد. Div یک کانتینر است، همچنین "تقسیم‌کننده" همه چیز درون آن کانتینر قوانین مربوط به خود را دریافت می‌کند مگر اینکه قاعده خاص‌تری برای آن وجود داشته باشد (در مورد آن در درس بعدی درباره سلسله مراتب CSS بیشتر صحبت خواهیم کرد) ابزار عالی برای هماهنگ کردن محتوا در یک صفحه تا به نظر یکنواخت بیاید حالا می‌دانید که چگونه div ها را به کد HTML خود اضافه کنید تا بتوانید عناصر خود را به صورت یکنواخت استایل دهید. شما همچنین دیدید که div یک کانتینر است و همه چیز درون آن کانتینر قواعد استایل داده شده به آن کانتینر را دریافت می‌کند. در ویدیوی بعدی شما سلسله مراتب CSS را یاد خواهید گرفت و اینکه چگونه این سلسله مراتب تعیین می‌کند که کدام قوانین به عناصر خاصی در وب‌سایت اعمال می‌شود.

در این ویدیو شما خواهید آموخت که چگونه سلسله‌مراتب در CSS تعیین می‌کند که کدام عناصر توسط قواعد خاص CSS سبک‌دهی می‌شوند. قواعد خاص‌تر، قواعد عمومی‌تر را لغو می‌کنند مثال: یک شناسه (id) هر قاعده دیگری را لغو خواهد کرد زیرا خاص‌ترین است اکنون می‌توانید ببینید که چرا خاص بودن (specificity) نه تنها در نام‌گذاری عناصر شما مهم است، بلکه در اعمال استایل‌ها به آنها نیز اهمیت دارد. در ویدیو بعدی شما خواهید آموخت که چگونه با استفاده از قواعد CSS متن را سبک‌دهی و تنظیم کنید.

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

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

بیایید به راه‌حل چالش کدنویسی شماره ۴ نگاهی بیندازیم: دو پاراگراف ایجاد کنید یکی را به چپ و دیگری را به راست تراز کنید به پاراگراف سمت چپ رنگ پس‌زمینه سبز بدهید به پاراگراف سمت راست رنگ فونت آبی بدهید خانواده فونت هر دو پاراگراف را بهTahoma تغییر دهید از کلاس‌ها استفاده کنید. از انتخاب آنها با استفاده از p خودداری کنید چون این یک عمل ناپسند است این عمل ناپسند است زیرا شما همیشه می‌خواهید تا حد امکان خاص باشید. این مانند دادن یک پوشه در یک کمد بایگانی برای تمام مدارک شماست. خاص بودن از اشتباهات ناچیز جلوگیری کرده و در درازمدت وقت شما را صرفه‌جویی می‌کند. لینک به خودکار من را در تب دانلودها بررسی کنید و آن را با کد خود مقایسه کنید. در ویدیوی بعدی با اندازه‌های مختلف مورد استفاده در CSS آشنا خواهید شد.

در این جلسه شما با اندازه‌گیری‌های مختلفی که برای استایل دادن به عناصر در CSS استفاده می‌شود، آشنا خواهید شد. ما فقط اندازه‌گیری‌های پرکاربردتر را بررسی خواهیم کرد: پیکسل ای‌ام‌ها ای‌ام‌ها پاسخگو هستند - آنها به اندازه‌ی کاراکتر 'm' برای مرورگری که متن را نمایش می‌دهد، سازگار می‌شوند. پیکسل‌ها همیشه ثابت هستند. درصد (%) نیز گاهی اوقات استفاده می‌شود، اما هرگز برای متن. معمولا برای تنظیم کردن کانتینرها، مانند دیوها و تصاویر، برای تطابق با عرض‌های مختلف صفحه و مرورگر استفاده می‌شود. من مستندات بیشتری در مورد اندازه‌ی CSS در زیر اضافه کرده‌ام. در ویدیوی بعدی شما با جعبه‌ها در CSS آشنا خواهید شد که شامل پدینگ و مارژین‌های شناخته شده است.

در این ویدیو شما یاد خواهید گرفت که چطور با استفاده از CSS جعبه‌ها را ایجاد و مدیریت کنید. جعبه‌ها شامل تمام کانتینرها، تصاویر و غیره هستند. ما می‌خواهیم از مدل border-box استفاده کنیم تا مجبور نباشیم اندازه جعبه را با احتساب padding و border محاسبه کنیم. content-box مدل پیش‌فرضی است که border و padding را خارج از جعبه قرار می‌دهد نه داخل آن. این کار مدیریت آن را دشوار می‌کند. پرچم را باز کنید و با padding و margin‌ها بازی کنید. با جعبه‌ها آشنا شوید زیرا اکثر CSS به ایجاد و مدیریت جعبه‌ها مربوط می‌شود. حالا می‌دانید چطور جعبه‌های CSS را ایجاد و مدیریت کنید و چرا ما ترجیح می‌دهیم از مدل border-box استفاده کنیم، زیرا این مدل محاسبه‌ای که در غیر این صورت باید انجام دهیم را از بین می‌برد وقتی که padding و border باعث بزرگتر شدن جعبه می‌شوند. در ویدیو بعدی شما یاد خواهید گرفت که چطور جعبه‌های خود را روی وب‌سایت خود شناور کنید تا بتوانید تصاویر خود را در یک خط قرار دهید به جای اینکه روی هم انباشته شوند.

در این ویدیو شما یاد خواهید گرفت که چگونه عناصر را در وب‌سایت خود شناور کنید تا جریان مستندات را در وب‌سایتتان بهبود ببخشید. عناصر که بر روی هم قرار دارند می‌توانند با شناور کردن در یک خط قرار بگیرند. float: left; float: right; Clearfix باعث می‌شود که کانتینر والد بتواند کانتینرهای فرزند خود را در بر گیرد. overflow: auto; پاک کردن یک شناوری مانند ایجاد یک خط جدید برای عناصر در صفحه است. clear: both; قلم را باز کنید و با شناور کردن عناصر بازی کنید. حالا شما می‌دانید چگونه عناصر را در صفحه شناور کنید تا وب‌سایتتان برای کاربر جذاب‌تر به نظر برسد. در ویدیوی بعدی شما چالش کد بعدی خود را کامل خواهید کرد، که تماماً درباره دستکاری جعبه‌های CSS است. خوش بگذرانید!

یک باکس با عرض ۳۰۰ پیکسل و ارتفاع ۶۰۰ پیکسل ایجاد کنید. به آن باکس یک حاشیه‌ی ۵ پیکسلی و رنگ مشکی و متصل بدهید. به آن یک padding (فاصله داخلی) ۲۰ پیکسلی بدهید. باکس را به‌صورت افقی در مرکز صفحه قرار دهید. یک باکس دیگر درون باکس اول ایجاد کنید که ارتفاع آن ۵۰ درصد و عرض آن ۹۰ درصد باشد. به آن یک حاشیه ۱ پیکسلی مشکی و متصل بدهید. باکس را در مرکز پدرش (باکس اول) تراز کنید. به باکس مقداری متن بدهید و آن را به مرکز تراز کنید. به متن یک padding بدهید تا در بالای آن فشرده نشود. دو باکس دیگر ایجاد کنید و آن‌ها را درون باکس اول قرار دهید به آن‌ها ارتفاع و عرض ۵۰ درصد بدهید. به آن‌ها یک حاشیه ۱ پیکسلی مشکی و متصل بدهید. آن‌ها را به‌صورت افقی در مرکز پدرشان قرار دهید. به آن‌ها متن بدهید و آن را به مرکز تراز کنید. تبریک به خاطر اتمام این چالش! در ویدیوی بعدی، بیشتر در مورد موقعیت‌‌یابی عناصر در CSS یاد خواهید گرفت.

در این ویدیو شما خواهید آموخت که چگونه عناصر مختلف را هر جا که می‌خواهید در وب‌سایت خود قرار دهید. استاتیک - پیش‌فرض، بدون موقعیت‌یابی نسبی - موقعیت نسبت به صفحه ثابت - عنصر در آن فضا ثابت است، چه اتفاقی بیفتد مطلق - عنصر در فضای کانتینر والد خود ثابت است، چه اتفاقی بیفتد من شما را تشویق می‌کنم که پنس (pen) من را هارد کنید و با این مورد بازی کنید تا درک خوبی از موقعیت‌یابی عناصر پیدا کنید. موقعیت‌یابی یک مهارت حیاتی در توسعه وب است. در جلسه بعد شما یک آزمون درباره آنچه تاکنون درباره جعبه‌های CSS و موقعیت‌یابی یاد گرفته‌اید، خواهید داشت. موفق باشید!

کار خوبی در اتمام این چالش! چطور بودید؟ در گروه بحث به من اطلاع دهید. در ویدیو بعدی یاد خواهید گرفت که چطور وب‌سایت خود را با استفاده از کوئری‌های رسانه‌ای ریسپانسیو کنید.

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

در این ویدیو شما خواهید آموخت که چگونه از کوئری‌های رسانه‌ای (media queries) برای واکنش‌گرایی وب‌سایت‌های خود استفاده کنید. max-width برای عرض مشخص شده و کمتر است "این عنصر می‌تواند به این عرض یا کمتر باشد" min-width برای عرض مشخص شده و بیشتر است "این عنصر می‌تواند به این عرض یا بیشتر باشد:" شما می‌توانید از درصدها برای واکنش‌گرایی عناصر وب‌سایت خود استفاده کنید آن‌ها به اندازه صفحه‌نمایش که وب‌سایت را مشاهده می‌کند، تطبیق می‌یابند. برخی از قوانین و کوئری‌های رسانه‌ای خود را به پن اضافه کنید. در ویدیوی بعدی شما با فریم‌ورک‌های CSS، زمان استفاده از آن‌ها و چگونگی استفاده آشنا خواهید شد.

در این جلسه شما با فریمورک‌های CSS آشنا خواهید شد. فریمورک‌ها برای تسریع در توسعه استفاده می‌شوند زیرا امکانات زیادی را به صورت آماده ارائه می‌دهند و شما نیازی به شروع از صفر ندارید. نگاهی به برخی از گزینه‌های خود بیندازید و به ورق‌های سبک CSS و فایل‌های JS که ارائه می‌دهند، نگاهی کنید. واقعاً کارآمد! در جلسه بعدی یک یادداشت سریع CSS و نکات کلیدی خواهید گرفت.

بخش ۱

بخش ۲

بخش ۳

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

در این ویدیو یاد می‌گیرید که چگونه با استفاده از کانتینرها اسکلت‌بندی ایجاد کنید و بخش‌هایی برای ناوبری، محتوای بدنه و غیره بسازید.

در این ویدیو شما یاد می‌گیرید که چگونه نوار ناوبری بالای وب‌سایت بی‌بی‌سی انگلستان را بازآفرینی کنید.

در این ویدیو یاد می‌گیرید که چگونه بخش نوار عنوان اخبار را بازسازی کنید.

در این ویدئو شما یاد می‌گیرید چگونه نوار ناوبری دسته‌بندی را بازسازی کنید.

در این ویدیو یاد می‌گیرید که چگونه نوار ناوبری موقعیت را بازسازی کنید.

در این ویدیو ما حاشیه‌ها را در نوار ناوبری موقعیت اصلاح می‌کنیم.

در این ویدیو شما یاد می‌گیرید که چگونه بخش محتوا را دوباره بسازید.

در این ویدیو یاد می‌گیرید که چگونه نوار کناری رسانه را در سمت راست وب‌سایت بی‌بی‌سی بریتانیا بازسازی کنید.

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

برو تمرین کن