مقدمه

پیش‌گفتار

سیر تکامل دنیای طراحی وب

مقدمه‌ای بر وب

مرورگر و جایگاه HTML و CSS

روند آموزش دوره و دریافت گواهی

چگونه بیشترین بهره را از دوره ببریم؟

آموزش HTML - بخش اول

اهداف فصل

مقدمه‌ای بر HTML

نگاه اولیه به HTML

المان‌های HTML

ساختار HTML

المان‌های نمایش متن - بخش ۱

المان‌های نمایش متن - بخش ۲

جمله نقل‌قول

دعوت‌نامه ساده

ساخت لینک - بخش ۱

ساخت لینک - بخش ۲

لینک تایید دعوت‌نامه

لینک‌های مفید

لیست‌ها

لیست کارها

عکس‌ها - بخش ۱

عکس‌ها  - بخش ۲

لوگو دعوت‌نامه

پخش ویدئو

فیلم تبلیغ

پخش صدا

زبان اسپانیایی!

آموزش HTML - بخش دوم

بخش‌بندی صفحات با div (division)

وبلاگ من

block یا inline

جدول‌ها - بخش ۱

جدول‌ها - بخش ۲

جدول دعوت‌شدگان

برنامه کلاس‌ها

المان‌های فرم - بخش ۱

المان‌های فرم - بخش ۲

المان‌های فرم - بخش ۳

فرم دعوت‌نامه

فرم ثبت سفارش

المان iframe

نقشه کوئرا

تگ‌های معنادار

وبلاگ من ۲

المان‌های داخل head

آشنایی و راه‌اندازی محیط توسعه

راه‌اندازی VSCode

افزونه‌های VSCode

Live Server

خروجی لحظه‌ای در موبایل

افزونه Emmet

مفاهیم پایه‌ای CSS - بخش اول

CSS چیست؟

استایل‌های inline

روش‌های دیگر استایل‌دهی

استایل‌های اولیه

رنگ‌ها

دسته‌بندی رستوران‌ها

خبرنامه کوئرا

مدل جعبه‌ای

حاشیه‌ی المان

دوز

هزینه اشتراک‌ها

دکمه زشت

استایل دادن به متن‌ها

کوئرا بلاگ

پست وبلاگ

اضافه کردن فونت به پروژه

صفحه کوئرا کالج!

پروفایل مجید

مفاهیم پایه‌ای CSS - بخش دوم

واحدهای اندازه‌گیری در CSS

استایل دادن به فرم‌ها

فرم تماس با ما

کلاس‌های Pseudo

نظرات کاربران

سرفصل‌ها

مفهوم Pseudo Elements

رزرو پرواز - بخش اول

انتخاب‌کننده تودرتو

ارثبری

Combinators در CSS

رزرو پرواز - بخش دوم

فرم تماس با ما - بخش دوم

Cascade و Specificity

استایل دادن به عکس‌ها

پروفایل کاری

گالری تصاویر محصول

استایل دادن به لینک‌ها و لیست‌ها

منوی نوبار

فوتر

استایل دادن به جدول‌ها

جدول مسابقات

چیدمان صفحات با CSS

آشنایی با چیدمان یک صفحه

روند نرمال

خاصیت Display

آشنایی با Flexbox

فرزندان flex!

پرسشنامه

منوی سایدبار

آشنایی با Grid

فرزندان grid!

فیلتر محصولات

خاصیت Position

مودال

چیدمان چندستونی

طراحی Responsive

منو واکنش‌گرا

تعدادی مجید!

اصول طراحی تجربه و رابط کاربری

مقدمه‌ای بر طراحی تجربه کاربری - بخش ۱

مقدمه‌ای بر طراحی رابط‌ کاربری - بخش ۲

آشنایی با Wireframing و Prototyping

استفاده از رنگ‌ها

تایپوگرافی

مرور فصل و معرفی منابع بیشتر

ترنزیشن‌ها و انیمیشن‌ها در CSS

آشنایی با Transition

خواص Transition

مثال‌هایی کاربردی از Transition

آشنایی با انیمیشن

تعیین فریم‌های کلیدی

خواص انیمیشن

مثال‌هایی کاربردی از انیمیشن

پروژه:‌ بخش اول پیاده‌سازی صفحه‌اصلی

توضیحات اولیه پروژه

پیاده‌سازی هدر

ریسپانسیوسازی هدر

پیاده‌سازی فوتر

پیاده‌سازی صفحه اصلی

پیاده‌سازی کاردها

ریسپانسیوسازی صفحه‌اصلی

کار با Sass

نگاهی بر SASS

نصب پیشنیاز ها

متغیر ها

نظم دهی استایل ها

بخش بندی کدها

Mixin در Sass

ارث بری در sass

عملرگرها

کوئیز پایانی

پروژه:‌ بخش دوم پیاده‌سازی ورود/ثبت‌نام

نصب و راه اندازی scss

پیاده‌سازی بخش ثبت‌نام

رفع‌ باگ‌های ثبت‌نام

پیاده‌سازی بخش ورود

آشنایی با Tailwind

نصب و راه اندازی

چند مثال ساده

مفاهیم اصلی

سفارشی‌سازی tailwind

اندازه‌ها

فاصله‌ها

حاشیه‌ها

پروفایل تیلویندی مجید!

Layout

Flex

Grid

Transitions

انیمیشن

مجیدهای تیلویندی!

کار با پلاگین‌ها

پروژه:‌ بخش سوم پیاده‌سازی صفحه‌محصول

پیاده‌سازی شروع صحفه محصول

ادامه پیاده‌سازی صفحه محصول بخش ویژگی‌ها

پیاده‌سازی بخش محصولات مرتبط

ریسپانسیوسازی صفحه‌محصول

آشنایی با Bootstrap

آشنایی با بوت‌استرپ

راه اندازی Bootstrap

برخی مثال های ساده

اصول و مفاهیم اساسی

شخصی سازی Bootrap

اندازه‌گیری (sizing)

فاصله گذاری(spacing)

مرزها (borders)

چیدمان(layout)

flex

گرید(Grid)

مجیدهای بوت‌استرپی!

پروفایل مجید!

پروژه:‌ بخش چهارم پیاده‌سازی صفحات محصولات، دسته‌بندی و پنل‌ادمین

پیاده‌سازی صفحه‌محصولات

پیاده‌سازی بخش کارد محصولات

پیاده‌سازی ریسپانسیو و هاور کاردها

پیاده‌سازی بخش دسته‌بندی‌ها

حل مشکل کاردها در حالت موبایل

شروع پیاده‌سازی پنل ادمین

رفع باگ‌های پنل‌ادمین

پیاده‌سازی صفحه‌ افزودن محصول جدید

پیاده‌سازی ریسپانسیو پنل‌ادمین

رفع باگ‌های صفحه افزودن محصول جدید

گام‌های بعدی

مسیرهای شغلی

گام بعدی

تا کنون با مفاهیم سرور و کلاینت آشنا شدیم و فهمیدیم که مرورگر چه نقشی در این مدل برای کلاینت ایفا می‌کند. به عنوان یک توسعه دهنده‌ی فرانت‌اند با مرورگر بسیار سروکار خواهیم داشت در نتیجه نیاز است نسبت به عملکرد مرورگر درک عمیق تری پیدا کنیم. می خواهیم بررسی کنیم وقتی وارد یک وبسایت می‌شویم به ترتیب چه مراحلی طی می‌شود تا محتوا برای ما نمایش داده شود.

# نحوه‌ی عملکرد مرورگر

به ساده ترین شکل ممکن و با حذف پیچیدگی‌ها، این مراحل به این گونه طی می‌شوند:

۱. هنگامی که *URL* یا همان آدرس یک وبسایت در مرورگر وارد می‌شود و *enter* زده می‌شود، مرورگر یک درخواست برای سروری که این آدرس به آن مرتبط است ارسال می‌کند. در صورتی که که اطلاعات لازم در سرور موجود باشند، سرور در پاسخ یک سند متنی با فرمت *HTML* برای مرورگر ارسال می‌کند. **این سند *HTML* ساختار صفحه‌ی وب را مشخص می‌‌کند**. در ادامه با کاربرد *HTML* بیشتر آشنا می شویم.

۲. پس از دریافت سند *HTML* توسط مرورگر و آنالیز آن، مرورگر درخواست هایی برای دریافت سایر محتوا‌های موردنیاز که از سند *HTML* استخراج شده‌اند می‌کند. این درخواست‌ها عمدتا شامل موارد زیر هستند:

   + فایل‌های *Stylesheet* یا همان *CSS*: **محتویات فایل *CSS* نحوه‌ی استایل دادن به محتویات صفحه‌ی وب را مشخص می‌کنند.** در ادامه با کاربرد *CSS* نیز بیشتر آشنا می‌شویم. مرورگر پس از دریافت این فایل‌ها از سرور، محتویات آن‌ها را به شکل درست روی ساختاری که *HTML* مشخص کرده‌است پیاده می‌کند تا ظاهر وبسایت مناسب شود. 
   + محتواهای چندرسانه‌ای مانند تصاویر و ویدئوها: این محتوا‌ها به دلیل این‌که در جاهای مختلفی ذخیره شده‌اند و صرفا یک لینک به آن‌ها در سند *HTML* وجود دارد، توسط درخواست‌های جداگانه‌ای به آن لینک‌ها دریافت می‌شوند و مرورگر آن‌ها را در جای درست نمایش می‌دهد.
   + فایل‌های *JavaScript*: **جاوااسکریپت یک زبان برنامه‌نویسی است و در توسعه‌ی فرانت‌اند برای پویا و قابل تعامل کردن صفحات وب به کار می‌رود.** مرورگر با دریافت فایل یا فایل‌های *JavaScript* مشخص شده در سند *HTML* آن‌ها را به شکل درست اجرا می‌کند تا کاربر بتواند تعامل درستی با وبسایت داشته باشد.


> یک نکته: دقت کنید که یک سند *HTML* می‌تواند اشاره‌ای به هیچکدام از سه موارد بالا نکند و همچنان محتوای قابل نمایش برای مرورگر داشته‌باشد. در واقع تنها فایل موردنیاز برای نمایش یک وبسایت، فایل سند *HTML* است.

۳. هر محتوایی به محض دریافت و تفسیر، روی صفحه‌ی وب اعمال می‌شود و اکثر این درخواست‌ها، دریافت‌ها و اجراها به صورت موازی با هم انجام می‌شود. قصد مرورگر نمایش کامل هر چه سریع‌تر وبسایت است و عامل محدود‌کننده تا حد بسیار زیادی، سرعت دانلود و حجم محتواهای ذکر شده است. پس از آن وبسایت آماده برای استفاده کاربر می‌شود.

# نقش زبان‌های مورد استفاده در توسعه‌ی فرانت‌اند
همان‌طور که در بالا به صورت مختصر اشاره شد، سه زبان اصلی مورد استفاده برای ایجاد صفحات وب، *CSS ، HTML و JavaScript* هستند. با وجود این‌که امروزه زبان‌ها و کتابخانه‌های زیادی در توسعه‌‌ی وب به کار می‌روند، اما همچنان هسته‌ی ایجاد صفحات وب همین سه زبان هستند.

برای این‌که درک کنید هر کدام از این سه زبان چه نقشی در ایجاد صفحات وب دارند از یک مثال استفاده می‌کنیم. به تصویر زیر دقت کنید:
![نقش زبان‌های مختلف در توسعه‌ی فرانت‌اند](https://quera.org/qbox/download/acv0ieydsJ/rsz_11680955326122.png)
[منبع](https://www.linkedin.com/pulse/building-blocks-web-development-html-css-javascript-sahil-kavitake/)

با استفاده از *HTML* می‌توان ساختار و اسکلت بندی یک صفحه‌ی وب را مشخص کرد مانند همان کاری که اسلکت بدن انسان انجام می‌دهد. با این کار مشخص می شود که چه محتوایی روی صفحه داریم مثلا محتواهای متنی مختلف، تصویری و ... . همچنین در سند *HTML* مشخص می‌شود که چه فایل های *CSS* و *JavaScript* ای در این صفحه‌ها به کار می‌روند.

با *CSS* می‌توانیم به محتواهای مشخص شده در سند *HTML* استایل بدهیم و ظاهر وبسایت را زیباتر کنیم و محتوا را به درستی به کاربر نمایش دهیم. مانند اجزای ظاهری یک انسان، CSS نیز وظیفه‌ی نمایش ظاهری یک وبسایت را برعهده دارد.

و در نهایت *JavaScript* به وبسایت جان می‌بخشد و آن را پویا می‌کند، در واقع امکان تعامل با وب‌سایت از سوی کاربر فراهم می‌شود. همانند سیستم عصبی و دیگر ارگان های بدن انسان که این قابلیت را به او می‌دهند که با دنیای اطراف تعامل داشته باشد.

آموزش عملی HTML و CSS