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

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

100% پیشنهاد شگفت انگیز
0 روز
0 ساعت
0 دقیقه
0 ثانیه
شرکت در دوره
35,000
رایگان!

وضعیت دوره

تکمیل شده

مدت زمان دوره

11 ساعت

آخرین بروزرسانی

1402/11/17

روش پشتیبانی

آنلاین

پیش نیاز

HTML & CSS

نوع مشاهده

دانلودی/آنلاین

23799

دانشجو

5.0

رضایت

درصد تکمیل دوره 100%
مهرشاد براتی

مهرشاد براتی

برنامه نویس و توسعه دهنده فول استک وب

مشاهده پروفایل

توضیحات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

گذروندن دوره 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 درصد رایگان در اختیار شما عزیزان قرار گرفته و برای یادگیری این مهارت مهم نیاز به پرداخت هیچ هزینه ای نیست. پس با خیال راحت روی حرفه ای تر شدن تمرکز کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

100%

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

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

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

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

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

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

کلام آخر

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

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

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

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

سرفصل های دوره

11:36

برسی پروژه و پیش نیاز ها

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

مینی پروژه گالری تصاویر با css grid

مینی پروژه صفحه محصولات

پروژه سایت سفارش غذا (رستوران آنلاین)

نظرات

ثبت نظر جدید
kimia1387
دانشجو
1402/12/01
با سلام دوره قبلی بنظر من خیلی خوب بود چون من همشو دیده بودم و به تسلط خوبی هم رسیدم با اینکه قبلش هیچ آشنایی با css grid نداشتم نحوه تدریسشونم بنظرم عالی بود دوستانی که میگن دوره قبلی استاد نتونست مفهومو برسونه بنظرم باید تلاششونو بیشتر کنن با این حال الان که دیدم دوره آپدیت شده شروع کردم به خوندش امیدوارم که بتونم مثل دوره قبل استفاده لازم رو ببرم
asar
دانشجو
1402/11/30
سلام استاد فیگما ای که من نصب کردم یا تو سایت خود فیگما میرم Ui فیگما فرق میکنه با توی ویدیو های اموزشی
چطور رابط کاربری را شبیه ویدیو کنیم ؟
مهرشاد براتی
مدرس
1402/12/01
سلام و درود ، فیگما جدیدا یک آپدیت داده که اون ظاهر قبلی مثل ویدیو ها دیگه در دسترس نیست ، ویدیو های این دوره قبل از این آپدیت فیگما ضبط شده و من در فصل دسترسی هم این مورد رو گفتم
haniyh hrmshah
دانشجو
1402/11/26
سلام و عرض ادب خدمت جناب براتی ..
امیدوارم روزگار تون خوش باشه ... خواستم ازتون تشکر کنم بابت این دوره خفنتون.. حقیقت قبلا هم خدمتتون عرض کردم مدرس قبلی نتونست اونجور که باید تدریس کنه و مطالب رو توضیح بده و من خیلی ضعیف بودم توی گرید اما دوره شما رو که دیدم تازه دارم میفهمم هر پراپرتی چکار میکرد .. من دوره رو تموم کردم و لایک فراوان براتون میفرستم.
خدا خیرتون بده❤❤🌹🌹
مهرشاد براتی
مدرس
1402/12/01
سلام دوست گرامی 😍 ، ممنونم ، سلامت باشید ، خوشحالم که مفید بوده دوره ، موفق باشید
sina
دانشجو
1402/11/26
سلام استاد شرمنده توی آپدیت جدید چه قسمت هایی اضافه شدن؟ چون من از قبل دانلود داشتم دوره رو واسه همین دارم میپرسم که قسمت های جدید رو هم بدونم کدوم ها هستن که جا نندازمشون
مهرشاد براتی
مدرس
1402/11/26
سلام دوست عزیز ،این دوره کامل آپدیت شده با رویگردی جدید و موارد جدید ، قسمت های قبلی حذف شدن
Hossein -74_js
دانشجو
1402/11/18
سلام وقتتون بخیر میخواستم بدونم بزرگترین سایزی که برای نمونه کار جهت بازار کار باید ریسپانسیو کنم چه پیکسلیه؟ 1920px یا 1400px خوبه ؟ دارم فعلا با css & html دو تا پروژه نسبتا پر فیوچر میزنم تا بعدش برم جاوا اسکریپت رو شروع کنم حالا اگر سایز محدودتری از لحاظ دید شرکت ها برای نمونه کار وجود داره بگین بهم تا فقط برای سایز های بالاتر تلف نشه و زودتر نمونه کارها رو بزنم ممنون میشم از لطفتون ❤️🙏
haniyh hrmshah
دانشجو
1402/11/18
سلام میتونین این مقاله رو مطالعه کنید ..
و میبینید که سایز 1920 پیکسل محبوب تره
https://blog.paydarsamane.com/post/best-screen-size

پیشنهاد میکنم با سرچ خودتونم ببینید
مهرشاد براتی
مدرس
1402/11/19
سلام دوست عزیز ، معمولا پروژه در سایز های بزرگ که اول طراحی میشن دچار مشکل نمیشن وقتی سایز صفحه کوچیک میشه دچار مشکل میشن ، شما وقتی در سایز از ۱۴۰۰ یک طرح رو میزنی دچار مشکل نمیشه هر چه صفحه بزرگ بشه شما سعی کنید داخل سایزهای تبلت و موبایل سایت درست نمایش داده بشه ، از ۳۲۰px موبایل ها شروع میشن تا ۷۶۷px و از ۷۶۸px تبلت ها شروع میشن تا 991px و از 992px لپ تاپ ها کوچیک شروع میشه تا ۱۱۹۹px و از این سایز به بالا کامپیوتر های با صفحه نمایش بزرگ هست ، یعنی سعی کنید از ۳۲۰ تا ۱۴۰۰ طرح شما داری بهم ریختگی نباشه
مشاهده بیشتر