یادگیری HTML و CSS در 7 روز
همیشه دوست داشتی وارد دنیای برنامهنویسی وب بشی، ولی هر بار با انبوهی از دورههای ۶۰ ساعته و مسیرهای گیجکننده روبهرو شدی و بیخیالش شدی؟ مشکل تو نبودی — مشکل این بود که هیچکس بهت یه مسیر کوتاه، روشن و عملی نشون نداد.
HTML و CSS پایه و اساس کل وب هستن. هر سایتی که توی عمرت دیدی، روی همین دو تا تکنولوژی ساخته شده. خبر خوب اینه که برای شروع، لازم نیست ماهها وقت بذاری. توی این بوتکمپ، طی فقط ۷ روز و با تمرکز روی تمرین واقعی، از یه آدم بدون هیچ پیشزمینهای تبدیل میشی به کسی که میتونه یه صفحه وب کامل و ریسپانسیو رو از صفر بسازه.
این دوره پرحرفی و حاشیه نداره. مستقیم میره سر اصل مطلب، با توضیحهای فشرده، تصاویر انیمیشنی و کلی تمرین عملی — دقیقاً مثل یه بوتکمپ واقعی که قراره توی کمترین زمان بیشترین مهارت رو بهت بده.
این دوره دقیقاً برای کیه؟
این بوتکمپ برای تو ساخته شده اگه:
- مبتدی کامل هستی و میخوای بدون هیچ پیشزمینهای وارد دنیای برنامهنویسی وب بشی.
- وقت زیادی نداری و دنبال یه مسیر فشرده و سریع برای یادگیری پایههای وب هستی.
- میخوای فرانتاند کار کنی و لازمه اول HTML و CSS رو محکم یاد بگیری.
- تجربه نیمهکاره داری ولی هیچوقت مفاهیم پیشرفتهتر مثل Flexbox و Grid برات جا نیفتاده.
- قصد فریلنسری داری و میخوای بتونی برای مشتریها سایت بسازی.
- دانشجو یا علاقهمندی هستی که میخوای یه مهارت ارزشمند و قابلفروش یاد بگیری.
چی یاد میگیری؟
توی این دوره از همونجایی شروع میکنی که هر برنامهنویس وبی شروع کرده: ساختار صفحه. یاد میگیری چطور با HTML اسکلت یه سایت رو بسازی، محتوا رو معنادار سازماندهی کنی و مرورگر چطور کدت رو میخونه و به صفحه تبدیل میکنه.
بعد وارد قلب ماجرا میشی — CSS. اینجاست که سایتهات از یه متن خشک تبدیل میشن به چیزی که واقعاً قشنگه. از سینتکس پایه شروع میکنی و کمکم میرسی به مفاهیم پیشرفتهتر، طوری که دقیقاً میفهمی پشت هر استایل چه اتفاقی میافته، نه اینکه فقط کد رو کپی کنی.
مهمترین بخش دوره طراحی ریسپانسیو هست. یاد میگیری با Flexbox و Grid چطور صفحههایی بسازی که روی موبایل، تبلت و دسکتاپ همهجا درست و مرتب نمایش داده بشن — همون مهارتی که هر کارفرما و مشتریای ازت میخواد. و چون کل دوره روی یادگیری از طریق انجامدادن بنا شده، با تمرینها، کوییزها و پروژههای کوچیک و بزرگ، مهارتهات رو واقعاً درونی میکنی، نه اینکه فقط تماشاگر باشی.
مزیتهای کلیدی
فشرده و بدون اتلاف وقت
این دوره مثل یه بوتکمپ واقعی طراحی شده. خبری از ویدیوهای کشدار و حاشیهای نیست. هر دقیقهش هدفمنده و مستقیم میره سر مفاهیم کلیدی، تا توی کوتاهترین زمان بیشترین یادگیری رو داشته باشی.
یادگیری از طریق انجام دادن
بهجای اینکه فقط بشینی و تماشا کنی، توی هر مرحله تمرین میکنی. کوییزها، چالشها و پروژههای عملی باعث میشن مفاهیم واقعاً توی ذهنت بمونن و مهارت رو در عمل به دست بیاری.
تمرکز جدی روی CSS
خیلی از دورهها CSS رو سرسری رد میکنن. اینجا برعکسه — CSS قلب دورهست. مفاهیم پیچیده به تکههای ساده و قابلفهم شکسته میشن تا دقیقاً بفهمی چطور کار میکنن.
تسلط بر طراحی ریسپانسیو
با Flexbox و Grid یاد میگیری چطور سایتهایی بسازی که روی هر دستگاهی عالی به نظر برسن. این همون مهارتیه که مرز بین یه مبتدی و یه فرانتاند کار حرفهای رو مشخص میکنه.
مناسب مبتدی و نیمهحرفهای
اگه از صفر شروع میکنی، قدمبهقدم همراهیت میکنه. اگه از قبل یهکم بلدی، مفاهیم پیشرفتهتر بهت دید تازه میدن. هر دو گروه از این دوره ارزش میگیرن.
پروژههای واقعی، نه تئوری خشک
چیزی که یاد میگیری رو بلافاصله توی پروژههای واقعی پیاده میکنی. آخر مسیر، یه چیز ملموس داری که خودت ساختی و میتونی نشونش بدی.
خروجی نهایی / دستاوردها
بعد از این دوره میتونی:
- ساختار کامل یه صفحه وب رو با HTML از صفر بسازی.
- با CSS سایتهات رو حرفهای استایل بدی و ظاهرشون رو کنترل کنی.
- صفحههای ریسپانسیو بسازی که روی موبایل، تبلت و دسکتاپ درست نمایش داده بشن.
- با Flexbox و Grid لایوتهای پیچیده و مدرن طراحی کنی.
- یه وبسایت واقعی و کامل از صفر تا صد بسازی.
- پایه محکمی برای ورود به فرانتاند و یادگیری جاوااسکریپت داشته باشی.
جمعبندی و CTA
لازم نیست ماهها صبر کنی تا اولین سایتت رو بسازی. این بوتکمپ همهچیز رو توی ۷ روز و بهشکل عملی بهت یاد میده. کافیه شروع کنی — همین حالا اولین قدم رو بردار و این هفته اولین وبسایت واقعیات رو بساز.
[ همین حالا در دوره ثبتنام کن و سفر برنامهنویسی وب رو شروع کن ]
سرفصل های دوره
خوش آمدید به روز اول، سرفصل دوره
ویژوال استودیو کد را نصب کنید
اولین صفحه وب خود را با HTML بسازید
برچسبها و صفات
چگونه از ویرایشگر کد ویژوال استودیو کد استفاده کنیم
ساختار پایهی HTML
راهاندازی Live Server (رفرش خودکار مرورگر)
تصاویر را به وبسایت خود اضافه کنید
چطور مسیرهای نسبی را مشخص کنیم
آشنایی با تصاویر HTML (ویژگیها)
درس تکمیلی تگهای معنایی HTML
تگهای قالببندی متن
به وبسایت خود لینک اضافه کنید (تگ anchor)
ایجاد لینکهای نشانک
توضیحات
پروژه مبتدی HTML
کد حل پروژه مقدماتی HTML
انتظار چه چیزی را داشته باشیم
فرمها
انواع ورودی
ابزارهای توسعهدهنده چگونه یک وبسایت را در مرورگر بررسی کنیم
چطور جدول بسازیم (تگ table)
یک طرح ساده با یک جدول ایجاد کنید
ویدیوها را به صفحه وب خود اضافه کنید
نمایش ویدیوهای یوتیوب در وبسایت
تعریف راهنماهای ابزار
CSS چیست
سینتکس CSS
چطور CSS را در کد HTML خود پیادهسازی کنیم
رنگها
کلاسها و آیدیها
به روز دوم خوش آمدید - طرح کلی بخش
ارتفاع و عرض عناصر را کنترل کنید
به عناصر خود حاشیه اضافه کنید
میانبر حاشیه
حاشیه ها
مدل جعبه
باکسسایزینگ بوردر باکس
انتخابگر جهانی
عناصر سطح بلاک در مقابل عناصر درونخطی
نمایش خصوصیت
گوشههای گرد (ویژگی border-radius)
خصوصیات استایلدهی متن
تنظیمات فونت
فونت-فمیلی و فونت-ویت
عناصر را در مرکز قرار بده
به روز سوم خوش آمدید - طرح کلی بخش
ویژگی پسزمینه (اضافه کردن تصاویر به وبسایت شما)
رنگهای شفاف، مقادیر آلفا و کدری
گرادیان خطی و گرادیان شعاعی
سایهها
کامباینیتورها
انتخابگر ویژگی
کلاسهای مجازی
گذارها
موقعیتها
موقعیتها مینی پروژه ساخت یک پاپآپ
عناصر شبه
متغیرهای CSS خصوصیات سفارشی (مفهوم مدرن CSS)
به روز چهارم خوش آمدید - طرح کلی بخش
نوار ناوبری
صفحه اصلی
درباره ما
حداقل عرض و حداکثر عرض
صفحه محصولات
صفحه ورود
انیمیشنها
پروژه کوچک ساخت انیمیشن صفحه بارگذاری
خوش آمدید به روز پنجم - طرح کلی بخش
تراز افقی و عمودی
flex-direction و gap
space-between، space-around، space-evenly
flex-wrap، align-content در مقابل align-items
چیدمانهای تودرتوی فلکسباکس و column-gap در مقابل row-gap
flex-grow در مقابل flex-shrink
فلکسباکس را با min-width و max-width ترکیب کنید
پرسوجوهای رسانهای
نکات اضافی و خلاصه
پروژه ساخت یک طرحبندی انعطافپذیر واکنشگرا
به روز ششم خوش آمدید، طرح کلی بخش
ستونها و ردیفها
همترازی درون یک سلول گرید
ستونها و ردیفهای خودکار برای گریدهای بینهایت
grid-auto-flow
عنصر را در چندین سلول گسترش دهید
ایجاد یک بنتو گرید پیچیده با grid-template-areas
ایجاد طرحبندیهای CSS Grid واکنشگرا با GRID WRAPPING
ساخت یک نوار ناوبری واکنشگرا با انیمیشن سایدبار
کلاسهای شبه not() و has()
انیمیشنهای حاشیه با استفاده از conic-gradients و custom-properties ایجاد کنید
به روز هفتم خوش آمدید طرح کلی بخش
آمادهسازیها
بخش سربرگ
بخش مهارتهای من
بخش پروژه
فوتر و طراحی وب واکنشگرا
وبسایت را مستقر کنید (اختیاری)
آخرین افکار
معرفی پروژه
بخش هدر HTML
بیایید هدر را استایل دهیم
درباره ما
گرید تصویر
بخش سوالات متداول
بیا وبسایت رو واکنشگرا کنیم
پیشنیاز های دوره چه چیزهایی هستند؟
- علاقه به یادگیری