درباره دوره: در درس برنامه‌نویسی وب از مجموعه دوره‌های آموزش برنامه نویسی و آموزش طراحی سایت مکتب خونه سعی شده با یک دید کاربردی، مفاهیم، روش ها، استاندارد‌ها و تکنولوژی‌های موجود در زمینه‌ی برنامه نویسی وب معرفی شده و آموزش داده شود. در ابتدای درس مفاهیم مقدماتی وب و استاندارد‌های HTML، CSS و زبان Java Script معرفی می‌شوند. در ادامه درس در کنار آموزش الگوهای برنامه نویسی وب و معماری‌های برنامه نویسی Enterprise، زبان PHP آموزش داده می‌شود. در ادامه معرفی کوتاهی از مفهوم پایگاه داده‌های رابطه‌ای و زبان SQL گفته شده و سپس مفاهیم پیشرفته‌تر در زمینه‌ی برنامه‌نویسی وب به همراه فریم‌ورک Symfony2 ارايه می‌شود. زبان برنامه نویسی وب مانند سایر زبان‌های برنامه نویسی دارای دو بخش اصلی دارد: برنامه نویسی سروربرنامه نویسی Clientمعمولا زبان‌هایی که بیشتر در زبان برنامه نویسی وب و در بخش سرور قرار دارند شامل: XMLHTMLJavaScriptPHPPerl 5این نکته را فراموش نکنید که برنامه نویسی وب با برنامه نویسی کاملا متفاوت است. در بخش کلاینت (Client) زبان‌های اسکریپت شده نقش برنامه‌نویسی را برعهده دارند. برنامه نویسی وب جزء رشته‌هایی است که طرفداران زیادی را به خود جذب کرده است زیرا این برنامه نه تنها درآمد مناسبی دارد بلکه جزء یکی از پر درآمدترین شغل‌ها، در سراسر جهان است. برنامه‌نویسان بخصوص برنامه نویسان وب هرچه سابقه کاری بیشتری داشته باشند می‌توانند در این رشته بیشتر رشد کنند و خدمات بهتری را به دیگران ارائه دهند. امروزه در جامعه ما برنامه نویسی وب دارای ارزش بسیاری است زیرا افراد و شرکت‌های زیادی خواهان افرادی هستند که در این رشته تخصص داشته باشند به همین خاطر می‌گوییم که یادگیری برنامه نویسی تحت وب از اهمیت قابل توجهی برخوردار است. طراحی وب سایتبگذارید کمی با شما در رابطه با طراحی وب سایت سخن بگوییم. تا حالا شده وارد یک وب سایت بشوید و این پرسش برایتان به وجود بیاید که چگونه این وب سایت طراحی شده و چه کسی توانسته آن را به این صورت طراحی کند؟! اگر بخواهیم مختصر تعریفی برای طراحی وب سایت بیاوریم باید بگوییم که تمامی بخش‌هایی که کاربر بعد از ورود به سایت می‌تواند آن را مشاهده کند، به عنوان طراحی وب سایت شناخته می‌شود. یادتان است در مطالب فوق اشاره کردیم در بخش کلاینت زبان‌های اسکریپت شده نقش مهمی را در این بخش دارند! در این بخش نیز می‌خواهیم بگوییم که تمامی زبان‌های برنامه نویسی که با طراحی وب سایت صورت می‌گیرد با استفاده از Html ,Css,Javascript که اصطلاحا فرانت اند (front end) نام دارد طراحی می‌شوند. طراح وب سایت هم با استفاده از همین زبان‌های برنامه نویسی ظاهر سایت را طراحی می‌کند ناگفته نماند که ظاهر سایت نقش مهمی در جذب مخاطب دارد. آموزش طراحی سایتاگر قصد دارید طراحی وب سایت را آموزش ببینید اول بهتر است مشخص کنید که هدفتان از آموزش طراحی وب سایت چیست؟ حال که هدفتان از آموزش طراحی وب سایت مشخص کردید بهتر است برویم سراغ زبان‌هایی که باید برای طراحی وب سایت یاد بگیرید. اولین زبانی که باید یاد بگیرید زبان HTML است بعد از زبان برنامه نویسی HTML به سراغ زبان برنامه نویسی CSS و در آخر زبان برنامه نویسی جاوا اسکریپت (Java Script) باید بیاموزید. آموزش HTMLزبان برنامه نویسی HTML به نوعی چارچوب و اسکلت سایت است و قسمت ظاهری وب سایت با  نشانه گذاری HTML به وجود می‌آید. برای مثال تصور کنید شما معمار هستید و می‌خواهید خانه درست کنید به نظرتون برای ثابت نگه داشتن خانه اگر از آهن و بتن استفاده نکنیم چه اتفاقی می‌افتد؟ بله درسته خانه‌ای درست نمی‌شود چون چارچوب و اسکلت اصلی خانه اصلا وجود ندارد. آموزش زبان برنامه نویسی HTML هم به همین شکل است. اگر شما بهترین طراح وب سایت هم باشید و با زبان برنامه نویسی HTML آشنا نباشید، نمی‌توانید سایتی را طراحی کنید. برای یادگیری این زبان نگرانی وجود ندارد زیرا می‌توانید به راحتی با توجه به علاقه‌ای که دارید مدت یادگیری آن را مشخص کنید. آموزش CSSیادتان باشد فقط زیبایی ظاهر وب سایت مهم نیست بلکه باید صفحات وب هم زیبایی منحصر به فرد خود را داشته باشد از این رو برای طراحی صفحات وب از زبان CSS استفاده می‌کنند. ممکن است زبان CSS کمی شما را گیج کند اما نگران نباشید زیرا این حالت گیجی به زودی از بین می‌رود و وقتی اولین کد خود را با استفاده از CSS نوشتید می‌توانید از آنچه که به وجود آورده‌اید (زیبایی صفحات وب سایت) لذت ببرید. مدت زمان یادگیری زبان CSS نیز به خود شما و علاقه‌ای که از خود نشان می‌دهید بستگی دارد. آموزش زبان جاوا اسکریپتخب تا اینجای کار توانستید هم ظاهر سایت را زیبا کنید و هم صفحات آن را براساس سلیقه خود شخصی سازی کنید حال اگر بخواهیم امکانات دیگری مانند تاریخ، ساعت ، انیمیشن‌های مختلف و ... به آن اضافه کنیم باید زبان Java Script یاد بگیریم. می‌توان گفت برخلاف HTML و CSS که جزء زبان‌های نشانه گذاری بودند، جاوا اسکریپت زبان برنامه نویسی اسکریپت شده است و برای یادگیری آن نیاز به زمان بیشتری پیدا خواهید کرد. اینجاست که دیگر شما نحوه طراحی سایت را تا حدودی شناخته‌اید و می‌توانید ساختار ظاهری سایت (فرانت اند) را براساس معیارهای خود طراحی کنید. شاید برای خیلی از افراد اتفاق افتاده باشد که دقیق ندانند که برنامه نویسی وب با طراح وب چه تفاوتی دارد و کار هر کدام به چه صورت است؟! تفاوتی که میان برنامه نویس وب و طراح وب وجود دارد این است که برنامه نویس وب همانطور که از نامش پیداست کدهای base را تحت سرویس‌های وب می‌نویسد. اما طراح وب سایت ظاهر و رابط کاربری، وب سایت را طراحی می‌کند. در واقع می‌توانیم بگوییم که فردی که ظاهر سایت را طراحی می‌کند، طراح سایت یا Web designer نام دارد و فردی که کدها را براساس برنامه نویسی سرور می‌نویسد برنامه نویس وب نام دارد. البته ناگفته نماند افرادی هم هستند که علاوه بر طراح وب سایت، برنامه نویسی وب هم بلد هستند و می‌توانند هر دو کار را باهم انجام دهد. همانطور که پیش تر در رابطه با برنامه نویسی تحت وب صحبت کردیم در این بخش می‌خواهیم در رابطه با انواع آن سخن بگوییم. برنامه نویسی وب به دو بخش اصلی تقسیم می‌شود که عبارت اند از: برنامه نویسی فرانت اند (Front End)برنامه نویسی در بخش Front End می‌تواند با کاربر ارتباط برقرار کند و به نوعی کاربر می‌تواند کارهایی که برنامه نویس بر روی سایت انجام داده است را مشاهده کند. به طور کلی این نوع برنامه نویسی سمت کاربر را می‌گیرد و بیشتر با کاربر تعامل دارد. نکته: برنامه نویسی فرانت اند در بخش برنامه نویسی Client قرار دارد. زبان‌های مورد نیاز برای برنامه نویسی Front End شامل: زبان برنامه نویسی Htmlزبان برنامه نویسی Cssزبان جاوا اسکریپت (Java Script)برنامه نویسی بک اند (Back End)در برنامه نویسی Back End کاربر دیگر قادر نیست تا کارهایی که برنامه نویس بر روی سایت انجام داده است را مشاهده کند. برنامه نویس Back End وظیفه دارد که این بخش از وب سایت را توسعه دهد و باعث رشد بیشتر وب سایت شود. نکته: برنامه نویسی Back End در بخش برنامه نویسی سرور قرار می‌گیرد. زبان‌های مورد نیاز برای برنامه نویسی Back End شامل: زبان برنامه نویسی phpزبان برنامه نویسی aspزبان برنامه نویسی پایتون (Python)اگر یادتان باشد در مطالب فوق اشاره کردیم افرادی در این میان هستند که هم می‌توانند وب سایت را طراحی و هم کدنویسی‌های آن را بنویسند به این افراد به اصطلاح FULL STACK می‌گویند. این افراد به راحتی این قابلیت را دارند که پروژه‌های مستقل را قبول کنند و صفر تا صد آن را خودشان انجام دهند. برای اینکه بتوانید برنامه نویسی وب را انجام دهید نیاز به ابزارهایی دارید که کار را برای شما راحت‌تر کنند. برای اینکه دستورات php و asp به راحتی بتوانند در کامپیوتر اجرا شوند کامپیوتر باید به یک local host یا همان سرور محلی تبدیل شود. برای نوشتن دستورات و کدها نیز به یک ویرایشگر نیاز دارید. نصب نرم افزارهای XAMPP یا WAMP با این نرم افزارها می‌توانید کامپیوتر خود را به local host یا همان سرور محلی تبدیل کنید و این نرم افزارها می‌توانند کدهای سرور را به راحتی در رایانه شما اجرا کنند. نصب نرم افزار ویرایشگر متن شما می‌توانید نرم افزار ویرایشگر متن مانند Adobe Dreamweaver را بر روی رایانه خود نصب کنید تا این نرم افزار با توجه به قابلیت‌هایی که دارد، بستر کدنویسی را برای شما فراهم ‌‌کند. مختصر آموزش UI و UXشاید اتفاق افتاده باشد که در مجلات و گزارشات روزانه دیجیتالی با رابط کاربری و تجربه کاربری برخورد کرده باشید و ندانید این دو چه تفاوتی با یکدیگر دارند؟! اگر بخواهیم یک تعریف کلی برای این دو رابط داشته باشیم باید بگوییم که به رابط کاربری UI و به تجربه کاربری UX می‌گویند. فیلم های آموزشی: 1 - جلسه اول - اهداف درس، مفاهیم اولیه وشروع html 2 - جلسه دوم - ادامه html 3 - جلسه سوم - آشنایی با style ها و شروع css 4 - جلسه چهارم - ادامه css و مقدمه‌ی javascript 5 - جلسه پنجم - ادامه‌ی javascript 6 - جلسه ششم - ادامه‌ی javascript 7 - جلسه هفتم - جمع بندی javascript و شروع مبحث http protocol 8 - جلسه هشتم - شروع php 9 - جلسه نهم - ادامه‌ی php و آشنایی با چند مفهوم 10 - جلسه دهم - شروع برنامه نویسی شی‌گرا، آشنایی با namespace 11 - جلسه یازدهم - اتمام مفاهیم حول php و برنامه نویسی شی‌گرا 12 - جلسه دوازدهم - شروع پایگاه‌های داده 13 - جلسه سیزدهم - ادامه‌ی مبحث پایگاه‌های داده 14 - جلسه چهاردهم - برنامه‌های سازمانی - Enterprise - لایه ها در برنامه 15 - جلسه پانزدهم - ادامه‌ی لایه ها 16 - جلسه شانزدهم - ادامه معماری برنامه وب - الگوی mvc 17 - جلسه هفدهم - مبحث کنترلرها - symfony و routing همراه با چند مثال 18 - جلسه هجدهم - ادامه‌ی مبحث کنترلر ها و تکمیل مطالب جلسه‌ی قبل 19 - جلسه نوزدهم - ادامه‌ی domain model و مطالب پیرامون doctrine، مقادیر داده 20 - جلسه بیستم - تکمیل مبحث doctrine و repository، کار با reference، معرفی Query builder، مبحث concurrency 21 - جلسه بیست و یکم - مبحث Transaction و Transaction در Doctrine، کلیات مسیریابی (Routing) 22 - جلسه بیست و دوم - ادامه ی مبحث مسیر یابی، ساختن URL، قالب ها در سیمفونی2 ، امنیت در سیمفونی 2، روش تصدیق، دادن اجازه 23 - جلسه بیست و سوم - معرفی کاربرها، service container، مبحث Inversion of control، مبحث dependency injection 24 - جلسه بیست و چهارم - تکمیل بحث dependency injection، مبحث تست، فرم ها، ابزارهای کلاس controller 25 - جلسه بیست و پنجم - اتمام بحث ابزارهای کلاس controller، بحث cache و Performance

درباره دوره: طراحی وب از شاخه‌های برنامه‌نویسی است. افراد و شرکت‌های رأی معرفی محصولات خود به دنیا، معمولاً از وب‌سایت استفاده می‌کنند. بخش کلاینت یک صفحه وب  شامل سه بخش است. بخش اول ساختار صفحه، بخش دوم شکل و رنگ صفحه و بخش سوم منطق برنامه است. بخش اول به کمک HTML، بخش دوم با CSS و بخش سوم با جاوا اسکریپت  ساخته می‌شود. اچ‌‌تی‌‌ام‌ال (Hyper Text Markup Language) یا همان زبان نشانه‌‌گذاری فوق متن، زبان طراحی اسکلت اصلی وب‌سایت است. این زبان از تگ‌ها برای نشان‌دادن محتوا و ساختار صفحات استفاده می‌کند، این تگ‌ها به مرورگر اعلام می‌‌کنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت‌نمایش داده شود. به کمک HTML ، اجزای صفحه را ایجاد می‌کنیم و برای ایجاد رابط کاربری از  CSS(Cascading Style Sheets)   استفاده می‌شود. به عبارتی زبان برنامه‌نویسی سی اس اس برای طراحی وب‌سایت‌ استفاده می‌شود.  از CSS برای تنظیم ویژگی‌های ظاهری محتوا از جمله رنگ‌ها، فونت‌ها، حاشیه‌ها، پس‌زمینه‌ها، سایزها و… می‌توان استفاده کرد. با استفاده از CSS می‌توان به المان‌های موجود در صفحه وب که توسط HTML ایجاد شده‌اند، شکل داد. با استفاده از CSS، می‌توان بدون تغییر در ساختار یک صفحه، استایل‌های مختلفی را برای آن صفحه تعریف کرد. در این آموزش چه چیزی یاد می‌گیریم؟ در ابتدا با مقدمات HTML و تگ‌های پاراگراف و نقل‌قول آشنا می‌شویم. سپس استایل دهی اولیه به کمک CSS را معرفی می‌کنیم. بعد تگ‌هایی برای فرمت‌بندی متن را معرفی می‌کنیم. در ادامه با تگ‌هایی برای ایجاد لینک، تصویر، لیست، جدول و درج صدا و فیلم در صفحه آشنا می‌شویم و سی اس اس مربوط به آنها را نیز یاد می‌گیریم. در گام بعدی انواع تگ‌های input را ارائه خواهیم کرد. سپس تگ پر کاربرد div به همراه سی اس اس های پرکاربردی آشنا می‌شویم. در  ادامه  سلکتورها که بسیار پرکاربرد هستند را یاد می‌گیریم. در نهایت با تگ‌های معنایی آشنا شده و در انتهای آموزش یک معرفی مختصری از جاوا اسکریپت و تگ canvas خواهیم داشت. همچنین چند مثال کاربردی در طی دوره هم بررسی می‌شوند. آموزش اچ تی ام ال و سی اس اس، جزو مباحث پایه و مقدماتی برای طراحی سایت است. با یادگیری این مهارت‌ها، شما می‌توانید پروژه‌های طراحی سایت را انجام دهید. نکته‌ی مهم برای یادگیری اچ تی ام ال و سی اس اس، دنبال کردن آموزش‌های پروژه محور است. آموزش‌هایی که با تمارین عملی فراوان، شما را برای پروژه‌های واقعی آماده کنند. اچ تی ام ال (html) مخفف عبارت Hyper Text Markup Language به معنای زبان نشانه‌گذاری ابر متن است. اچ تی ام ال را می‌توان زبان استاندارد صفحات وب دانست. این زبان به شما امکان پیاده‌سازی و چیدمان بخش‌های مختلف یک صفحه‌ی وب (اعم از تصویر، متن، ویدیو و غیره) را می‌دهد. لازم به ذکر است که برای تعیین عناصر در این زبان، باید از تگ ها استفاده کنید. سی اس اس (css) مخفف عبارت Cascading Style Sheets به معنای صفحات استایل آبشاری است. سی اس اس به شما اجازه می‌دهد تا صفحات وبی که به کمک زبان اچ تی ام ال ساخته‌اید را زیبا کنید. رنگ‌ها، حاشیه‌ها، فونت، قلم نوشته و دیگر ویژگی‌های عناصر صفحه‌ی وب، با کمک css تعیین می‌شود. فراگیر شدن اینترنت، سبب شده است تا تمام کسب و کارها، به وب سایت نیاز داشته باشند. وب سایت‌ها اجازه می‌دهند تا خدمات و محصولات برای طیف گسترده‌تری از مشتریان در دسترس باشد. این موضوع بدان معناست که تقریباً تمام افراد، تمایل دارند که یک وب سایت برای حرفه‌ی خود داشته باشند. وقتی شما طراحی سایت را یاد می‌گیرید، پروژه‌های عظیم و ناتمامی در اختیارتان قرار می‌گیرد. پروژه‌هایی که می‌تواند اعتبار شما را افزایش داده و محلی برای کسب درآمد شما باشد. این‌جاست که یادگیری طراحی سایت، اهمیت دارد. برای یادگیری طراحی سایت، شما باید ابتدا آموزش اچ تی ام ال و سی اس اس را دنبال کنید. Html css آموزش مقدماتی برای طراحی سایت به شمار می‌آیند. در مراحل بعد با یادگیری زبان‌هایی مانند جاوا اسکریپت (Javascript) می‌توانید وب سایت‌های پیشرفته‌تر و خلاقانه‌ای را بسازید. به‌هر حال، یادگیری حوزه‌ی طراحی سایت با اچ تی ام ال و سی اس اس آغاز خواهد شد. این آموزش با هدف انجام پروژه طراحی سایت با html و css طراحی و تدوین شده است. شما در این دوره، با مفاهیم اساسی html و css آشنا می‌شوید و می‌توانید قابلیت‌های آن را به‌طور کامل یاد بگیرید. با توجه به تمرینات عملی که لابه‌لای مباحث این دوره گنجانده شده است، شما توانایی لازم برای انجام پروژه html و css را نیز به‌دست خواهید آورد. این دوره‌ی آموزشی، به نحوی تهیه شده است که مباحث آن برای تمام افراد قابل استفاده خواهد بود. بنابراین بدون نیاز به گذراندن هیچ آموزش دیگری، شما می‌توانید یادگیری طراحی سایت را از این دوره، آغاز کنید. لازم به ذکر است که مباحث آموزشی کاملاً ساده و شفاف بیان شده‌اند و جای هیچ‌گونه ابهامی را باقی نگذاشته‌ایم. منابع زیادی برای آموزش رایگان طراحی سایت با html و سی اس اس وجود دارند. شما می‌توانید یادگیری این مفاهیم را با استفاده از کتاب‌های آموزشی و دیگر منابع آموزش html و css به صورت pdf دنبال کنید. شما می‌توانید از کتاب‌های جامع آموزش+ html+css+javascript رایگان استفاده کنید تا طراحی سایت را از پایه تا پیشرفته یاد بگیرید. اگر قصد دارید تا مطالب مربوط به طراحی سایت را ساده‌تر، سریع‌تر و ساختاریافته‌تر یاد بگیرید، توصیه می‌کنیم تا در دوره‌های آموزشی شرکت کنید. اگر فرصت کافی برای این دوره‌ها را ندارید، دوره‌های ویدیویی و مجازی، راهگشا خواهد بود. دوره‌های آموزشی آنلاین، شکل بهتری از یادگیری را ایجاد می‌کنند. شما هر زمان که انرژی و حوصله‌ی یادگیری را داشته باشید، می‌توانید به محتوای آموزشی دسترسی داشته و از آن استفاده کنید. به‌علاوه این‌که در برخی دوره‌ها، امکان ارتباط با مدرس و دیگر دانشجویان وجود دارد که نواقص آموزش مجازی را حذف می‌کند. سرفصل‌ها و مباحثی که در این آموزش دنبال می‌شوند، در فهرست زیر آورده شده است. شما می‌توانید لیست سرفصل‌های منبع آموزشی انتخابی خود را با این عناوین تطبیق داده و از منابع کامل استفاده کنید. •      معرفی دوره‌ی آموزشی و اهداف •      آشنایی با html •      تگ‌های هدینگ در اچ تی ام ال (h1 تا h6) •      تگ پاراگراف (p) •      تگ نقل قول (q) •      تگ‌های استایل‌دهی متن (b و i و s) •      تگ‌های ins و del •      تگ‌های var-kbd-pre-code-samp •      تگ‌های sup و sub •      تگ‌های bbr و dfn •      تگ‌های bdo و bdi •      تگ address •      کاراکترهای ویژه •      آموزش سی اس اس •      معرفی ویژگی font در css •      قراردادن background •      ویژگی boxshadow •      متغیرها •      تابع attr •      ایجاد لینک در اچ تی ام ال با تگ a •      استایل‌دهی به تگ a در سی اس اس •      تگ img •      تگ map •      تگ picture •      قراردادن favicon در سایت •      تگ svg •      ویژگی transform در سی اس اس •      ویژگی filter در سی اس اس •      ایجاد لیست در اچ تی ام ال با تگ‌های ul، ol و dl •      استایل‌دهی به لیست‌ها در سی اس اس •      کار با لیست •      لیست‌های تودرتو •      ایجاد جدول با تگ table •      تگ‌های thead و tfoot و tbody •      صفت rowspan •      صفت colspan •      تگ‌های صدا audio •      تگ ویدیو video •      تگ object •      تگ embed •      تگ iframe •      کار با تگ‌های ورودی فرم •      صفت pattern •      ساخت دکمه در فرم با تگ button •      انواع ورودی‌های فرم (radio- checkbox- selector و غیره) •      تگ‌های ورودی از نوع فایل، رنگ و تصویر •      تگ‌های ورودی از نوع range •      بخش بندی صفحه با تگ div •      ویژگی boxsizing در سی اس اس •      واحدهای rem و em •      تابع clac در css •      تگ span •      معرفی و کار با ویژگی‌های کاربردی در سی اس اس •      مثال‌های عملی •      انتخابگر در سی اس اس •      عناصر معنایی •      مقدمه‌ای بر جاوا اسکریپت •      مرور و جمع‌بندی مطالب آموزش داده شده برای آموزش طراحی بخش کلاینت صفحات وب، می‌توانید از دوره‌های آموزشی اچ تی ام ال در مکتب خونه استفاده کنید. این دوره، با در نظر داشتن سرفصل‌های آموزشی کامل، شما را برای طراحی سایت از صفر تا صد آشنا خواهد کرد. آموزش‌های مکتب خونه کاملاً عملی بوده و شما با انجام تمارین متعدد و پروژه‌های مختلف، تسلط خوبی روی مباحث آموزشی دریافت می‌کنید. آموزش اچ تی ام ال و سی اس اس به عنوان مباحث مقدماتی در طراحی سایت، اهمیت دارد. Html و css برای طراحی و پیاده‌سازی بخش کلاینت وب سایت مورد نیاز است. همچنین در مکتب خونه انواع دوره آموزش برنامه نویسی و آموزش طراحی سایت به عنوان مکمل و پیش‌نیازهای این دوره موجود است. تگ‌های پایه: 1 - مقدمه‌ای کوتاه 2 - تگ‌های h1 تا h6 3 - ایجاد پاراگراف با تگ p 4 - نقل قول با تگ q و bloclqute 5 - تگ‌های b-strong-i-em-mark-small 6 - تگ‌های ins,del 7 - تگ‌های var-kbd-pre-code-samp 8 - تگ‌های sup,sub 9 - تک‌های bbr,dfn 10 - تگ‌های bdo,bdi 11 - تگ address 12 - کاراکترهای ویژه مقدمه CSS: 1 - شروع کار با css 2 - معرفی ویژگی font 3 - قرار دادن background 4 - ویژگی boxshadow 5 - متغیرها 6 - تابع attr لینک: 1 - ایجاد لینک با تگ a 2 - استایل دهی به تگ a(سی اس اس) تصویر: 1 - تگ img 2 - تگ map 3 - تگ picture 4 - قرار دادن favicon در سایت 5 - تگ svg 6 - ویژگی transform (سی اس اس) 7 - ویژگی filter (سی اس اس) لیست: 1 - ایجاد لیست با تگ‌های ul,ol,dl 2 - استایل دهی به لیست (سی اس اس) 3 - مثال برای کار با لیست 4 - لیست‌های تودرتو جدول: 1 - تگ table 2 - تگ tbody, tfoot, thead 3 - صفت rowspan 4 - صفت colspan صدا و ویدیو: 1 - تگ audio 2 - تگ video 3 - تگ object 4 - تگ embed 5 - تگ iframe انواع ورودی - فرم: 1 - تگ input با نوع‌های text, number, email, password, tel, search, url 2 - صفت pattern 3 - ساخت دکمه (Button) 4 - تگ input با نوع date , time 5 - نگ ورودی با نوع checkbox, radio و تگ selector 6 - تگ input با نوع‌ range - تگ‌های progress , meter 7 - تگ input با نوع‌های color, file, image 8 - فرم تگ div و span: 1 - بخش‌بندی با تگ div 2 - مثال برای div 3 - ویژگی boxsizing (سی اس اس) 4 - واحدهای em , rem 5 - تابع clac در css 6 - تگ span ویژگی‌های کاربردی CSS: 1 - ویژگی display 2 - ویژگی display با مقدار flex 3 - استفاده از order درflex 4 - ویژگی display با مقدار grid 5 - مثال 6 - مثال 7 - ویژگی position 8 - ویژگی position با مقدار absolute 9 - ویژگی inset 10 - مثال 11 - مثال 12 - ویژگی position با مقدار flex 13 - مثال 14 - ویژگی position با مقدار sticky 15 - مثال 16 - ویژگی zindex 17 - مثال zindex سی اس اس (انتخاب‌گرها): 1 - انتخابگرهای اولیه 2 - انتخابگرهای and,or,not 3 - ترکیب کننده‌ها (combinators) 4 - مثال combinators 5 - مثال انتخابگر 6 - انتخابگر child 7 - انتخابگر nthchild 8 - سلکتورهای ویژگی (* ^ $ ~) 9 - مثال 10 - مثال 11 - شبه کلاس empty 12 - شبه عناصر before و after 13 - مثال 14 - مثال 15 - شبه عناصر firstline , firstletter, selection 16 - شبه عناصر (marker, placeholder) عناصر معنایی (Semantic Elements) در HTML5: 1 - معرفی عناصر معنایی 2 - مثال 3 - تگ article 4 - مثال 5 - عنصر معنایی details 6 - مثال 7 - تگ figure مثال‌های کاربردی: 1 - فرم رزرو اتاق در هتل 2 - فرم ثبت سفارش غذا 3 - صفحه قدردانی از استیوجابز 4 - صفحه قدردانی از دکتر حسابی 5 - صفحه فروش محتوای آموزشی 6 - صفحه معرفی کتاب 7 - چهار دکمه 8 - دکمه‌های پلیر 9 - ایجاد دکمه شبیه ماه 10 - چک باکس مدرن تمرین همراه با جواب: 1 - تمرین اول: ایجاد داکیومنت برای html 2 - کد HTML - تمرین اول 3 - کد CSS - تمرین اول 4 - تمرین دوم: صفحه معرفی نمونه کار 5 - کد HTML - تمرین دوم 6 - کد CSS - تمرین دوم 7 - تمرین سوم: اسکایپ مقدمه‌ای بر جاوا اسکریپت - تگ canvas: 1 - برنامه محاسبه جمع دو عدد دریافتی از ورودی 2 - برنامه چک زوج یا فرد بودن عدد دریافتی 3 - برنامه ایجاد دکمه برای تغییر عرض تگ video 4 - برنامه ایجاد دکمه برای کنترل تگ progress 5 - تگ canvas جمع‌بندی: 1 - مروری بر تگ‌های HTML 2 - پایان

درباره دوره: همه ما دچار سوگیری‌های ذهنی (Bias) هستیم مگر زمانی که به نحوی آگاهی خود را افزایش دهیم. بسیاری از طراحان و سازندگان محصولات، زمانی که به کاربران فکر می‌کنند ذهنشان محدود به انسان‌های عادی در حالت عادی است. حواسشان نیست که گاهی همان انسان‌های عادی دچار ناتوانی موقت و یا دائمی می‌شوند و هستند کسانی که از زمان تولد دچار محدودیت‌هایی هستند. گذشته از محدودیت‌های دائمی و یا طولانی مدت، زمانی که می‌خواهیم یک دستی با صفحه‌کلید گوشی هوشمند خود کار کنیم یا زمانی که عمل چشم انجام داده و مدتی نیاز است که بدون نگاه مستقیم به صفحه گوشی با آن کار کنیم، دچار ناتوانی موقت هستیم. این موارد نشان می‌دهد که چه اندازه محدود به کاربران و لحظاتی که قرار است با محصول ما کار کنند فکر کرده‌ایم. مفهوم «دسترسی‌پذیری» یا Accessibility تلنگریست که به ما یادآوری کند چه بهتر که محصول ما علاوه بر قابل استفاده بودن برای افراد معمولی، توسط افراد ناتوان نیز قابل استفاده باشد؛ یا به عبارت دیگر دسترسی به امکانات و راه‌حلی که ما در قالب محصول ارائه کرده‌ایم برای «همه» میسر باشد. دسترسی‌پذیری نیازمند آشنایی و پرداختن عمیق است تا در نوع تفکر ما به محصولات و کاربران آن نفوذ کرده و تحت تاثیر قرارش دهد، همچنین معیارها و ساخت آن قدم‌هایی دارد که ما در این دوره می‌خواهیم به همه این موارد بپردازیم. در دنیا چقدر به این مفهوم پرداخته شده؟ تفاوت این مفهوم با کاربردپذیری چیست؟ ناتوانی چگونه تعریف شده و چه انواعی دارد؟ تمام این‌ها سوالاتی هستند که در این دوره به آن پاسخ می‌دهیم. خبر خوب اینکه در مسیر دسترسی‌پذیرتر کردن محصولاتمان تنها نیستید! ابزارها و منابع مختلفی به یاری ما می‌آیند که معرفی و بررسی آن‌ها را نیز در این دوره لازم دانسته و باهم به آن‌ها خواهیم پرداخت. یکی از مهم‌ترین قسمت‌هایی که باید در زمان طراحی ux یا طراحی تجربه کاربری در نظر بگیرید، این است که صفحه‌ی شما به صورتی طراحی گردد که دسترسی به قسمت‌های مختلف وب‌سایت، برای کاربر تا اندازه‌ی بالایی آسان باشد تا درصورت نیاز به هر آنچه که لازم دارد در کمترین زمان ممکن دسترسی داشته باشد. آموزش دوره‌ی تجربه طراحی کاربری مکتبخونه به شما کمک می‌کند که وب‌سایت یا صفحه‌ی خود را به‌گونه‌ای طراحی نمایید که کاربر شما در زمان استفاده از امکانات وب‌سایت، حس بهتری را تجربه نماید. تجربه‌ی کاربری برگرفته از حالت و احساسات کاربر شما در زمان استفاده از خدمات و یا محصول شماست. تجربه‌ی کاربری بخش‌های مختلفی دارد که جنبه‌های علمی و تجربی بخش کوچکی از این مقوله را دربرمیگیرند. کاربر باید در زمان استفاده از محصول یا خدمات شما احساس کاربردی بودن و سادگی آن را تجربه نماید. شما با مجموعه فعالیت‌هایی که بر روی پلتفرم خود انجام می‌دهید حس دسترسی کاربری بهتری را برای کاربر خود تداعی می‌کنید. طراح شما باید به گونه‌ای عمل نماید که کاربر شما ارتباط احساسی بهتری را با محیط وب‌سایت شما برقرار کند و برای انجام کوچکترین کار مجبور نشود که وقت زیادی را صرف آن نماید. مارک زاکربرگ خالق فیسبوک، محل کار خود را به گونه‌ای طراحی کرده است که میز طراحی سایت و میز اصلی کار خود نزدیک هم باشند تا نظارت بیشتری بر روی کار خود داشته باشد و کارهای خود را در زمان کمتری و با سرعت بیشتری انجام دهد. همچنین این تصمیم سبب می‌شود که با راحتی بیشتری استراتژی‌های مورد نیاز خود را طراحی کند و درک مفهومی‎‌تری از کار داشته باشد. دسترسی‌ پذیری در طراحی: 1 - آشنایی با دسترسی‌پذیری 2 - دسترسی‌پذیری در محصولات دیجیتال 3 - قدم‌ها و معیارهای طراحی دسترسی‌پذیر 4 - معرفی ابزارها 5 - آشنایی با منابع 6 - ارزیابی

درباره دوره: در دنیای امروز گسترش وب‌سایت‌ها به نحوی است که تقریبا هیچ کسب و کار، پایگاه فرهنگی و هنری، نهاد سیاسی و فروشگاهی را نمی‌توانیم پیدا کنیم که در زمینه ایجاد وب‌سایت سرمایه‌گذاری نکرده باشد. به همین دلیل اغراق نیست اگر بگوییم بخش بسیار بزرگی از تجارت‌ها، خرید و فروش‌ها و مطالعات افراد در این زمان در دنیای اینترنت و در فضای وب‌سایت‌های گوناگون انجام می‌گیرد. به عنوان یک چالش ساده به این موضوع فکر کنید که آیا در اطرافتان هیچ نهاد، موسسه، تجارت و پایگاه خبری‌ای را می‌شناسید که وب‌سایت نداشته باشد یا به عنوان اولین کار، اقدام به تاسیس یک وب‌سایت نکرده باشد؟ بله امروزه وب‌سایت‌ها حرف اول را می‌زنند. به همین دلیل است که همه افراد، در هر شغل و زمینه کاری در اولین گام شروع به تاسیس یک وب‌سایت می‌کنند. حتما برای شما هم پیش‌آمده که در مقطعی تصمیم به راه‌اندازی وب‌سایت شخصی خودتان کرده باشید و در ادامه به هردلیل از این کار منصرف شده باشید. دوره آموزش طراحی سایت مقدماتی به شما این کمک را می‌کند تا با نیازمندی‌ها و امکاناتی که برای راه‌اندازی یک وب‌سایت مورد نیازتان است آشنا شوید. علاوه بر این راهنمایی این دوره به شما کمک می‌کند تا استراتژی درستی در زمینه راه‌اندازی وب‌سایت تعریف کنید و به سادگی هرچه بیشتر اقدام به راه‌اندازی وب‌سایت خود کنید. در اولین گام و به عنوان اولین سوال باید از خود بپرسیم که این دوره قرار است چه چیزهایی به ما بیاموزد؟ برای پاسخ به این سوال یک جواب کلی و چند جواب جزئی وجود دارد. در جواب کلی می‌توانیم بگویم این دوره به شما هرچه برای طراحی یک سایت نیاز دارید را آموزش خواهد داد؛ اما در جوابی مفصل‌تر باید بگوییم در این دوره موارد زیر را یاد می‌گیرید: اصلی‌ترین هدف در نظر گرفته شده برای این دوره آشنایی با فرایند طراحی سایت و ابزارها و نیازمندی‌های فردی است که قصد شروع به کار طراحی وب‌سایت را دارد. به این ترتیب در این دوره اصلی‌ترین هدف آموزش اصول اولیه و مقدماتی طراحی سایت به علاقه‌مندانی است که تجربه چندانی در این امر ندارند و قصد شروع به کار در این زمینه را دارند. این دوره برای همه علاقه‌مندان به موضوع طراحی سایت مناسب است. به عبارت بهتر مباحث این دوره به نحوی تهیه و تدوین شده است که همه علاقه‌مندان به موضوع طراحی سایت بتوانند از این دوره استفاده کنند و مباحث آن را دنبال کنند. این افراد برای شرکت در این دوره نیاز به سطح بالایی از تخصص ندارند و آشنایی اولیه با مفاهیم مربوط به طراحی سایت برای این افراد کافی است. طراحی وب سایت، یکی از مهارت‌های مهم در دنیای دیجیتال هست. با توجه به رشد روزافزون استفاده از اینترنت و نیاز کسب و کارها به حضور آنلاین، طراحی سایت به یکی از عوامل کلیدی برای موفقیت و رشد شرکت‌ها تبدیل شده است. در دوره آموزش مقدماتی طراحی سایت مکتب خونه قصد داریم شما را وارد دنیای طراحی سایت کرده و اصول اولیه طراحی را به شما آموزش دهیم. امروزه نیاز هر کسب و کاری داشتن سایت است. برای داشتن سایت نیازمند گذراندن آموزش طراحی سایت هستید. اگر می‌خواهید یاد بگیرید که چگونه وب سایت طراحی کنید، اولین قدم این است که بدانید طراحی وب دقیقا چیست. طراحی وب بخشی هنری و بخشی علمی است که از هر دو جنبه خلاقانه و تحلیلی ذهن افراد استفاده می‌کند. طراحان وب آنچه را که هدف کارشان است را  می‌گیرند و آن را به تصاویری ترجمه می‌کنند. تصاویر، تایپوگرافی، رنگ‌ها، متن، فضای نگاتیو و ساختار در کنار هم قرار می‌گیرند و نه تنها تجربه کاربری را ارائه می‌دهند، بلکه وسیله‌ای برای انتقال ایده‌ها هستند. مهارت‌های طراحی وب شامل انواع تکنیک ها و تخصص در ایجاد وب سایت‌هایی را پوشش می‌دهد که هم کاربردی و هم از نظر بصری جذاب باشند. یک طراح وب خوب، اهمیت هر قطعه از یک طراحی را درک می‌کند. هر چقدر هم که جلوه‌های بصری طراحی وب سایت تماشایی باشد، بدون سازماندهی بی معنی هستند. منطق باید ترتیب ایده‌ها و تصاویر را در هر صفحه هدایت کند و همچنین نحوه سفر کاربران را در آن راهنمایی کند. یک طراح وب ماهر طرح هایی را ایجاد می‌کند که با کمترین تعداد کلیک ارائه می‌شود. طراحی وب سایت را می‌توان به چندین شاخه تقسیم کرد: رابط کاربری (UI)، تجربه کاربر (UX)، بهینه سازی موتور جستجو (SEO) و سایر زمینه‌های تخصصی. فرآیند طراحی سایت عبارتند از مراحل کلیدی زیر: اولین گام در طراحی یک وب سایت، انتخاب یک نام دامنه مناسب است. نام دامنه باید کوتاه، آسان برای به خاطر سپردن و مرتبط با کسب و کار شما باشد. همچنین باید از پسوندهای رایج مانند.com، .net  یا .org  استفاده کنید. پس از انتخاب نام دامنه، باید یک میزبان وب (web host) انتخاب کنید. میزبان وب، فضای ذخیره سازی و منابع لازم برای اجرای وب سایت شما را فراهم می‌کند. هنگام انتخاب یک هاست، عواملی مانند قیمت، فضای ذخیره سازی، پشتیبانی از مشتری و امنیت را در نظر بگیرید یک سیستم مدیریت محتوا (CMS) به شما امکان می‌دهد تا به راحتی محتوای وب سایت خود را ایجاد، ویرایش و مدیریت کنید WordPress،Joomla  و Drupal از جمله محبوب ترین سیستم‌های CMS هستند. WordPress به دلیل سادگی و انعطاف پذیری بالا، گزینه محبوبی برای مبتدیان است. پس از نصبCMS، باید یک قالب مناسب برای وب سایت خود انتخاب کنید. قالب‌ها ظاهر وب سایت شما را تعیین می‌کنند. شما می‌توانید از افزونه‌ها برای اضافه کردن ویژگی‌ها و عملکردهای اضافی به وب سایت خود استفاده کنید. محتوای با کیفیت، کلید موفقیت هر وب سایت است. محتوای خود را با توجه به نیازها و علایق مخاطبان هدف ایجاد کنید. استفاده از تصاویر، ویدئوها و سایر رسانه‌ها می‌تواند تجربه کاربری را بهبود بخشد. برای اینکه وب سایت شما در موتورهای جستجویی مانند گوگل رتبه بالایی داشته باشد، باید آن را برای موتورهای جستجو بهینه سازی کنید. سئو شامل استفاده از کلمات کلیدی مناسب، ایجاد محتوای با کیفیت و بهینه سازی متا تگ‌ها و ساختار وب سایت است. طراحی وبسایت‌ها امروزه یکی از ابزارهای اصلی برای ارتباط با مخاطبان و تبلیغات است. طراحی سایت‌ها به عنوان یک ابزار مهم برای توسعه کسب و کارها و ارتباط با مشتریان به شمار می‌آید. برخی از کاربردهای طراحی سایت عبارتند از: ارتباط با مشتریان: یک وبسایت مناسب به کسب و کار شما کمک می‌کند تا با مشتریان خود در ارتباط باشید. این ارتباط می‌تواند شامل ارائه اطلاعات در مورد محصولات یا خدمات، پشتیبانی مشتریان و فرصت‌های تعاملی دیگر باشد. تبلیغات و بازاریابی: طراحی یک وبسایت مناسب به کسب و کار کمک می‌کند تا بتواند بهترین تجربه کاربری را برای بازدیدکنندگان فراهم کند و از آن برای تبلیغات و بازاریابی استفاده کند. فروش آنلاین: طراحی یک فروشگاه آنلاین به کسب و کارها کمک می‌کند تا محصولات و خدمات خود را به صورت آنلاین به مشتریان عرضه کنند و درآمد آنلاین داشته باشند. اطلاع‌رسانی: وبسایت‌ها می‌توانند به عنوان یک منبع اطلاعات مفید برای مشتریان و بازدیدکنندگان عمل کنند. این اطلاعات می‌تواند شامل مقالات، ویدئوها، راهنماها و دستورالعمل‌های مفید باشد. نمونه‌کار: بسیاری از حرفه‌ای‌ها و شرکت‌ها از وبسایت خود به عنوان یک نمونه‌کار استفاده می‌کنند تا به نمایش قابلیت‌ها و تخصص خود بپردازند. جذب نیروی کار: شرکت‌ها و سازمان‌ها می‌توانند از وبسایت خود برای جذب نیروی کار جدید استفاده کنند. پشتیبانی و خدمات پس از فروش: وبسایت‌ها به عنوان یک پلتفرم برای پشتیبانی و خدمات پس از فروش نقش دارند. این امکان را فراهم می‌کنند تا مشتریان بتوانند سوالات خود را مطرح کنند و خدمات پس از فروش را درخواست کنند. یادگیری طراحی سایت اهمیت بسیار زیادی دارد زیرا: ایجاد فرصت‌های شغلی: طراحی وب سایت یک مهارت مورد نیاز در صنعت فناوری اطلاعات است و می‌تواند به شما فرصت‌های شغلی جذاب و پردرآمدی را فراهم کند. ارتقای توانمندی‌های خود: آموزش طراحی سایت با وردپرس، می‌تواند به شما کمک کند تا توانمندی‌های خود را ارتقا دهید و به یک فرد چندمنظوره و با توانایی‌های متنوع تبدیل شوید. ایجاد وب سایت شخصی یا تجاری: با آموزش طراحی سایت با گوشی، می‌توانید وب سایت‌های شخصی یا تجاری خود را بسازید و به نمایشگاه و تبلیغات آنلاین بپردازید. افزایش دسترسی به اطلاعات: با آموزش طراحی سایت حضوری، محتوای خود را به صورت آنلاین قرار داده و به راحتی به اشتراک بگذارید. توسعه کسب و کار: یک وب سایت مناسب می‌تواند به توسعه کسب و کار شما کمک کند و باعث افزایش فروش و مشتریان شود. وردپرس یک سیستم مدیریت محتوای متن باز (CMS) است که رابطی را برای کاربران فراهم می‌کند تا بتوانند محتوای دیجیتال را در وب‌سایت‌ها ایجاد، مدیریت و ویرایش کنند. برای آموزش طراحی سایت بدون کد نویسی،  وردپرس گزینه‌ی محبوبی است در مقابل شما می‌توانید از آموزش طراحی سایت با کد نویسی نیز استفاده کنید. انتخاب نوع پلتفرم مسئله‌ای سلیقه‌ای است. سایت وردپرسی معمولا از طریق یک پنل مدیریت پشتیبان. وردپرس برای اولین بار در سال 2003 راه اندازی شد و به محبوب‌ترین پلتفرم ساخت وب سایت در جهان تبدیل شد و بیش از 62.9٪ از تمام وب‌سایت‌هایی که از CMS استفاده می‌کنند  را تامین می‌کند. چرا باید وردپرس را به عنوان پلتفرم ساخت وب سایت خود انتخاب کنید؟ در اینجا 9 دلیل قانع کننده وجود دارد که وردپرس را به انتخاب مناسب برای وب سایت شما در سال 2024 تبدیل می‌کند: -         وردپرس قابل تنظیم، انعطاف پذیر و مقیاس پذیر است. -         وردپرس برای استفاده و نگهداری آسان است. -         وردپرس یک انجمن فوق العاده مفید و دوستانه دارد. -         وردپرس رایگان است. -         وردپرس محبوب است. -         وردپرس پذیرای موتورهای جستجو و برای سئو عالی است. -         از وردپرس می‌توان برای ساخت هر نوع سایتی استفاده کرد. -         وردپرس امن است. -         وردپرس دارای مجموعه‌ای عالی از تم‌ها و افزونه‌ها است. برای تبدیل شدن به یک طراح وبسایت موفق شدن نیاز به گذراندن آموزش طراحی سایت از صفر تا صد رایگان است که طی دوره‌ی مقدماتی و پس از آن دوره پیشرفته مفاهیم زیر را برای حرفه‌ای شدن به شما می‌آموزد. مفاهیم کلیدی طراحی بصری را درک کنید. اصول HTML را بیاموزید. اچ تی ام ال، دستورالعمل‌هایی را برای نحوه نمایش محتوا، تصاویر، پیمایش و سایر عناصر یک وب سایت در مرورگر وب افراد ارائه می دهد. سرفصل‌ها، پاراگراف‌ها، لینک‌ها و تصاویر همگی توسط این تگ‌ها کنترل می‌شوند. شما به خصوص می‌خواهید بدانید که چگونه تگ‌های هدر مانند تگ هایH1، H2و H3 برای سلسله مراتب محتوا استفاده می‌شود. علاوه بر تأثیر بر ساختار چیدمان، تگ‌های هدر در نحوه طبقه‌بندی محتوای طرح و تأثیر بر نحوه نمایش آن‌ها در رتبه‌بندی جستجو مهم هستند. Css را درک کنید. CSS  یا Cascading Style Sheets دستورالعمل‌های اضافی در مورد نحوه ظاهر شدن یک عنصر   HTML  را ارائه می‌دهد. انجام کارهایی مانند اعمال فونت، افزودن  padding، تنظیم تراز، انتخاب رنگ‌ها و حتی ایجاد شبکه‌ها از طریق CSS امکان پذیر است. با دانلود فیلم آموزش طراحی سایت از مبتدی تا پیشرفته رایگان شما می‌توانید چگونگی کار با Css را آموزش ببینید همچنین می‌توانید با استفاده از مهارت‌ها وبسایت‌هایی با ظاهر منحصر به فرد ایجاد و قالب‌های موجود را سفارشی کنید. اهمیت داشتن سایت برای هر کسب و کاری شما را ملزم به ساختن و به کار گیری آن می‌کند. دوره آموزش طراحی سایت مقدماتی مکتب خونه به شما کمک می‌کند تا وبسایت شخصی خود را راه اندازی کنید. این دوره شما را با استراتژی‌ها و عوامل کلیدی برای طراحی سایت آشنا می‌کند. در پایان دوره شما می‌توانید مدرک و گواهینامه پایان دوره دریافت کنید که به رزومه‌ی شما کمک می‌کند. دوره آموزش طراحی سایت مقدماتی در مکتب خونه مناسب همه‌ی علاقمندان به طراحی سایت است که اشنایی ابتدایی با آن دارند. دوره آموزش طراحی سایت مقدماتی در مکتب خونه بسیار کاربردی و با اساتید مجرب سرفصل‌های کاملی دارد که در زیر ارائه شده است: فصل اول: آنچه قبل از طراح سایت شدن باید بدانید. فصل دوم: فتوشاپ کاربردی طراحی سایت فصل سوم: آموزش کار با وردپرس فصل چهارم: انجام پروژه طراحی سایت فصل پنجم: طراحی پیشرفته‌تر و نکات تکمیلی همچنین در مکتب خونه انواع دوره آموزش برنامه نویسی، آموزش طراحی سایت و همچنین آموزش وردپرس به عنوان مکمل و پیش نیاز این دوره موجود است. فصل اول: آنچه قبل از طراح سایت شدن باید بدانید: 1 - چرا این دوره برای من مفید است؟ 2 - موانع فکری ورود به دنیای وب 3 - اصطلاحات مهمی که باید بدانیم 4 - طراحی پیشرفته‌تر و نکات تکمیلی فصل دوم: فتوشاپ کاربردی طراحی سایت: 1 - شروع کار با فتوشاپ و ساختن فایل جدید 2 - طراحی یک طرح آماده در فتوشاپ - قسمت اول 3 - طراحی یک طرح آماده در فتوشاپ - قسمت دوم فصل سوم: آموزش کار با وردپرس: 1 - از چه راه‌هایی می‌توان سایت داشت؟ 2 - CMS وردپرس استفاده کنیم؟ 3 - نصب وردپرس روی لوکال هاست 4 - آشنایی با محیط وردپرس 5 - قالب و افزونه‌ی وردپرس 6 - نکات بیشتر درباره وردپرس فصل چهارم: انجام پروژه طراحی سایت: 1 - تنظیمات اولیه سایت 2 - طراحی شاکله اصلی سایت 3 - ساخت صفحه اصلی با صفحه‌ساز و فونت دلخواه 4 - ترفندهای بیشتر با صفحه‌ساز المنتور 5 - طراحی باکس‌های ویژگی سایت 6 - تاثیر عکس‌ها و رنگ‌ها در طراحی 7 - ساخت قسمت فرم تماس سایت 8 - اضافه کردن نقشه و آدرس به سایت فصل پنجم: طراحی پیشرفته‌تر و نکات تکمیلی: 1 - طراحی هدر و فوتر حرفه‌ای‌تر 2 - سفارشی‌سازی فرم‌های تماس 3 - واکنش‌گرا Responsive کردن سایت 4 - ترفندها و ابزار برای طراحی پیشرفته‌تر 5 - بررسی راه‌حل‌ پروژه‌های دیگر 6 - سخن پایانی و ادامه مسیر

درباره دوره: در دوره " CSS Grid & Flexbox for Responsive Layouts, v2" ، با تکنیک‌های ضروری CSS برای طراحی و پیاده‌سازی وب‌اپلیکیشن‌های واکنش‌گرا و زیبا آشنا خواهید شد. این دوره به شما کمک می‌کند تا به صورت عملی با استفاده از CSS Grid، چینش‌های دو بعدی مبتنی بر شبکه را پیاده‌سازی کنید و با Flexbox جریان‌های یک‌طرفه را استایل‌دهی کنید. این مهارت‌ها به شما این امکان را می‌دهند که ساختارهای پیچیده و منظم را به‌راحتی و با کنترل کامل بر روی چینش و اندازه عناصر وب‌سایت طراحی کنید. در کنار این تکنیک‌ها، یاد خواهید گرفت که چگونه با استفاده از تصاویر واکنش‌گرا، وب‌سایت‌هایی بسازید که در انواع دستگاه‌ها به‌خوبی نمایش داده شوند. در پایان دوره، شما توانایی ترکیب CSS Grid و Flexbox را برای ایجاد طرح‌های واکنش‌گرا و کاربردی خواهید داشت که در پروژه‌های دنیای واقعی مورد استفاده قرار می‌گیرند. این دوره برای افرادی که به دنبال تسلط بر تکنیک‌های پیشرفته CSS و بهبود توانایی‌های خود در طراحی وب هستند، بسیار مناسب است. مقدمه: 1 - مقدمه 2 - مرور کلی بر طراحی واکنش‌گرا فلکس‌باکس: 1 - فلکس‌باکس 2 - شروع تنظیمات CSS 3 - نمایش خصوصیات Flexbox برای Container 4 - نمایش خصوصیات Flexbox برای Child سیستم شبکه‌ای Flexbox: 1 - مرور و تنظیمات 2 - کدنویسی سیستم شبکه‌ای با Flexbox 3 - مدیا کوئری‌های واکنش‌گرا 4 - تمرین سیستم شبکه‌ای Flexbox 5 - راه‌حل تمرین سیستم شبکه‌ای Flexbox تمرین Flexbox: 1 - افکت پوششی متن با Flexbox 2 - تنظیمات تمرین‌های Flexbox 3 - تمرین کالکشن‌ها 4 - تمرین مأموریت 5 - تمرین فوتر با Flexbox هدر و نوار ناوبری با Flexbox: 1 - هدر و نوار ناوبری 2 - استایل‌دهی به هدر و نوار ناوبری برای دسکتاپ 3 - استایل‌دهی به هدر و نوار ناوبری برای تبلت 4 - استایل‌دهی به هدر و نوار ناوبری برای موبایل تصاویر واکنش‌گرا و عنصر Picture: 1 - مرور تصاویر واکنش‌گرا 2 - بهترین روش‌های استفاده از تصاویر واکنش‌گرا 3 - نمایش srcset و sizes 4 - نمایش بنر 5 - نمایش هیرو (Hero) 6 - تمرین نهایی Flexbox 7 - راه‌حل تمرین نهایی Flexbox CSS Grid: 1 - معرفی CSS Grid 2 - نمایش چینش CSS Grid مبتنی بر خطوط 3 - تمرین ردیف‌ها و ستون‌ها 4 - تنظیم اندازه ردیف‌ها و ستون‌ها 5 - نمایش چینش Grid با استفاده از Span Notation سیستم شبکه‌ای: 1 - سیستم شبکه‌ای با CSS Grid 2 - شبکه واکنش‌گرا با CSS Grid 3 - استفاده از Figure و Figure Caption با CSS Grid 4 - ترکیب سلول‌های Grid و انیمیشن 5 - تمرین شبکه‌ای موزاییکی 6 - راه‌حل تمرین شبکه‌ای موزاییکی 7 - طراحی به سبک مجله با استفاده از نواحی Grid Template 8 - تمرین مارک‌آپ HTML کارت‌ها 9 - چینش کارت‌ها با Flexbox و Grid 10 - تمرین نهایی CSS Grid 11 - راه‌حل تمرین نهایی CSS Grid جمع‌بندی: 1 - جمع‌بندی

درباره دوره: جاوا اسکریپت یک زبان برنامه‌نویسی متن‌باز است که برای ایجاد برنامه‌های کاربردی وب محور طراحی‌شده است. جاوا اسکریپت یک زبان سبک‌وزن و تفسیر شده است که آن را بسیار سریع‌تر از زبان‌های دیگر می‌کند و با HTML یکپارچه‌شده است و پیاده‌سازی آن را در برنامه‌های وب بسیار آسان است. در سطح وب دوره‌های آموزشی زیادی برای جاوا اسکریپت وجود دارد که می‌توان با استفاده از این دوره‌ها این زبان را یاد گرفت. دوره آموزش جاوا اسکریپت از مجموعه دوره‌های آموزش برنامه نویسی مکتب خونه یکی از بهترین دوره‌های آموزشی جاوا اسکریپت است که به کاربران کمک می‌کند به درک و فهم خوبی از جاوا اسکریپت برای طراحی سایت، طراحی اپلیکیشن و... برسند. قبل از اینکه به معرفی کامل دوره آموزش جاوا اسکریپت بپردازم اجازه دهید که مختصری با جاوا اسکریپت و اهمیت آن برای یادگیری در 2022 صحبت کنم. جاوا اسکریپت یک زبان برنامه‌نویسی است که برای ایجاد و مدیریت صفحات وب پویا استفاده می‌شود. جاوا اسکریپت روح تازه‌ای به صفحات وب می‌بخشد و مهم‌ترین عنصر برای ایجاد بهترین تجربه کاربری است. این زبان برنامه‌نویسی ستون فقرات اینترنت است و با ترکیب با HTML و CSS دنیای کاملاً متفاوتی از وب را به ما نشان می‌دهند. سه عنصر باهم ستون فقرات توسعه وب را تشکیل می‌دهند. جاوا اسکریپت یک زبان برنامه‌نویسی ضروری است و یادگیری جاوا اسکریپت برای متقاضیان یا توسعه‌دهندگان نرم‌افزاری که به سمت توسعه وب گرایش دارند تقریباً اجباری است. امروزه انتخاب یک دوره آموزش جاوا اسکریپت مناسب بیش از هرزمانی احساس می‌شود زیرا: js انتزاعات کمتری نسبت به ASP.NET ارائه می‌دهد و به توسعه‌دهندگان این امکان را می‌دهد که با استفاده از چندین مؤلفه کوچک به‌جای پیکربندی تعداد زیادی پارامتر، کد بنویسند. به همین دلیل Node. js انعطاف‌پذیری بیشتری در تنظیم کد برای راه‌حل ارائه می‌دهد. توسعه‌دهندگان همچنین از کتابخانه‌های بومی و شخص ثالث بهره‌مند ‌می‌شوند. جاوا اسکریپت در زمینه‌های مختلف از وب گرفته، اپلیکیشن موبایل تا سرورها و... مورداستفاده قرار می‌گیرد. در اینجا لیست سریعی از زمینه‌های مهمی که در آن‌ها استفاده می‌شود آورده شده است: یکی از بهترین راه‌های یادگیری جاوا اسکریپت استفاده از دوره‌های آموزشی و فیلم های آموزشی جاوا اسکریپت است. دوره آموزش جاوا اسکریپت مکتب خونه یکی از بهترین دوره‌هایی است که کاربران با استفاده از آن می‌توانند زبان جاوا اسکریپت javascript را یاد بگیرند. این دوره آموزشی به‌صورت بسیارت خلاقانه و کاربر محور ایجادشده است و هدف از این دوره این است که در کمترین زمان ممکن به دانشجو دوره مفاهیم پایه و بنیادی جاوا اسکریپت را بفهماند. دوره جاوا اسکریپت از مفاهیم پایه برنامه‌نویسی جاوا اسکریپت مانند کار با آرایه جاوا اسکریپت، کار با تابع جاوا اسکریپت و... شروع می‌کند به‌صورت پروژه محور قدم‌به‌قدم جلو می‌رود. این دوره با استفاده از مثال‌ها و تمرین‌های مختلف کاملاً پروژه محور بوده به کاربر کمک می‌کند از سطح مقدماتی تا پیشرفته با پروژه‌ها دست‌وپنجه نرم کند. امروزه هر کسب و کار یا هر شرکتی نیاز به وب‌سایت یا اپلیکیسن دارد. ازآنجا کاه جاوا اسکریپت بیشترین کاربرد را درطراحی سایت های مختلف دارد می‌توان امیدوار بود که با یادگیری جاوا اسکریپت وارد بازار کار شد. هدف از دوره آموزش جاوا اسکریپت این است که کاربر بتواند با استفاده از این دوره مفاهیم طراحی سایت را این زبان یاد بگیرد و بتواند با فریم ورک هایی مانند انگولار، ری اکت و... کار کند. همچنین با استفاده از ین دوره آموزشی می‌توان مفاهیم پایه و بیس طراحی اپلیکیشن با جاوا اسکریپت را یاد گرفت. یادگیری این زبان نسبت به زبان‌هایی مانند جاوا و C بسیار راحت است. دوره جاوا اسکریپت مکتب‌پلاس یکی از جامع‌ترین و بهترین آموزش‌هاست که به‌صورت پروژه محور و عملی شمارا با دستورات و ویژگی‌های این زبان مهم آشنا می‌کند. معمولاً برای برنامه‌های تحت وب و مرورگرهای وب استفاده می‌شود؛ اما کاربرد جاوا اسکریپت فراتر از وب است و در توسعه نرم‌افزارها، سرورها، کنترل‌های سخت‌افزاری و حتی ماشین لرنینگ هم کاربرد دارد. هدف از دوره آموزش جاوا اسکریپت این است که شما بتوانید وب‌سایت خود را تعاملی کنید. برای جاوا اسکریپت هیچ محدودیتی وجود ندارد و بر اساس سلیقه و خلاقیت خود می‌توانید هر تغییری که دوست دارید، روی سایتتان ایجاد کنید. با کمک آموزش کامل جاوا اسکریپت می‌توانید برنامه‌های وب و تلفن همراه بسازید. فریم‌ورک‌های جاوا اسکریپت مجموعه‌ای کتابخانه‌های کد جاوا اسکریپت را شامل می‌شود که به توسعه‌دهندگان امکان استفاده از آن‌ها را می‌دهد. ساخت وب سرورها، توسعه برنامه‌های سرور و توسعه بازی‌ها از دیگر اهدافی است که دوره آموزش برنامه‌نویسی جاوا اسکریپت دنبال می‌کند. دوره آموزش جاوا اسکریپت از 10 فصل مختلف تشکیل‌شده است که هر فصلی خود حاوی جلسات متنوعی است. این دوره آموزشی صفرتا صد جاوا اسکریپت را مورد پوشش قرار می‌دهد. ترتیب سرفصل‌های دوره جاوا اسکریپت به شرح زیر است: فصل اول: معرفی زبان جاوا اسکریپت و دستور زبان پایه فصل دوم: جاوا اسکریپت در مرورگر و کار با DOMفصل سوم: آشنایی با زمان‌بندی و ذخیره‌سازی اطلاعات در مرورگر فصل چهارم: آموزش و تعریف Scope و ویژگی‌های ES6 در جاوا اسکریپت فصل پنجم: Syntax های جدید ES6 و کار با Array و Object فصل ششم: آشنایی با کلاس و ارث بری و ویژگی‌های خاص جاوا اسکریپت فصل هفتم: ویژگی‌های ES7 و ES8 و توابع کاربردی جدیدتر در جاوا اسکریپت فصل هشتم: ویژگی‌های آزمایشی ES2020 برای جاوا اسکریپت فصل نهم: ابزارها و سایت‌های کمکی فصل دهم: برنامه‌نویسی پروژه ماشین حساب با جاوا اسکریپت جهت سرکت در این دوره تنها چیزی که لازم دارید یک کامپیوتر شخصی یا لپ‌تاپ بوده که روی آن‌یک محیط برنامه‌نویسی جاوا اسکریپت نصب‌شده است. شما می‌توانید از نرم‌افزارهایی مانند: استفاده کنید و کد های جاوا اسکریپت خود را با استفاده از آن‌ها اجرا کنید. همچنین ممکن است که در ابتدا لازم باشد که کمی با مفاهیم html و Css آشنا باشید که در سطح اینترنت می‌توانید آموزش html و Css مناسبی را برای این کار به‌صورت رایگان پیدا کنید. آموزش صفر تا صد جاوا اسکریپت از مباحث مقدماتی جاوا اسکریپت تا مباحث پیشرفته‌تر برای پیاده‌سازی پروژه‌های مختلف را پوشش می‌دهد. این زبان ویژگی‌ها و امکانات فوق‌العاده‌ای دارد که لزوم استفاده از آن برای هیچ برنامه نویسی پوشیده نیست. آموزش صفر تا صد JavaScript به شما کمک می‌کند تا بتوانید در زمینه‌ی طراحی سایت و برنامه نویسی وب عملکردی حرفه‌ای‌تر داشته باشید. زبان برنامه نویسی جاوا اسکریپت (JavaScript) محبوب‌ترین زبان برنامه نویسی در کل دنیا است. از زبان جاو ااسکریپت برای تولید صفحات وب پویا استفاده می‌شود. این زبان به شما کمک می‌کند تا از لحاظ بصری و جلوه‌های ویژه، امکانات فوق‌العاده‌ای را در سایت و برنامه‌های وب خود پیاده‌سازی کنید. به همین دلیل، جاوا اسکریپت را اصلی‌ترین عنصر در طراحی رابط کاربری مناسب می‌دانند. این زبان برنامه نویسی متن باز بوده و سبک وزن و تفسیری شناخته شده است. استفاده از این زبان اصلاً دشوار نیست اما ضرورت دارد تا با الفبای مقدماتی و ویژگی‌های آن به‌طور کامل آشنا شوید. بیش‌تر برنامه نویسان یادگیری جاوا اسکریپت را به‌عنوان اولین زبان‌های مورد نظر خود دنبال می‌کنند. به همین دلیل توصیه می‌شود که آموزش‌های اصولی و معتبر این زبان را دنبال کنید. اهمیت یادگیری جاوااسکریپت را می‌توان در اهمیت این زبان و کاربردهای فراوان آن خلاصه کرد. گرچه این‌طور وانمود می‌شود که جاوا اسکریپت تنها برای پروژه‌های وب کاربرد دارد، باید اضافه کنیم که پروژه‌های یادگیری ماشین، توسعه‌ی نرم افزار، سرور، توسعه‌ی بازی‌های رایانه‌ای و حتی حوزه‌ی یادگیری ماشین نیز از این زبان قدرتمند بهره می‌گیرند. آموزش جاوا اسکریپت به شما کمک می‌کند که وب سایت و برنامه‌ی جذاب‌تر، دارای قابلیت تعامل با کاربر و در یک کلام، خلاقانه‌تر، بنویسید. این موضوعی است که سبب جذب کاربران به وب سایت و بهبود رنکینگ آن خواهد شد. در نتیجه بیش‌تر افراد تمایل دارند تا وب سایت‌های کسب و کار خود را با جاوا اسکریپت ارتقا دهند. آموزش جاوا اسکریپت، می‌تواند گزینه‌ی خوبی برای کسب درآمد از طریق انجام پروژه‌های javascript نیز باشد. شما می‌توانید با یادگیری فریمورک‌های جاوا اسکریپت، پروژه‌های بسیار زیادی را هندل و برنامه نویسی کنید. چراکه در دنیای امروز، هر کسب و کار و شرکتی به وب سایت و اپلیکشین‌هایی برای ارتقای دامنه‌ی خدمات و مشتریان خود نیاز خواهد داشت. باید اشاره کنیم که وجود کتابخانه‌های فراوان و قدرتمند، فریمورک‌های حرفه‌ای و ابزارهای مختلفی که برای تست برنامه‌های جاوا اسکریپت ساخته شده‌اند، کار با این زبان برنامه نویسی را بسیار ساده می‌کند. از سوی دیگر، یادگیری این زبان به صورت گام به گام و از مرحله‌ی مقدماتی، اصلاً دشوار نیست و به‌راحتی می‌توان آموزش‌ها را دنبال کرد. دوره‌ی آموزشی جاوا اسکریپت برای تمام افرادی که به کار برنامه نویسی در وب علاقه‌مند هستند، توصیه می‌شود. طراحان سایت که به‌دنبال خلق پروژه‌های جذاب و پویا هستند، افرادی که به دنبال تکمیل یادگیری خود در مباحث تجربه‌ی کاربری هستند، کسانی که می‌خواهند وارد دنیای توسعه‌ی نرم افزارهای تحت وب شوند و دیگر علاقه‌مندان به برنامه نویسی و یادگیری ماشین از مخاطبین اصلی این آموزش‌ها خواهند بود. یکی از بهترین منابعی که برای یادگیری مفاهیم جاوا اسکریپت توصیه می‌شود، دوره‌های آموزشی آن است. شما می‌توانید از طریق اینترنت و وب سایت‌های معتبری مانند مکتب خونه، این دوره‌های آموزشی را به‌صورت مجازی و از طریق ویدیوهای آموزشی دنبال کنید. در این دوره‌ی آموزشی، شما مهارت‌های کافی برای کار با پروژه‌های جاوا اسکریپت را کسب خواهید کرد. شما بر مباحث و مفاهیم پایه‌ی این زبان مسلط شده و می‌توانید الگوریتم‌های مختلف را با javascript پیاده‌سازی کنید. به‌علاوه این‌که شما با jquery نیز آشنا شده و یاد می‌گیرید که چطور و کجا در پروژه‌های خود از جی کوئری استفاده کنید. پروژه‌های واقعی مانند طراحی سایت خبری و ماشین حساب از جمله تمرینات عملی هستند که در این دوره‌ی آموزشی مطرح خواهند شد. این تمرینات به شما نشان می‌دهند که از موارد گفته شده، چطور در دنیای واقعی بهره بگیرید. تمرینات عملی هم‌چنین در تسلط شما بر روی مفاهیم آموزشی، اثر بالقوه‌ای خواهند داشت. دوره‌ی آموزش 0 تا 100 جاوا اسکریپت جزو دوره‌های آموزش طراحی سایت و برنامه نویسی وب است. لذا شما برای این‌که بتوانید از محتوای آموزشی فوق‌الذکر استفاده کرده و تمارین را به‌صورت عملی پیاده‌سازی کنید، می‌بایست مقدمات طراحی سایت را یاد داشته باشید. آموزش HTML و CSS به‌عنوان مباحث پایه در طراحی سایت مورد نیاز است. شما می‌توانید این آموزش‌ها را از طریق دوره‌های طراحی سایت مکتب خونه دنبال کنید. نیز توصیه می‌شود بعد از یادگیری مباحث این دوره‌ی آموزشی، از دوره‌های آموزش جاوا اسکریپت پیشرفته برای آشنایی با فریمورک‌های آن استفاده کنید. دوره‌های پیشرفته به شما کمک می‌کنند تا حرفه‌ای‌تر و سریع‌تر کدنویسی کنید. منظور از سرفصل‌های آموزشی، عنوان دقیق مباحثی است که در این دوره، بیان خواهد شد. سرفصل‌های دوره، به شما نشان می‌دهند که چه چیزهایی یاد می‌گیرید و شما می‌توانید با مراجعه به این سرفصل‌ها، دوره‌ی مورد نیاز خود را تشخیص دهید. سرفصل های آموزش جاوا اسکریپت برای این دوره‌ی آموزشی، در فهرست زیر نشان داده شده است. •      فصل ۱: معرفی زبان جاوا اسکریپت و دستور زبان پایه •      فصل ۲: جاوا اسکریپت در مرورگر و کار با DOM •      فصل ۳: آشنایی با زمان‌بندی و ذخیره‌سازی اطلاعات در مرورگر •      فصل ۴: آموزش و تعریف scope و ویژگی ES6 در جاوا اسکریپت •      فصل ۵: سینتکس‌های جدید و کار با آرایه‌ها و اشیاء •      فصل ۶: آشنایی با کلاس، ارث بری و ویژگی‌های خاص جاوا اسکریپت •      فصل ۷: ویژگی‌های ES7 و ES8 و توابع کاربردی جدیدتر در جاوا اسکریپت •      فصل ۸: معرفی ویژگی‌های جدیدتر برای جاوا اسکریپت ورژن‌های ۲۰۲۰، ۲۰۲۱ و ۲۰۲۲ •      فصل ۹: ابزارها و سایت‌های کمکی •      فصل ۱۰: برنامه نویسی پروژه ماشین حساب با جاوا اسکریپت این دوره‌ی آموزشی در وب سایت مکتب خونه برای مدت زمان ۴۵ ساعت تهیه شده است. ده ساعت از این مدت به بیان ویدیوهای آموزشی و ۳۵ ساعت دیگر به انجام تمرینات عملی و پروژه‌های دوره اختصاص دارد. در کل، می‌توان گفت که مدت زمان آموزش برحسب میزان یادگیری داوطلب دوره و هم‌چنین پشتکار وی و تسلط بر مفاهیم پیش نیاز، متفاوت خواهد بود. یکی از بهترین روش‌هایی که برای آموزش صفر تا صد java script پیشنهاد می‌شود، شرکت در دوره‌های آموزشی است. دوره‌های آموزشی مجازی به صورت ویدیویی و دوره‌های حضوری می‌توانند تمام مباحث مورد نیاز برای کار با زبان جاوا اسکریپت را در اختیار شما بگذارند. شما می‌توانید از آموزش جاوا اسکریپت سون لرن، آموزش جاوا اسکریپت فری لرن و دوره‌های معتبر آموزش جاوااسکریپت مکتب خونه، استفاده کنید. مزیت دوره‌های مجازی، برنامه‌ی منعطف و حرفه‌ای آن است. شما می‌توانید این ویدیوهای آموزشی را در هر زمان و مکان دلخواه خود، دنبال کنید. علاوه بر آن، این دوره‌ها با هزینه‌های کم‌تری به نسبت دیگر روش‌های آموزشی تهیه می‌شوند. شما می‌توانید صرفه‌جویی خوبی در روند آموزشی خود ایجاد کنید. نکته‌ی مهم برای یادگیری زبان جاوا اسکریپت و کسب مهارت در آن، انجام تمرین و تکرار پروژه‌های عملی است. کلیه‌ی مهارت‌ها با تمرین و تکرار ملکه‌ی ذهن شما می‌شوند. باید گفت که چالش‌هایی که در حین انجام عملی پروژ‌ه‌ها ایجاد می‌شود، به اندازه‌ی تمام آموزش‌ها و حتی بالاتر از آن، آموزنده خواهد بود. توصیه می‌کنیم بعد از گذراندن آموزش‌های مقدماتی جاو اسکریپت، در دوره‌های پیشرفته و حرفه‌ای شرکت کنید. در دوره‌های حرفه‌ای، شما با مباحثی مانند فریم‌ورک‌ها و ابزارهای حرفه‌ای برنامه نویسی و تست جاوا اسکریپت آشنا خواهید شد. این ابزارها به شما کمک می‌کنند تا کدنویسی حرفه‌ای جاوا اسکریپت را تمرین کنید. در نتیجه در مدت زمان کم‌تر از پسِ انجام پروژه‌های حرفه‌ای‌تر و پردرآمدتر برمی‌آیید. از بهترین منابع برای یادگیری مقدماتی تا پیشرفته‌ی جاوا اسکریپت، دوره‌های آموزشی منتشر شده در مکتب خونه است. محتوای به‌روز این دوره‌ها، کیفیت بالای آموزش، بیان ساده، سرفصل‌های کامل، عملی بودن مباحث آموزشی، انجام تمرینات فراوان از مهم‌ترین ویژگی‌های دوره‌های مکتب خونه به شمار می‌آیند. با شرکت در دوره‌ های آموزشی جاوا اسکریپت در مکتب خونه، شما تسلط کافی بر روی مفاهیم جاوا اسکریپت پیدا کرده و برای ورود به بازار حرفه‌ای آماده می‌شوید. همچنین در مکتب خونه انواع آموزش برنامه نویسی و آموزش طراحی سایت به عنوان مکمل و پیش نیاز این دوره موجود است. فصل اول: معرفی زبان جاوا اسکریپت و دستور زبان پایه: 1 - مروری بر دوره آموزش جاوا اسکریپت 2 - معرفی ابزارها و محیط برنامه‌نویسی جاوا اسکریپت 3 - جاوا اسکریپت چیست؟ 4 - ساختار و قواعد دستوری ساده زبان جاوا اسکریپت 5 - متغیر‌ها در جاوا اسکریپت 6 - آرایه‌ها در جاوا اسکریپت 7 - عملگرهای محاسباتی در جاوا اسکریپت 8 - توابع در جاوا اسکریپت 9 - دستورات شرطی در جاوا اسکریپت 10 - حلقه ها در جاوا اسکریپت 11 - نوشتن الگوریتم مرتب‌سازی حبابی یا Bubble Sort 12 - كوييز - فصل اول 13 - توضیح تمرين برنامه‌نويسي: تابع FIFO 14 - تمرين برنامه‌نويسي: تابع FIFO فصل دوم: جاوا اسکریپت در مرورگر و کار با DOM: 1 - Event ها در جاوا اسکریپت 2 - شروع کار با DOM در جاوا اسکریپت 3 - مدیریت خطا ها و Debugging در جاوا اسکریپت 4 - آشنایی با کتابخانه Math 5 - آشنایی با کتابخانه Date 6 - آشنایی با Node Module 7 - Window Location در جاوا اسکریپت 8 - كوييز - فصل دوم 9 - توضیح تمرين برنامه‌نويسي: تاريخ روز 10 - تمرين برنامه‌نويسي: تاريخ روز فصل سوم: آشنایی با زمان‌بندی و ذخیره‌سازی اطلاعات در مرورگر: 1 - آشنایی با setTimeout و setInterval 2 - نوشتن یک Counter ثانیه با کلید‌های Start و Pause 3 - چطور با Cookie ها کار کنیم 4 - كوييز - فصل سوم 5 - توضیح تمرين برنامه‌نويسي: شمارش‌گر معكوس 6 - تمرين برنامه‌نويسي: شمارش‌گر معكوس فصل چهارم: آموزش و تعریف Scope و ویژگی‌های ES6 در جاوا اسکریپت: 1 - معرفی ورژن‌های جاوا اسکریپت و بررسی آن‌ها 2 - معرفی ویژگی const و تفاوت آن با var 3 - معرفی ویژگی let - سوال رایج مصاحبه‌ها 4 - ویژگی Arrow Function 5 - تفاوت this در function با Arrow Functions و default value - سوال رایج مصاحبه‌ها 6 - کوییز - فصل چهارم 7 - توضیح تمرین برنامه‌نویسی: بازی سنگ کاغذ قیچی 8 - تمرین برنامه‌نویسی: بازی سنگ کاغذ قیچی فصل پنجم: Syntax های جدید ES6 و کار با Array و Object: 1 - استفاده از Rest Parameter در ورود Function ها 2 - کار با String و Array Matching در ES6 3 - استفاده از Shorthand و Compound و تعریف Method در جاوا اسکریپت 4 - کار با Object ها برای Destructuring و Matching 5 - کوییز - فصل پنجم 6 - توضیح تمرین برنامه‌نویسی: اپلیکیشن Memory card 7 - تمرین برنامه‌نویسی: اپلیکیشن Memory card فصل ششم: آشنایی با کلاس و ارث بری و ویژگی‌های خاص جاوا اسکریپت: 1 - تعریف کلاس و ارث‌بری در جاوا اسکریپت 2 - کار با getter و setter در کلاس‌ها 3 - آشنایی و معرفی Symbol 4 - آشنایی و معرفی Symbol For 5 - کار با Generator ها در جاوا اسکریپت 6 - کار با for … of در جاوا اسکریپت 7 - کار با Symbol Iterator 8 - معرفی و کار با Set 9 - کار با Data Type جدیدی به اسم Map 10 - معرفی Object.assign و آشنایی با مفهوم Immutability 11 - کار با فانکشن‌های filter، findeIndex و find 12 - کار با String ها با توابع مختلف 13 - کار با اعداد با توابع مختلف 14 - کار با Promise API در جاوا اسکریپت 15 - کار با Promise.all 16 - آشنایی و کار با Proxy 17 - کوییز - فصل ششم 18 - توضیح تمرین برنامه‌نویسی: Todo 19 - تمرین برنامه‌نویسی: Todo فصل هفتم: ویژگی‌های ES7 و ES8 و توابع کاربردی جدیدتر در جاوا اسکریپت: 1 - تعریف متغیر بیرون از constructor و کار با padStart و padEnd 2 - آشنایی با Trailing comma 3 - کار با Object.entries و Object.values 4 - کار با Async Await در جاوا اسکریپت 5 - معرفی && و || و ** 6 - کار با promise finally 7 - معرفی و کار با Static Methods 8 - کار با private variables ها در Class 9 - کار با فانکشن‌های trimStart و trimEnd 10 - کار با Array Flat و Array FlatMap 11 - کوییز - فصل هفتم 12 - توضیح تمرین برنامه‌نویسی: آخرین لیست فیلم‌ها 13 - تمرین برنامه‌نویسی: آخرین لیست فیلم‌ها 14 - توضیح تمرین برنامه‌نویسی: آخرین اخبار 15 - تمرین برنامه‌نویسی: آخرین اخبار فصل هشتم: ویژگی‌های جدیدتر برای جاوا اسکریپت ورژن‌های 2020, 2021 و 2022: 1 - معرفی Nullish coalescing operator یا (??) 2 - کار با Optional Chaining و Promise allSettled 3 - آخرین ویژگی‌های جاوا اسکریپت ورژن‌های 2021 و 2022 - آپدیت تیرماه 1401 فصل نهم: ابزارها و سایت‌های کمکی: 1 - معرفی سایت caniuse.com 2 - معرفی Webpack و چرایی استفاده‌ از آن فصل دهم: برنامه‌نویسی پروژه ماشین حساب با جاوا اسکریپت: 1 - پیاده سازی عملیات‌های اولیه در ماشین حساب 2 - پیاده‌سازی ممیز در ماشین حساب 3 - پیاده‌سازی Class برای Logic و View 4 - معرفی و پیاده سازی Dynamic Import در ماشین حساب 5 - پیاده سازی Babel و Webpack برای پروژه ماشین حساب 6 - سورس کد پروژه ماشین حساب با جاوا اسکریپت 7 - کوییز - فصل دهم 8 - توضیح پروژه: اپلیکیشن کوییز 9 - پروژه: اپلیکیشن کوییز 10 - مراحل بعدی یادگیری چیست؟ فصل یازدهم: آپدیت جدید سال 2024: 1 - چه تغییراتی در جاوااسکرپت ایجاد شده است؟ و چطور ChatGPT می‌تواند به ما کمک کند؟ 2 - آشنایی با Source در مرورگر و چطور با Debugger و Breakpoint ها کار کنیم؟ 3 - کار با debounce و throttle و event listener ها درمرورگر 4 - کار با Dynamic Import ها در جاوااسکریپت 5 - آشنایی با Websockets

درباره دوره: در این دوره با مهم‌ترین دستورات کاربردی زبان برنامه‌نویسی html و CSS  آشنا خواهید شد که هر طراح سایتی بایستی این دو زبان را کاملاً بلد باشد. همچنین دوره به‌صورت پروژه محور است و در فصول پایانی به انجام چند پروژه کوچک و بررسی تمام قواعد و دستوراتی که یاد گرفتیم خواهیم پرداخت که بسیار حایز اهمیت است. سطح آموزش از مبتدی و موارد ساده شروع شده و به‌تدریج پیچیده‌تر می‌شود. امیدوارم از این دوره بهره کافی را ببرید. در فصول پایانی چند سایت با  قابلیت واکنش گرایی و انعطاف‌پذیری و تطابق و قابلیت نمایش در موبایل و لب تاب و سایر دیوایس‌ها تعریف شده است تا بتوان انعطاف‌پذیری بالای کدهایی CSS  را در پیاده‌سازی طراحی سایت بیشتر لمس کرد. بااین‌حال فریم‌ورک‌های بسیار قوی مانند بوت‌استرپ وجود دارد که می‌توان با آنها این کارها را ساده‌تر انجام داد اما برای یادگیری بوت‌استرپ نیاز به یادگیری html-CSS به‌عنوان ربان پایه است. معرفی دوره و نرم‌افزار مورد نیاز: 1 - مقدمه اهداف کار آموزش HTML: 1 - تگ‌ها 2 - لیست‌ها 3 - جدول‌ها - بخش اول 4 - جدول ها - بخش دوم CSS: 1 - مقدمات شروع کار با CSS 2 - div-Border-Margin-Padding 3 - آیدی و کلاس در CSS 4 - کار با عکس‌ها و ویدیوها 5 - پوزیشن ها - بخش اول 6 - پوزیشن ها - بخش دوم 7 - منوها 8 - انواع Display پیاده‌سازی پروژه: 1 - طرح کلی 2 - تکمیل صفحه کلی 3 - توضیحات مدیا کوئری و مثال واکنش گرایی 4 - اعمال مدیا کوئری در کد 5 - اعمال فارسی‌سازی فونت‌ها 6 - معجونی از موارد مهم

درباره دوره: مدل flexbox یا جعبه انعطاف‌پذیر در CSS یک مدل چیدمان تک‌بعدی است که دارای طرح‌بندی‌های انعطاف‌پذیر و کارآمد با فضاهای توزیع‌شده بین آیتم‌ها برای کنترل ساختار هم‌ترازی آن‌ها است، یعنی یک مدل چیدمان است که روشی آسان و تمیز برای چیدمان آیتم‌ها در داخل ارائه می‌کند. Flexbox می‌تواند برای ایجاد طرح‌بندی در مقیاس کوچک مفید باشد و پاسخگو و سازگار با موبایل است. در دوره آموزش فلکس باکس شما یاد خواهید گرفت که چطور با این تکنولوژی در طراحی‌های خود کار کنید و آن‌ها را از هر لحاظ انعطاف‌پذیر کنید. CSS مخفف عبارت Cascading Style Sheets است. این‌یک زبان شیوه‌نامه است که برای توصیف ظاهر و قالب‌بندی یک صفحه در یک زبان نشانه‌گذاری استفاده می‌شود. این‌یک ویژگی اضافی برای HTML فراهم می‌کند. CSS به‌طورکلی با HTML برای تغییر سبک صفحات وب و رابط کاربری استفاده می‌شود. قبل از اینکه به سراغ  معرفی دوره آموزش فلکس باکس رایگان مکتب خونه برویم ابتدا اجازه دهید کمی در رابطه با این تکنولوژی و جنبه‌های مختلف آن صحبت کنیم. Flexible boxes که با نام CSS Flexbox نیز شناخته می‌شود، یک حالت طرح‌بندی جدید در CSS پیشرفته است. فلکس باکس برای ایجاد رفتار قابل پیش‌بینی المان‌ها در اندازه‌های مختلف صفحه‌نمایش و دستگاه‌های نمایش متفاوت استفاده می‌شود. راه کارآمدتری برای چیدمان، تراز و توزیع فضا بین اقلام موجود در کانتینر فراهم می‌کند. فلکس باکس عمدتاً برای ساختن CSS3 استفاده می‌شود که بتواند عرض و ارتفاع اقلام خود را به بهترین شکل برای همه فضاهای موجود تغییر دهد و این مدل بر مدل بلوک ترجیح داده می‌شود. در دوره آموزش فلکس باکس ما با جنبه‌های مختلف این طرح‌بندی آشنا خواهیم شده و به‌صورت پروژه محور آن را به کارخواهیم برد. همان‌طور که گفتیم فلکس باکس یک الگوی چیدمان یک‌بعدی است که طراحی پوسته‌های انعطاف‌پذیر و مؤثر را آسان می‌کند. استفاده از flexbox تضمین می‌کند که عناصر به‌درستی قرارگرفته و قابل پیش‌بینی هستند. اقلام فلکس در داخل یک کانتینر فلکس در امتداد یک خط فلکس قرار می‌گیرند. به‌طور پیش‌فرض، تنها یک خط انعطاف‌پذیر در هر کانتینر فلکس وجود دارد. در دوره آموزش فلکس باکس شما به‌صورت واضع و عملی به مزایای این طرح‌بندی پی خواهید برد. فلکس باکس ویژگی‌های زیاد و منحصربه‌فردی دارد که ازجمله مهم‌ترین آن‌ها می‌توان به موارد زیر اشاره کرد: قبل از مدل flexbox، ما 4 حالت چیدمان داشتیم: 2 جزء اصلی Flexbox وجود دارد: در دوره آموزش فلکس باکس به‌صورت تخصصی این موارد پوشش داده‌شده است. برای دوره آموزش فلکس باکس لازم است که قبل از دیدن دوره و به‌عنوان یک پیش‌نیاز با اصلاحات رایج در آن آشنا شوید. پس بیایید خود را با اصطلاحات اساسی که در فلکس باکس رایج است آشنا کنیم. فلکس باکس خواص زیادی دارد که از مهم‌ترین آن‌ها می‌توان به موارد زیر اشاره کرد: یکی از بهترین دوره‌های آموزش فلکس باکس به زبان فارسی دوره رایگان فلکس باکس مکتب خونه است که به‌صورت تخصصی و با زبانی شیوا و رسا به تفهیم مسائل مربوط به فلکس باکس می‌پردازد. در دوره رایگان آموزش فلکس باکس شما کار با جنبه‌های مختلف این نوع طرح‌بندی را یاد خواهید گرفت. همچنین برخی از ویژگی‌های flexbox را که در کار با عناصر flex مفید هستند و نحوه استفاده از آن‌ها برای دستیابی به نتایج مختلف در CSS را یاد می‌گیرید. Flexbox یک روش طرح‌بندی تک‌بعدی برای چیدمان آیتم‌ها در سطرها و ستون‌های مشخص است. فلکس باکس در واقع کلاسی است که در CSS3 آورده شده و می‌تواند مشکلات رایج در استفاده از کدهای float را رفع کند. درواقع در گذشته از جدول‌ها (table) برای طرح‌بندی استفاده می‌شد که به هیچ‌وجه ابزار مناسبی برای این کار نبودند. سپس float و positioning به وجود آمدند که نسبت به جدول‌ها ابزارهای سازگارتری بودند، اما بازهم محدودیت‌ها و مشکلات خاص خودشان را داشتند. سرانجام flexbox توانست بر تمام این مشکلات غلبه کرده و طراحی سایت را به کاری لذت‌بخش تبدیل کند. در دوره آموزش Flexbox ابزارها و کدهایی به شما آموزش داده می‌شود که می‌توانید با کمک آن‌ها به‌راحتی سایت‌های زیبا، رسپانسیو و جذاب طراحی کنید. با استفاده از فلکس باکس می‌توانید کارهای زیر را به‌راحتی و بدون دردسر انجام دهید: در دوره آموزش Flexbox در css به‌جای آموزش پراپرتی‌های فلکس باکس، موارد کاربردی آن را در قالب پروژه و به‌صورت عملی به شما آموزش می‌دهیم؛ بنابراین این دوره یک دوره کاملاً کاربردی است که تمام نکات مربوط به فلکس باکس را در حین انجام پروژه به شما عزیزان آموزش می‌دهد. کسانی که به HTML & CSS مسلط‌اند و می‌خواهند مهارت‌های خود را ارتقا دهند.کسانی که به ساخت وب‌سایت‌های واکنش‌گرا و جذاب علاقه‌مندند.کسانی که قصد دارند تجربه کاربری سایت خود را بهبود بخشند.برنامه‌نویسانی که در اوایل مسیر طولانی طراحی سایت قرار دارند. آموزش HTML & CSS و همچنین فلکس باکس مهارت‌های ابتدایی طراحی سایت است. اگر قصد دارید در این زمینه به پیشرفت‌های چشمگیری دست پیدا کنید و مهارت‌های طراحی سایت خود را افزایش دهید، از دوره‌های آموزشی زیر می‌توانید به‌عنوان منابع مکمل بهره ببرید: طراحی یک سایت رسپانسیوطراحی بخش‌های مختلف یک سایت از جمله هدر، فوتر، navbar، ارتباط با ما و غیره.قراردادن background image و ویو پورتهم‌ترازسازی عناصرتنظیم فونت، سایز و رنگ متن‌هاکار با مدیا کوئری‌ها آشنایی با انواع کلاس‌های فلکس باکس دوره‌های آموزش برنامه‌نویسی زیادی برای طراحی سایت وجود دارند که هیچ‌کدام از آن‌ها به‌اندازه کافی به فلکس باکس آنچنان که باید نپرداخته‌اند. اگر به فکر ارتقای مهارت‌های خود در طراحی سایت هستید، بدون شک آموزش فلکس باکس در این رابطه به شما خیلی کمک خواهد کرد. استفاده از فلکس باکس در طراحی‌ها به شما قدرت بیشتری در اعمال انعطاف‌پذیری می‌دهد. آموزش برنامه نویسی اندروید آموزش رایگان html و css فصل اول: آشنایی با FlexBox: 1 - FlexBox چیست؟ 2 - Flex و Flex Direction 3 - Flex Wrap و Flex Flow 4 - Justify Content 5 - Align و Order فصل دوم: پروژه FlexBox: 1 - معرفی و آماده سازی پروژه 2 - ایجاد Header 3 - ایجاد Section ها 4 - ایجاد Contact و Footer 5 - Responsive پروژه برای دیوایس ها WideScreen 6 - پروژه Responsive برای موبایل

درباره دوره: برای ورود به دنیای فرانت اند ((front end)) نیاز به گذراندن آموزش و یادگیری یک سری مفاهیم برنامه نویسی هستید. دوره آموزش front end مکتب خونه برای این هدف توسط تیمی متخصص و مجرب تهیه و تدوین شده است. این دوره از مجموعه دوره‌های آموزش برنامه نویسی و آموزش طراحی سایت مکتب خونه در ٦٦ ساعت آموزشی در قالب پنج فصل ارائه شده که هر فصل خود حاوی سرفصل‌های مختلفی است. در این دوره مباحث CSS، HTML و javaScript پوشش داده شده خواهند شد. دوره آموزش front end برای تمامی افراد اعم از افراد مبتدی و حرفه‌ای مناسب است. این دوره با هدف یادگیری پروژه محور توسعه فرانت اند تدوین شده و تمام مفاهیم مهم و مقدماتی توسعه فرانت اند از صفر تا صد در آن پوشش داده شده است. هیچ پیش‌نیاز خاصی برای دوره آموزش front-end وجود ندارد. همه افراد چه مبتدی و چه حرفه‌ای می‌توانند در این دوره آموزش فرانت اند شرکت کنند. تنها پیش‌نیاز اصلی این دوره توانایی کار با کامپیوتر و سواد کامپیوتری و قدرت جستجوی بالا است. پس از پایان دوره و در کنار تلاش و کوشش مناسب و شایسته، دانشجویان دوره توانایی ایجاد و پیاده‌سازی بخش فرانت اند یک وب‌سایت یا یک پلتفرم را خواهند داشت. این دوره آموزش فرانت اند برای ورود به بازار کار بسیار حائز اهمیت است زیرا در کنار حرفه‌ای بودن و به روز بودن، پروژه محور است. اگر قصد دارید پروژه‌های طراحی سایت خود را در بخش فرانت اند پیش ببرید یا در بخش فرانت اند وارد بازار کار شوید، باید از جایی آموزش دیدن را آغاز کنید. این دوره آموزش فرانت اند front end مکتب خونه، به علت اینکه یک دوره مقدماتی تا پیشرفته به‌حساب می‌آید و به‌صورت عملی مفاهیم را پوشش داده است، گزینه مناسبی به‌حساب می‌آید. این دوره آموزش front برای برنامه نویسی موبایل و طراحی سایت بسیار دوره مناسبی است زیرا در کنار اینکه یک آموزش کامل فرانت اند است، همچنین قدم به قدم کاربر را با مفاهیم برنامه نویسی فرانت اند آشنا می‌کند. امروزه بیشتر کسب‌وکارها به متخصصین فرانت اند نیازمند هستند، بنابراین یادگیری مفاهیم و مباحث مربوط به این ترند در برنامه نویسی فرصت خوبی برای ورود به بازار کار است. فرانت اند در مورد بخشی از وب‌سایت است که شما به‌عنوان کاربر می‌توانید آن را ببینید و با آن تعامل داشته باشید. قسمت فرانت اند شامل همه‌چیز از طراحی، ساختار و طرح‌بندی وب‌سایت گرفته تا محتوا را شامل خواهد شد. هنگامی‌که یک بازدیدکننده جدید روی یک وب‌سایت یا برنامه کلیک می‌کند، قسمت فرانت اند اولین برداشت از یک شرکت یا نام تجاری بوده بنابراین طراحی ظاهری کاربرپسند (UX) برای هر وب‌سایت یا پلتفرمی ضروری است. چیزهای زیادی برای ساخت قسمت فرانت اند کار می‌شود، از جمله معماری پایگاه داده، چارچوب‌ها، راه‌حل‌های مقیاس بندی و موارد دیگر که این شامل موارد زیر است: توسعه وب فرانت‌اند می‌تواند شامل وظایف مختلفی باشد. نحوه پیاده‌سازی این وظایف در دوره آموزش front end مکتب خونه آموزش داده خواهند شد و این شامل وظایف زیر است: برنامه نویسان فرانت اند از سه فناوری اصلی در توسعه front-end استفاده خواهند کرد. توسعه‌دهندگان Front-End از ابزارهای دیگری نیز استفاده می‌کنند، از سیستم‌های مدیریت محتوا (CMS) مانند WordPress و Drupal گرفته تا کتابخانه‌ها و چارچوب‌هایی مانند React، Angular و Vue. کتابخانه‌ها و فریمورکها به شما این امکان را می‌دهند که از یک طرح اولیه برای ایجاد عناصر وب مانند دکمه‌ها استفاده کرده تا اینکه هر بار یک عنصر جدید ایجاد کنید. در دوره آموزش front end ابزارها و عناصر لازم برای توسعه فرانت اند به کاربران معرفی خواهند شد. اگرچه در شرکت‌ها تفاوت‌هایی برای وظایف توسعه دهنده فرانت اند وجود دارد، به‌طورکلی می‌توانید انتظار داشته باشید که نقش توسعه‌دهنده فرانت اند در طراحی وب‌سایت شامل برخی یا همه موارد زیر باشد: در دوره آموزش front end نقش توسعه‌دهندگان فرانت اند به خوبی توضیح داده شده است. اکثر توسعه‌دهندگان و مهندسان Front-End با گروه‌های تجربه کاربری (UX) هماهنگ می‌شوند. این افراد جمعیت‌شناسی هدف وب‌سایت و نحوه تعامل کاربران با آن را تعیین می‌کنند. طراحی گرافیکی یکی دیگر از بخش‌های مهم بخش فرانت اند است. این شامل فونت‌ها و رنگ‌ها بوده و تضمین می‌کند که طراحی وب ‌سایت با شرکت و محصولی که برنامه وب برای آن است مطابقت دارد. توسعه‌دهندگان Front-End با بخش‌های مختلف هماهنگ می‌کنند تا اطمینان حاصل کنند که برنامه‌های کاربردی وب در همه مرورگرها و اندازه‌های صفحه‌نمایش از جمله تلفن‌ همراه و تبلت کار می‌کنند. آن‌ها همچنین ممکن است در طول توسعه از این بخش‌ها بازخورد دریافت کنند، بنابراین آن‌ها باید بتوانند بازخوردهای افراد مختلف با دیدگاه‌ها و اولویت‌های مختلف را در نظر بگیرند و به آن‌ها گوش دهند. بخش فرانت اند یا قسمت جلویی وب‌سایت، نمایندگی دیجیتال یک فرد یا یک سازمان است. این قسمت مهم، پلی بین مشتری یا مشتری و برند ایجاد می‌کند. قسمت فرانت اند همچنین وب‌سایتی را قابل استفاده می‌کند. اگر وب‌سایت یا برنامه‌ای به خوبی کار نکند، می‌تواند مشتریان را از خود دور کند و بازگرداندن آن مشتریان دشوار است. در نهایت، قسمت فرانت اند ایده یک سازمان یا فرد را نشان می‌دهد و مهم است که آن را به درستی انجام دهیم. یکی از گزینه‌های تبدیل شدن به یک مهندس فرانت اند یا توسعه دهنده فرانت اند، گرفتن مدرک است. اگرچه این برای برخی از افراد قابل‌دسترس است ولی گرفتن مدرک برای همه افراد عملی نیست. خوشبختانه، شما می‌توانید بدون مدرک یک مهندس فرانت اند شوید. برای انجام این کار، باید با گذراندن دوره‌های مرتبط شروع کنید. می‌توانید با زبان‌های برنامه نویسی مانند HTML، CSS و جاوا اسکریپت شروع کرده و یا می‌توانید مسیر شغلی مهندس Front-End را در اینترنت بررسی کنید. دوره آموزش front end مکتب خونه نقطه شروع خوبی برای انجام این کار است. مسیر شغلی مهندس Front-End شامل زبان‌های ذکر شده در بالا به همراه کتابخانه‌هایی مانند React و Redux است. فصل اول - HTML: 1 - آشنایی با دوره وب 2 - آشنایی با وب 3 - web, html and front-end 4 - HTML and front-end 5 - html requests 6 - Requests 7 - نصب نرم افزارها 8 - ساختار یک صفحه html 9 - تگ ها 10 - تگ head 11 - تگ body 12 - attributes, div and span 13 - لینک با تگ "a" 14 - تگ ها 15 - لیست های مرتب 16 - لیست های نامرتب 17 - lists 18 - فرم ها 19 - فرم ها 20 - عکس ها 21 - عکس ها 22 - ویدئو 23 - ویدئو فصل دوم - CSS: 1 - آشنایی با CSS 2 - مفاهیم اولیه CSS 3 - CSS Syntax 4 - Color 5 - Color 6 - Selectors 7 - pseudo classes 8 - pseudo elements 9 - CSS and class and id 10 - انتخاب المان 11 - specifity 12 - border 13 - margin 14 - padding 15 - css outline 16 - Css width and height 17 - text 18 - font 19 - links 20 - ویژگی المان ها و لینک 21 - maxwidth 22 - position 23 - float 24 - المان ها و فونت 25 - display and opacity 26 - CSS3 border corners and multiple images 27 - CSS3 gradient and shadow 28 - color and position 29 - CSS3 transition 30 - CSS3 animation 31 - انیمیشن 32 - مهارت سرچ کردن در برنامه نویسی 33 - توضیح مکمل پروژه اول 34 - شرح پروژه بخش HTML 35 - شرح پروژه بخش HTML و CSS (بخش اول - navbar) 36 - شرح پروژه بخش HTML و CSS (بخش دوم - modal) 37 - شرح پروژه بخش HTML و CSS (بخش سوم - up and down jump buttons) 38 - پروژه بخش HTML و CSS فصل سوم - JavaScript: 1 - آشنایی با جاوا اسکریپت 2 - خروجی جاوا اسکریپت در لاگ کنسول 3 - if و for در جاوااسکریپت 4 - آشنایی با JavaScript html DOM 5 - javascript dom style 6 - jsdom style فصل چهارم - jQuery: 1 - آشنایی با jQuery 2 - when document is ready 3 - jquery : events and selectors 4 - event selector 5 - jquery hide, show and fade effects 6 - slide, animation and stop animation effects 7 - animation 8 - پروژه بخش jQuery فصل پنجم - طراحی واکنش گرا: 1 - آشنایی با طراحی واکنش گرا 2 - gridview 3 - media queries 4 - media queries 5 - dual breakpoints 6 - عکس و ویدئو 7 - عکس و ویدئو 8 - پروژه نهایی طراحی صفحه وب واکنش گرا 9 - آشنایی با bootstrap 10 - bootstrap buttons, glyphicon and images 11 - بوت استرپ 12 - پروژه بخش طراحی واکنش گرا پروژه نهایی: 1 - شرح پروژه نهایی دوره 2 - پروژه نهایی دوره

درباره دوره: CSS یکی از ابزارهای اصلی در بهبود طراحی سایت است. CSS دنیای وب را زیباتر و ظاهر آن را خوشایندتر می‌کند و تکنیک‌های مدرن CSS به شما کمک می‌کند تا طرح‌ها و جلوه‌های خیره‌کننده‌ای برای سایت خود ایجاد کنید. بنابراین، ما تصمیم گرفتیم دوره آموزش CSS را برای شما تهیه کنیم تا پس از گذراندن دوره آموزش html-css به آموزش مباحث پیشرفته UI و طراحی رابط کاربری هم پرداخته شود. CSS3 نسخه جدیدتر CSS است. این نسخه یکی از پرکاربردترین زبان ‌های برنامه‌ نویسی در طراحی سایت محسوب می‌شود. چرا که CSS3 به ماژول‌هایی تقسیم شده است که می‌توانید از آن‌ها در طراحی سایت استفاده کنید. مثلا FlexBox یکی از این ماژول‌هاست که کار طراحی وب را ساده‌تر کرده و کاربردهای ویژه‌ای دارد. در این دوره FlexBox را در حین پیاده‌سازی پروژه‌های واقعی به‌کار می‌بریم. این ماژول در طراحی تصاویر واکنش‌گرا (Responsive) هم بسیار مفید است. در طراحی سایت یک ابزار مدیریت پکیج وجود دارد با نام NPM که برنامه‌های جاوا اسکریپت به صورت کامل در آن ثبت شده است. این ابزار بزرگترین اکوسیستم IT است. در این دوره به شما آموزش می‌دهیم که چگونه از NPM برای کاربردهای خاص موردنظرتان استفاده کنید. با بررسی‌های دقیق متوجه شدیم که هیچ‌کدام از دوره‌های آموزشی CSS، نیازهای واقعی طراحی وب‌سایت را برآورده نمی‌کند. بنابراین، تصمیم گرفتیم یک دوره جامع پروژه‌ محور طراحی کنیم. در این دوره ابتدا با نحوه طراحی UX با ابزار Adobe XD آشنا می‌شوید و سپس مروری بر اصول CSS صورت می‌گیرد. پس از آن با کمک هفت پروژه واقعی، مهارت‌های اساسی CSS و Sass را به شما آموزش می‌دهیم. به‌طور خلاصه هدف از برگزاری این دوره را می‌توان این‌گونه شرح داد: در دوره جامع آموزش سی اس اس با کمک پروژه‌های واقعی تمام مهارت‌های لازم برای کار با CSS و Sass را فرا می‌گیرید. بعد از پایان دوره شما می‌توانید با استفاده از توانمندی‌هایی که کسب کرده‌اید، نیاز خود را در زمینه‌های زیر برطرف کنید: دوره پیشرفته CSS مکتب‌پلاس برخلاف تمام دوره‌های CSS فارسی در قالب پروژه‌های واقعی به آموزش سی اس اس می‌پردازد. این پروژه‌ها تمام قسمت‌های CSS و Sass را پوشش می‌دهد. قبل از شروع هر پروژه، ابتدا آن را با Adobe XD طراحی کرده و سپس طرح موردنظر را به کد و صفحات وب تبدیل می‌کنیم. درگیری با چالش‌های طراحی وب به یادگیری بیشتر شما کمک می‌کند. بنابراین، چالش‌های زیادی را داخل پروژه‌ها قرار داده‌ایم که می‌تواند شما را هرچه بیشتر با قسمت‌های مختلف CSS درگیر کند. برای یادگیری برنامه‌نویسی تنها مشاهده ویدئوها کافی نیست و شما باید خودتان با نوشتن کد با چالش‌ها روبه‌رو شوید. این مهم در تمام قسمت‌های دوره آموزش CSS مکتبخونه رعایت شده است. دوره آموزش CSS پیشرفته شامل ده فصل آموزشی است. در این فصل‌ها با انجام چهار پروژه به آموزش Adobe XD، Sass، CSS و قسمت‌های مختلف آن‌ها می‌پردازیم. در پایان هم یک پروژه نهایی برای شما عزیزان طراحی شده است که بتوانید تمام آموخته‌های خود را تثبیت کنید. مدیران کسب و کارها به این باور رسیده‌اند که برای بقای بیزینس‌شان و حضور فعال و گسترده در بازار، لازم است وب‌سایت جذاب و کارآمدی برای کسب و کارشان طراحی کنند. به همین دلیل بازار طراحی سایت در ایران، داغ و پررونق شده است. از طرفی طراحان سایت هم برای پیشی گرفتن از همتایان خود، نیاز به یادگیری مهارت‌های ویژه برای طراحی سایت‌های منحصر به فرد دارند. یکی از روش‌های سبقت گرفتن از رقبا در این عرصه، آموزش طراحی سایت با CSS پیشرفته و Sass است. مزایای یادگیری این موضوع به گونه‌ای است که طراحان سایت حرفه‌ای و کاربلد را ترغیب کرده است که در دوره آموزش طراحی سایت با css پیشرفته و sass شرکت کنند. CSS یک زبان برنامه نویسی به معنای سنتی نیست و نوعی زبان نشانه‌گذاری است که برای توصیف ظاهر وب‌سایت مورد استفاده قرار می‌گیرد. در کل زبان‌های نشانه‌گذاری مثل CSS برای ساختاردهی و فرمت‌دهی اطلاعات به کار می‌روند. این مدل زبان‌ها، ساختار ساده‌تری نسبت به زبان‌های برنامه‌نویسی دارند و عمدتاً از تگ‌ها و صفات برای تعریف عناصر و نحوه نمایش آن‌ها در صفحه استفاده می‌کنند. Sass یک زبان پیش‌پردازنده برای CSS به حساب می‌آید که قابلیت‌ها و امکانات جدیدی را در اختیار این زبان قرار می‌دهد. توجه داشته باشید که Sass روی CSS ساخته شده است و از کلیه قواعد و انتخابگرهای CSS پشتیبانی می‌کند. همچنین Scss یک سینتکس (syntax) محبوب برای نوشتن کد Sass است. اکنون که مفهوم CSS و Sass را درک کردیم، می‌توانیم در مورد مزایای آموزش طراحی سایت با CSS پیشرفته و Sass صحبت کنیم: با آموزش css پیشرفته می‌توان سایت‌های جذاب‌تر و بهتری طراحی کرد. در واقع آموزش طراحی سایت حرفه‌ای، مقدمه‌ای برای یادگیری نحوه طراحی سایت‌های یگانه و منحصر به فرد است. اصولاً وردپرس و سایر سیستم‌های مدیریت محتوا با این هدف طراحی شدند که افراد از یادگیری برنامه‌نویسی و طراحی سایت، بی‌نیاز کنند؛ ولی امروزه هم برای طراحی کردن وب‌سایت‌های منحصر به فرد، به یادگیری برنامه‌نویسی پیشرفته نیاز داریم. Sass با ارائه مجموعه‌ای از ویژگی‌ها مانند متغیرها، توابع و mixinها به افراد کمک می‌کند تا کد CSS خود را کارآمدتر و ساختارمندتر بنویسند. همین مسئله باعث صرفه‌جویی در زمان کدنویسی، نوشتن سریع‌تر کدها و اشکال‌زدایی بهتر می‌شود. در حال حاضر تقاضا برای برنامه‌نویسان و طراحان سایت با مهارت Sass افزایش یافته است. پس اگر دوره css مقدماتی را پشت سر گذاشته‌اید یا در دوره html css آموزش دیده‌اید، می‌توانید در دوره آموزش sass پروژه محور شرکت کنید تا بتوانید این مهارت را بیاموزید و صلاحیت لازم برای همکاری با شرکت‌های مختلف را کسب کنید. با شرکت در دوره html css پیشرفته و آموختن sass می‌توانیم مفاهیم بنیادین وب و شیوه طراحی و چیدمان بصری صفحات وب را بیاموزیم. یادگیری این کارها، به ما قدرت و درک لازم برای آموزش طراحی سایت با پایتون را هم می‌دهد. پایتون یک زبان برنامه‌نویسی کاربردی است که برای ایجاد عملکردهای منطقی در وب‌سایت‌ها به کار می‌رود. با یادگیری مهارت طراحی سایت با css پیشرفته و sass می‌توانید پروژه‌های طراحی سایت خود را خیلی بهتر و تخصصی‌تر جلو ببرید و از این درآمدتان را هم بیشتر کنید. شرکت‌های بسیاری تمایل دارند که سایتشان به شکلی تخصصی و خاص طراحی شود؛ ولی نمی‌توانند طراح سایت مورد نظر خود را بیابند. شما با یادگیری این مهارت و بازاریابی می‌توانید این شرکت‌ها را بیابید، با آن‌ها همکاری کنید و درآمد خوبی رقم بزنید. در حال حاضر بسیاری از طراحان سایت، خواهان پیشرفت در حوزه شغلی خود هست و تمایل دارند که گوی سبقت را از سایر رقبای خود بربایند و به یک برند کاربلد و کم‌نظیر در عرصه طراحی سایت تبدیل شوند. پلتفرم آموزشی مکتب‌خونه، متوجه این تقاضا را از سوی مخاطبان شد و تصمیم به برگزاری یک دوره 42 ساعته با عنوان «دوره آموزش طراحی سایت با CSS پیشرفته و Sass» گرفت. استاد این دوره، آقای مهدی تهورگر، مدرس و برنامه‌نویس وب و موبایل و متخصص برنامه‌نویسی فرانت‌اند است. ایشان سابقه فعالیت فریلنسری در پلتفرم‌های بین‌المللی هم‌چون فریلنسر و آوپ ورک را نیز دارند دارد. مهندس تهورگر سابقه تدریس در دیگر پلتفرم‌های بین‌المللی مانند Udemy را نیز در کارنامه خود دارد. دوره آموزشی مورد بحث به صورت عملی و پروژه محور برگزار می‌شود تا افراد حاضر در دوره بتوانند نکات و آموزه‌ها را به صورت تجربی و عملی فرابگیرند و پس از اتمام دوره، چیزهایی که یاد گرفته‌اند را در پروژه‌های خود پیاده‌سازی کنند. در صورت تمایل به شرکت در دوره آموزش طراحی سایت با CSS پیشرفته و Sass، لازم است از قبل با css و html آشنایی داشته باشید. همچنین می‌توانید در دوره‌های آموزش html css پروژه محور رایگان شرکت کنید. بعضی دوره‌های آموزش طراحی سایت رایگان هم این مهارت‌ها را به شما آموزش می‌دهند. آشنایی با DOM یا Document Object Model نیز به شما کمک می‌کند که از این دوره، بهره بیشتر و بهتری ببرید. DOM در واقع یک رابط برنامه‌نویسی است که برای اسناد اچ تی ام ال (HTML) و XML مورد استفاده قرار می‌گیرد. در ادامه سرفصل‌های دوره آموزش طراحی سایت با CSS پیشرفته و Sass را به صورت مختصر و مفید بیان می‌کنیم: این دوره برای کلیه کسانی که با مقدمات طراحی سایت، css و html آشنا هستند و می‌خواهند طراحی سایت را به صورت عمیق‌تر و حرفه‌ای‌تر فرابگیرند، مناسب است. با شرکت در این دوره می‌توانید طراحی سایت را به صورتی کاملاً متفاوت، جذاب و تخصصی انجام دهید. در واقع پس از اتمام این دوره، دیگر هیچ محدودیتی برای سایت دلخواه خود نخواهید داشت. در صورت تمایل به یادگیری حرفه‌ای و تخصصی طراحی سایت با جدیدترین متد، پیشنهاد می‌شود که در دوره آموزش طراحی سایت با CSS پیشرفته و Sass ثبت کنید. پلتفرم آموزشی مکتب‌خونه، دوره‌های حرفه‌ای و جذاب مختلفی برای یادگیری طراحی سایت در وب‌سایت خود عرضه کرده است. در صورت تمایل به کسب اطلاعات بیشتر در مورد این دوره‌ها و ثبت نام در آن‌ها، کافی است به صفحه آموزش طراحی سایت مراجعه کنید. همچنین در مکتب خونه انواع پکیج آموزش برنامه نویسی به عنوان مکمل و پیش نیاز این دوره موجود است. فصل اول: مقدمه: 1 - بررسی اجمالی دوره 2 - ابزارها فصل دوم: طراحی وب‌سایت سیم کارت با Adobe XD: 1 - طراحی Header در Adobe XD 2 - طراحی امکانات در Adobe XD 3 - طراحی کارت‌ها در Adobe XD 4 - طراحی بخش طرح‌های فروش و بازخوردها در Adobe XD 5 - طراحی فرم فروش سیم کارت و Footer در Adobe XD 6 - فایل‌های طراحی 7 - طراحی با Adobe XD فصل سوم: تنظیمات پروژه وب‌سایت سیم کارت: 1 - تنظیمات پروژه 2 - Header - بخش اول 3 - Header - بخش دوم فصل چهارم: مروری بر CSS: 1 - انتخاب‌گر (Selector) های CSS 2 - CSS چگونه کار می‌کند؟ 3 - مفهوم CSS box model در CSS فصل پنجم: CSS پیشرفته و Sass (ادامه ساخت وب‌سایت فروش سیم کارت): 1 - نصب Sass 2 - نصب Sass 3 - تبدیل کدهای CSS به Sass 4 - Heading primary 5 - Heading primary 6 - تفکر نام‌گذاری BEM 7 - تفکر نام‌گذاری BEM 8 - امکانات وب‌سایت - بخش اول 9 - امکانات وب‌سایت - بخش اول 10 - امکانات وب‌سایت - بخش دوم 11 - امکانات وب‌سایت - بخش دوم 12 - ساخت Float grid - بخش اول 13 - ساخت Float grid - بخش دوم 14 - ساخت کارت‌های سیم کارت - بخش اول 15 - ساخت کارت‌های سیم کارت - بخش اول 16 - ساخت کارت‌های سیم کارت - بخش دوم 17 - ساخت کارت‌های سیم کارت - بخش دوم 18 - ساخت طرح‌های فروش - بخش اول 19 - ساخت طرح‌های فروش - بخش اول 20 - ساخت طرح‌های فروش - بخش دوم 21 - ساخت طرح‌های فروش - بخش دوم 22 - ساخت بخش بازخوردها 23 - ساخت بخش بازخوردها 24 - فرم خرید سیم کارت - بخش اول 25 - فرم خرید سیم کارت - بخش اول 26 - فرم خرید سیم کارت - بخش دوم 27 - فرم خرید سیم کارت - بخش دوم 28 - طراحی Footer وب‌سایت 29 - طراحی Footer وب‌سایت 30 - ساخت دکمه Button-flip 31 - ساخت دکمه Button-flip 32 - ساخت Navigation - بخش اول 33 - ساخت Navigation - بخش اول 34 - ساخت Navigation - بخش دوم 35 - ساخت Navigation - بخش دوم فصل ششم: طراحی واکنش‌گرا (Responsive Design): 1 - تنظیمات اولیه واکنش‌گرایی 2 - تنظیمات اولیه واکنش‌گرایی 3 - Header واکنش‌گرا 4 - Header واکنش‌گرا 5 - واکنش‌گرایی قسمت امکانات و float grid 6 - واکنش‌گرایی قسمت امکانات و float grid 7 - واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت 8 - واکنش‌گرایی قسمت‌های طرح‌های فروش و سیم کارت 9 - واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی 10 - واکنش‌گرایی قسمت‌های طرح‌های فروش برای صفحات لمسی 11 - واکنش‌گرایی عکس‌ها با html 12 - واکنش‌گرایی عکس‌ها با html 13 - واکنش‌گرایی قسمت فرم و Footer 14 - واکنش‌گرایی قسمت فرم و Footer 15 - فرایند ساخت وب‌سایت برای بارگذاری روی سرور 16 - فرایند ساخت وب‌سایت برای بارگذاری روی سرور 17 - سفارش پیتزا فصل هفتم: Flexbox پیشرفته: 1 - معرفی پروژه 2 - طراحی Header با Adobe Xd 3 - طراحی وب‌سایت با Adobe Xd 4 - مفهوم flexbox و تنظیمات Codepen 5 - مفاهیم Flexbox در Codepen - بخش اول 6 - مفاهیم Flexbox در Codepen - بخش اول 7 - مفاهیم Flexbox در Codepen - بخش دوم 8 - مفاهیم Flexbox در Codepen - بخش دوم 9 - تنظیمات پروژه 10 - ساخت Header - بخش اول 11 - ساخت Header - بخش اول 12 - ساخت Header - بخش دوم 13 - ساخت Header - بخش دوم 14 - ساخت Container left و Container center - بخش اول 15 - ساخت Container left و Container center - بخش اول 16 - ساخت Container left و Container center - بخش دوم 17 - ساخت Container left و Container center - بخش دوم 18 - ساخت Container left و Container center - بخش سوم 19 - ساخت Container left و Container center - بخش سوم 20 - ساخت Container right 21 - ساخت Container right 22 - واکنش‌گرایی کل وب‌سایت 23 - واکنش‌گرایی کل وب‌سایت 24 - فایل‌های طراحی 25 - سفارش خرید ماشین فصل هشتم: طراحی وب‌سایت Beetle با Adobe XD: 1 - طراحی Header 2 - طراحی ژورنال 3 - طراحی قسمت فروش 4 - طراحی گالری 5 - طراحی Footer 6 - فایل‌های طراحی فصل نهم: مقدمه‌ای بر CSS Grid: 1 - معرفی grid 2 - مفهوم Grid container 3 - تقسیم‌بندی با Grid-template 4 - کار با Grid row و Grid col 5 - کار با Grid row و Grid col پیشرفته 6 - تمرین با Grid 7 - حل چالش تمرین با Grid 8 - نام‌گذاری خط‌های Grid 9 - نام‌گذاری محیط Grid 10 - تفاوت بین Explicit و Implicit 11 - هم‌ترازی آیتم‌های Grid - بخش اول 12 - هم‌ترازی آیتم‌های Grid - بخش دوم 13 - آشنایی با مفهوم Content max-content minmax function 14 - آشنایی با واکنش‌گرایی در Grid با Auto-fill و Auto-fit 15 - فایل‌های طراحی فصل دهم: مفاهیم پیشرفته CSS Grid: 1 - تنظیمات پروژه Beetle 2 - بخش‌بندی کل پروژه با Grid - بخش اول 3 - بخش‌بندی کل پروژه با Grid - بخش اول 4 - بخش‌بندی کل پروژه با Grid - بخش دوم 5 - بخش‌بندی کل پروژه با Grid - بخش دوم 6 - ساخت Header 7 - ساخت Header 8 - ساخت ژورنال 9 - ساخت ژورنال 10 - ساخت Discover 11 - ساخت Discover 12 - ساخت قسمت فروش 13 - ساخت قسمت فروش 14 - ساخت گالری - بخش اول 15 - ساخت گالری - بخش اول 16 - ساخت گالری - بخش دوم 17 - ساخت گالری - بخش دوم 18 - ساخت Footer 19 - ساخت Footer 20 - ساخت Sidebar 21 - ساخت Sidebar 22 - واکنش‌گرایی Header 23 - واکنش‌گرایی Header 24 - واکنش‌گرایی ژورنال و Discover 25 - واکنش‌گرایی ژورنال و Discover 26 - واکنش گرایی Footer 27 - واکنش گرایی Footer 28 - آژانس خلاقیت پروژه پایانی: 1 - وب‌سایت ارائه خدمات ساخت اپلیکیشن