این دوره از James Page است.
اولین وبسایتت را بساز
از یک صفحهٔ خالی تا یک وبسایت خوانا که روی موبایل هم درست کار میکند.
دربارهٔ این مسیر آموزشی
HTML و CSS پایهٔ هر صفحهٔ وباند: اولی مشخص میکند محتوا چه معنایی دارد و دومی شکل نمایش آن را میسازد. در این مسیر، مسئله فقط چیدن چند کادر کنار هم نیست؛ از ترتیب عنوانها و ساختار صفحه شروع میکنیم تا نوشته، تصویر، لینک و فرم برای کاربر قابل فهم باشند.
تمرینها حول یک صفحهٔ شخصی شکل میگیرند. بخش معرفی، مهارتها و راه ارتباط، فرصت مناسبی برای شناخت مدل جعبهای، فاصلهها، Flexbox و Grid هستند. سپس همان صفحه را در عرضهای مختلف بررسی میکنیم تا چیدمان روی موبایل به اسکرول افقی یا متن ناخوانا تبدیل نشود.
برای استفاده از نمونهٔ این مسیر، یک ویرایشگر کد و مرورگر کافی است. پیشنهاد میکنیم هر تغییر را خودت اجرا کنی، نتیجه را ببینی و با ابزار توسعهدهنده فاصلهها و اندازهها را بررسی کنی. هدف تمرین، داشتن صفحهای است که بتوانی ساختار و تصمیمهای طراحی آن را توضیح بدهی، نه صرفاً بازسازی یک تصویر.
در پایان این مسیر چه میسازی؟
یک Landing Page فارسی با هدر، Hero، خدمات، کارتها، فرم تماس و Footer؛ پروژهای برای کنار هم گذاشتن مهارتها و بررسی نتیجهٔ یادگیری.
یک Landing Page فارسی با هدر، Hero، خدمات، کارتها، فرم تماس و Footer
این دوره برای چه کسی است؟
برای کسی که میخواهد این مهارت را از پایه و با تمرین شروع کند. یک کامپیوتر و زمان مشخص برای تمرین کافی است.
سرفصلها و قسمتها
۱ساختار وب و HTML۹ قسمت
- 1 — وبسایت چطور کار میکند؟: مرورگر، سرور، دامنه، HTML/CSS و تصویر کلی مسیر
- 2 — آمادهکردن محیط کار: نصب VS Code، ساخت پروژه و آشنایی با فایلها
- 3 — اولین صفحه HTML: html، head، body و ساخت اولین صفحه
- 4 — متنها و تیترها: Heading، Paragraph، Bold، Italic و ساختار متن
- 5 — لینکها: لینک داخلی، خارجی، ایمیل و بازشدن در تب جدید
- 6 — تصاویر: img، مسیر فایل، alt و اندازه تصاویر
- 7 — لیستها: ul، ol، li و کاربرد واقعی
- 8 — ساختار استاندارد صفحه: header، main، section، article، footer
- 9 — فرمها: input، textarea، select، checkbox و button
۲طراحی با CSS۹ قسمت
- 10 — شروع CSS: اتصال CSS و مفهوم selector
- 11 — رنگ و ظاهر: color، background، border و opacity
- 12 — فونت و متن: font، line-height، text-align و فونت فارسی
- 13 — Box Model: margin، padding، border و اندازه عناصر
- 14 — Width و Height: واحدهای px، %، rem، vh و vw
- 15 — Display و Position: block، inline، relative، absolute، fixed
- 16 — Flexbox: ساخت چیدمانهای مدرن با Flex
- 17 — CSS Grid: ساخت صفحات چندستونه
- 18 — طراحی کارت: ساخت کارت محصول یا مقاله از صفر
۳ریسپانسیو و پروژه نهایی۶ قسمت
- 19 — هدر حرفهای: لوگو، منو و دکمه ورود
- 20 — ریسپانسیو چیست؟: Media Query و Mobile First
- 21 — طراحی نسخه موبایل: تبدیل سایت دسکتاپ به موبایل
- 22 — Transition و Hover: تعامل و انیمیشنهای ساده
- 23 — شروع پروژه نهایی: ساخت Landing Page واقعی
- 24 — تکمیل و انتشار سایت: ریسپانسیو، تمیزکاری و انتشار
James Page
این دوره با صدای اصلی مدرس و زیرنویس فارسی ارائه میشود.