loading...

یادگیری HTML و CSS در 7 روز

<p>⚡️ از صفر تا اولین سایت، فقط در ۷ روز &mdash; بدون معطلی، مستقیم سر اصل مطلب<br /> 🎯 یادگیری با تمرین واقعی &mdash; کوییز، چالش و پروژه، نه فقط تماشا کردن<br /> 📱 تسلط بر طراحی ریسپانسیو &mdash; با Flexbox و Grid، سایت&zwnj;هایی بساز که همه&zwnj;جا عالی نمایش داده بشن<br /> 🚀 بدون هیچ پیش&zwnj;نیازی &mdash; حتی اگه تا حالا یه خط کد ننوشته باشی<br /> 💼 پایه&zwnj;ی محکم ورود به فرانت&zwnj;اند &mdash; اولین قدم مسیر شغلی برنامه&zwnj;نویسی وب</p>

قیمت: 399,000 تومان 199,500 تومان

قیمت ارزی (تتر):

X
06 : 10 : 28
105 جلسه
14 فصل
2 سال پشتیبانی

یادگیری HTML و CSS در 7 روز

همیشه دوست داشتی وارد دنیای برنامه‌نویسی وب بشی، ولی هر بار با انبوهی از دوره‌های ۶۰ ساعته و مسیرهای گیج‌کننده روبه‌رو شدی و بی‌خیالش شدی؟ مشکل تو نبودی — مشکل این بود که هیچ‌کس بهت یه مسیر کوتاه، روشن و عملی نشون نداد.

HTML و CSS پایه و اساس کل وب هستن. هر سایتی که توی عمرت دیدی، روی همین دو تا تکنولوژی ساخته شده. خبر خوب اینه که برای شروع، لازم نیست ماه‌ها وقت بذاری. توی این بوت‌کمپ، طی فقط ۷ روز و با تمرکز روی تمرین واقعی، از یه آدم بدون هیچ پیش‌زمینه‌ای تبدیل می‌شی به کسی که می‌تونه یه صفحه وب کامل و ریسپانسیو رو از صفر بسازه.

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

این دوره دقیقاً برای کیه؟

این بوت‌کمپ برای تو ساخته شده اگه:

  • مبتدی کامل هستی و می‌خوای بدون هیچ پیش‌زمینه‌ای وارد دنیای برنامه‌نویسی وب بشی.
  • وقت زیادی نداری و دنبال یه مسیر فشرده و سریع برای یادگیری پایه‌های وب هستی.
  • می‌خوای فرانت‌اند کار کنی و لازمه اول HTML و CSS رو محکم یاد بگیری.
  • تجربه نیمه‌کاره داری ولی هیچ‌وقت مفاهیم پیشرفته‌تر مثل Flexbox و Grid برات جا نیفتاده.
  • قصد فریلنسری داری و می‌خوای بتونی برای مشتری‌ها سایت بسازی.
  • دانشجو یا علاقه‌مندی هستی که می‌خوای یه مهارت ارزشمند و قابل‌فروش یاد بگیری.

چی یاد می‌گیری؟

توی این دوره از همون‌جایی شروع می‌کنی که هر برنامه‌نویس وبی شروع کرده: ساختار صفحه. یاد می‌گیری چطور با HTML اسکلت یه سایت رو بسازی، محتوا رو معنادار سازماندهی کنی و مرورگر چطور کدت رو می‌خونه و به صفحه تبدیل می‌کنه.

بعد وارد قلب ماجرا می‌شی — CSS. اینجاست که سایت‌هات از یه متن خشک تبدیل می‌شن به چیزی که واقعاً قشنگه. از سینتکس پایه شروع می‌کنی و کم‌کم می‌رسی به مفاهیم پیشرفته‌تر، طوری که دقیقاً می‌فهمی پشت هر استایل چه اتفاقی می‌افته، نه اینکه فقط کد رو کپی کنی.

مهم‌ترین بخش دوره طراحی ریسپانسیو هست. یاد می‌گیری با Flexbox و Grid چطور صفحه‌هایی بسازی که روی موبایل، تبلت و دسکتاپ همه‌جا درست و مرتب نمایش داده بشن — همون مهارتی که هر کارفرما و مشتری‌ای ازت می‌خواد. و چون کل دوره روی یادگیری از طریق انجام‌دادن بنا شده، با تمرین‌ها، کوییزها و پروژه‌های کوچیک و بزرگ، مهارت‌هات رو واقعاً درونی می‌کنی، نه اینکه فقط تماشاگر باشی.

مزیت‌های کلیدی

فشرده و بدون اتلاف وقت

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

یادگیری از طریق انجام دادن

به‌جای اینکه فقط بشینی و تماشا کنی، توی هر مرحله تمرین می‌کنی. کوییزها، چالش‌ها و پروژه‌های عملی باعث می‌شن مفاهیم واقعاً توی ذهنت بمونن و مهارت رو در عمل به دست بیاری.

تمرکز جدی روی CSS

خیلی از دوره‌ها CSS رو سرسری رد می‌کنن. اینجا برعکسه — CSS قلب دوره‌ست. مفاهیم پیچیده به تکه‌های ساده و قابل‌فهم شکسته می‌شن تا دقیقاً بفهمی چطور کار می‌کنن.

تسلط بر طراحی ریسپانسیو

با Flexbox و Grid یاد می‌گیری چطور سایت‌هایی بسازی که روی هر دستگاهی عالی به نظر برسن. این همون مهارتیه که مرز بین یه مبتدی و یه فرانت‌اند کار حرفه‌ای رو مشخص می‌کنه.

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

اگه از صفر شروع می‌کنی، قدم‌به‌قدم همراهیت می‌کنه. اگه از قبل یه‌کم بلدی، مفاهیم پیشرفته‌تر بهت دید تازه می‌دن. هر دو گروه از این دوره ارزش می‌گیرن.

پروژه‌های واقعی، نه تئوری خشک

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

خروجی نهایی / دستاوردها

بعد از این دوره می‌تونی:

  • ساختار کامل یه صفحه وب رو با HTML از صفر بسازی.
  • با CSS سایت‌هات رو حرفه‌ای استایل بدی و ظاهرشون رو کنترل کنی.
  • صفحه‌های ریسپانسیو بسازی که روی موبایل، تبلت و دسکتاپ درست نمایش داده بشن.
  • با Flexbox و Grid لایوت‌های پیچیده و مدرن طراحی کنی.
  • یه وب‌سایت واقعی و کامل از صفر تا صد بسازی.
  • پایه محکمی برای ورود به فرانت‌اند و یادگیری جاوااسکریپت داشته باشی.

جمع‌بندی و CTA

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

[ همین حالا در دوره ثبت‌نام کن و سفر برنامه‌نویسی وب رو شروع کن ]

سرفصل های دوره

خوش آمدید به روز اول
  • خوش آمدید به روز اول، سرفصل دوره

    00:03:28
  • ویژوال استودیو کد را نصب کنید

    00:02:13
  • روز اول مبانی HTML5
  • اولین صفحه وب خود را با HTML بسازید

    00:08:02
  • برچسب‌ها و صفات

    00:04:31
  • چگونه از ویرایشگر کد ویژوال استودیو کد استفاده کنیم

    00:05:13
  • ساختار پایه‌ی HTML

    00:07:54
  • راه‌اندازی Live Server (رفرش خودکار مرورگر)

    00:01:55
  • تصاویر را به وب‌سایت خود اضافه کنید

    00:02:45
  • چطور مسیرهای نسبی را مشخص کنیم

    00:02:58
  • آشنایی با تصاویر HTML (ویژگی‌ها)

    00:05:27
  • درس تکمیلی تگ‌های معنایی HTML

    00:04:11
  • تگ‌های قالب‌بندی متن

    00:01:59
  • به وب‌سایت خود لینک اضافه کنید (تگ anchor)

    00:04:55
  • ایجاد لینک‌های نشانک

    00:01:49
  • توضیحات

    00:02:34
  • پروژه مبتدی HTML

    00:01:08
  • کد حل پروژه مقدماتی HTML

    00:02:57
  • روز اول مفاهیم پیشرفته HTML
  • انتظار چه چیزی را داشته باشیم

    00:01:25
  • فرم‌ها

    00:06:06
  • انواع ورودی

    00:06:06
  • ابزارهای توسعه‌دهنده چگونه یک وب‌سایت را در مرورگر بررسی کنیم

    00:03:40
  • چطور جدول بسازیم (تگ table)

    00:02:56
  • یک طرح ساده با یک جدول ایجاد کنید

    00:02:16
  • ویدیوها را به صفحه وب خود اضافه کنید

    00:03:07
  • نمایش ویدیوهای یوتیوب در وب‌سایت

    00:01:15
  • تعریف راهنماهای ابزار

    00:01:23
  • روز اول: مقدمه‌ای بر CSS
  • CSS چیست

    00:01:12
  • سینتکس CSS

    00:03:58
  • چطور CSS را در کد HTML خود پیاده‌سازی کنیم

    00:04:45
  • رنگ‌ها

    00:04:41
  • کلاس‌ها و آی‌دی‌ها

    00:04:40
  • روز دوم مبانی CSS بخش
  • به روز دوم خوش آمدید - طرح کلی بخش

    00:01:17
  • ارتفاع و عرض عناصر را کنترل کنید

    00:04:07
  • به عناصر خود حاشیه اضافه کنید

    00:03:20
  • میانبر حاشیه

    00:00:57
  • حاشیه ها

    00:03:32
  • مدل جعبه

    00:04:24
  • باکس‌سایزینگ بوردر باکس

    00:03:06
  • انتخابگر جهانی

    00:01:49
  • عناصر سطح بلاک در مقابل عناصر درون‌خطی

    00:02:10
  • نمایش خصوصیت

    00:05:26
  • گوشه‌های گرد (ویژگی border-radius)

    00:03:07
  • خصوصیات استایل‌دهی متن

    00:06:22
  • تنظیمات فونت

    00:05:30
  • فونت-فمیلی و فونت-ویت

    00:03:47
  • عناصر را در مرکز قرار بده

    00:04:12
  • روز سوم بخش متوسط CSS
  • به روز سوم خوش آمدید - طرح کلی بخش

    00:01:23
  • ویژگی پس‌زمینه (اضافه کردن تصاویر به وب‌سایت شما)

    00:03:38
  • رنگ‌های شفاف، مقادیر آلفا و کدری

    00:02:03
  • گرادیان خطی و گرادیان شعاعی

    00:07:35
  • سایه‌ها

    00:02:52
  • کامباینیتورها

    00:04:49
  • انتخابگر ویژگی

    00:03:00
  • کلاس‌های مجازی

    00:06:42
  • گذارها

    00:03:21
  • موقعیت‌ها

    00:04:33
  • موقعیت‌ها مینی پروژه ساخت یک پاپ‌آپ

    00:05:42
  • عناصر شبه

    00:05:00
  • متغیرهای CSS خصوصیات سفارشی (مفهوم مدرن CSS)

    00:02:06
  • روز ۴ پروژه مبتدی ساخت یک وب‌سایت چند صفحه‌ای
  • به روز چهارم خوش آمدید - طرح کلی بخش

    00:01:09
  • نوار ناوبری

    00:06:04
  • صفحه اصلی

    00:05:27
  • درباره ما

    00:03:54
  • حداقل عرض و حداکثر عرض

    00:03:17
  • صفحه محصولات

    00:03:28
  • صفحه ورود

    00:03:00
  • روز ۴ انیمیشن‌های CSS
  • انیمیشن‌ها

    00:06:35
  • پروژه کوچک ساخت انیمیشن صفحه بارگذاری

    00:01:17
  • روز پنجم CSS Flexbox و طراحی وب واکنش‌گرا
  • خوش آمدید به روز پنجم - طرح کلی بخش

    00:01:13
  • تراز افقی و عمودی

    00:02:44
  • flex-direction و gap

    00:02:29
  • space-between، space-around، space-evenly

    00:01:31
  • flex-wrap، align-content در مقابل align-items

    00:02:19
  • چیدمان‌های تودرتوی فلکس‌باکس و column-gap در مقابل row-gap

    00:01:48
  • flex-grow در مقابل flex-shrink

    00:04:12
  • فلکس‌باکس را با min-width و max-width ترکیب کنید

    00:01:30
  • پرس‌وجوهای رسانه‌ای

    00:03:38
  • نکات اضافی و خلاصه

    00:02:11
  • پروژه ساخت یک طرح‌بندی انعطاف‌پذیر واکنش‌گرا

    00:00:44
  • روز ۶ CSS Grid
  • به روز ششم خوش آمدید، طرح کلی بخش

    00:00:46
  • ستون‌ها و ردیف‌ها

    00:01:24
  • هم‌ترازی درون یک سلول گرید

    00:01:41
  • ستون‌ها و ردیف‌های خودکار برای گرید‌های بی‌نهایت

    00:01:24
  • grid-auto-flow

    00:01:08
  • عنصر را در چندین سلول گسترش دهید

    00:02:59
  • ایجاد یک بنتو گرید پیچیده با grid-template-areas

    00:02:55
  • ایجاد طرح‌بندی‌های CSS Grid واکنش‌گرا با GRID WRAPPING

    00:05:48
  • روز ۶ اضافی میکس مدرن CSS
  • ساخت یک نوار ناوبری واکنش‌گرا با انیمیشن سایدبار

    00:14:19
  • کلاس‌های شبه not() و has()

    00:05:47
  • انیمیشن‌های حاشیه با استفاده از conic-gradients و custom-properties ایجاد کنید

    00:05:56
  • روز ۷ پروژه ساخت و استقرار وب‌سایت پورتفولیو
  • به روز هفتم خوش آمدید طرح کلی بخش

    00:02:15
  • آماده‌سازی‌ها

    00:01:31
  • بخش سربرگ

    00:04:58
  • بخش مهارت‌های من

    00:03:46
  • بخش پروژه

    00:03:42
  • فوتر و طراحی وب واکنش‌گرا

    00:06:14
  • وب‌سایت را مستقر کنید (اختیاری)

    00:03:34
  • مراحل بعدی
  • آخرین افکار

    00:02:34
  • پروژه جایزه: ساخت یک وب‌سایت شخصی
  • معرفی پروژه

    00:00:46
  • بخش هدر HTML

    00:03:19
  • بیایید هدر را استایل دهیم

    00:06:50
  • درباره ما

    00:01:37
  • گرید تصویر

    00:03:29
  • بخش سوالات متداول

    00:01:49
  • بیا وب‌سایت رو واکنش‌گرا کنیم

    00:04:08
  • پیشنیاز های دوره چه چیزهایی هستند؟

    • علاقه به یادگیری

    نظرات دانشجویان

    مدرس دوره

    کدیاد پلاس (Codeyad Plus)