0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(

آموزش پروژه محور CSS Grid + پروژه لندینگ رستوران

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

100% پیشنهاد شگفت انگیز
0 روز
0 ساعت
0 دقیقه
0 ثانیه
35,000 رایگان!
وضعیت دوره تکمیل شده
مدت زمان دوره 11 ساعت
آخرین بروزرسانی 1402/11/17
روش پشتیبانی آنلاین
پیش نیاز HTML & CSS
نوع مشاهده دانلودی/آنلاین
توضیحات

دوره آموزش Grid  یکی از دوره های مکمل تسلط به CSS و جزو مهمترین مهارت ها برای فرانت اند محسوب میشه که به همراه فلکس باکس تحول بزرگی در سرعت و کیفیت کار توسعه دهنده های وب ایجاد کرد.

آموزش پروژه محور CSS Grid

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

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

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

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

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

این دوره چه فرقی با بقیه دوره ها داره؟

یکی از چالش های اساسی دانشجوها معمولا انتخاب یک منبع معتبر و مورداعتماد برای طی کردن تخصص های برنامه نویسی هست. جایی که هم محتوای کامل و به روز ارائه بشه و هم سبک تدریس مدرس جذاب و کاربردی باشه نه صرفا ارائه مطلب!

اگر شما هم این دغدغه رو دارید پس بیاید چندتا ویژگی فوق العاده دوره گرید سبزلرن رو به شما به اشتراک بذاریم.

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

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

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

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

گذروندن دوره GRID برای افرادی که به هر نحو با برنامه نویسی فرانت اند سروکار دارن ضروری هست.

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

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

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

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

1 – آشنایی با مفاهیم اصلی سیستم گرید CSS و پراپرتی های اون آشنا میشید تا یک ساختار کلی از این ماژول جذاب تو ذهنتون شکل بگیره.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آینده بازار کار این دوره به کجا ختم میشه؟ ارزش وقت گذاشتن داره؟

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

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

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

چه پروژه هایی در طول دوره کار میشه؟

در این دوره یک قالب تک صفحه ای landing page  رستوران رو با همراهی شما پیاده سازی خواهیم کرد.

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

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

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

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

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

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

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

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

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

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

اگر با سوال یا مشکلی مواجه شدم، پشتیبانی می کنید؟

100%

رایگان، سریع، راحت!

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

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

روزی چند ساعت باید وقت بگذارم تا خوب یاد بگیرم؟

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

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

کلام آخر

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

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

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

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

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

لطفا پرسش مربوط به هر درس یا ویدئو دوره را در صفحه همان ویدئو مطرح کنید.

Mehddiii | دانشجو
1403/06/14

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

tousiz | دانشجو
1403/06/01

عالی بود. دست مریزاد.

mohadeseh86 | دانشجو
1403/05/12

خیلی عالی بود
ممنون ازشما خسته نباشید.

niyayesh__m | دانشجو
1403/04/13

استاد شما بی نظیری خیلی از اساتید نکات ریز رو به علت سطحی بودن بیان نمی کنن ولی شما کوچکترین نکتع رو با دلیل کاملا منطقی بیان میکنید که خیلی به فهم ماهایی که تازه شروع کردیم کمک می کنه واقعا خداقوت و دست مریزراد:)

مهرشاد براتی | مدرس
1403/04/14

سلام و درود سلامت باشید دوست عزیز ، لطف دارید سلامت باشید

amir.thz | دانشجو
1403/04/08

سلام ببخشید استادبعد css,html اول گرید رو ببینیم یا فلکس??کدوم پایه تره کدوم پیش نیاز بعدیه

niyayesh__m | دانشجو
1403/04/13

اول فلکس باکس چون پیش نیاز این دوره هست

fatemehAminian | دانشجو
1403/03/21

با گذروندن این دوره نیازی به ریسپانسیو یادگرفتن نیست؟

مهرشاد براتی | مدرس
1403/03/28

سلام شما باید مباحث پایه رو بلد باشید داخل این دوره با همون موارد ریسپانسیو سازی رو انجام دادیم
مثل فلکس ، گرید و مدیا ها

sarrg | دانشجو
1403/03/09

دوره خیلی خوبی بود .توضیحات مختصر و مفید.

aaty4 | دانشجو
1403/03/09

سلام ببخشید امکانش هست لندینگ پیج رستوران و باقی پروژه های دوره هاتون رو به عنوان نمونه کار برای موارد شغلی استفاده کنیم ؟شرایطش چیه؟ممنون میشم راهنمایی کنید .

Atena_snf | دانشجو
1403/02/10

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

ahooraaaa | دانشجو
1403/01/22

سلام آقای براتی وقت بخیر
آیا grid جایگزین فلکس باکس هست یانه
و چه فرقی باهم دیگه دارند؟

مهرشاد براتی | مدرس
1403/01/23

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