مخصوص اعضای ویژه 
دوره جامع و پروژه محور متخصص فرانت اند - مقدماتی
باسلام دوستان گرامی.
در این دوره قصد داریم تبدیل به یک طراح وب سایت (برنامه نویس فرانت اند) بشویم. ما در این دوره با بررسی کد های برنامه نویسان دیگر به یادگیری نکات به کار رفته در پروژه های مختلف خواهیم پرداخت.همچنین مهم ترین نقطه قوت این دوره طرح چالش های واقعی از پروژه های واقعی است که ما در این دوره به حل مسا‌ئل پیش آمده خواهیم پرداخت. از مباحث پایه شروع میکنیم و قدم به قدم به مباحث پیشرفته تر میرسیم. در این دوره پس از هر فصل و مبحث تمرین ها و پروژه و مینی پروژه های مختلفی داریم که با انجام دادنش باعث آشنایی شما با اون مبحث میشود و مباحث ملکه ذهن خواهد شد. هر فصل حداقل دو پروژه را خواهد داشت و هیچ نکته ای جا نخواهد ماند. با بنده همراه باشید تا از 0 به برنامه نویس فرانت اند برسیم. این دوره آشنایی خاصی نیاز ندارد اما شما کامل باید مسلط به کامپیوتر و موارد اون باشید و ترجیحا دوره رایگان مفاهیم پایه و پیش نیاز طراحی وب : https://toplearn.com/c/6043 رو ببینید.
سرفصل های دوره
| معرفی دوره |
| شروع فصل اول – نحوه تمرین و توضیحات |
| HTML چیست ؟ |
| تعریف صفحه وب ایستا و پویا |
| نصب و معرفی VSCode |
| ساختار HTML – المان ، تگ ، اتریبیوت (Attributes) |
| ساختار متنی یک صفحه در HTML |
| حالت های مختلف متن در HTML |
| تگ های نگارشی در HTML |
| لینک ها در HTML |
| تصاویر در HTML |
| جداول در HTML |
| لیست ها در HTML |
| معرفی المان های Block و Inline در HTML |
| معرفی تگ Div در HTML |
| معرفی Iframes در HTML |
| متا تگ ها در HTML |
| فرم ها در HTML |
| ساختار و قواعد یک صفحه وب |
| متن ها در HTML – بخش دوم |
| المان‌های مفهومی در HTML |
| کاراکترهای ویژه در HTML |
| SVG چیست ؟ |
| کار با فرمت صوتی و ویدئویی در HTML |
| بررسی ویژگی های سراسری (Global Attributes) در HTML |
| بررسی کل ویژگی های (Attributes) المان های HTML |
| چگونه استاندارد کد بزنیم ؟؟ - بخش HTML |
| معرفی پروژه اول - فصل اول |
| انجام پروژه اول – فصل اول |
| معرفی پروژه دوم – فصل اول |
| انجام پروژه دوم – اتمام فصل اول |
| شروع فصل دوم – CSS چیست ؟ |
| نوشتن اولین CSS – روش های نوشتن CSS |
| معرفی ID و Class |
| انتخابگر ها در CSS |
| معرفی واحد های رنگی در CSS |
| بک گراند (Backgrounds) در CSS |
| بوردرها (Borders) در CSS |
| مارجین (Margins) در CSS |
| پدینگ (Padding) در CSS |
| عرض و ارتفاع در CSS |
| حداقل و حداکثر عرض و ارتفاع در CSS |
| تعریف باکس مدل (Box Model) |
| اوت لاین (OutLine) در CSS |
| متن ها در CSS |
| فونت ها در CSS |
| آیکن ها در CSS |
| لینک ها در CSS |
| لیست ها در CSS |
| جداول در CSS |
| ساختار صفحه وب در CSS – تعریف Display |
| ساختار صفحه وب در CSS – تعریف Position |
| ساختار صفحه وب در CSS – تعریف Z-Index |
| ساختار صفحه وب در CSS – تعریف Overflow |
| ساختار صفحه وب در CSS – تعریف Float |
| تعریف المان Inline-Block |
| ساختار صفحه وب در CSS – تراز کردن در CSS |
| رابطه انتخابگر ها در CSS |
| سودو کلاس ها (Pseudo-classes) در CSS |
| سودو المان ها (Pseudo-elements) در CSS |
| شفافیت گرافیکی در CSS |
| مینی پروژه : طراحی چند منو در CSS |
| مینی پروژه : طراحی منوی باز شو در CSS |
| مینی پروژه : طراحی گالری تصاویر در CSS |
| انتخابگر های اتریبیوت (Attribute) در CSS |
| فرم ها در CSS |
| شمارنده ها در CSS |
| ساختار صفحه وب در CSS – بخش پایانی |
| واحد های اندازه گیری در CSS |
| تقدم و تاخر در CSS |
| تعریف Important در CSS |
| توابع ریاضی در CSS |
| شروع CSS پیشرفته |
| تصاویر با گوشه های گرد در CSS |
| تعریف پراپرتی Border-Image در CSS |
| بک گراند (Backgrounds) پیشرفته در CSS |
| حالت های رنگی در CSS |
| گرادینت (Gradiants) در CSS |
| تعریف سایه در CSS |
| حالت های متن در CSS |
| Transforms دو بعدی در CSS |
| Transforms سه بعدی در CSS |
| Transitions در CSS |
| انیمیشن در CSS |
| مینی پروژه : ساخت Tooltip در CSS |
| استایل دهی به تصاویر در CSS |
| انعکاس تصاویر در CSS |
| تعریف Object-Fit در CSS |
| تعریف Object-Position در CSS |
| ماسک کردن در CSS |
| دکمه ها در CSS |
| مینی پروژه : ساخت باکس صفحه بندی در CSS |
| مفهوم قاعده Box Sizing |
| متغیر ها در CSS |
| تعریف Resize و Outline-offset در CSS |
| شروع مبحث واکنش گرایی – مدیا کوئری |
| پروژه اول فصل دوم : پیاده سازی ساختار یک صفحه واکنش گرا |
| FlexBox در CSS – بخش اول |
| FlexBox در CSS – بخش دوم |
| FlexBox در CSS – بخش سوم |
| FlexBox در CSS – بخش چهارم |
| واکنش گرایی پیشرفته – CSS Grid |
| CSS Grid – بخش دوم |
| CSS Grid – بخش سوم |
| CSS Grid – بخش چهارم |
| واکنش گرایی تخصصی – مبانی واکنش گرایی |
| مبانی واکنش گرایی ۲ – دید کاربر |
| مبانی واکنش گرایی ۳ – ستون ها و سطر ها |
| مبانی واکنش گرایی ۴ – مدیا کوئری پیشرفته |
| مبانی واکنش گرایی 5 – استفاده از تصاویر |
| مبانی واکنش گرایی 6 – معرفی مختصر فریم ورک ها |
| پروژه دوم فصل دوم – معرفی |
| پروژه دوم فصل دوم – طراحی مینی فریم ورک اختصاصی |
| پروژه دوم فصل دوم – اجرای پروژه |
نظرات کاربران در رابطه با این دوره