سرفصل های دوره
فصل اول: گام های اولیه
نحوه ارسال تمرین و دریافت امتیاز
مروری بر محتویات این دوره
نگاه کلی به طراحی وب
راه اندازی VS Code
ساخت اولین صفحه وب
تنظیمات VS Code
نکات مهم برای استفاده بهتر از دوره
نحوه استفاده از فایل های دوره
فصل دوم: مقدمات HTML
HTML چیه؟
ساختار صفحات HTML
المان های متنی
المان های متنی بیشتر، لیست ها و ...
تصاویر و Attribute ها
لینک ها
ساختارمند کردن صفحه
نگاهی بر سمانتیک (Semantic HTML)
نصب چند افزونه دیگر روی VS Code
چالش شماره 1
چالش شماره 2
فصل سوم: مقدمات CSS
معرفی محتوای فصل
CSS چیه؟
سه روش استفاده از CSS
استایل دادن به متن ها
آشنایی با selector ها
سلکتورهای class و id
کار با رنگ ها
سودوکلاس ها (Pseudo Class)
استایل دهی به لینک ها
آشنایی با ابزار Chrome Devtools
تداخل بین selector ها
ارث بری (Inheritance) و Universal Selector
چالش شماره 1
مروری بر Box Model
استفاده از margin و padding
بازی با ابعاد المان ها
وسط چین کردن صفحه
چالش شماره 2
انواع Box Type ها
پوزیشن دهی مطلق (Absolute Positioning) به المان ها
سودو المان ها (Pseudo Elements)
مهارت های طراح وب: نحوه سرچ کردن و مطالعه مستندات
مهارت های طراح وب: دیباگ کردن و خطایابی
چالش شماره 3
راست چین کردن و فارسی سازی پروژه
فصل چهارم: آشنایی با layout ها، Flexbox و CSS Grid
معرفی فصل
3 روش برای ساخت layout
استفاده از float
رفع مشکل float
ساخت یک layout ساده با float
Box Sizing و Border-box
چالش شماره 1
نّگاه گذرا به Flexbox
Flexbox چیه؟
spacing و align کردن آیتم ها با flexbox
آشنایی با پراپرتی Flex
اعمال فلکس باکس روی پروژه
ساخت یک Layout ساده با فلکس باکس
چالش شماره 2
نگاه گذرا به CSS Grid
CSS Grid چیه؟
سایزبندی سط و ستون های Grid
پوزیشن دهی به آیتم ها در Grid
align کردن Grid Item ها و Grid Track ها
ساخت یک Layout ساده با CSS Grid
چالش شماره 3
فصل پنجم: قوانین طراحی وب
معرفی این فصل
مقدمات شروع پروژه این فصل
وب دیزاین اصلا چی هست؟
#1 تایپوگرافی: قوانین استفاده از تایپوگرافی در سایت ها
اعمال قوانین تایپوگرافی روی پروژه
استفاده از فونت های فارسی
#2 رنگ ها: قوانین استفاده از رنگ در وبسایت
اعمال قوانین رنگ ها روی پروژه
#3 تصاویر: قوانین استفاده از تصویر
#4 آیکون ها: قوانین استفاده از آیکون در طراحی سایت
استفاده از آیکون در پروژه
#5 سایه ها: قوانین استفاده از سایه روی المان ها
اعمال سایه ها روی پروژه
#6 border-radius: قوانین استفاده از border-radius
اعمال border-radius روی پروژه
#7 فضای خالی: قوانین استفاده از فضای خالی در صفحات سایت
#8 ساسله مراتب بصری یا Visual Hierarchy
اعمال فضای خالی و visual hierarchy روی پروژه
#9 تجربه کاربری یا User Exprience
شخصیت سایت (Website Personality) چیه؟
تکه گمشده پازل طراحی وب: مثل یک حرفه ای الهام بگیر
فصل ششم: ساخت چند کامپوننت و Layout کاربردی
ساخت یک آکاردئون (Accordion) - قسمت اول
ساخت یک آکاردئون (Accordion) - قسمت دوم
ساخت یک کامپوننت کاروسل (Carousel) - قسمت اول
ساخت یک کامپوننت کاروسل (Carousel) - قسمت دوم
کار با جدول ها - قسمت اول
کار با جدول ها - قسمت دوم
چالش شماره 1 - ساخت صفحه بندی (Pagination)
ساخت Hero Section - قسمت اول
ساخت Hero Section - قسمت دوم
ساخت Layout یک وب اپلیکیشن - قسمت اول
ساخت Layout یک وب اپلیکیشن - قسمت دوم
فصل هفتم: طراحی پروژه واقعی "غذاساز" - نسخه دسکتاپ
معرفی و پیش نمایش پروژه "غذاساز"
7 مرحله برای ساخت یک وبسایت بی نظیر
تعریف و طرح ریزی پروژه (گام های 1 و 2)
ایده پردازی طرح اولیه بخش های مختلف سایت
شروع کدنویسی پروژه (گام سوم)
اصول طراحی ریسپانسیو (واکنشگرا)
rem و max-width
ساخت قسمت Hero - بخش اول
ساخت قسمت Hero - بخش دوم
ساخت قسمت Hero - بخش سوم
بخش header سایت
طراحی بخش منو (Navigation)
ساخت سیستم Grid قابل استفاده مجدد
ساخت بخش "غذاساز چطور کار میکنه؟" - قسمت اول
ساخت بخش "غذاساز چطور کار میکنه؟" - قسمت دوم
طراحی قسمت شرکت های همکار
ساخت بخش غذاها - قسمت اول
ساخت بخش غذاها - قسمت دوم
ساخت بخش غذاها - قسمت سوم
بخش رضایت مشتریان
گالری تصاویر
ساخت بخش جدول قیمت ها - قسمت اول
ساخت بخش جدول قیمت ها - قسمت دوم
قسمت ویژگی ها
ساخت فرم ثبت نام - قسمت اول
ساخت فرم ثبت نام - قسمت دوم
ساخت فرم ثبت نام - قسمت سوم
بخش فوتر - قسمت اول
بخش فوتر - قسمت دوم
فصل هشتم: پروژه "غذاساز" - طراحی ریسپانسیو (واکنشگرا)
نگاه کلی به این فصل
مدیا کوئری چیه؟ (media queries)
Break Point ها چطور انتخاب میشن؟
ریسپانسیو کردن برای لپ تاپ های کوچک
ریسپانسیو کردن برای تبلت های افقی
ریسپانسیو کردن برای تبلت های عمودی
ساخت منوی موبایل
ریسپانسیو کردن برای تبلت های کوچک
ریسپانسیو کردن برای گوشی های موبایل
فصل نهم: پروژه "غذاساز" - افکت ها، بهینه سازی و انتشار سایت
نگاه کوتاه به محتویات فصل نهم
معرفی کوتاه از جاوااسکریپت
فعال کردن عملکرد منوی موبایل
ساخت منوی چسبان
پشتیبانی از مرورگرهای مختلف
تست عملکرد سایت با ابزار Light House
اضافه کردن favicon و تگ description
بهینه سازی تصاویر
قرار دادن سایت بر روی هاست Netlify
راه اندازی عملکرد فرم ثبت نام با ابزار Netlify Forms
فصل دهم: مباحث پیشرفته تر
تعریف و استفاده از متغیرها در CSS
آپلود فایل و تصویر
مقدمه ای بر Sass : معرفی nesting، include و متغیرها
mixin و inheritance در Sass
آشنایی با فریمورک های CSS
کار با فریمورک بوتسترپ (Bootstrap)
آشنایی با فریمورک تیلویند (Tailwind Css)
کار با فریمورک تیلویند
توضیحات
چرا باید HTML و CSS رو یاد بگیرم؟
اساس و پایه تمام سایت ها HTML و CSS هستن و اگه قرار باشه طراحی سایت رو یاد بگیری، اولین قدمت یادگیری این دوتاست. در واقع HTML و CSS دو تا تکنولوژی طراحی وب هستن که با استفاده از اون ها ظاهر سایت رو طراحی میکنیم و هرچیزی از ظاهر سایت ها که با چشم می بینی، با این دو تکنولوژی ساخته میشن
چرا باید این دوره رو انتخاب کنم؟
اصل اساسی در دوره هایی که من آماده میکنم، آموزش اصولی مطالب هست. هدف من اینه که وقتی دوره رو به اتمام رسوندی و خواستی وارد بازار کار بشی، برای اجرای پروژه هات به مشکل نخوری. به عنوان مثال اگه مفاهیمی مثل Grid، Flex و طراحی ریسپانسیو رو به صورت اصولی آموزش نبینی به هیچ وجه نمیتونی یک طراح حرفه ای بشی. اما یک آموزش اصولی زمانی تکمیل میشه که همراه با تجربه اجرای یک پروژه واقعی باشه. من میدونم که خیلی از دوستانی که HTML و CSS رو یاد میگیرن، بعدش نمیتونن خودشون یک پروژه رو به درستی انجام بدن؟ چرا؟ چون خیلی از ریزه کاری ها و جزئیات طراحی سایت (که نقش خیلی زیادی هم در حرفه ای شدن طرح های ما دارن) فقط در یک پروژه عملی واقعی خودش رو نشون میده. به همین دلیل در فصل های انتهایی دوره، یک پروژه کاملا واقعی و بزرگ رو با رعایت تمام جزئیات و نکات ریزی که خودم در پروژه ها مورد استفاده قرار میدم، با همدیگه از صفر تا صد اجرا میکنیم.
این دوره چه فرقی با اون همه دوره های رایگان و غیررایگان HTML و CSS داره ؟
دلیل اول: اینکه توی این دوره، بعد از یادگیری اصولی مفاهیم HTML و CSS، یک پروژه کاملا واقعی رو (از مرحله ایده پردازی تا اجرا و قرارگیری روی اینترنت) با رعایت تمام اصول و استانداردهای مدرن طراحی وب و با تجربه کردن تک تک مراحل این پروسه از صفر تا صد اجرا میکنی. **چیزی که مطمئنا حتی در خیلی از دوره های غیررایگان هم پیدا نمی کنی
دلیل دوم: اینکه هدف من در این دوره این هست که علاوه بر اینکه HTML و CSS رو بهت آموزش میدم، تو رو تبدیل کنم به یک طراح وب واقعی. منظورم چیه؟ ببین، هرکسی میتونه HTML و CSS رو بهت یاد بده، حتی دوره های رایگان! و هرکسی هم میتونه کدنویسی این دوتا رو یاد بگیره. اما چیزی که کسی توی سایر دوره ها بهت یاد نمیده اینه که چطور یک طراح وب خوب باشی. منظورم از طراحی وب اینه که علاوه بر بلدبودن HTML و CSS، بتونی ایده و طرح یک پروژه رو با رعایت تمام استاندارهای وب خلق کنی. حس و حال سایت رو طراحی کنی. از المان های طراحی سایت، به درستی در جای خودش استفاده کنی، روانشناسی رنگ ها رو توی طرحت پیاده سازی کنی، اندازه و رنگ متن ها رو به درستی انتخاب کنی و … این چیزیه که من برای دانشجوهای این دوره درنظر دارم … تبدیل شدن به یک طراح وب واقعی و نه صرفا یک کدنویس HTML و CSS. به همین خاطر یک فصل کامل (فصل پنجم) رو به توضیح “اصول طراحی وب” اختصاص دادم و توی این فصل بایدها و نبایدهای استفاده درست از تک تک المان های سایت مثل فونت ها، رنگ ها، تصاویر، آیکون ها، سایه ها، مبانی UI و UX و … اختصاص دادم.
به جرئت میگم که مطالب این فصل رو در هیچ یک از دوره های غیررایگان هم نمیتونی پیدا کنی
دلیل سوم: معتقدم که مهم ترین عامل در موفقیت دانشجوهای این دوره، همراه بودن یک پشتیبان دلسوز و با تجربه در تمامی مراحل یادگیری اون هاست. به همین خاطر شخصا پشتیبانی تک تک دانشجوها رو به عهده میگیرم و در تمام طول این مسیر همراهت هستم تا مشکلاتت رو برطرف کنم و بهت مشاوره بدم و … زمان پشتیبانی ها هم نامحدوده و از لحظه خرید دوره تا بی نهایت میتونین روی پشیتبانی من حساب کنید. بروزرسانی ها و افزودن محتوای رایگان به این دوره در طول زمان رو هم که نیازی نیست بهش اشاره کنم!
دلیل چهارم: شما فقط سرفصل های این دوره رو مشاهده کن! بعید میدونم بتونی دوره HTML CSS با چنین سرفصل پر و پیمونی پیدا کنی. تمام سعیم رو کردم که توی بیش از 30 ساعت آموزش اصولی و پروژه محور، هرچیزی که برای ورود به بازار کار طراحی سایت نیاز داری رو بهت منتقل کنم.
طراحی ریسپانسیو اصلا چی هست؟
طراحی ریسپانسیو یعنی اینکه شما سایت رو طوری طراحی کنی که نه تنها روی مانیتور کامپیوتر، بلکه روی تبلت ها و گوشی ها و … هم سایتت ظاهر درستی داشته باشه. حالا چرا اینقدر مهمه؟ چون این روزها بیش تر از 60 مردم، از گوشی و تبلت برای دیدن سایت ها استفاده میکنن. پس سایت تو هم باید توی موبایل کاربر، ظاهر مناسبی داشته باشه. اما این تمام ماجرا نیست. علت اینکه داخل اسم این دوره روی کلمه ریسپانسیو تاکید داشتم این بوده که توی پروژه اصلی این دوره، ما نه تنها سایت رو به صورت کاملا ریسپانسیو طراحی می کنیم، بلکه در انتخاب تک تک جزئیات مثل رنگ متن ها، اندازه سایز فونت ها، فضاهای خالی و … از یک سیستم کاملا استاندارد برای انتخاب هامون استفاده میکنیم و در واقع علت تک تک این انتخاب ها رو بهتون توضیح میدم تا شما هم توی انجام پروژه ها بتونید از این سیستم استاندارد استفاده کنید
پشتیبانی این دوره به چه صورته؟
پشتیبانی تمام دانشجوهای این دوره رو شخصا به عهده میگیرم و در طول یادگیری و بعد از اون، هر سوالی در مورد مباحث این دوره داشتی میتونی توی تلگرام، واتساپ و گروه های تلگرامی ویژه ای که برای این دوره در نظر گرفتم ازم بپرسی. سوالات تون رو شخصا جواب میدم و تمریناتی رو هم برای سنجش میزان یادگیری براتون در نظر میگیرم که موظف به حل کردن اونها هستید.
این دوره بدرد من میخوره؟
چه قصد داشته باشی تازه وارد دنیای طراحی سایت بشی و چه بخوای مهارت خودت در HTML و CSS رو ارتقا بدی و با روش های مدرن و بروز طراحی سایت آشنا بشی، این دوره برات مناسبه
سوالات متداول
این دوره پیشنیاز داره؟ قبلش باید چیزی رو بلد باشم؟
دوره تون آپدیت هم داره؟
پشتیبانی داره این دوره یا نه؟