دوره HTML و CSS از ابتدا: امروز اولین صفحات وب خود را بسازید
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- یادگیری HTML و CSS دنیای واقعی که توسط توسعهدهندگان وب حرفهای استفاده میشود.
- ساخت یک پروژه صیقلخورده به سبک Reddit برای پورتفولیوی خود
- پس از دوره، برای درخواست شغلهای توسعهدهنده تازهکار آماده خواهید بود.
- ارتقای سطح از طریق بیش از 100 تمرین عملی و چالش - همراه با راهحلها
- پیگیری پیشرفت با بیش از 20 کوئیز متمرکز طراحیشده برای تقویت یادگیری
- یادگیری بهترین شیوههای صنعت برای کد تمیز، قابل نگهداری و آمادهی تولید
- پس از دوره، کاملاً آماده خواهید بود تا وارد دنیای JavaScript و React شوید.
پیش نیازهای دوره
- شما به هیچ تجربه برنامهنویسی نیاز ندارید. مدرس همهچیز را از پایه به شما آموزش خواهد داد.
- شما به یک کامپیوتر با دسترسی اینترنت نیاز دارید (Windows و macOS یا Linux)
- نیازی به خرید هیچ نرمافزاری نخواهید داشت — از ابزارهای رایگان و مناسب مبتدیان استفاده خواهیم کرد.
- مدرس شما را قدم به قدم برای نصب و راهاندازی هر چیزی که نیاز دارید راهنمایی خواهد کرد.
توضیحات دوره
از صفر به کدنویسی صفحات وب واقعی برسید.
مهارتها، ابزارها و ذهنیت یک توسعهدهنده وب مدرن را بیاموزید.
این دوره، دورهی نهایی مبتدیان برای هر کسی است که میخواهد HTML و CSS را به روشی واضح و عملی بیاموزد.
چه در حال شروع یک مسیر شغلی باشید یا راهاندازی یک پروژه جانبی،
این دوره شما را از «نمیفهمم» به «من این را ساختم!» میرساند. قدم به قدم، خط به خط است.
چرا این دوره متفاوت است؟
- شما از روز اول کد خودتان را خواهید نوشت.
- شما صفحات وب واقعی خواهید ساخت.
- شما با مثالهای تمرینی کوچک شروع میکنید و با یک پروژه کامل که به آن افتخار میکنید، دوره را به پایان میرسانید.
- شما یک کپی صیقلخورده از صفحه اصلی Reddit خواهید ساخت که کاملاً توسط شما و با استفاده از HTML و CSS از پایه ساخته شده است.
- در طول مسیر، درک واقعی به دست خواهید آورد، نه اینکه فقط مراحل را حفظ کنید.
- هر درس طوری طراحی شده است که به شما پیروزیهای فوری، تمرین دنیای واقعی و اعتماد به نفس برای ادامه دادن بدهد.
- شما یاد خواهید گرفت نه فقط چه چیزی را تایپ کنید، بلکه چرا اهمیت دارد و توسعهدهندگان واقعی چگونه فکر میکنند.
آنچه خواهید آموخت
- ساخت وبسایتهای کامل و کاربردی از یک فایل خالی
- نوشتن HTML و CSS تمیز و مدرن که در هر مرورگری کار میکند.
- استفاده با اطمینان از تگها، اتریبیوتها، کلاسها و سلکتورها
- افزودن ساختار با پاراگرافها، لیستها، لینکها، تصاویر، فرمها و موارد دیگر
- استایلدهی به محتوای خود با استفاده از رنگها، فونتها، فاصلهگذاری، حاشیهها و طرح بندی
- درک اینکه مرورگر چگونه کد شما را میخواند و چگونه چیزی که خراب است را تعمیر کنید.
- استفاده از ابزارهای توسعهدهنده دنیای واقعی برای بازرسی، اشکالزدایی و بهبود صفحات خود
- مانند یک توسعهدهنده فکر کنید: تحلیل، ساختاردهی و حل مشکلات طرح بندی
- ساخت یک پروژه شایستهی پورتفولیو که مهارتهای شما را اثبات میکند.
همین حالا شروع کنید. امروز اولین صفحه وب واقعی خود را بسازید.
شما نیازی ندارید «فنی» باشید.
شما فقط به یک کامپیوتر، یک مرورگر و تمایل به یادگیری نیاز دارید.
بنابراین اگر علاقهمند هستید، بیایید شروع کنیم.
این دوره برای چه کسانی مناسب است؟
- مبتدیان مطلقی که قبلاً هرگز یک خط کد ننوشتهاند و یک شروع واضح و قدم به قدم میخواهند.
- فریلنسرهای آینده، تغییردهندگان مسیر شغلی، یا دانشجویانی که تجربه عملی با کد واقعی و پروژههای واقعی میخواهند.
- توسعهدهندگان وب مشتاقی که از آموزشهای دیگر سردرگم شدهاند و دورهای میخواهند که همهچیز را به سادگی توضیح دهد.
- خودآموزانی که به دنبال ساختن اصول قوی HTML و CSS قبل از رفتن به سراغ JavaScript ،React یا توسعه full-stack هستند.
- هر کسی که از یادگیری عملی لذت میبرد. کوئیزها، چالشهای عملی و مینیپروژههای دنیای واقعی به جای تئوری خشک
دوره HTML و CSS از ابتدا: امروز اولین صفحات وب خود را بسازید
-
درس 1: راه اندازی اولیه. مرورگر و ویرایشگر کد 01:24
-
درس 2: ایجاد اولین صفحه وب با HTML 03:19
-
درس 3: عناصر و ساختار HTML 05:00
-
درس 4: درک تگهای پاراگراف در HTML 04:30
-
آزمون 1: قدمهای اول شما با HTML None
-
درس 5: عناصر void و non-void در HTML 02:44
-
درس 6: ترتیب و تو در تویی عناصر در HTML 04:14
-
درس 7: عناصر والد و فرزند در HTML 03:15
-
آزمون 2: درک رفتار عناصر HTML None
-
تمرینهای عملی 00:28
-
درس 8: ساخت چکباکس با ویژگیهای HTML 02:48
-
درس 9: چگونه از انواع ورودی HTML استفاده کنید؟ 03:50
-
درس 10: افزودن متن جایگزین به فیلدهای ورودی 04:50
-
آزمون 3: پیکربندی با ویژگیهای HTML None
-
درس 11: چرا HTML شما در مرورگر نمایش داده نمیشود؟ 03:55
-
تمرینهای عملی 00:13
-
درس 12: ساخت لینکهای قابل کلیک با HTML 04:19
-
درس 13: ساخت لینکهای دقیق در HTML 02:57
-
درس 14: ساختار یک URL 03:42
-
آزمون 4: ارتقاء سطح با لینکهای HTML None
-
درس 15: چگونه لینکها را در تبهای جدید مرورگر باز کنیم؟ 01:45
-
درس 16: نمایش کامل کد با Word Wrap 01:31
-
درس 17: لینکهای خارجی و داخلی در HTML 05:28
-
درس 18: درک تفاوت URLهای مطلق و نسبی 05:14
-
آزمون 5: لینک کردن صفحات مثل حرفهایها None
-
تمرینهای عملی 00:13
-
درس 19: چگونه تصاویر را در HTML اضافه کنیم؟ 02:38
-
درس 20: درک ویژگی src 01:53
-
درس 21: قرار دادن تصاویر در خطوط جداگانه 01:27
-
آزمون 6: اولین قدمهای شما با تصاویر HTML None
-
درس 22: چگونه تصاویر محلی را به HTML اضافه کنیم؟ 04:04
-
درس 23: تمرین کوچک 00:34
-
درس 24: استفاده از مسیرهای نسبی برای تصاویر 04:21
-
درس 25: تبدیل تصویر به لینک قابل کلیک 02:28
-
آزمون 7: لینکدهی و سازماندهی تصاویر None
-
تمرینهای عملی 00:13
-
درس 26: چگونه میتوان بهصورت دستی در VS Code کد را تورفتگی داد؟ 02:01
-
درس 27: شکستن خطوط با عنصر <br> 02:39
-
درس 28: افزودن خطوط جداکننده با <hr> 01:46
-
آزمون 8: خطوط جدید و جداسازیهای بصری None
-
تمرینهای عملی 00:13
-
درس 29: چگونه تصاویر را با CSS تغییر اندازه دهیم؟ 04:04
-
درس 30: CSS چیست و چگونه کار میکند؟ 03:42
-
درس 31: درک سلکتور تگ در CSS 04:36
-
آزمون 9: تسلط به اولین قوانین CSS شما None
-
درس 32: استایلدهی دقیق با کلاسهای CSS 04:08
-
درس 33: درک سلکتور کلاس در CSS 03:24
-
درس 34: استایل دادن به چند عنصر با یک کلاس 02:54
-
آزمون 10: استایلدهی هوشمندانهتر: سلکتور تگ در مقابل کلاس None
-
تمرینهای عملی 00:13
-
درس 35: تغییر اندازه متن با CSS 08:24
-
درس 36: تغییر رنگ متن با CSS 09:48
-
آزمون 11: اولین نقطه عطف استایلدهی CSS شما! None
-
درس 37: تغییر متن با CSS بخش 1 04:19
-
درس 38: تغییر متن با CSS بخش 2 07:55
-
آزمون 12: تبدیل متن و تعارض قوانین None
-
تمرینهای عملی 00:13
-
درس 39: افزودن و استایل دادن تصویر پوستر در سایدبار 03:32
-
درس 40: متن پوستر سایدبار 03:23
-
درس 41: ساخت نشانگر وضعیت آنلاین 08:27
-
درس 42: ضخیمتر کردن متن با CSS 02:15
-
درس 43: استایلدهی پاراگرافها با عرض و ارتفاع خط 04:46
-
درس 44: تکمیل نهایی سایدبار و پاکسازی پروژه 02:39
-
آزمون 13: از تصویر تا نشانگر: مهارتهای خود را بسنجید None
-
درس 45: اولین شبهکلاس CSS شما در عمل 05:04
-
درس 46: توضیح ساده حالت Hover در CSS 03:55
-
درس 47: تغییر رنگ لینک هنگام کلیک 01:10
-
آزمون 14: ارتقاء سطح با استایلدهی لینکها None
-
درس 48: Hover در مقابل فعال - ترتیب اهمیت دارد در CSS 05:58
-
درس 49: زیرخط دار شدن لینکها تنها هنگام Hover 03:28
-
درس 50: چالش - استایلدهی به تمام لینکها بهصورت بهینه در CSS 03:10
-
آزمون 15: Hover، کلیک و استایل! None
-
درس 51: سرگرمی با شبهکلاسهای Hover در CSS 01:33
-
درس 52: استفاده از شبهکلاسها روی هر عنصر HTML 03:49
-
درس 53: استفاده از افکتهای Hover و کلیک روی تصاویر 04:26
-
آزمون 16: واکنشگرایی هر چیز - تسلط به شبهکلاسها None
-
درس 54: استایل دادن به پسزمینه لینکها در CSS 04:08
-
درس 55: چگونه از رنگهای هگزا در CSS استفاده کنید؟ 08:06
-
درس 56: چگونه از رنگهای RGB در CSS استفاده کنید؟ 03:05
-
درس 57: استایل دادن به لینکهای بیشتر با رنگهای RGB و هگزا 03:36
-
درس 58: کاهش اندازه متن و پسزمینه 01:26
-
درس 59: افزودن انتقالهای نرم با CSS 04:35
-
درس 60: بررسی و ویرایش HTML با DevTools 05:56
-
درس 61: ویرایش زنده CSS 03:16
-
درس 62: بررسی در تب Computed 03:22
-
درس 63: چگونه هر وبسایتی را با DevTools بررسی کنیم؟ 06:18
-
درس 64: چگونه حالتهای Hover و کلیک را شبیهسازی کنیم؟ 03:43
-
درس 65: تغییرات در Developer Tools موقتی هستند 02:29
-
درس 66: درک مدل جعبه CSS - محتوا 05:36
-
درس 67: یادگیری چگونگی کارکرد padding 05:16
-
درس 68: یادگیری چگونگی کارکرد کادرها 04:49
-
درس 69: یادگیری چگونگی کارکرد حاشیهها 03:50
-
درس 70: فعال کردن ذخیره خودکار در VS Code 01:45
-
درس 71: چرا 40 + 30 برابر با 70 در حاشیههای CSS نیست؟ 04:14
-
درس 72: عناصر بلوکی در مقابل خطی 07:48
-
درس 73: بلوک در مقابل خطی - رفتار ویژگیهای CSS 03:57
-
درس 74: خاصیت Display 02:02
-
درس 75: ترکیب عناصر خطی و بلوکی با inline-block 01:38
-
درس 76: مینی پروژه واقعی - لینک ورود PayPal - بخش 1 04:06
-
درس 77: مینی پروژه واقعی - لینک ورود PayPal - بخش 2 03:17
-
درس 78: مینی پروژه واقعی - لینک ورود PayPal - بخش 3 05:39
-
درس 79: استفاده از divها برای گروهبندی و تو در تو کردن عناصر 05:27
-
درس 80: ساخت کامپوننت آمار با divهای تو در تو 05:50
-
درس 81: توضیح طرح بندی های عمودی و افقی 03:27
-
درس 82: استایل دادن به متن و فاصلهها برای کامپوننت آمار 05:15
-
درس 83: استایلدهی عنوان و توضیحات سایدبار 02:44
-
درس 84: بولد کردن بخشی از جمله با span 01:51
-
درس 85: تنظیم فاصله سایدبار و افزودن خط جداکننده 02:42
-
درس 86: استایل دادن به جداکننده و عنوان تصویر سایدبار 03:01
-
درس 87: لمسهای نهایی - استایل دادن به تصویر سایدبار 02:16
-
درس 88: ساخت صفحه وب استاندارد HTML5 06:10
-
درس 89: افزودن محتوای بدنه و استایل دادن آن با CSS 03:02
-
درس 90: افزودن ساختار به صفحه وب خود با سرفصلها 04:09
-
درس 91: افزودن زیرعنوان به صفحه 02:39
-
درس 92: استفاده از h3 برای سابسابهدینگها و محتوا 02:11
-
درس 93: ایجاد فهرستها در HTML 02:11
-
درس 94: ساخت جدولها با HTML 02:41
-
درس 95: استفاده از نهادهای HTML و تگ <pre> 04:04
-
درس 96: چگونه از سرفصلهای HTML صحیح استفاده کنید؟ 05:56
-
درس 97: ساخت فرم ورود ساده با HTML 08:25
-
درس 98: افزودن چکباکس به فرمهای HTML شما 04:30
-
درس 99: چگونه از گزینههای رادیویی استفاده کنیم؟ 03:42
-
درس 100: چگونه یک لیست کشویی اضافه کنیم؟ 02:22
-
درس 101: استفاده از Descendant Combinators در CSS 09:40
-
درس 102: بیشتر در مورد Descendant Combinators 02:43
-
درس 103: زنجیرهای کردن Descendant Combinators 02:47
-
درس 104: قرار ندادن عناصر بلوکی داخل پاراگرافها 02:51
-
درس 105: استفاده از Child Combinator در CSS 03:59
-
درس 106: ترکیب Child و Descendant Combinators 01:09
-
درس 107: ترکیب سلکتورها با ویرگول 03:02
-
درس 108: یادگیری چگونگی و زمان استفاده از سلکتور ID 06:04
-
درس 109: مخفی کردن نقاط گلولهای و padding در فهرستها 03:17
-
درس 110: چه چیزی میتوان در فهرستهای HTML قرار داد؟ 02:09
-
درس 111: افزودن سایه به عناصر با box-shadow 06:27
-
درس 112: افزودن سایههای متعدد 04:26
-
درس 113: مدیریت overflow 06:31
-
درس 114: چرخاندن عناصر با CSS Transform 03:51
-
درس 115: مقیاسبندی عناصر 03:36
-
درس 116: جابجایی عناصر با CSS Transform 01:51
-
درس 117: شفافسازی عناصر با استفاده از خاصیت opacity در CSS 03:07
-
درس 118: کنترل شفافیت رنگ با RGBA 04:00
-
درس 119: افزودن کامنت در HTML برای مخفی کردن کد 01:31
-
درس 120: چگونه در CSS کامنت بنویسیم؟ 05:31
-
درس 121: تنظیم فونتها با خاصیت font-family در CSS 08:13
-
درس 122: نحوه استفاده از line-height در CSS 02:10
-
درس 123: افزودن CSS خارجی به صفحه وب شما 07:44
-
درس 124: جابجایی عناصر با position relative در CSS 03:56
-
درس 125: استفاده از top, right, bottom, left در CSS 01:35
-
درس 126: استفاده از position: absolute برای جابهجایی آزادانه عناصر 04:03
-
درس 127: کشیدن عناصر با استفاده از Offsetهای مخالف در CSS 02:43
-
درس 128: ثابت کردن عناصر روی صفحه با position: fixed 01:54
-
درس 129: کنترل ترتیب لایهها با z-index 03:40
-
درس 130: ساخت پنجره مودال با موقعیتدهی 05:44
-
درس 131: فعالسازی Flexbox و تبدیل عناصر به آیتمهای فلکس 04:02
-
درس 132: مرکز کردن آیتمهای فلکس با justify-content 01:57
-
درس 133: تراز عمودی آیتمهای فلکس با align-items 02:43
-
درس 134: جهت طرح بندی فلکسباکس: سطر در مقابل ستون 04:23
-
درس 135: ویژگیهای فلکسباکس باید روی کانتینر تنظیم شوند 01:07
-
درس 136: افزودن فاصله بین آیتمهای فلکس با gap 02:24
-
درس 137: تراز کردن آیتمهای تکی فلکس با align-self 02:22
-
درس 138: افزایش اندازه آیتمهای فلکس با flex-grow 07:44
-
درس 139: یکسان کردن اندازه آیتمهای فلکس با flex-basis 05:05
-
درس 140: استفاده از flex-shrink برای توزیع فضای منفی آزاد 06:50
-
درس 141: استفاده از shorthand فلکس برای ترکیب ویژگیهای فلکس 02:26
-
درس 142: برنامهریزی طرح بندی صفحه 06:17
-
درس 143: ساخت اسکلت HTML هدر Reddit 06:08
-
درس 144: راهاندازی فایل header.css 07:21
-
درس 145: تغییر اندازه لوگو و حذف حاشیه بدنه 04:22
-
درس 146: افزودن padding و کادر به هدر 04:45
-
درس 147: تراز کردن افقی آیتمهای هدر با Flexbox 04:17
-
درس 148: شروع ساخت نوار جستجوی Reddit - ساختار و استایلها 04:06
-
درس 149: استایلدهی ورودی جستجو - متن جایگزین، بدون کادر و بدون حاشیه 02:48
-
درس 150: افزودن پسزمینه هنگام Hover 04:46
-
درس 151: تراز عمودی آیکون جستجو و ورودی 03:10
-
درس 152: مرکز کردن و گسترش نوار جستجو 10:15
-
درس 153: افزایش اندازه فونت ورودی و گرد کردن گوشهها 02:34
-
درس 154: افزودن حالات Hover و ترنزیشن به نوار جستجو 04:10
-
درس 155: شروع ساخت منوی کشویی جستجوی Reddit با موقعیتدهی 05:46
-
درس 156: موقعیتدهی منوی کشویی در زیر و پشت جستجو 06:44
-
درس 157: افزودن سایه و پسزمینه سفید 03:23
-
درس 158: ساخت کانتینر قابل اسکرول برای نتایج جستجو 02:54
-
درس 159: شروع ساخت کامپوننت جستجوهای اخیر 04:25
-
درس 160: ساختاردهی آیتمهای جستجوی اخیر با Flexbox 03:45
-
درس 161: استایل دادن به حالتهای Hover و فعال آیتمهای جستجو 07:46
-
درس 162: اصلاح گوشههای گرد و حالت فعال برای آیتمهای جستجو 04:00
-
درس 163: موقعیتدهی دکمه حذف در آیتمهای جستجو 08:52
-
درس 164: استایلدهی به دکمه حذف هنگام Hover و Active 08:03
-
درس 165: نهایی کردن آیتمهای جستجو 02:10
-
درس 166: شروع بخش ترند امروز 04:26
-
درس 167: افزودن ساختار هدر بخش ترند امروز 04:47
-
درس 168: استایلدهی هدر ترند - آیکون، فضای داخلی و عنوان 04:48
-
درس 169: اعمال فونت Roboto با Google Fonts 10:01
-
چالش: ساخت لیست آیتمهای ترند بهصورت مستقل 01:40
-
درس 170: ساختاردهی اولین آیتم ترند 04:55
-
درس 171: رفع مشکلات فونت، طرح بندی و وراثت 10:14
-
درس 172: استایلدهی توضیحات و افزودن کامپوننت منبع 06:31
-
درس 173: اتمام بخش چپ آیتم ترند 05:08
-
درس 174: استایل دهی تصویر پیشنمایش ترند با object-fit 06:08
-
درس 175: استایل دادن به آیتمهای ترند با کادر و حالتهای تعاملی 01:33
-
درس 176: قابل اسکرول کردن منوی کشویی با max-height 07:10
-
درس 177: واکنشگرایی منوی کشویی با استفاده از vh و calc() 07:10
-
درس 178: نمایش منوی کشویی تنها هنگام فوکوس روی جستجو 06:18
-
درس 179: نگه داشتن منوی کشویی قابل مشاهده هنگام کلیک داخل آن 02:11
-
درس 180: شروع اکشنهای هدر - ساختار و اولین دکمه 05:02
-
درس 181: استایل دادن به دکمههای هدر - حالتها و شکلها 07:21
-
درس 182: افزودن همه دکمههای اکشن هدر و آواتار 03:00
-
درس 183: ساخت نشانگر اعلان 05:05
-
درس 184: موقعیتدهی شمارنده اعلان 04:22
-
درس 185: شروع ساخت تولتیپهای هدر 07:02
-
درس 186: موقعیتدهی و مرکز کردن تولتیپ زیر دکمه 07:29
-
درس 187: نمایش تولتیپ هنگام Hover و افزودن آن به همه دکمهها 04:12
-
درس 188: سفارشیسازی موقعیت تولتیپ برای دکمه پروفایل 04:21
-
درس 189: نمایش و مخفی کردن منوی پروفایل 07:33
-
درس 190: استایلدهی و موقعیتدهی منوی پروفایل 06:17
-
درس 191: رفع مشکلات مکاننما، عرض و رفتار تولتیپ 07:51
-
درس 192: نهایی کردن منوی پروفایل 04:04
-
درس 193: شروع ساخت سایدبار 04:18
-
درس 194: راهاندازی sidebar.css و تنظیم مجدد استایلهای لیست 05:11
-
درس 195: استایل دادن به آیتمهای سایدبار و تبدیل آنها به لینک 06:01
-
درس 196: ساخت بخش جمعشونده در سایدبار 05:20
-
درس 197: انیمیت فلش سایدبار با transform و transition 06:21
-
درس 198: چالش سایدبار - افزودن بخشهای باقیمانده 02:42
-
درس 199: افزودن و استایل دادن لینک کپیرایت 02:40
-
درس 200: حذف آخرین جداکننده با استفاده از :last-child 02:07
-
درس 201: ثابت و قابل اسکرول کردن سایدبار 07:57
-
درس 202: شروع ساخت بخش محتوای اصلی 06:19
-
درس 203: رفع همپوشانی پسزمینه اصلی و سایدبار 02:37
-
درس 204: شروع ساخت بخش اصلی هدر و تنظیمات بنر 04:01
-
درس 205: ایجاد همپوشانی تصویر جامعه با بنر 02:06
-
درس 206: چالش - ساخت لیست پستها و سایدبار سمت راست 01:44
-
درس 207: استفاده از آیکونهای Font Awesome 05:20
-
درس 208: ثابت کردن هدر و رفع مشکلات همپوشانی 04:17
-
درس 209: ثابت کردن سایدبار هنگام اسکرول 02:43
-
درس 210: قابل اسکرول کردن سایدبار و حفظ عرض آن 03:06
-
پروژه پیشرفته - چالش شما آماده است 00:40
مشخصات آموزش
دوره HTML و CSS از ابتدا: امروز اولین صفحات وب خود را بسازید
- تاریخ به روز رسانی: 1404/09/07
- سطح دوره:مقدماتی
- تعداد درس:235
- مدت زمان :15:05:56
- حجم :7.43GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy