در این دوره یک پروژه کامل را با html و  cssطراحی می کنیم. پروژه ای که در نظر داریم سایت (sitedar.com) هستش که تمامی قسمت های این قالب در این دوره طراحی و آموزش داده خواهد شد. ما در انتهای این دوره به طور کامل با همه تگ های html و تمامی دستورات css که در این پروژه وجود دارد آشنا خواهیم شد. این پروژه به صورت استاندارد نوشته شده و در ویرایشگر dreamweaver آموزش داده خواهد شد. شما بعد از گذراندن این دوره مفهوم کنارهم قرار گرفتن المنت ها در یک پروژه را کاملا درک می کنید و می توانید در همه جا از آن ها استفاده کنید.

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

آموزش رسپانسیو کردن وب سایت

امروزه همه سایت ها باید توی حالت های مختلف طراحی شوند. در این دوره با مبحث مدیاکوئری آشنا می شویم. با استفاده از یک قالب واقعی و به صورت پروژه محور ما یک سایت را ریسپانسیو می کنیم. ما اگر می خوایم به صورت علمی ریسپانسیو را یاد بگیریم، بهتر است قبل از اینکه با فریم ورکی آشنا بشیم، مفهوم مدیا کوئری را کامل درک کنیم. این دوره برای افرادی هست که آشنایی لازم با html, css را دارند. توصیه می شود اگر html را نمی دانید “آموزش پروژه محور html, css ” را ببینید.

سرفصل های دوره

• ایجاد یک سند html
• آشنایی با مشخصه تگ های کاربردی
• تگ های جدید که در html5 اضافه شد
• تگ فرم – نحوه ارسال و روش های آن
• اضافه کردن فونت دلخواه به یک پروژه
• انواع نوشتن رنگ در css
• استفاده از fontawesome در قالب
• ایجاد یک ویدیو در صفحه
• ایجاد فهرست و لینک کردن به صفحات دیگر
• چگونگی قرار گرفتن المنت ها کنار هم
• قسمت بندی کردن یک پروژه به صورت استاندارد
• نحوه نوشتن کدهای بهینه در یک صفحه وب
• استفاده از تگ script در قالب
• لینک ها و مشخصه های آدرس دهی
• استفاده از تگ تصویر در HTML
• تفاوت class و id در فایل های پروژه
• رنگ دهی پس زمینه به صورت چندرنگی
• حالت های راست چین نوشتن متن در قالب های فارسی
• دسته بندی محتوا با استفاده از تگ section
• به صورت دایره درآوردن تصاویر با css
• تگ های نوشتاری برای سئو
• فاصله بین خط های یک پاراگراف چند خطی
• تفاوت اندازه فونت ها نوشته شده در یک خط
• حالت ثابت اسلایدر تصویر در موقع اسکرول کردن صفحه
• حالت هاور شدن رنگ لینک
• اضافه کردن لینک به آیکون و متن همزمان
• استفاده و توضیح تمام تگ های کاربردی در یک پروژه کامل

آموزش رسپانسیو (واکنشگرا) کرد قالب سایت با استفاده از css

• حالت های مختلف برای یک قالب
• اهمیت ریسپانسیو در ساخت سایت
• متا تگ viewport
• حالت های مدیا کوئری نویسی
• ریسپانسیو کردن تک ستونی و چند ستونی
• اندازه ها در سیستم های مختلف
• اصول استاندارد نویسی در نوشتن مدیاکوئری
• درک مطلب از عرض یک قالب
• آزمایش گرفتن در حالت های تبلت و موبایل
• اجرای یک فایل css در اندازه تبلت
• چک کردن Lighthouse در قسمت inspect
• تمام دستورات لازم برای تنظیمات حالت های موبایل و تبلت
• چک کردن مواردی برای آزمایش (خارج از طرح)
• تنظیمات اندازه ویدیو در تبلت