آموزش FlexBox پروژه محور + پروژه سایت هاستینگ

تا حالا با دومینو سرگرم شدید؟!

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

طراحی و چیدمان المان ها با CSS یه چیزی شبیه این داستان هست که گاهی وقتا با کوچکترین تغییری در ترتیب یا جانمایی المان ها همه چیز به هم میریزه!

در حالت عادی با مارجین، پدینگ، پوزیشن ها، ترنسلیت و…. سعی می کنید موقعیت المان ها رو داخل صفحه مشخص کنید و با کمک این پراپرتی ها، قالب های خودتون رو لایه بندی(Layout) کنید. اما اینجا قصد داریم شما رو با فلکس باکس که یکی از ماژول های فوق العاده CSS هست، آشنا کنیم تا بتونید لایه بندی صفحات رو با لذت و راحت انجام داده و قالب های خودتون رو پیاده سازی کنید.

استفاده از FlexBox یکی از عوامل اصلی رسپانسیوسازی بی دردسر و عالی صفحات وب هست که به شما کمک میکنه با هر نوع ساختاری که برای المان ها می چینید، بازهم ترتیب و چیدمانی بدون بهم ریختگی داشته باشید و مجبور نخواهید بود از پوزیشن ها و Float و … استفاده کنید.

پیشنهاد میکنیم اگر در پوزیشن و layout  بندی قالب ها مشکل دارید حتما برای یادگیری فلکس باکس وقت بگذارید تا کار کردن با کدهای CSS براتون راحت تر و دستتون برای هر نوع تغییر یا طرح های خلاقانه ای، بازتر باشه!

تفاوت ماژول گرید و فلکس چیه؟

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

اما هر کدوم از این ماژول ها در بعضی از زمینه ها انعطاف پذیری بیشتری دارن و استفاده از اونها در شرایط خاص، میتونه مفید باشه.

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

از طرف دیگه در حالت های تک ردیفی که صرفا یک ردیف وجود داره و میخوایم المان ها رو در اون ردیف تنظیم کنیم، فلکس گزینه بهتری خواهد بود.

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

من گرید رو بلدم نیازه که فلکس رو هم یاد بگیرم؟

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

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

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

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

• آشنایی کامل با مباحث فلکس باکس و تسلط به اون
• آشنایی با نحوه ساختار یک پروژه واقعی در بازار کار
• آشنایی با نحوه پیاده سازی یک قالب زیبا و نحوه پیاده سازی ساختار HTML
• آشنایی با layout بندی قالب برای پیاده سازی راحت تر
• ریسپانسیو سازی به کمک FlexBox

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

یادگیری فلکس باکس برای افرادی که به هر نحو با برنامه نویسی وب سروکار دارن ضروری هست و به طور ویژه برای فرانت اند کارها…

به طور کلی اگر :

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

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

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

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

شما بعد از یادگیری CSS قطعا یکی از چالش های اساسی که دارید اینه که چطور باید یه قالب رو پیاده سازی کنید؟ layout  بندی و پوزیشن دهی به المان ها چطور باید انجام بشه؟ ساختار پروژه رو چطور باید به صورت استاندارد تنظیم کرد؟ و کلی سوال اساسی دیگه که در شروع کار برای شما چالش خواهد بود رو در این دوره با شما بررسی می کنیم.

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

پس تفاوت های اساسی این دوره عبارتند از :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 – کیفیت پایین محتوای آموزشی و سبک و تسلط مدرس

2 – عدم اشتیاق و علاقه مندی کافی برای یادگیری

3 – نبود پشتیبانی در دسترس و قوی در طول آموزش

4 – عدم مرور و تمرین مطالب (انبار کردن اونها برای روز مبادا !)

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