درباره دوره:
در درس برنامهنویسی وب از مجموعه دورههای آموزش برنامه نویسی و آموزش طراحی سایت مکتب خونه سعی شده با یک دید کاربردی، مفاهیم، روش ها، استانداردها و تکنولوژیهای موجود در زمینهی برنامه نویسی وب معرفی شده و آموزش داده شود.
در ابتدای درس مفاهیم مقدماتی وب و استانداردهای 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 - پایان
درباره دوره:
در دوره " 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 - جمعبندی
درباره دوره:
در این وبینار که در پلتفرم اسکایروم برگزار شدهاست، استاد احسان گازار به صورت مختصر در رابطه با مسیر شغلی و دنیای حرفهای فرانتاند که امروزه یکی از پردرآمدترین مشاغل به حساب میآید، صحبت میکنند و به سوالات شما پاسخ داده میشود.
هدف این برنامه آشنا کردن دانشجویان با مسیر شغلی و حرفهای فرانتاند است تا بتوانند با شناخت بیشتری قدم در این راه بگذارند و این مسیر شغلی را انتخاب کنند.
ما در مکتبخونه برای شما عزیزان مسیر یادگیری این حرفه را نیز طراحی کردهایم. با کلیک برروی لینک زیر می توانید دورههایی که برای دستیابی به این مسیر شغلی برایتان مفید است را مشاهده نمایید. به مسیر یادگیری فرانتاند سر بزنید.
مسیر شغلی فرانتاند:
1 - مسیر شغلی فرانتاند
درباره دوره:
در این دوره با مهمترین دستورات کاربردی زبان برنامهنویسی 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 - وبسایت ارائه خدمات ساخت اپلیکیشن