خسته نباشید استاد شما واقعا خوب تدریس میکنید
آموزش رایگان HTML , CSS برای طراحی سایت فروشگاهی (از صفر)
یک نقطه شروع طلایی برای هر کسی که می‌خواهد وارد دنیای طراحی وب شود — حتی اگر تا امروز هیچ خط کدی ننوشته باشید!
ما در کدیاد باور داریم که آموزش باید ساده، شفاف و کاربردی باشد. این دوره دقیقاً برای همین ساخته شده: از پایه و با زبانی قابل فهم، شما را با دو ستون اصلی طراحی صفحات وب آشنا می‌کند:
HTML چیست؟
HTML یعنی HyperText Markup Language؛ زبانی که اسکلت و ساختار صفحات وب را می‌سازد. با HTML شما بخش‌های اصلی سایت مثل تیترها، پاراگراف‌ها، تصاویر، لینک‌ها و جدول‌ها را ایجاد میکنید و به مرور یاد می‌گیرید چطور یک نقشه کامل برای محتوای وب بسازید.
CSS چیست؟
CSS یعنی Cascading Style Sheets؛ زبان زیباسازی صفحات وب. وقتی HTML ساختار شما را می‌سازد، CSS به آن رنگ، فونت، فاصله، سایه، انیمیشن و حتی طراحی واکنش‌گرا می‌دهد. بدون CSS، صفحات شما مثل یک اسکلت بی‌روح خواهند بود.
📌 ساختار دوره چطور طراحی شده؟
این دوره به‌صورت گام‌به‌گام طراحی شده:
✅ اول مفاهیم پایه HTML و ابزارهای لازم (مثل VSCode و Live Server) را یاد می‌گیرید.
✅ بعد به سراغ CSS می‌روید و استایلدهی صفحات را تمرین میکنید.
✅ سپس پروژههای عملی و تفکر ساختاری را تجربه میکنید، مثل طراحی گالری عکس، و با ابزارهای حرفه‌ای مثل GitHub و Figma آشنا میشوید.
این ساختار به شما کمک می‌کند فقط مصرف‌کننده دانش نباشید، بلکه خالق پروژههای واقعی شوید.
ویژگی‌های متمایز این دوره و دوره‌های دیگر کدیاد
1️⃣ پروژه‌محور و عملی
یادگیری فقط با تماشا ممکن نیست؛ شما در هر دوره کدیاد دست‌به‌کد میشوید، تمرین میکنید، پروژه می‌سازید و اشتباهاتتان را برطرف میکنید.
2️⃣ متناسب با بازار کار
دوره‌ها برای ساختن رزومه طراحی شده‌اند؛ یعنی یاد می‌گیرید دقیقاً همان چیزهایی را که در بازار کار از شما انتظار دارند.
3️⃣ پشتیبانی واقعی
تنها نیستید! با مدرس، تیم پشتیبانی و انجمن دانشجویی همیشه در ارتباطید؛ سوال بپرسید و جواب بگیرید.
4️⃣ آشنایی با ابزارهای روز
GitHub، Figma، DevTools، و حتی هوش مصنوعی — شما از همان ابتدا یاد می‌گیرید چطور ابزارهای حرفه‌ای را به کار بگیرید.
5️⃣ مسیر یادگیری شفاف و هدفمند
هر دوره یک پله از نردبان یادگیری است؛ ما مسیر را برایتان طراحی کردیم تا بدانید بعد از هر دوره کجا بروید و چه مهارتی یاد بگیرید.
چرا این دوره ارزش وقت شما را دارد؟
🌱 از مبتدی تا پروژه‌ساز: نیازی به پیش‌زمینه ندارید، فقط کافی است علاقهمند باشید.
💼 آماده برای کار واقعی: با پایان دوره می‌توانید نمونه کار طراحی سایت بسازید.
📚 جامع و منظم: همه چیز از مقدمات تا تمرین و ابزارهای پیشرفته در یک جا جمع شده.
🚀 رایگان ولی حرفه‌ای: دوره رایگان است، اما کیفیت آن در حد دوره‌های پولی بازار است.
سرفصل های دوره
مقدمه و آشنایی با مفاهیم اولیه
معرفی دوره و زبان HTML , CSS
ثبت نام و پخش
00:05:09
معرفی زبان HTML
ثبت نام و پخش
00:06:05
معرفی کد ادیتور VSCode
ثبت نام و پخش
00:03:20
آشنایی با کد نویسی HTML و معرفی ساختار تگ
ثبت نام و پخش
00:07:07
ساختار ابتدایی کدهای HTML
ثبت نام و پخش
00:09:28
معرفی تگهای متنی H , P در HTML
ثبت نام و پخش
00:09:56
معرفی افزونه Live Server
ثبت نام و پخش
00:03:17
معرفی تگ pre و مقایسه با تگ p با معرفی ابتدایی مبحث سئو
ثبت نام و پخش
00:06:26
معرفی formatting در تگهای HTML و اهمیت تگ های معنایی
ثبت نام و پخش
00:06:40
معرفی formatting در تگهای HTML و اهمیت تگ های معنایی-پارت2
ثبت نام و پخش
00:04:53
معرفی اتربیوت در HTML
ثبت نام و پخش
00:05:11
معرفی تگ div و ساختار ساده تگهای والد و فرزند
ثبت نام و پخش
00:06:03
معرفی تگ img و اتربیوت های آن
ثبت نام و پخش
00:07:49
معرفی روشهای آدرس دهی فایل در HTML
ثبت نام و پخش
00:05:01
معرفی تگ a (anchor) و button- برای پیمایش بین صفحات
ثبت نام و پخش
00:07:12
معرفی اتربیوت های تگ a
ثبت نام و پخش
00:04:48
معرفی دسته بندی تگهای block و inline
ثبت نام و پخش
00:04:46
استایل دهی با CSS و ساختار دهی پیشرفته
معرفی زبان CSS و کاربرد و روش نوشتار آن در بین کدهای HTML
ثبت نام و پخش
00:07:59
معرفی استایل background و سیستم های رنگی در CSS
ثبت نام و پخش
00:07:19
معرفی استایلهای عرض و ارتفاع و شروع پروژه یک صفحه ساده وب
ثبت نام و پخش
00:09:45
معرفی استایل های line-heght , text-align در CSS و معرفی محیط DevTools
ثبت نام و پخش
00:05:47
معرفی class , id و نوشتن استایل به صورت Internal
ثبت نام و پخش
00:08:57
معرفی display : block , inline و استایل margin
ثبت نام و پخش
00:08:28
معرفی استایل padding و Box Model در محیط Dev Tool
ثبت نام و پخش
00:07:50
معرفی استایل background-image
ثبت نام و پخش
00:06:01
معرفی پراپرتی های استایل background
ثبت نام و پخش
00:04:08
مختصر نویسی استایل background و رنگ دهی گرادیان
ثبت نام و پخش
00:07:03
معرفی استایل های انحنای حاشیه و سایه المان
ثبت نام و پخش
00:06:42
معرفی استایل border به عنوان حاشیه المانها
ثبت نام و پخش
00:04:59
معرفی project stracture و روش استایلی نویسی External
ثبت نام و پخش
00:08:23
پروژههای عملی، تفکر ساختاری و تعاملات پیشرفته و واکنش گرا
معرفی تفکر ساختاری در طراحی
ثبت نام و پخش
00:05:12
پروژه « گالری عکس ساده » با تمرین تفکر ساختاری
ثبت نام و پخش
00:05:22
پروژه گالری عکس - پارت2 - معرفی سلکتور ترکیبی والد و فرزند
ثبت نام و پخش
00:10:44
پروژه گالری عکس - پارت3 - معرفی سلکتور گروهی
ثبت نام و پخش
00:10:39
معرفی هم ترازی در CSS و سایه دادن به متن
ثبت نام و پخش
00:09:58
معرفی پروژه فرم ثبت نام از الگوی فیگما
ثبت نام و پخش
00:08:23
پروژه فرم ثبت نام از الگوی فیگما-معرفی تگ فرم و استایل font-family
ثبت نام و پخش
00:07:22
پروژه فرم ثبت نام از الگوی فیگما-معرفی تگ input وlabel
ثبت نام و پخش
00:06:46
پروژه فرم ثبت نام از الگوی فیگما-ترفند رنگ گرادیان به متن
ثبت نام و پخش
00:06:14
تایپ های تگ input و یک تکنیک هم ترازی و وسط چین کردن المان
ثبت نام و پخش
00:08:36
پروژه فرم ثبت نام از الگوی فیگما- اتربیوت های دیگر input
ثبت نام و پخش
00:06:54
معرفی اینپوت با تایپ radio و اولویت دادن به سلکتور ها در CSS
ثبت نام و پخش
00:08:57
استایل و اتربیوت جهت نوشتار در CSS - افزودن فونت فارسی
ثبت نام و پخش
00:09:17
کاربرد اتربیوت action در فرم و روش متفاوت در سایه دادن به المان
ثبت نام و پخش
00:05:45
معرفی شبه کلاس های hover , focus و استایل transition در CSS
ثبت نام و پخش
00:06:56
معرفی ویژگی ار بری تگ ها در HTML و تغییر آن در CSS
ثبت نام و پخش
00:04:47
اهمیت کامنت نویسی و معرفی کلاسهای متنی در CSS
ثبت نام و پخش
00:08:25
معرفی Media Query و طراحی Responsive در CSS
ثبت نام و پخش
00:09:36
معرفی تگ ها و استایلهای مربوط به لیست ها
ثبت نام و پخش
00:07:40
معرفی روش استایل نویسی کلاس محور- روش نوشتاری نام در برنامه نویسی
ثبت نام و پخش
00:09:57
معرفی تگ progress و استفاده از آیکون ها در پروژه
ثبت نام و پخش
00:07:04
تحلیل پروژه صفحه "لیست وب سایت ها" و ریسپانسیو آن
ثبت نام و پخش
00:09:57
معرفی مبحث Flexbox در CSS
ثبت نام و پخش
00:07:24
پیشنیاز های دوره چه چیزهایی هستند؟
- بدون پیش نیاز
نظرات دانشجویان
hadi nadeali |
دانشجوی دوره آموزش رایگان HTML , CSS برای طراحی سایت فروشگاهی (از صفر)
مدرس دوره
عباس بساکی
عباس بساکی هستم مدرس و توسعه دهنده فرانت اند - به دنبال یک محیط کاری خلاقانه و دوستانه ام و علاقه زیادی به برنامه نویسی و بیشتر از اون به یادگیری مداوم فناوری های جدیددر این زمینه دارم. من عاشقانه تدریس رو دوست دارم و از اینکه دانشم رو به کسی منتقل کنم احساس می کنم در دنیای تاریک امروز تونستم عنصر مفیدی باشم.
سوالات متداول
این دوره مناسب چه کسانی است؟
افرادی که هیچ تجربهای در طراحی وب ندارند و میخواهند از صفر وارد این حوزه شوند.
چه پیشنیازهایی لازم است؟
هیچ پیشنیازی لازم نیست؛ فقط کافی است علاقهمند به یادگیری باشید.
بعد از دوره چه مهارتهایی کسب میکنم؟
درک اصول طراحی وب، مهارت ساختاردهی صفحات با HTML، استایلدهی با CSS، و توانایی ساخت پروژههای واقعی.
آیا پروژه عملی هم انجام میدهیم؟
بله! شما پروژههای جذاب مانند طراحی گالری عکس را انجام میدهید و با تفکر ساختاری در طراحی آشنا میشوید.
چه ابزارهایی در دوره معرفی میشود؟
علاوه بر HTML و CSS، ابزارهای فیگما، گیتهاب و DevTools معرفی و آموزش داده میشوند.