قالب های طراحی شده در این دوره

نابغه CSS – آموزش جامع و تضمینی CSS

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

دوستان دقت کنید که پیشنیاز دوره ” نابغه CSS – آموزش جامع و تضمینی CSS ” ، آموزش  Html هست که شما باید حتما زبان نشانه گذاری Html را بخوبی بلد باشید که البته در داخل سئو 90 ما یک دوره به نام نابعه Html داریم که می توانید به راحتی و به شکل کاملا رایگان از قدم صفر صفر Html را یاد بگیرید . برای آموزش اچ تی ام ال وارد این آموزش شوید : “ آموزش رایگان Html ” .

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

طراحی قالب دیجیتال مارکتینگ

بخش دوم آموزش ما در مسیر طراحی یک قالب لندینگ پیش خواهد رفت این قالب یک قالب دیجیتال مارکتینگ هست که با توجه به مواردی که در 20 جلسه قبلی یاد گرفتیم یک قالب خیلی شیک را پیاده خواهیم کرد . داخل این قالب بیش از 90% آموزش هایی که در 20 قسمت اولیه به شما ارائه شدند به کار رفته اند و شما با محل دقیق به کار بردن هر دستور Css در داخل سایت خیلی خوب آشنا خواهید شد . ضمن اینکه در اول هر جلسه سعی کدیم تا چند نکته تجربی به شما بگیم تا در طراحی هرچه بهتر قالب هاتون به کار بگیرید . همواره با آموزش سی اس اس ، سعی کردیم تا ترفند هایی هم خدمت شما ارائه کنیم که بیشتر حاصل تجربیات خودمون هست و ضمن هر نکته ، نکات مهم همان موضوع هم آموزش داده شده تا در جای مناسب المان های صفحات وب خودتون را پیاده کنید . طراحی این قالب حدود 10 جلسه زمان خواهد برد . و در قسمت 30 ام طراحی این قالب با ویژگی هایی که تا جلسه 20 یاد گرفته بودیم به اتمام خواهد رسید .

طراحی قالب لندینگ فروشگاهی

فاز اول دوره ما که از جلسه 1 تا جلسه 30 ام می باشد ، در بخش اول آموزش مفاهیم زبان Css خواهد بود . اما برای اینکه امروزی تر باشیم و با تکنولوژی های بروز کار کنیم و همچنین با روش های قدیمی خداحافظی کنیم ، در قسمت 31 ام تکنولوژی Flex را با هم یاد خواهیم گرفت و شما خواهید دید که چگونه می توان طراحی Css را خیلی راحت تر و بدون نقص انجام داد . بخش Flex در زبان Css ، در جلسه 31 به شکل کامل و با تمامی جزئیات خدمت شما ارائه خواهد شد تا کار با روش هایی همچون Float را کنار گذاشته و خیلی حرفه ای تر کار کنیم .

در جلسه 32 این دوره ، یک تنفس خواهیم داشت که در این جلسه به مسائلی همچون روانشناسی رنگ ، مباحث UI , UX و .. پرداخته شده است . در کل در این جلسه مسائلی بررسی خواهند شد که شما به عنوان یک طراح قالب لازم است تا این موارد را یاد بگیرید که اکثر این نکات حاصل چندین سال تجربه و کار روی وب سایت های مختلف است . توجه داشته باشید که شما هرگز نباید برای یاد گرفتن فریم ورک هایی همچون Bootstrap عجله کنید به این دلیل که بوت استرپ یک فریم ورک برای زبان سی اس اس می باشد و تا زمانی که شما به تمام جنبه های زبان Css تسلط نداشته باشید نمی توانید بخوبی فریم ورک هایی مثل بوت استرپ را درک کنید و به کار بگیرید . جلسه 33 یکی از بخش های مهم است که در این قسمت دستورات Media و اصول ساز و کار وب سایت های رسپانسیو را بررسی خواهیم کرد . بخش Media یکی از قسمت های مهم در هر وب سایت است که تمامی وب سایت های امروز بدون استثنا از این بخش باید برای تنظیم رسپانسیو کردن سایت های خودشان استفاده کنند . از جلسه 34 تا جلسه 39 قالب دوم لندینگ پیج فروشگاهی را طراحی خواهیم کرد که این قالب بسیار سبک بوده و توسط تکنولوژی فلکس طراحی خواهد شد . در حین طراحی این قالب خواهید دید که استفاده از تکنولوژی های جدید تر چقد راحت تر است و چه اندازه سرعت طراحی قالب را افزایش خواهد داد .

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

آموزش مباحث after , before بصورت تخصصی

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

زمانی که ما after و before را به شکل حرفه ای یاد میگیریم خواهیم دید که چقدر می توانیم مشکلات مختلف در طراحی را ساده کنیم و با تکنیک هایی که کمی هم خلافیت نیاز دارد ، افکت های جالبی در قالب خودمان ایجاد کنیم . ما در این دوره 5 نمونه حرفه ای از کاربرد متفاوت after و before را به شما آموزش دادیم ضمن اینکه در طی دوره و در حین طراحی قالب ها ، بازهم ده ها مثال از به کار بردن افتر و بیفور خدمت شما ارائه کردیم تا واقعا حق کلمه نابغه را ادا کرده باشیم . حتما آموزش های بخش افتر و بیفور را بخوبی تمرین کنید تا روش تغییر ماهیت after و before به المان های دلخواه را یاد بگیرید .

آموزش Flex در Css

همانگونه که بالاتر هم اشاره کردیم ، در این دوره ما تمامی مباحث را پوشش خواهیم داد . یکی از موضوعات مهم که برای طراحی قالب های جدید نیاز داریم تکنولوژی Flex است .Flex بخشی از طراحی در سی اس اس هست که ما باید این بخش را بخوبی یاد بگیریم . تکنولوژی Flex در حال حاضر در محبوب ترین فریم ورک های دنیا مثل Bootstrap , Uikit استفاده می شود و زمانی که در قالب لندینگ پیج فروشگاه به کل خاصیت Float را کنار گذاشته و از Flex استفاده می کنیم خواهید دید که چقدر راحت و سریع تر می توانیم طرح های خودمان را پیاده کنیم .

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

افکت های Css و Css3

همانطور که ممکنه بدانید زبان Css در نسخه 3 یعنی Css3 ، به قدری به ما کمک کرد تا بتونیم طراحی و دیزاین بهتری انجام بدیم . مواردی در نسخه 3 Css مطرح شدند که هرچقدر با اونها کار کنیم لذت بخش تر خواهند شد و ما در داخل این دوره به تک تک این المان ها با تمامی جزئیات پرداختیم . برای مثال قسمت هایی همچون

• Animation ، بخش انیمیشن ها در Css که اغلب همه یادگیری این موارد را مشکل می دانند
• Transform ، قسمتی در Css3 که امکان تحرک ، جابجایی و خارج کردن المان های صفحه از حالت 2 بعدی را یه ما میدهد
• Transation ، که یادگیری این قسمت در روان کردن عملکرد قالب بسیار تاثیر گذار است

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

معرفی 20 وب سایت کاربردی در زمینه Css

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

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

استفاد از کتابخانه های کاربردی Css

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

ساخت منو های آکاردئونی یکبار برای همیشه

یکی از مواردی که در اینترنت توسط کاربران مبتدی Css به شدت جستجو میشه ” آموزش ساخت منو آبشاری با css ” هست . ما برای این قسمت هم قبلا یک مقاله خوب آموزشی در سئو 90 منتشر کردیم که بسیار کامل بود . در داخل این دوره چون زمان بیشتری برای آموزش جزئیات داریم ، بعد از بررسی المان های لازم جهت ساخت منو ، یک منو آبشاری فوق العاده و حرفه ای رو با هم خواهیم ساخت . شما در این قسمت صرفا ساخت منو یاد نمیگیرد و لازم نیست کدهای خاصی را حفظ کنید . بلکه به شما خواهیم گفت ماهیت منو ها کلا چی هست و برای باز و بسته شدن منو ها حتی با هر نوع افکت خاصی باید چه کاری انجام بدین . بعد از یاد گرفتن ساز و کار این قسمت قادر هستید تا هر نوع منو چند سطحی ” 2 سطح ، 3 سطح یا بی نهایت سطح ” را بدون محدودیت برای وب سایت هاتون طراحی کنید .

مشکلاتی که با فونت ها داشتید را فراموش کنید !

همواره در آموزش های سی اس اس شاهد هستیم دوستانی که مشغول به طراحی قالب هستند با فونت ها مشکل دارند . در این دوره و در قسمت مربوط به فونت و تایپوگرافی ما سه روش اصولی و اساسی برای استفاده از فونت های مختلف را به شما آموزش دادیم و شما با توجه به نوع پروژه خودتان از انواع روش های فونت می توانید استفاده کنید . از آنجایی که تایپوگرافی سایت مهم ترین قسمت در وجه ظاهری سایت ها می باشد به همین دلیل باید روی فونت بخوبی کار کرد . که البته مباحث تایپوگرافی را تا آخر دوره پیش خواهیم برد و در هر جلسه مباحث خوبی از تایپوگرافی با هم یاد خواهیم گرفت که البته در جلسات پایانی دوره روی واحد هایی همچون Px , Rem , Em کار خواهیم کرد .

چرا باید Css Sprite را یاد بگیریم ؟

خیلی از دوستان با بخش Css Sprite آشنا نیستند و با کارهایی عجبی که می توان با آن انجام داد تا هم طراحی شکیل تری داشت و هم اینکه سرعت لود در وب سایت را افزایش داد . در این دوره به دلیل یدک کشیدن اسم نابغه ، لازمه تا شما بخوبی با همه ترفند ها و زیر و بم ها آشنا بشید . قسمتی که برای افزایش سرعت می توان از آن استفاده کرد و از لحاظ سئو هم بخش Css Sprite جز فاکتورهای مهم است . راجب بخش Css Sprite نمی توان در اینجا زیاد توضیح داد و باید ویژگی های فوق العاده آن را با هم در کدنویسی ببینیم .

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

اما یکی از بخش های خیلی فوق العاده که می توانیم به شما آموزش بدیم نحوه کدنویسی بهینه در Css می باشد . منظور از کدنویسی بهینه می تواند فاکتور های زیادی باشد مثلا به حداقل رساندن تعداد خط کدها ، حرفه ای نوشتن المان ها ، افزایش سرعت لود ، مدیریت چندین فایل استایل در کنار هم و … که در این دوره بخوبی به تمامی ابعاد بهینه سازی کدهای Css را با هم بررسی خواهیم کرد .

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

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

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