بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
40 تا 60 درصد تخفیف برای دوره های جامع سایت
سئو 90 » دانلود ها » آموزش فرانت » پیشرفته ترین آموزش after و before در css – رایگان

پیشرفته ترین آموزش after و before در css – رایگان

237 دانشجو 5

این پکیج ، پیشرفته ترین آموزش after و before در css با مثال های بسیار کاربردی و عملی برای طراحی پروژه های واقعی می باشد . آموزش after و before در قالب یک مینی پروژه بسیار شیک با ترفند های جالب برای شما دانشجویان سئو 90 که همراه ما هستید .

رایگان

دوستان علاقمند به آموزش فرانت ، به پیشرفته ترین آموزش after و before در css خوش آمدید . اما چرا ما در این دوره کلمه پیشرفته را داخل عنوان به کار بردیم ؟؟؟ دوستان لازم است بدانید که این دوره آموزشی برای اولین بار در قسمت آموزش های فرانت در سطح وب فارسی و در وب سایت سئو نود منتشر شده است . after و before  مبحثی است که شما نمی توانید آموزش های پیشرفته و اصولی را به شکلی که خدمتتان ارائه می کنیم در منابع موجود در وب فارسی و حتی لاتین پیدا کنید . ( بسیار کم و نمونه های ناقص وجود دارند )

سئوالات متداول دوره
پیشنیاز دوره ؟

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

این دوره تمامی بخش ها را پوشش داده است ؟

پس از اتمام آموزش های این دوره شما به تسلط کامل در زمینه کار با المان های after و before خواهید رسید پس با خیال راحت همراه ما باشید چرا که این دوره مختص شماست .

دوستان after و before یکی از مهمترین بخش ها در آموزش css هستند که معمولا به شکل خیلی مبتدی آموزش داده می شوند و اگر به منابع استاندارد آموزش css مراجعه کنید برای مثال منابعی همچون w3schools خواهید دید که درک صحیحی از این بخش ها دریافت نمی کنید اگر هم به سراغ منابع و ترفند های بسیار پیشرفته همچون Youtube بروید ، از نحوه کد نویسی در قسمت after و before درک درستی به هبچ عنوان نخواهید داشت  . امروز اینجا هستیم تا به شما نشان دهیم که چگونه می توان مبحث after و before که یک مبحث خیلی ساده و مبتدی بنظر آمده و ساده می باشد را به شکل پیشرفته در سایت استفاده نموده و با این المان ها چه کارهای عجیبی انجام داد .

این پکیج آموزشی یکی از پکیج های مکمل دوره آموزش css ( نابغه Css ) می باشد که به شکل رایگان در قالب یک دوره مجزا برای شما عزیزان تهیه و تدوین شده است . این دوره به همراه یک مینی پروژه عملی برای شما تدریس شده و مثال های بسیار کاربردی در داخل آن خدمتتان ارائه شده است تا به موضوع افتر و بیفور در Css با دید بازتر و خلاقانه تری نگاه کنید . اگر دوره های مکمل سایت ما را دنبال کنید تاکنون هدف از ارائه دوره های آموزشی همچون after و before و یا دوره طراحی صفحات 404 و … را دریافتید . این دوره آموزشی نیز یکی از مهم ترین دوره هایی است که هر فرانت کار لازم است تا به تمامی مباحث آن تسلط یافته و بتواند در طراحی پروژه های خود متناسب با محل کد نویسی از المان های after و before استفاده نماید .

آموزش پیشرفته after before

شاید نمونه کدهایی که در این دوره آموزشی با after و before پیاده خواهیم کرد برای شما باور کردنی نباشد به این دلیل که شما ممکن است after و before را خیلی ساده و مبتدی یاد گرفته و آموزش دیده باشید . بدین صورت که after و before المان هایی را قبل یا بعد از عناصر صفحه مثل تگ ها p , div و … ایجاد می کنند . اما عموم مثال هایی که وجود دارند مربوط به متن هستند و به کمک after و before یک نوشته در قبل یا بعد ، و یا هم در قبل و هم در بعد عنصر مدنظر چاپ می کنند . این تمامی آموزشی است که شما در منابع اصلی آموزش طراحی سایت در مورد after و before یاد خواهید گرفت و بیش از این مطلبی وجود ندارد . اما همه after و before همین نیست . ما در سئو 90 تعبیری بدین شکل داریم :

اگر شما در نقطه 70 از آموزش زبان css هستید میتوانید با یادگیری after و before به نقطه 90 برسید !

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

ادامه توضیحات در رابطه با این دوره را میتوانید در بخش ” تکمیل ” مطالعه فرمائید
توضیحات تکمیلی

مزیت های آموزش after و before

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

یکی از مزایای استفاده از after و before در صفحات وب کاهش حجم صفحه وب خواهد بود ! از چه نظر ؟ از نظر استفاده کمتر از تصاویر . برای مثال ممکن است شما در css خیلی ماهر باشید و بتوانید تمامی عناصر را از نظر محل قرار گیری در جای درست خود تنظیم کنید . اما فعلا از after و before سررشته کافی ندارید . به همین خاطر مجبور می شوید تا برای تعریف برخی اشکال ، از تصاویر کوچیک استفاده کنید که غالبا png هستند . این تصاویر به هر تعداد که در صفحه وب تکرار شوند به همان تعداد درخواست به سمت سرور خواهد داشت و سرعت سایت کند شده و همچنین حجم صفحه وب نیز بالاتر خواهد رفت .

به همین دلیل می توانیم همان اشکال را با after و before برای خود طراحی کرده و به راحتی با css آنها را بسازیم . مزیت بعدی استفاده از after و before این است که شما می توانید خیلی راحت همه المان ها را تحت کنترل بگیرید . به چه شکل ؟ فرض کنید شما یک تگ a دارید و قصد دارید تا افکت هایی را به این تگ a اعمال کنید . اگر با Html آشنایی کافی داشته باشید میدانید که تگ a یک تگ مزدوج است و هرچیزی که داخل آن قرار گیرد برای ما لینک یک لینک خواهد بود که می تواند متن یا تصویر و ... باشد .

اما چگونه می توان یک افکت پرشدن یا خالی شدن رنگ در داخل تگ a اعمال کرد ؟ برای مثال وقتی روی دکمه خاصی قرار گرفتیم داخل دکمه با رنگی پر شده و هنگام خروج از داخل تگ a این رنگ خالی شود . خب اکنون شما چگونه می توانید به کمک آموزش های css این افکت را پیاده کنید ؟ آیا میتوان در داخل تگ a از تگ div استفاده کرد و آن را با position کنترل کرد ؟ در طراحی اصولی خیر !! پس اینجا باید از after و before استفاده کرد اما نه به شکلی که داخل css مطالعه نمودید بلکه به روشی که در این دوره یاد خواهید گرفت .

آموزش مباحث پیشرفته css

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

تفاوت قالب های یک شخص ماهر با مبتدی در چیست ؟

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

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

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

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

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

فصل 1
جلسات آموزشی دوره After , Before
شامل 6 جلسه
1
مفاهیم کلی ، اولین مثال برای منو ها
00:20:13
2
بررسی فونت آیکون ها ، اشکال هندسی
00:22:20
3
ساخت اعلانات پیشرفته توسط After , Before
00:21:25
4
استایل دکمه ها ، متن های پیشرفته در طراحی
00:25:36
5
تصاویر جذاب و افکت های انیمیشنی در طراحی
00:24:58
6
کار روی المان های فرم در طراحی
00:12:04
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
دیدگاه های شما
@Mohammad_ ۰۹ / ۱۴۰۰

سلام وقتتون بخیر خیلی ممنون از دورتون واقعا عالی بود همیشه با after و before مشکل داشتم

امید قدیمی ۰۹ / ۱۴۰۰

سلام محمد جان ، خوشحالیم که دوره برات مفید بوده ، لطف داری

زمانی ابهر ۰۹ / ۱۴۰۰
5

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

abolfazl ۰۶ / ۱۴۰۰

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

امید قدیمی ۰۶ / ۱۴۰۰

سلام و خسته نباشید ، اگر دوره هایی که شرکت می کنید کامل و جامع باشند همیشه شوق ادامه مسیر خواهید داشت

ati ۰۵ / ۱۴۰۰

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

سمانه دانشی ۰۵ / ۱۴۰۰

این مورد به ویژگی position المان اصلی شما مربوط است

N.nafas ۰۵ / ۱۴۰۰

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

سارا حمزه زاده ۰۵ / ۱۴۰۰

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

زهرا هلاوی ۰۵ / ۱۴۰۰
5

مطالبی که داخل فیلم ها بود بنظر من یک هنر محسوب میشه چون من خیلی زمان هست که یادگرفتن این css را شروع کردم ولی از وجود داشتن همچین چیزهایی بیخبر بودم تا وقتی که دیدم چیزی مجزا برای این مباحث هست و جالب بود که فقط یک سایت چنین فیلم هایی گذاشته عالی بود

سمانه دانشی ۰۵ / ۱۴۰۰

سپاس از نظر لطف شما

الینا ۰۴ / ۱۴۰۰
5

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

سمانه دانشی ۰۴ / ۱۴۰۰

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

برنامه نویس ۰۴ / ۱۴۰۰

خیلی جالب بود واقعا

Sami ۰۴ / ۱۴۰۰

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

سمانه دانشی ۰۴ / ۱۴۰۰

ممنون از نظر لطف شما

خرید آنلاین