1- آموزش کد نویسی html و css (آپدیت جدید)

سلام عرض ادب و احترام در این آموزش می خواهیم طراحی سایت با html و css رو با هم دیگه یاد بگیریم.

خیلی حاشیه نمی رم و قراره چیز یاد بگیریم.

معرفی سایت مرجع برای یادگیری کلا برنامه نویسی

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

<-------------------------------------------------------*************************------------------------------------------------------>

پیش نیاز ها:

داشتن دو مهارت زیر می تونه هم سرعت شما رو در طراحی سایت بالا ببره هم اینکه باعث می شه همیشه از منابع بروز آگاه باشید:

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

2- زبان انگلیسی: در مورد این موضوع و راهکار های سریع تر یادگرفتنش صحبت نمی کنم چون به اندازه کافی مقاله در این حوزه هست.

<-------------------------------------------------------*************************------------------------------------------------------>

زبان html چیست:

مخفف کلمه Hypertext Markup Language است. هر چیزی که تو ظاهر هر سایتی جلوتون هست می بینید زیز سر html , css هست.

زبان html یک زبان برنامه نویسی نیست، یک زبان نشانه گذاری هست.

تاریخچه html

<-------------------------------------------------------*************************------------------------------------------------------>

عبارت parcing:

به معنی تجزیه و تحلیل کردن است.

برای اینکه مروگر هایی مثل کروم یا فایر فاکس بفهمن که از کدام نسخه html استفاده می کنید باید باید از کد زیر ابتدای کدهاتون استفاده کنید:

<!DOCTYPE html>

نکته: بالای بالای بالای بالای کدهاتون بدن هیچ فاصله ای در ابتدای سندhtml تون قرار بدید.

یادآوری: ساختار کلی فایل html شما این هست:

هر موقع خواستید پروژه رو شروع کنید از اینجا کپی کنید:

لینک تمپلیت آماده html

<-------------------------------------------------------*************************------------------------------------------------------>
در تگ <head></head> هر چی قرار می گیره در معرض دید کاربرا نیست به هیچ وجه.

در تگ <body></body> هرچی می خوایم کاربرا ببینن می نویسیم.

<-------------------------------------------------------*************************------------------------------------------------------>

نکته: سند های html فقط یک دانه اسپیس رو می فهمن برای اینمه فهمونی می خوای واقعا اسپس بزاری باید از بین کلماتت از این عبارت استفاده کنی: nbsp&

ادامه مبحث: ما کلی سایز نمایش گر داریم مانیتور عریض داریم، مانیتور متوسط داریم، موبایل، تبلت، فبلت و.... داریم و خود این ها هم داستانی دارن. برای خوب نکته جالب هم این است که هر کاربری با انواع این device ها میان توی سایت تون. برای اینکه بخوایم کد ها مون رو ریسپانسیو کنیم یا اینکه خودمون می تونیم این کار رو بکنیم و یا اینکه اون رو به افراد متخصص بسپاریم.
سپردن واکنش گرایی سایت به افراد متخصص هزینه نداره! به این کار می گن فریم ورک. اینا خودشون یه سری فایل های css, html,js آماده است. معروف ترین و بهترین فریم ورک، بوت استرپ است. که سایت شو براتون لینک کردم می تونید آخرین نسخه شو از سایت رسمی اش دانلود کنید.

نکته: bootstrap-min.css فرقش با bootstrap.css اینه که برای کاهش حجم کد ها و افزایش سرعت است. min نسخه کم حجم تر شده است.
یکی از مشکلایی که بوت استرپ برای ایرانی ها و عرب ها داره اینه که چپ چین است. ولی یه سری آدم های خیری هستند که بوت استرپ رو rtl کردن گذاشتن تو گیت هاب می تونید راحت دانلود کنید.

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

کاربرد های جاوا اسکریپ: همه این اسلایدر ها، تب ها، کاروسل هایی می بینیم، پاپ آپ ها و... برای جاوا اسکریپت است. لینک آموزش جاوا اسکریپ در سایت معتبر w3
می خوایم html رو به فایل جاوا اسکریپ وصل کنیم باید از تگ استفاده کنیم.

<-------------------------------------------------------*************************------------------------------------------------------>

3- سیستم شبکه بندی در بوت استرپ:

مثلا یکی با مانیتور 40 اینچ سایت تون رو باز می کنه یکی با گوشی آیفون x اش. به وسیله کلاس Container. می تونید یه کاری کنید هر دو نفر خیلی عالی سایت رو ببینن.
اگر می خواهید از کل عرض نمایش گر استفاده کنید از کلاس container-fluid. استفاده کنید.

• در Container ما می آییم سایت رو به 12 ستون (grid) تقسیم می کنیم. مثلا 3 تا ستون رو می دیم به سایدبار و 9 تاشو می دیم به اسلایدر.

مثال: این سایت اومده از Container استفاده کرده نه container-fluid. واینکه به دو تا grid شش تایی تقسیم کرده.

<-------------------------------------------------------*************************------------------------------------------------------>

نکته: در طراحی سایت اصولی از کوچک ترین سایز طراحی می کنن بعد با سایز های دیگه انطباق می دن.
نکته: برای کلاس دهی درست از استاندارد BEM پیروی کنید.
<-------------------------------------------------------*************************------------------------------------------------------>

برای اینکه کل صفحه مون رو rtl کنیم به کل body این رو می دیم:

body{
direction: rtl;
}

نکته: تگ ها . نمی خواهند.

برای تعیین جهت متن (وسط، چپ، راست، جاستیفای) کردن:

text-align:center;
text-align: left;
text-align: right;
text-align: justify;

معرفی boder, margin, padding:

فکر کنم تصویری خیلی واضح تر باشه یه چند لحظه توی سکوت به عکس زیر فکر کنید :)

نکته: margin, padding منفی هم می تونن باشن.
جهت پدینگ و مارجین ساعتگرد است.

معرفی کلاس justify-content-between در بوت استرپ:

مثلا ما می خواهیم قسمتی از محتوا سمت چپ باشه و نصف دیگر محتوا سمت راست.
اجازه دهید برای درک بهتر یک مثال تصویری بزنم:

<-------------------------------------------------------*************************------------------------------------------------------>

هاور در css:

هاور اگر به جا و درست استفاده بشه در کسب تجربه کاربری(ui,ux) خیلی به کاربرا کمک می کنه. مثلا ما می خوایم اینجوری تعریف کنیم که وقتی موس می ره روی یه چیزی فلان اتفاق بیفته.

در کد نویسی مثل زیر به کلاس ها و تگ ها مون می تونیم هاور بدیم:

.sampleclass:hover {
background: #ccc;
}