توضیحات
حتما اطرافتون افرادی رو دیدید که به قول خودشون یه چیزایی از HTML میدونن. از CSS هم یه چیزایی میدونن. ولی وقتی که ازشون بخواید یک صفحه یا قالب طراحی کنن می بینن که نمیتونن کاری انجام بدن. در حالی که اصل هدف یادگیری این دوتا دوقلو رسیدن به همین سطحه!
احتمالا میتونید حدس بزنید که در این دوره قرار نیست کدنویسی جدیدی به شما آموزش داده بشه اما عوضش با استفاده از دانسته هاتون در مورد HTML/CSS و نظم دهی به اونها، میتونید به مرحله ای برسید که یک قالب کامل طراحی کنید و از خلقش ذوق کنید. چیزی که احتمالا جزو آرزوهاتون بوده از صفر انجامش بدید. به تنهایی!
واقعیت اینه که اغلب دانشجو ها بعد اینکه HTML CSS FLEX رو آموزش میبینن به چالش های مهمی میرسن
- چطور یک قالب مناسب بازار کار طراحی کنم؟
- چطور ساختار پروژه رو بچینم؟
- چطور با استفاده از نرم افزار های فیگما و Adobe XD، بتونم فونت ها، اندازه و فاصله ها، عکس ها و… رو در بیارم و در پروژه استفاده کنم؟
- اصلا در بازار کار واقعی ما وقتی یک پروژه میگیریم به چه صورته؟
- چطور میتونم کلاس ها رو بهتر نامگذاری کنم؟ آیا روشی هست که نام گذاری کلاسها رو اصولیتر کنه؟
تو این دوره دقیقا چی یاد می گیریم؟
هدف اصلی این دوره اینه که بعد یادگیری HTML CSS به قدری رو مباحث مسلط بشید که خودتون به تنهایی بتونید قالب طراحی کنید و روزمه خودتون رو با نمونه کارهای چشمگیر پر کنید.
بخشی از مطالبی که تو این دوره قراره یاد میگیرید :
- نحوه ایجاد ساختار یک پروژه و فولدربندی
- استفاده از مدلBEM برای نامگذاری کلاس های CSS برای داشتن کدهایی خواناتر و خلاص شدن از دردسر نامگذاری کلاس ها
- نحوه استخراج فونت ها، رنگ ها، سایز ها، و… از یک فایل فیگما یا ادوبی ایکس دی و آموزش مهارت های موردنیاز برای این کار
- نحوه مدیریت پروژه های واقعی و بزرگ به صورت کاملا عملی و کاربردی که باعث میشه اعتماد به نفس بالایی پیدا کنید.
- نحوه پیاده سازی سکشن های مختلف یک قالب با HTML و اصول درست استفاده از تگ ها و همچنین نحوه اسکلت بندی طرح های مختلف با HTML
- پیاده سازی آموزش ها در قالب دوتا پروژه واقعی و فوق العاده که همه چیز داره!
- مرور مطالب مهم و کاربردی از MEDIA QUERY
- پیاده سازی یک گرید سیستم فوق العاده که میتونه خیلی جاها به کارتون بیاد
این دوره برای چه کسانی مناسب هست؟
هرکسی از هر آموزشی یه هدفی داره. اگر دنبال یک زبان برنامه نویسی خوب و آینده دار هستید که آموزش ببینید پس قطعا دوست دارید تو زمینه های خاصی وارد بشید.
الان که هم زبان ها و فریم ورک ها قوی تر شدن و هم تخصص ها متنوع شده، این شرایط شمارو مجبور میکنه قبل از یادگیری زبان برنامه نویسی یا فریم ورک خاص، اول حوزه علاقه مندی یا تخصص خودتون رو انتخاب کنید و بعد تکنولوژیهایی که به شما کمک میکنن این مسیرو پیش ببرید رو از منابع معتبر به صورت اصولی یاد بگیرید.
بنابراین اگر :
- 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 رو هم آموزش ببینید تا در نهایت کدهای تمیزتر و قالب اصولی تری تحویل بدید.
با این توضیحات و روند رو به رشد کسب و کارهای اینترنتی بر بستر وب و موبایل، هیچ نیازی به اثبات اهمیت تخصص طراحی قالب نیست چون به شدت تقاضای اون بالاست و از اونجایی که تکنولوژی ها و سلیقه کارفرماها و بازار هم به طور مستمر تغییر پیدا میکنن، ممکنه یک پروژه در ادوار مختلف برای شما درامدزایی داشته باشه. چی از این بهتر!
چه تضمینی هست که خوب و کامل یاد بگیرم؟
به دست آوردن بهترین نتیجه، تابعی از علاقه و پشتکار شما در توجه به مطالب کلاس و انجام تمرینات در اولین فرصت هست. علاوه بر اون میتونید با تحقیق در منابع فارسی و انگلیسی اشراف و تسلط بیشتری نسبت به هر موضوع پیدا کنید که قطعا تاثیر خیلی مثبتی در روند یادگیری و متخصص شدن شما داره. ولی به طور کلی چند دلیل هست که معمولا باعث عدم نتیجه گیری شما از دوره ها میشه :- کیفیت محتوای آموزشی و مدرس اون
- اشتیاق و علاقه مندی کافی برای یادگیری
- نبود پشتیبانی در دسترس و قوی در حین آموزش
- عدم مرور و تمرین مطالب و انبار کردن اونها برای روز مبادا !
پس همه چی حله…
جلسات
معرفی دوره
چطور یک طراح قالب حرفه ای بشیم؟
بررسی مفهوم container
مفهوم row,col و helper class
ویژگی box-sizing
بررسی واحد های اندازه مطلق و نسبی در Css
بررسی کد های Normalize.css و Reset.css
بررسی Css Variables
بررسی مفاهیم مرتبط با Media Query
Block
Element
Modifier
استخراج فایل های مورد نیاز از طرح
ایجاد ساختار اولیه پروژه
افزودن و ویرایش کد های مورد نیاز
کد نویسی Container
کد نویسی ساختار Html بخش Header
کد نویسی همبرگر منو بخش اول
کد نویسی همبرگر منو بخش دوم
کد نویسی NavMenu برای موبایل
کد نویسی Menu برای دسکتاپ
تکمیل بخش Header(Nav)
نوشتن کامنت های بخش Header
کد نویسی بخش HeaderContent
ریسپانسیو سازی بخش HeaderContent
مرور بر مفاهیم و رفع اشکالات
ریزکاری های بخش Header - اتمام Header
شروع Main - کد نویسی ساختار Html بخش Services
کد نویسی Css بخش Services
ریسپانسیو سازی بخش Services - اتمام Services
کد نویسی ساختار Html بخش Destinations
کد نویسی Css بخش Destinations
کد نویسی Css بخش Destinations-Place جلسه اول
کد نویسی Css بخش Destinations-Place جلسه دوم
ریسپانسیو سازی بخش Destinations
ریزکاری های بخش Destinations - اتمام Destinations
کد نویسی ساختار Html بخش Newsletter
کد نویسی Css بخش Newsletter جلسه اول
کد نویسی Css بخش Newsletter جلسه دوم
ریسپانسیو سازی بخش Newsletter - اتمام Newsletter
کد نویسی ساختار Html بخش Footer جلسه اول
کد نویسی ساختار Html بخش Footer جلسه دوم
کد نویسی Css بخش Footer جلسه اول
کد نویسی Css بخش Footer جلسه دوم
ریسپانسیو سازی بخش Footer - اتمام Footer
رفع باگ ها و تکمیل پروژه بخش اول
رفع باگ ها و تکمیل پروژه بخش دوم - اتمام پروژه سایت شرکتی
بازبینی و اصلاحیه پروژه
فشرده سازی تصاویر و فایل های Css - اضافه کردن پیشوند کد های Css
سخن پایانی - پایان فصل چهارم
سیستم گرید(Grid System) چیست؟
توضیح نقاط شکست(Breakpoints) و کلمات کلیدی مربوطه
کد نویسی کلاس row و col
نحوه محاسبه عرض ستون ها
کد نویسی تمامی کلاس های col + تمرین
حل تمرین جلسه قبل - توضیح نحوه استفاده از ردیف و ستون
ایجاد ستون های ریسپانسیو جلسه اول
ایجاد ستون های ریسپانسیو جلسه دوم
تمرین - پیاده سازی طرح با سیستم گرید
حل تمرین جلسه قبل - پایان فصل پنجم
فایل های مورد نیاز و خروجی گرفتن از طرح
ایجاد ساختار پروژه و دسته بندی فایل های مورد نیاز
تحلیل طرح سایت شخصی
کد نویسی ساختار Html بخش Header
کد نویسی Css بخش Header جلسه اول
کد نویسی Css بخش Header جلسه دوم
کد نویسی Css بخش Header جلسه سوم
ریسپانسیو سازی بخش Header
تکمیل بخش Header
کد نویسی ساختار Html بخش Home
کد نویسی Css بخش Home جلسه اول
کد نویسی Css بخش Home جلسه دوم
ریسپانسیو سازی بخش Home جلسه اول
ریسپانسیو سازی بخش Home جلسه دوم
تکمیل بخش Home
کد نویسی ساختار Html بخش About us
کد نویسی Css کامپوننت Sections
کد نویسی Css بخش About us جلسه اول
کد نویسی Css بخش About us جلسه دوم
ریسپانسیو سازی بخش About us - اتمام About us
کد نویسی ساختار Html بخش Services
کد نویسی Css بخش Services
ریسپانسیو سازی بخش Services - اتمام Services
تحلیل ساختار بخش Resume جلسه اول
تحلیل ساختار بخش Resume جلسه دوم
کد نویسی ساختار Html بخش Resume
کد نویسی Css بخش Resume جلسه اول
کد نویسی Css بخش Resume جلسه دوم
کد نویسی Javascript بخش Resume جلسه اول
کد نویسی Css بخش Resume جلسه سوم
کد نویسی Javascript بخش Resume جلسه دوم
ریسپانسیو سازی بخش Resume - اتمام Resume
کد نویسی ساختار Html بخش Portfolio
کد نویسی Css بخش Portfolio
ریسپانسیو سازی SwiperJs بخش Portfolio
ریسپانسیو سازی بخش Portfolio
کد نویسی NavigationTabs بخش Portfolio
بازنویسی و بهبودی کد های Javascript بخش Portfolio - اتمام Portfolio
کد نویسی ساختار Html بخش Pricing
کد نویسی Css بخش Pricing جلسه اول
کد نویسی Css بخش Pricing جلسه دوم
ریسپانسیو سازی بخش Pricing - اتمام Pricing
کد نویسی ساختار Html بخش Contact us
کد نویسی Css بخش Contact us جلسه اول
کد نویسی Css بخش Contact us جلسه دوم
کد نویسی Css بخش Contact us جلسه سوم
ریسپانسیو سازی بخش Contact us - اتمام Contact us
کد نویسی ساختار Html بخش Footer
کد نویسی Css بخش Footer
ریسپانسیو سازی بخش Footer - اتمام Footer
اصلاح و بهبود جزئیات پروژه
رفع مشکل تار شدن متن ها هنگام استفاده از ()skew
کد نویسی Javascript بخش Scroll to section
مقدمه ای بر Intersection Observer API
تکمیل نهایی بخش Scroll پروژه توسط Intersection Observer
مقدمه ای بر Dark mode و بررسی روش های پیاده سازی
پیاده سازی Dark mode جلسه اول - ایجاد دکمه Switch Theme
پیاده سازی Dark mode جلسه دوم - تغییر رنگ ها
پیاده سازی Dark mode جلسه سوم - تغییر رنگ ها
پیاده سازی Dark mode جلسه چهارم - ذخیره تم در LocalStorage - اتمام پروژه سایت شخصی
بررسی فایل های نهایی پروژه و نکات مربوطه
حل مشکل Tap Highlight عناصر
پاسخ به سوال - آیا بعد این دوره نیازه باز هم دوره طراحی قالب ببینیم؟
اهمیت یادگیری زبان انگلیسی و بررسی حقایق برنامه نویسی
ادامه مسیر یادگیری و صحبت های پایانی
پیش نیاز ها
پشتیبانی
این دوره مجهز به «سبزبات» ربات هوشمند مبتنی بر هوش مصنوعی است.
اگر در حین مشاهده جلسات دوره با سوال یا ابهامی مواجه شدید، میتوانید پرسش خود را از سبزبات بپرسید و در همان لحظه پاسخ دریافت کنید. در صورتی که نیاز به توضیح بیشتر یا پاسخ تخصصی مدرس داشتید، کافی است از سبزبات بخواهید تا سوال شما را به مدرس دوره ارجاع دهد تا مستقیماً توسط مدرس پاسخ داده شود.

