آموزش html و css پروژه محور (طراحی صفحه ی اصلی jobinja)

توضیحات دوره آموزش html و css :

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

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

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

چه نرم افزارهایی در این دوره استفاده شده است ؟

• vscode
• Html
• Css

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

گام به گام و از مقدماتی شروع به طراحی نموده و چند مینی پروژه و یک پروژه واقعی در این دوره آموزش html و css گنجانده شده

آموزش html و css برای چه کسانی مناسب است ؟

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

پیش نیازهای آموزش html و css چیست ؟

این دوره آموزشی به گونه ای تدریس شده است که هیچگونه پیش نیازی ندارد .

در این دوره آموزشی چه می آموزید ؟

در آموزش Html و Css مواردی همچون انیمشن ها ، متاتگ ها ، دسته بندی تگ ها و اهمیت آنها از لحاظ سئو، after and befor ، فلکس ها و هر آنچه در خصوص html5 , css3 مورد نیاز برای طراحی قالب وجود دارد بصورت آکادمیک و مبتدی تا پیشرفته بررسی می شود .

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

سرفصل های دوره آموزش html و css پروژه محور :

جلسه اول Html چیست و کاربرد آن· تعریف اعضای بدنه html· معرفی doctype و title و body·

• Html  چیست و کاربرد آن
• تعریف اعضای بدنه html
• معرفی doctype  و title   و body

جلسه دوم Head tag

•   Head tag·
• H1 ,نکات مربوط به آن و اهمیت این تگ برای سئو·

       H2 … h6

جلسه سوم معرفی تگ های html5 دسته بندی آنها و اهمیت آنها در سئو و معرفی block tag بخش اول

• P tag
• نوع تگ ها و دسته بندی تگ ها معرفی block tag
• br
• موارد استفاده از تگ p
• Selector and Attribute چیست؟
• تعریف مقدماتی و معرفی css
• ایجاد اولین استایل (تغییر رنگ پس زمینه و رنگ متن)

جلسه چهارم block tag بخش دوم و اهمیت انها در سئو

• معرفی تگ های html5  و اهمیت آنها در سئو وblock tag بخش دوم
• Article مقاله ها
• Header و موارد استفاده از این تگ
• Blockquote نقل قول و موارد استفاده از این تگ
• Section  وموارد استفاده از آن
•  Address و موارد استفاده
• تگ پر کاربرد div
• Aside و موارد استفاده
• Ul , li لیست ها
• Nav  و کاربرد و اهمیت ان در سئو
• Li ,ol  و تفاوت  آن نسبت به ul ,li
• Footer
• Figure  و figcaption
• Form  و fieldset
• Hr

جلسه پنجم تگ های بلاک بخش سوم

• ·       معرفی تگ main  و کاربرد آن
• ·       تگ pre
• ·       Dl , dt,dd ومقایسه با ul , li
• معرفی تگ های مهم و کاربردی تگ های بلاکی

جلسه ششم تگ های inline بخش اول

• معرفی تگ a
• مقایسه مقدماتی تگ block and inline
• معرفی اتریبیوت href
• لینک شدن و اسکرول کردن به دیگر تگ های داخل صفحه
• ایجاد صفحه جدید و جابه جا شدن بین دو صفحه
• لینک شدن به سایت های دیگر
• معرفی ویژگی target (مکان باز شدن صفحه جدید)
• بررسی ویژگی های target : _blank , _self , _parent , _top
• کلیک بر روی شماره تماس و لینک شدن شماره تماس داخل موبایل و اماده به شماره گیری مانند اسنپ یا دیوار
• کلیک بر روی ایمیل و رفتن به صفحه ایمیل
• نحوه استفاده از تگ a  در داخل nav و رعایت کردن استاندارد سئو

جلسه هفتم تگ های inline بخش دوم

• ·       معرفی lable  وکاربرد آن
• ·       معرفی input  و معرفی اتریبیوت for  و name  و کاربرد آن
• ·       اتریبیوت type  و انواع آن ((text , email , password, radio , checkbox
• ·       اتریبیوت checked  و autocomplete  و  autofocus
• ·       نحوه استفاده صحیح input  ها در فورم و رعایت کردن استاندارد سئو
• ·       استفاده fieldset  و legend  در فورم ها

جلسه هشتم تگ های inline بخش سوم

•  معرفی textarea  و اتریبیوت rows , cols , placeholder
• عکس ها تگ img  و نکات مربوط به استاندارد سئو در استفاده از این تگ و اهمیت alt
•  معرفی abbr  کلمات مخفف دارای توضیح مانند ناجا
• معرفی bdo  و اتریبیوت dir
•  معرفی strong  و b , i , u
•  تگ کاربردی span  واهمیت آن
• دکمه ها تگ button
•  dfn
•  لیست کشویی select option
• Sup , sub

جلسه نهم تگ block بخش چهارم جداول

• معرفی table  و ویژگی های border
•  بخش بندی جدول thead , tbody , tfoot
• Tr , td , th  و ویژگی colspan , rowspan

جلسه دهم معرفی css و نحوه استایل دهی ، بالا اوردن یک مینی پروژه و نگاه کلی css·

• معرفی کلیات css و بالا اوردن یک پروژه
•  معرفی انواع روش دهی استایل دهی inline , internal , external و مقایسه مقدماتی هر سه مورد
•  نحوه استفاده css   بصورت internal
• اعمال css  به تمامی تگ ها از طریق نام تگ
• معرفی text-align , background ,color , font-size,font-width,height,border,border-raduse,border-box,text-shadow,box- shadow,padding ,margin
• اعمال استایل ها در قالب یک مینی پروژه و آشنایی مقدماتی با css

جلسه یازدهم معرفی class و id و ریز نکات کلی مربوط به آنها

•  دلایل استفاده از class  در css
• ایجاد css  به المان ها از طریق css
•  استفاده چند class  برای یک تگ
•  معرفی id   و موارد استفاده از آن
•   ترتیب اولویت لود شدن class , id
• Important  و تاثیر ان در ترتیب لود شدن css

جلسه دوازدهم background -rbg , hex ,rbga Gradient و انواع آن برای استفاده ازچند رنگ

•  فرمت رنگ ها rbg , hex ,rbga ,  , نام رنگ
•  Gradient  و انواع آن برای استفاده ازچند رنگ به یک المان
• خطی و صاف – خطی با استفاده از زاویه – شعاعی یا دایره ای
• مثال هایی از حالت های فوق و تعیین محل پاشیده شدن رنگ در هر سه حالت

جلسه سیزدهم background-img و نکات کی مربوط به آن

•  Background-imge
•  Imge-repeat
•  Imge-position
•  Imge-attachment
•  Imge-siez

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

• دسته بندی انواع واحد ها ثابت ونسبی
• ثابت ها : in,px,cm,mm,pic
• نسبی em,rem,% ,ex,ch,vw,vh
• دسته بندی موارد فوق برای استفاده از فونت یا عرض و ارتفاع
• جمع بندی و معرفی واحد های مهم و کاربردی px,%,vh,em

جلسه پانزدهم text و تمامی نکات مربوط به متن

• Text-align
• Text-decoration
• Text-underline,overline,through
• تعیین رنگ برای text-decoration
• تعیین خط برای text-decoration
• Font-style
• font-weight
• word-break
• word-wrap

جلسه شانزدهم نکات کلی مربوط به margin, padding

• نکات مربوط به margin, padding

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

• نکات مربوط به border
• کاربرد عکس و متن در کنار هم

جلسه هجدهم display ، بررسی کامل تفاوت و موارد استفاده block , inline , inline-block·

• بررسی block , inline , inline-block
• بررسی تفاوت های inline , block
• موارد استفاده از inline-block

جلسه نوزدهم دسترسی به تگ ها با > ، +،~ ،×و استایل های پیشرفته تر نظیر transition ،Transform و برسی حالت ای آن

• دسترسی به تگ ها و استایل های پیشرفته تر
• گرفتن فرزندان مستقیم یک تگ با استفاده از علامت >
• گرفتن اولین برادر یک تگ با علامت +
• گرفتن تمامی تگ های برادر یک تگ با ~
• گرفتن تمامی فرزندان و نوه های یک تگ
• معرفی :hover  فکوس بر روی تگ و تغییر ان
• معرفی transition
• Transform  و بررسی سه حالت : rotate , skew , skale

جلسه بیستم position بررسی sticky , relative , abslot, fixd· Potion fixd

• بررسی sticky , relative , abslot, fixd
• Potion fixd و موارد استفاده (ایجاد باکس تبلیغاتی)
• نکته بجا مانده از جلسه نوزدهم استایل به تمامی تگ با علامت *

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

•  بخش بندی قسمت های مختلف و در نظر گرفتن هارمونی رنگ ها و بوردر و خمیدگی ها
•  استفاده از css هایی که در جلسات قبل ذکر شده و اعمال ان ها در این مینی پروژه
• معرفی ویزگی outline , z-index
• معرفی تگ del
• طراحی بخش هدر و ثابت ماندن در بالای صفحه هنگامی که صفحه اسکرول شود
• طراحی بخش محصولات و بخش بندی ان
• قرار دادن چند محصول در صفحه

جلسه بیست ودوم after before و نکات مربوط به آن معرفی آیکن ها و نحوه اضافه کردن آن و برسی جامع آن

• آیکن ها و نحوه اضافه کردن آن در پروژه
• External css و پوشه بندی فایل ها و مفهوم rel
• تغیر اشاره گر موس

جلسه بیست و سوم display flexتوضیحات در خصوص float and poaitionتعریف فلکس و کاربرد عمومی آن

• توضیحات در خصوص float and poaition
• تعریف فلکس و کاربرد عمومی آن
• Flex-direction and flex-wrap
• Justify-content  تراز کردن بصورت افقی و برسی تمام حالت های آن
• Align-item  تراز کردن بصورت عمودی و برسی تمام حالت های آن
• Align-self  تراز کردن فقط بر روی یک آیتم و حالت های آن

 جلسه بیست و چهارم ایجاد منواستفاده از inline-block و کنار هم قرار دادن لینک ها و نکات مربوط به طراحی منو بار

• استفاده از inline-block  و کنار هم قرار دادن لینک ها
• رویداد موس hover  برای ایجاد افکت
• اضافه کردن افکت خطی نشانگر بر روی هر یک از لینک ها

جلسه بیست وپنجم ایجاد sub menu آبشاری همراه با آیکن پیکان و افکت به آیکن ها و لینک ها

• ایجاد sub menu آبشاری
• استفاده از آیکن ها به واسطه after css
• تغییر آیکن از طریق after hover
• ایجاد sub menu  با استفاده از absolute and relative
• اضافه کردن افکت برای لینک های sub menu  با استفاده از padding

جلسه بیست وششم حل تمرین ایجاد sub menu تو در تو

جلسه بیست و هفتم انتخاب پروژه طراحی سایت جابینجا و شناخت کامل ابزار inspect  مرورگر ونحوه کار با آن

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

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

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

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

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

جلسه سی و سوم طراحی بخش آخرین آگهی ها

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

جلسه سی و پنجم طراحی بخش رزومه نداری و از وبلاگ جابینجا

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

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

جلسه سی و هشتم نکات به جا مانده استایل دهی پیشرفته به جداول و گرفتن فرزند اول یا پنجم یا n ام هر تگ و اعمال css  به ان المان nth-child(n , x,even,odd,n+x)

جلسه سی ونهم    ریسپانسیو کردن و نکات مربوط به آن حالت های لب تاب و موبایل و تب لت و …

جلسه چهلم معرفی متا تگ ها و بررسی تمام متا تگ ها