هیچ دوره ای در سبد آموزش شما وجود ندارد
توضیحات دوره آموزش 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)
جلسه سی ونهم ریسپانسیو کردن و نکات مربوط به آن حالت های لب تاب و موبایل و تب لت و …
جلسه چهلم معرفی متا تگ ها و بررسی تمام متا تگ ها
ghazaleh.ebadati دانشجوی دوره
سلام
ویدیو دوم از فصل اول مشکل داره، چه آنلاین و چه بعد از دانلود، از ثانیه 30 ام به بعد، ویدیو قطع می شود.
لطفا بررسی کنید.
poria.kahrizi مدرس دوره
ضمن عرض سلام و خسته نباشید
با تشکر از اطلاع رسانی
فایل ها را برسی نموده و مجدد آپلود نموده
dorsa دانشجوی دوره
سلام
ویدیو اول مشکل داره نه پلی میشه نه دانلود لطفا بررسی کنید
soheylakazemi
سلام چشم بررسی میکنم
احسان
سلام آیا در این دوره آموزش داده شده چطوری فایل های بوت استرپ 5 فونت آوسوم 5 وارد ویژوئال کود میکنیم چون در بوت استرپ ورژن 3 و فونت اوسوم 4 فایل های کمتری داره من اون ورژن ها رو بلوم که در فایل های css و js قرار بدم
poria.kahrizi مدرس دوره
ضمن عرض سلام و خسته نباشید
در خصوص فونت اوسام یک قسمت کامل که فک کنم 25 دقیقه باشه ، از نحوه دانلود و اضافه کردن و نحوه کار با آن و سفارشی کردن آیکن ها و حتی افتر افکت و اضافه کردن آیکن به بعداز تگ کامل توضیح داده شده و در پروژه طراحی جابینجا هم مجزا از ایکن ها استفاده شده
در خصوص بوت استرپ 5 یک دوره در حال ضبط هست که احتمالا قالب دیجی کالا و چند سایت مشابه رو بالا میاریم اون دوره ادامه ی همین دوره خواهد بود و از پایه مبانی به اشتراک گذاشته میشه
علیرضا
سلام استاد من میخاستم بگم اگر امکان داره اول دموی کلی برنامه نوشن بدید که اگر ادم خواست بخره ببینه چی رو میخره
دوم اینکه فونت برنامه رو اگرمیشه بزرگتر کنید
ممنونم استاد عزیز
poria.kahrizi مدرس دوره
ضمن عرض سلام و خسته نباشید
خدمتتون باید عرض کنم که دمو کلی رو گذاشتم که چه قسمت هایی چه خروجی داره ، در خصوص کدها و نحوه کد زدن هم آموزش گام به گام بوده و از ساده نوشتن شروع میشه تا حرفه ای،
درخصوص فونت هم خدمتتون بگم استانداردی هست که از قبل برای من تعریف کردن و طبق استانداردهای دانشجویار مراحل ضبط ارائه شده