با سلام خدمت دوستان عزیز در این تاپیک سعی شده نکات و مطالب اساسی و مهم ای که استاد در طی زدن پروژه سعی کردن یاد بدن رو خلاصه طوری در این جا بیارم

نکته1 : معمولا نام پوشه اصلی پروژه امون که همه ی فایل هامون رو در داخل آن میایم و قرار میدهیم رو app میزاریم 

همچنین برای پوشه بندی هم ما یک پوشه میسازیم با نام assets  و تمام فایل‌ها و فولدر‌های پروژه امون برای مثال با نام‌های img و   fonts و css و  js و فایل‌های مربوطه اشون رو در داخل آن‌ها قرار میدهیم 

نکته 2 : ما در داخل پوشه ی css امون 2 تا فایل css مهم باید درست کنیم اولی با نام style-grid-system هستش که استایل‌های مربوط به grid بندی پروژه و utility هامون و reset هامون در آن قرار دارد و دومی با نام style هستش که استایل‌های مربوط به fonts هامون در آن قرار دارد همچنین برای استفاده از ماژولار نوشتن و راحتی در کد نویسی امون باید بیایم و قسمت قسمت فایل‌های css امون در یک فایل جدید با پیشوند _  رو بنویسیم و بعد اون فایل رو به style.css امون اضافه اش بکنیم 

نکته 3 :  کامنت گزاری یکی از اصل‌های همه در حرفه ای کد زدن می‌باشد و چه در داخل کدهای html امون و چه در داخل فایل‌های css امون باید بیایم و از اون استفاده کنیم تا فهم کدهامون بالاتر بره

نکته 4 : برای اضافه کردن فایل‌های css به فایل html امون از تگ link واقع در head استفاده میکنیم که برای اضافه کردن فونت‌های آیکون هامون هم از این راه استفاده میکنیم  همچنین برای اضافه کردن جاوااسکریپت به پروژه امان هم چه در داخل تگ head  و چه در انتهای تگ body  ( جهت بالا بردن سرعت لوود سایت ) با استفاده از تگ script استفاده میکنیم

نکته 5  : برای پر کردن کل عرض سندمون توسط تگ html باید میومدیم هم استایل مربوطه container-fluid که در داخل آن عرض را 100 درصد داده ایم استفاده میکنیم همچنین ما در گرید بندی‌ها باید میومدیم از تگ و استایل row هم طبق نکات سرفصل‌های قبلی استفاده میکردیم و همچنین برای این که المان هامون نیایند و از اول شروع کنند به قرار گیری و ی فاصله ای با دو طرف سند مون داشته باشند باید میومدیم از تگ و استایل مربوط به container استفاده میکردیم 

<div class="container-fluid">
        <div class="row">
            <div class="container">
            </div>
        </div>
 </div>
<style>
.container-fluid {
  width: 100%;
}
.container {
  clear: both;
  max-width: 1200px;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
}
.row::after {
  content: "";
  clear: both;
  display: table;
</style>

نکته 6 : ما موقعی که میایم و از تگ span استفاده میکنیم می‌توانیم در آن از استایل vertical-align استفاده بکنیم 

ما با استفاده از این استایل می‌توانیم هم تگ‌های i  و هم تگ‌های span  رو بیایم و در راستای طول عنصر والدشون جا به جا بکنیم 

نکته 7 : ما با استفاده از استایل direction : ltr میتوانیم بیایم و جهت و چینش قرار گیری المان هامون رو بیایم و قرار بدهیم 

نکته 8 : یک موقع هستش ما میایم و از یک ایکون استفاده میکنیم و میخاهیم بتونیم که رو اون کلیکی انجام بدهیم و این ایکون ما محتوای متنی داخلش نیست برای همین ایکون امون رو در داخل تگ a امون قرار میدهیم  

نکته 9 : ما در طراحی کردن ریسپانسیو امون برای کانتک‌ها معمولا در دیوایس هایی کوچک مثل موبایل یک سری اطلاعات باید پنهان بشوند برای همین باید بیایم و در داخل  xs و s استایل زیر را در آن قرار دهیم

.xs-hidden{
display : none             
}
.s-hidden{
display : none
}

همچنین در اون دیوایسی که میخایم بیاد و نمایش داده بشه از استایل 

.md-visible {
dislpay :inline-block
{

استفاده میکنیم