تخفیفات ویژه بر روی تمامی دوره ها بزودی ...
ثانیه
دقیقه
ساعت
روز

آموزش حرفه ای طراحی قالب با Html Css FlexBox از صفر

بعد از یادگیری Html,Css  افراد با یک چالش بزرگی رو به رو میشن، اونم اینه که نمیتونن توسط دانشی که یادگرفتن یک طرحی رو از صفر به کد تبدیل کنن و وبسایتی رو پیاده سازی کنن، توی این دوره به شما از صفر اصول طراحی قالب و همچنین اصول طراحی واکنش گرا گفته میشه. آموزش Html

وضعیت دوره تکمیل شده
مدت زمان دوره 28 ساعت
آخرین بروزرسانی 1402/01/16
روش پشتیبانی آنلاین
پیش نیاز HTML & CSS & FlexBox
نوع مشاهده دانلودی/آنلاین
توضیحات

حتما اطرافتون افرادی رو دیدید که به قول خودشون یه چیزایی از HTML میدونن. از CSS هم یه چیزایی میدونن. ولی وقتی که ازشون بخواید یک صفحه یا قالب طراحی کنن می بینن که نمیتونن کاری انجام بدن. در حالی که اصل هدف یادگیری این دوتا دوقلو رسیدن به همین سطحه!

آموزش حرفه ای طراحی قالب

احتمالا میتونید حدس بزنید که در این دوره قرار نیست کدنویسی جدیدی به شما آموزش داده بشه اما عوضش با استفاده از دانسته هاتون در مورد HTML/CSS و نظم دهی به اونها، میتونید به مرحله ای برسید که یک قالب کامل طراحی کنید و از خلقش ذوق کنید. چیزی که احتمالا جزو آرزوهاتون بوده از صفر انجامش بدید. به تنهایی!

 

واقعیت اینه که اغلب دانشجو ها بعد اینکه HTML CSS FLEX  رو آموزش میبینن به چالش های مهمی می‌رسن

  • چطور یک قالب مناسب بازار کار طراحی کنم؟
  • چطور ساختار پروژه رو بچینم؟
  • چطور با استفاده از نرم افزار های فیگما و Adobe XD، بتونم فونت ها، اندازه و فاصله ها، عکس ها و… رو در بیارم و در پروژه استفاده کنم؟
  • اصلا در بازار کار واقعی ما وقتی یک پروژه میگیریم به چه صورته؟
  • چطور میتونم کلاس ها رو بهتر نام‌گذاری کنم؟ آیا روشی هست که نام گذاری کلاس‌ها رو اصولی‌تر کنه؟

در این دوره قراره به همه این سوالات جواب داده بشه تا شما بعد از پایان آموزش ها، بتونید هر قالبی که مد نظرتون هست رو به صورت کاملا حرفه ای با HTML CSS FLEX  پیاده سازی کنید.

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

در واقع این دوره تنها راهیه که میتونید مستقیما از HTML/CSS پول در بیارید و تخصص خودتون رو نشون بدید.

علاوه بر این در طول دوره مجموعه ای از ترفند های بی نظیر برای استایل دهی با HTML CSS  یاد میگیرید که بهتون کمک میکنه دستتون در خلاقیت طراحی بازتر باشه. مثلا اینکه یک گرید سیستم شخصی سازی شده برای پروژه بنویسید و در طول پروژه ازش استفاده کنید

تو این دوره دقیقا چی یاد می گیریم؟

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

بخشی از مطالبی که تو این دوره قراره یاد میگیرید :

  1. نحوه ایجاد ساختار یک پروژه و فولدربندی
  2. استفاده از مدلBEM برای نامگذاری کلاس های CSS  برای داشتن کدهایی خواناتر و خلاص شدن از دردسر نام‌گذاری کلاس ها
  3. نحوه استخراج فونت ها، رنگ ها، سایز ها، و… از یک فایل فیگما یا ادوبی ایکس دی و آموزش مهارت های موردنیاز برای این کار
  4. نحوه مدیریت پروژه های واقعی و بزرگ به صورت کاملا عملی و کاربردی که باعث میشه اعتماد به نفس بالایی پیدا کنید.
  5. نحوه پیاده سازی سکشن های مختلف یک قالب با HTML و اصول درست استفاده از تگ ها و همچنین نحوه اسکلت بندی طرح های مختلف با HTML
  6. پیاده سازی آموزش ها در قالب دوتا پروژه واقعی و فوق العاده که همه چیز داره!
  7. مرور مطالب مهم و کاربردی از MEDIA QUERY
  8. پیاده سازی یک گرید سیستم فوق العاده که میتونه خیلی جاها به کارتون بیاد

این دوره برای چه کسانی مناسب هست؟

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

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

بنابراین اگر :

  • HTML/CSS بلدید و در ادامه مسیر حرفه ای تر شدن به دنبال استفاده از این اطلاعات برای خلق پروژه کامل و درآمدزایی هستید
  • دوست دارید طراحی قالب رو یاد بگیرید یا طراحی قالب رو بلدید ولی هنوز نمیتونید کامل و اصولی طراحی کنید
  • احساس می کنید خلاقیت و علاقه زیادی به طراحی صفحه و قالب وب دارید
  • دوست دارید با فضا و شرایط بازار کار این تخصص آشنا بشید

این دوره قطعا مناسب شماست و سکوی پرتابی برای ورود یا ارتقای شما در بازار کار خواهد بود. بدون شک!

تفاوت دوره طراحی قالب سبزلرن با بقیه چی هست و چرا بهترین گزینه محسوب میشه؟

سبزلرن هم طبق تجربه و آخرین متدهای آموزشی برنامه نویسی در دنیا، دوره هاشو طراحی و تدوین میکنه. ما با سیاست خاصی که در انتخاب استاد، تدوین محتوای آموزشی، قیمت گذاری دوره ها و پشتیبانی موثر در نظر گرفتیم میتونیم این تضمین رو به شما بدیم که در طول دوره آموزش، هیچ کمبودی در هیچ زمینه ای احساس نکنید.

در صنعت آموزش، یکی از خلاءهایی که از زمان مدرسه تا دانشگاه و بعد دوره های متفرقه همیشه حس میشه و دانشجوها به ما منتقل کردن، اینه که اکثر مواقع حرف از بایدها بوده و چراها . دریغ از چگونگی و راه و مسیر!

این مسئله در آموزش برنامه نویسی شدتش بیشتره چون تقریبا 95 درصد برنامه نویسی در فضای خارج از مدرسه و دانشگاه تدریس میشه و این یعنی احتمال وجود اشکال یا نقص در مدرس، دوره و مطالب اون کاملا وجود داره و قطعا شماهم تجربشو داشتید

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

این دوره دقیقا همین چگونگی هارو به صورت کاملا حرفه ای و پروژه محور به شما یاد میده تا دیگه خودتون در زمینه طراحی قالب اصولی با HTML CSS  یا حتی در بقیه پروژه ها و تکنولوژی ها استاد بشید و نیاز به کمک کسی نداشته باشید.

بنابراین به غیر از کامل بودن دوره و پشتیبانی بی نظیر اون، با سیستم آموزشی سروکار دارید که خروجی اون جز تسلط کامل و رفع همه دغدغه ها و چالش ها نیست. صحت این ادعارو میتونید از نظرات دانشجویان قبلی متوجه بشید.

شرکت کردن یا نکردن در این دوره چه ریسکی داره؟!

میزان رشد و موفقیت هر شخصی نتیجه انتخاب های خودشه. شرکت کردن یا نکردن هم یک نوع انتخابه و قاعدتا عواقب این انتخاب، خوب یا بد به حساب شما نوشته میشه.

همونطور که گفتیم یکی از چالش های افرادی که تازه وارد حوزه فرانت اند شدن اینه که نمیتونن به کمک HTML CSS  به صورت اصولی و حرفه ای کدنویسی کرده و یک قالب کامل و استاندارد رو پیاده سازی کنن.

شما اگه این دوره رو نبینید در ظاهر ضرر نمی کنید. اما در واقع اسیر زمان خواهید شد. چون اگر چنین دوره ای رو نگذرونید، ممکنه ماهها یا سالها طول بکشه تا کم کم به طراحی قالب مسلط بشید. اونوقت زمانی که رقبای شما درحال یاد گرفتن تکنولوژی های جدید هستن، شما هنوز دارید با CSS/HTML برای طراحی صفحه سروکله می زنید.

بعد از اتمام دوره به چه سطحی میرسیم و چطور میتونیم بهترین نتیجه رو بگیریم؟

بعد از سال ها تجربه و پرورش صدها برنامه نویس می تونیم به جرات اعلام کنیم که کامل ترین و بهترین دوره آموزش طراحی قالب در اختیار شماست و غیر از اون به هیچ منبع و استاد دیگه ای نیاز نخواهید داشت. با بهترین کیفیت، بهترین محتوا و بهترین مدرس!

بنابراین شک نکنید که بلافاصله بعد از دوره به چنان تسلط و آگاهی نسبت به فرآیند طراحی قالب می رسید که بتونید صفر تا صد یک قالب رو طراحی و پیاده سازی کنید. با هر شکل و ساختاری. هر قالبی هم که به صورت  FIGMA, ADOBE XD  به شما داده میشه به راحتی به کدهایHTML CSS    تبدیل کنید تا پول بسازید!

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

علاوه بر این پیاده سازی یک گرید سیستم حرفه ای با HTML CSS  میتونه خیلی از جاها به کارتون بیاد و کمکتون کنه تا گرید سیستم های معروفی مثل بوت استرپ و تیلویند رو درک کنید.

این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟

حتما شما باید قبل از مشاهده این دوره مطالب HTML CSS  رو به خوبی یاد گرفته باشید و با FLEX و GRID  هم خیلی خوب آشنا باشید تا در طول این دوره، مطالب براتون جدید و عجیب نباشه!

پس حتما قبل از شروع این دوره باید دوره های HTML ,CSS ,FLEX ,GRID  رو که در سایت سبزلرن به صورت رایگان موجود هستن رو مشاهده کنید و بعد از یادگیری و مسلط شدن روی اونها وارد این دوره بشید.

چطور میتونم پروژه دانشجویان قبلیتون رو ببینم ؟

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

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

وقتی این دوره رو دیدم قدم بعدیم چیه؟

شما وقتی در طراحی قالب به تسلط برسید به این معنی هست که در HTML/CSS هم حرفه ای بودید که تونستید از این مرحله بگذرید. بنابراین میشه گفت شما اولین قدم های تبدیل شدن به متخصص فرانت اند رو محکم برداشتید. حالا اگه بتونید از طریق انجام پروژه های فریلنسری خلاقانه، خودتون رو در معرض دید بازار قرار بدید، قطعا موفقیت های بزرگ در انتظار شما خواهد بود.

توصیه میشه حتما بعد از دیدن این دوره، دو الی چهار قالب خیلی خوب با html css  رو پیاده سازی کنید و هرگونه سهل انگاری در این کار میتونه به قیمت فراموش شدن مطالب و ضایع شدن وقت و هزینه شما باشه

بعد از یادگیری این مباحث میتونید قدم بعدی مسیر رو شروع کنید. یعنی هم میتونید جاوا اسکریپت رو شروع کنید هم بوت استرپ یا تیلونید که از فریم ورک های css  حساب میشن. هرکدوم از اینها به نسبت علایق و اهدافتون میتونه گزینه بعدی باشه.

نظر دانشجو ها در رابطه با این دوره؟

خیلی از شرکت کنندگان دوره با دیدن پروژه و خروجی که به دست میارن واقعا ذوق زده شدن چون یادگیری طراحی قالب با چنین پروژه‌ای در این سطح واقعا لذت بخشه. خیلی از دانشجوها در کامنت های این دوره به این موضوع اشاره کردن. شما هم میتونید به کامنت های دوره یه سر بزنید و نظرات دانشجوهای دوره رو ببینید.

بعد از این دوره به سطحی می رسم که درآمد کسب کنم؟ بازار کارش چطوره؟!

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

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

با این توضیحات و روند رو به رشد کسب و کارهای اینترنتی بر بستر وب و موبایل، هیچ نیازی به اثبات اهمیت تخصص طراحی قالب نیست چون به شدت تقاضای اون بالاست و از اونجایی که تکنولوژی ها و سلیقه کارفرماها و بازار هم به طور مستمر تغییر پیدا میکنن، ممکنه یک پروژه در ادوار مختلف برای شما درامدزایی داشته باشه. چی از این بهتر!

چه تضمینی هست که خوب و کامل یاد بگیرم؟

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

ولی به طور کلی چند دلیل هست که معمولا باعث عدم نتیجه گیری شما از دوره ها میشه :

  1. کیفیت محتوای آموزشی و مدرس اون
  2. اشتیاق و علاقه مندی کافی برای یادگیری
  3. نبود پشتیبانی در دسترس و قوی در حین آموزش
  4. عدم مرور و تمرین مطالب و انبار کردن اونها برای روز مبادا !

دو مورد اینها بر عهده شماست و دو مورد هم بر عهده سبزلرن. ما به شما قول میدیم این آموزش رو با بالاترین کیفیت و موثرترین پشتیبانی در اختیار شما قرار بدیم. شما قول میدید که با علاقه و پشتکار تمام تمرینات رو انجام بدید تا به نتیجه برسید؟!

پس همه چی حله…

سرفصل ها
معرفی
فصل دوم - مروری بر Media Query
فصل سوم - نامگذاری به روش BEM
1
Block
11:19
12:06
16:28
فصل چهارم - پروژه سایت شرکتی
فصل ششم - پروژه سایت شخصی
نظرات
ثبت نظر جدید
سارا شیرالی | دانشجو
1403/01/15

دوره بسیار عاااالی بود. خیلی سطح طراحی قالب، ودر کنارش مهارت css من رو ارتقا داد، تشکر میکنم از آقای عبادی و تیم سبزلرن.

Mahdiz1382 | کاربر
1403/01/07

سلام وقتتون بخیر
استاد تو این دوره از Swiper API ها هم استفاه کردید؟
اصلا لزومی داره که ما این swiper رو یاد بگیریم؟ اگه نظرتون بله هستش بهتره که کی یادش بگیریم؟

Night1383 | کاربر
1403/01/08

چیز خاصی نداره یه پلاگینه که کداشو به پروژه اضافه میکنی

AminReza Asadi | دانشجو
1403/01/04

بسیار توی تدریس عالی هستید جناب عبادی
خسته نباشید تا الان این چهارمین دوره ای هست که از شما میبینم یکی از یکی بهتر

Mehral_79 | کاربر
1403/01/03

سلام وعرض ادب،من html cssرو بلدم اما مسلط نیستم این دوره برای نیاز من پاسخگوعه یا دوره های دیگه؟ممنون میشم جواب بدید.

Night1383 | کاربر
1403/01/11

سلام
به flex box و grid مسلط شو و دو تا پروژه بزن باهاشون بعد بیا سراغ این دوره
این دوره هر گونه ابهامی راجب طراحی قالب داشته باشی برطرف میکنه و مهارت css رو افزایش میده

yasinrn | دانشجو
1402/12/29

باسلام و خسته نباشید یک سعال برام پیش اومده بود شما دوره بک اند طراحی سایت را کامل نمیذارید یا در آینده میخواهید بزارید .
واینکه برای آموزش بک اند باید چیکار کنم اگر راهنمایی کنید ممنون میشم