طراحی وب با HTML و CSS

از اولین تگ تا یک سایت کامل، در شانزده فصل

درباره این کتاب

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

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

ساختار هر فصل

هر فصل از چهار قسمت تشکیل شده است:

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

پیشنهاد

کد مثال‌ها را فقط نخوانید و به خواندن اکتفا نکنید. آنها را در یک فایل بنویسید و در مرورگر باز کنید. چیزی که با دست نوشته می‌شود در ذهن می‌ماند و چیزی که تنها خوانده می‌شود، نمی‌ماند.

چه چیزی لازم دارید

یک ویرایشگر متن ساده. پیشنهاد ما VS Code است، اما حتی Notepad هم کار می‌کند.
یک مرورگر. کروم یا فایرفاکس یا اج، فرقی نمی‌کند.
هیچ چیز دیگر. برای شروع طراحی وب به اینترنت هم نیاز ندارید.

فهرست مطالب

۰ مفاهیم پایه: وب چگونه کار می‌کند اینترنت و وب، مرورگر و سرور، سه زبان اصلی وب، ساختار یک تگ، اولین فایل HTML ۱ اولین صفحه: متن، فهرست، لینک و تصویر اسکلت سند HTML، عنوان‌ها، پاراگراف، قالب‌بندی متن، فهرست‌ها، لینک و تصویر ۲ جدول، مسیر فایل و تگ‌های تکمیلی متن تگ‌های متنی، فهرست تودرتو، مسیر نسبی و مطلق، جدول‌ها، توضیحات، بلوکی و درون‌خطی ۳ آشنایی با CSS سه روش نوشتن CSS، انتخابگر کلاس و آی‌دی، رنگ و پس‌زمینه، ترازبندی و اندازه قلم ۴ مدل جعبه‌ای عرض و ارتفاع، حاشیه، فاصله داخلی و بیرونی، گردی گوشه‌ها و box-sizing ۵ انتخابگرهای بیشتر و تصویر پس‌زمینه انتخابگر گروهی، فرزندی و سراسری، شبه‌کلاس hover و تنظیمات تصویر پس‌زمینه ۶ متن‌آرایی و تگ‌های معنایی قلم، وزن و شیب، فاصله خطوط و حروف، تزیین و تبدیل متن، تگ‌های معنایی، div و span ۷ فلکس‌باکس: چیدمان مدرن display: flex، جهت محور، justify-content، align-items و flex-wrap ۸ فلکس‌باکس پیشرفته و حرکت نرم gap، رشد و کوچک شدن آیتم‌ها، ترتیب نمایش، align-self و transition ۹ موقعیت‌دهی و سرریز position در چهار حالت، لایه‌بندی با z-index و کنترل محتوای سرریز ۱۰ فرم‌ها input و انواع آن، برچسب، جعبه متن، فهرست کشویی، تیک و دکمه رادیویی، استایل فرم ۱۱ گرید: چیدمان دوبعدی ستون‌ها و ردیف‌ها، واحد fr، اشغال چند خانه و نام‌گذاری نواحی ۱۲ طراحی واکنش‌گرا واحدهای نسبی، media query، پنهان کردن در موبایل و تصویر واکنش‌گرا ۱۳ تکنیک‌های تکمیلی CSS متغیرها، سایه، گرادیانت، transform، object-fit و calc، شبه‌کلاس و شبه‌عنصر ۱۴ پروژه نهایی: سایت دبیرستان دانش ساخت گام‌به‌گام یک سایت هفت‌صفحه‌ای واکنش‌گرا از ابتدا تا انتها ۱۵ نگاهی به آینده: بوت‌استرپ و جاوااسکریپت خارج از سرفصل دوره: کتابخانه آماده CSS، اولین برنامه جاوااسکریپت و نقشه راه

درباره پوشه‌های تمرین

در انتهای بخش‌های هر فصل، به پوشه‌ای از فایل‌های دوره ارجاع داده شده است، مانند 04-box-model/03-padding. اگر آن فایل‌ها را در اختیار دارید، بعد از خواندن هر بخش، نمونه مربوط به آن را باز کنید و با کدش بازی کنید.