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

دوره در تاریخ 1403/08/13 بروز شده و قسمت‌های جدید افزوده شد است .

یکی از بهترین دوره های آموزش css در وب که دید شما را به تمام بخش طراحی عوض خواهد کرد . آموزش css برای طراحی قالب های وب از اهمیت بسیار بالایی برخوردار است چرا که اصلی ترین ابزار دست یک طراح ، تسلط به همین زبان است .

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

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

پس از تسلط بر HTML ، بار اولیه خودتان را بستید و اصول اسکلت بندی صفحات وب را یاد گرفتید و اکنون زمان آن فرا میرسد که سراغ زبان طراحی css  رفت . این زبان نیز همانند زبان اچ تی ام ال ، زبان برنامه نویسی نیست و برای طراحی از آن استفاده خواهیم کرد . در این دوره ( نابغه Css ) حتما نیاز دارید تا HTML را بلد باشید و ما با این ذهنیت این دوره را شروع کردیم که شما از Css هیچ سرفصلی را بلد نیستید ، اما زبان نشانه گذاری HTML را در دوره نابغه HTML با ما مطالعه کردید و آمادگی اولیه را دارید . ( اگر در زبان HTML مشکل دارید حتما از بالای صفحه و قسمت دوره های پیشنیاز در دوره نابغه HTML شرکت کنید ) .

نمونه قالب های دوره نابغه Css

چرا باید در دوره آموزش Css شرکت کرد ؟

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

اگر تاکنون تنها با زبان HTML در داخل صفحات وب کار کرده باشید بخوبی دریافتید که تنها به کمک این زبان ، قادر به ایجاد صفحاتی مثل وب سایت های واقعی نیستید و صفحات شما بسیار ساده و بی نظم هستند . اینجاست که باید شما به سراغ css بروید .

درحقیقت بدون سی اس اس ، وب سایت ها هرگز به این زیبایی نخواهند بود . این زبان سی اس اس است که باعث خلق این همه جلوه زیبا در دنیای وب شده است . css در حدود سال 1996 برای برداشتن برخی محدودیت های زبان HTML در نسخه 3 ارائه شد و به مرور زمان به نسخه امروزی تبدیل شد . از همین گام اول این موضوع را یادبگیرید که سی اس اس زبان برنامه نویسی نیست . css یک زبان طراحی و به نوعی زیبایی بخش تگ های HTML است که صفحه وب را نشانه گذاری کرده است . به نوعی میتوان گفت بیش از 80% زیبایی یک وب سایت مربوط به سی اس اس و نحوه استفاده از آن برای ایجاد یک وب سایت کاربر پسند است .

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

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

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

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

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

طراحی قالب دیجیتال مارکتینگ در دوره آموزشی css

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

سری دوم قالب های دوره

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

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

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

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

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

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

طراحی قالب تمام ریسپانسیو فروشگاهی

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

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

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

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

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

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

آموزش Flex در دوره Css

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

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

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

آموزش افکت های Css3

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

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

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

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

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

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

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

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

استفاد از کتابخانه های کاربردی در دوره آموزش کامل Css

به عنوان یک طراح قالب همیشه قادر نیستیم تا هر طرحی را به تنهایی پیاده کنیم پس به همین دلیل بهتر است کتابخانه های کاربردی Css را شناخته و در صورت نیاز از آنها استفاده کنیم ( البته نه تنها در css ! بلکه در اکثر زبان های طراحی و برنامه نویسی کتابخانه های کمکی بسیار زیاد و لازم هستند ) . البته دقت داشته باشید که در حین دوره خدمت دانشجویان توضیح داده شد که استفاده از کتابخانه هایی با تعداد زیاد به هیچ عنوان درست نبوده و تنها زمانی که نیاز به افکت های خاصی در داخل قالب بود میتوان از این کتابخانه ها استفاده کرد . ( چرا که برخی دوستان به استفاده از کتابخانه های کمکی عادت نموده و هر المانی را به کمک این کتابخانه ها اجرا می کنند در حالی که شاید کدنویسی همان بخش که مد نظر آنها است تنها با 50 خط کد مقدور باشد )

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

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

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

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

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

چرا باید Css Sprite را یاد گرفت ؟

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

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

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

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

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

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

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

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