مباحث انتقال تجربه این سرفصل
با سلام خدمت دوستان عزیز در این تاپیک سعی شده نکات و مطالب اساسی و مهم ای که استاد در طی زدن پروژه سعی کردن یاد بدن رو خلاصه طوری در این جا بیارم
نکته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
{استفاده میکنیم
نکته 10 : برای جلوگیری از خاصیت پیش فرض لینک در داخل تگ a باید بیایم و در داخل پراپرتی href اون عبارت
;(0)javascript : void استفاده بکنیم
<a href="javascript:void();" class="icon"><i class="fas fa-bars"></i></a>
نکته 11 : معرفی سلتور که به ما میگوید به غیر از فرزند اولی بیا و بقیه رو انتخاب کن
.nav a:not(:frist-child){}
نکته 12 : اگر ما یک موقع خواستی که تگ های a امون بیان و خاصیت بلاکی بگیرند و زیر هم قرار بگیرند باید به اون ها استایل های زیر رو باهم بدهیم
float : none
display : block
همچنین می توانیم با استاده از خاصیت text-align قرار گیری اون ها رو کنترل کنیم
نکته 12 : برای اضافه شدن نام یک کلاس به وسیله کلیک برای درست کردن منوی navbar باید در داخل فایل جاوااسکریپتی امون بیایم و بنویسیم
function myFunc(){
var x = document.getElementById("mynav");
if ( xclassName === "nav" ){
x.className = " responsive"
} else {
x.className = " nav"
}
}و بعد در داخل تگ a مربوط به اون باید بیایم و از پراپرتی onclick استفاده بکنیم و نام تابع بالایی رو در داخل آن قرار بدهیم
نکته 13 : معرفی نوع position : sticky که برای اسکرول و چسبیدن اوکی میکند و مقدار top ان را بهتر هستش برابر با 0 قرار دهیم
نکته 14 : یک موقع هستش ما یک عکسی رو در داخل پروژه امون اضافه کردیم حال میخاهیم که رنگ اون رو بیایم و حالت شیشه ای تیره روی اون بندازیم برای این کار کافی است که فقط بیایم و یک تگ با طول عرض اون تصویرمون با استفاده از position ها بیایم و در داخل اون قرار بدهیم و با استفاده از رنگ ها و opacity ها داخل ان یک overlay قرار دهیم
نکته 15 : برای وسط چین کردن یک المان در داخل پروژه امون بدون استفاده از فریمورک ها باید به شیوه زیر کد بنویسیم
.header-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
نکته 16 : ی موقعی هستش ما با دادن طول به تصویر هامون در دیوایس های کوچک باعث این میشود که خاصیت ریسپانسیوی تصاویر به هم بخورد برای همین باید با استفاده از media ها مقادیر 100% رو بهشون بدهیم
نکته 17 : بهتر هستش رای طراحی کارت ها مون بیایم و به شکل زیر عمل کنیم به این صورت که یک تگ با نام card درست کنیم و بعد در داخل آن متناسب با المان هامون بیایم و از تگ هایی با نام های card-header و card-body و card-footer استفاده بکنیم
نکته 18 : طراحی دکمه های گووس باتن در زمان UX ما وقتی مثلا دو تا دکمه داریم یکی با نام خرید و یک دکمه کنسل کنارش بزاریم برای رعایت این مسئله دو تاشو با یک رنگ پس زمینه یکسان نزاریم تا به قولی اون مبحث کنسله زیاد تو چشم نیاد برا همین میگویند یکی رو به صورت گووس درست کنین که یک بوردر داره و اگه روش کلیک شد رنگ بگیره و اون یکی رنگی باشد که تمایز اون ها با هم دیگه زیاد باشد
نکته 19 : ما اگر بیایم و به عنصر والدی که به صورت بلاکی هستش مقدار text-align : center بدهیم با عناصر فرزندش مثل تکس رفتار میکنه البته به شرطی که فرزند مقدار display : iine-block رو داشته باشد
نکته 20 : اگر ی موقع ما خواستیم بیایم و کارت هامون رو طوری طراحی بکنیم که با هاور روی اون ها مثلا تصویر داخل اش بیاد و scale پیدا بکند برای بهم نخوردن و بیرون نزدگی باید برای والدشون از خاصیت
over-flow : hidden استفاده بکنیم
نکته 21 : اگر خواستیم بیایم و در داخل یک المان امون از دو تا انیمشن استفاده بکنیم باید در transform اون ها رو پشت سر هم قرار دهیم
نکته 22 : برای طراحی آکاردو منو ها بهتر هستش بیایم و از یک تگ با نام tabs و در داخل آن نیز از تگ های tab استفاده بکنیم همچنین برای طراحی از آن ها با css می توانیم از combinator selector ها بیایم و استفاده بکنیم
نکته 23 : زمانی که ما یک المان امون وضعیت پراپرتی اش توی یک حالت دیگه تغیر میکند می توانیم این تغیر وضعیت رو با استفاده از transition ها و فقط با دادن تایم تغیر مثلا 4 ثانیه بیایم و اون تغیر رو نرم انجام بدهیم
نکته 24 : label ها خاصیت inline دارند و برای پر کردن عرض کانتینر امون به صورت کامل باید بیایم و به اون ها مقدار block رو بدهیم
نکته 25 : در بعضی جاها در طراحی بهتر هستش به جای دادن طول عرض بیایم و از padding ها استفاده بکنیم
نکته 26 : وقتی ما میایم و از یک پراپرتی input استفاده میکنیم اگر خواستیم که به هنگام کلیک بر روی اون اون جلوی سلکت های کنارش رو بگیره یا اصطلاحا outline نداشته باشه باید بیام و پراپرتی outline : none رو بهش بدهیم