این پکیج شامل دوره های زیر است :
پروژه های پیاده سازی شده در این دوره
چرا دوره فرانت اند آکادمی وبسیلا ؟
- امکان کارآموزی در آکادمی وبسیلا پس از گذراندن دوره
- گروه تلگرامی VIP برای اعضای دوره جهت ارتباط مستقیم با استاد و دیگر دانشجویان دوره
- جزوه اختصاصی و خلاصه PDF
- کاملا پروژه محور
- حاصل سالها سابقه تدریس و فعالیت حرفه ای در بازار کار وب
- آپدیت های مداوم و همیشگی
HTML Version 5
معرفی دوره ویدئو
00:04:30
بیان مفاهیم پایه زبان HTML | معرفی ادیتور ها | تگ چیست؟ ویدئو
00:17:21
معرفی تگ های پایه زبان HTML ویدئو
00:31:08
رابطه میان SEO و HTML ویدئو
00:06:40
Formatting Tags – HTML Comment ویدئو
00:16:12
Style Attribute - Div & Span tags ویدئو
00:25:00
مبحث جداول در HTML ویدئو
00:40:23
راستچین کردن صفحات و فارسی نویسی ویدئو
00:23:12
المنت های فرم (قسمت اول) ویدئو
00:47:30
المنت های فرم (قسمت دوم) ویدئو
00:57:00
CSS Version 3
مفاهیم اولیه زبان CSS ویدئو
00:10:04
شروع کار با زبان CSS ویدئو
00:41:26
انواع روش های کدنویسی CSS ویدئو
00:17:35
CSS Background & Colors ویدئو
00:46:49
CSS Borders ویدئو
00:28:57
Margin & Padding ویدئو
00:27:56
Width & Height ویدئو
00:39:13
Box Model ویدئو
00:12:08
Text Style ویدئو
00:30:51
Link Style ویدئو
00:20:07
List Style ویدئو
00:20:55
Table Style ویدئو
00:30:30
Display ویدئو
00:21:14
Position ویدئو
00:37:33
Overflow ویدئو
00:09:57
Float ویدئو
00:27:10
کارگاه آموزشی طرح بندی وب سایت - بخش اول ویدئو
01:08:15
کارگاه آموزشی طرح بندی وب سایت - بخش دوم ویدئو
00:57:50
مینی پروژه : CSS Dropdown Menu ویدئو
00:46:10
Responsive Design - @Media ویدئو
00:35:33
استفاده از آیکن ها در وب سایت | FontAwesome ویدئو
00:38:32
CSS Advanced Selectors ویدئو
01:03:50
افزودن فونت فارسی دلخواه به پروژه ویدئو
00:27:09
بهترین ماژول برای طرح بندی سایت
مقدمه ویدئو
00:05:56
سایر روش های طرح بندی سایت ویدئو
00:10:41
شروع کار با Flex-box ویدئو
00:04:16
Justify-Content & Align-items ویدئو
00:06:50
Flex-Direction ویدئو
00:05:35
Align-Self ویدئو
00:02:49
Flex-Grow (میزان خودخواهی) ویدئو
00:10:15
Flex-Shrink (میزان بخشندگی) ویدئو
00:07:33
مدیریت ترتیب فلکس آیتم ها ویدئو
00:03:29
Flex Shorthand ویدئو
00:02:51
فایل تمرین
اولین دوره آموزش بوت استرپ ورژن 5 در ایران !
بوت استرپ چیست؟ مفهوم Framework ویدئو
00:15:21
نصب و راه اندازی بوت استرپ ویدئو
00:16:54
Layout - Containers ویدئو
00:11:24
Layout - Breakpoints ویدئو
00:27:21
Layout - Grids ویدئو
00:58:13
Layout - Alignment ویدئو
00:46:00
Content - Typograrphy - Images - Tables ویدئو
00:53:09
Bootstrap Colors ویدئو
00:14:36
Bootstrap Margin & Padding ویدئو
00:29:33
Components : Accordion ویدئو
00:18:45
Components : Alerts ویدئو
00:15:47
Components : Navigation Bar ویدئو
00:42:29
Components : Button - Badge ویدئو
00:49:39
پکیج تکمیلی دوره بوت استرپ
GitHub Repository URL رایگان
لینک گیت هاب پروژه جهت دریافت آخرین تغییرات
ایجاد زیرساخت پروژه ویدئو
00:13:55
پیاده سازی قسمت TopBar ویدئو
00:55:42
رسپانسیو کردن قسمت TopBar ویدئو
00:25:07
پیاده سازی NavBar (بخش اول) ویدئو
01:00:30
پیاده سازی NavBar (بخش دوم) ویدئو
00:27:13
پیاده سازی سکشن اسلایدر ویدئو
00:44:54
طراحی جعبه ویژگی های پایین اسلایدر ویدئو
00:18:52
طراحی سکشن درباره ما ویدئو
00:27:47
طراحی سکشن خدمات ما ویدئو
00:20:09
سکشن شمارنده (آمار و ارقام شرکت) ویدئو
00:50:23
پیاده سازی سکشن مقالات ویدئو
00:23:04
پیاده سازی سکشن اخبار جدید ویدئو
00:21:17
بخش نظرات مشتریان ویدئو
00:44:01
بخش همکاران ما ویدئو
00:14:16
پیاده سازی مودال و سکشن ویدئو ویدئو
00:32:35
طراحی سکشن خبرنامه ویدئو
00:23:56
پیاده سازی فوتر ویدئو
00:40:31
رفع ایرادات جزئی و جمع بندی نهایی ویدئو
00:29:04
جاوا اسکریپت چیست؟ ویدئو
00:12:09
ECMAScript چیست؟ ویدئو
00:05:45
آغاز کدنویسی به زبان جاوا اسکریپت ویدئو
00:05:45
JavaScript Output ویدئو
00:33:52
Variable Decelerations ویدئو
00:19:28
Data Types ویدئو
00:36:48
Arithmetic Operators ویدئو
00:17:38
Comparison Operators ویدئو
00:15:45
Functions ویدئو
00:39:42
Conditions (if-else) ویدئو
00:34:22
Switch...Case ویدئو
00:27:05
Loops (for-while) ویدئو
00:51:53
کار با آرایه ها - بخش اول (Iteration) ویدئو
00:30:27
کار با آرایه ها - بخش دوم (توابع کاربردی) ویدئو
00:31:44
کار با آرایه ها - بخش سوم (Search) ویدئو
00:26:27
JavaScript Objects ویدئو
00:31:04
نحوه دریافت اطلاعات از سمت سرور ویدئو
00:17:08
Constructor Functions ویدئو
00:20:48
Protorype & Inheritance ویدئو
00:24:34
Apply - Call - Bind ویدئو
00:22:35
Debugging Techniques ویدئو
00:30:22
Try...Catch ویدئو
00:16:10
Timing Events ویدئو
00:20:08
String Methods ویدئو
00:18:51
Math Object ویدئو
00:20:19
حل تمرین ایجاد تابع قرعه کشی ویدئو
00:16:35
Document Object Model (DOM) ویدئو
00:25:03
پروژه Todos - قسمت 1 | DOM Selectors ویدئو
00:39:51
پروژه Todos - قسمت 2 | DOM Selectors ویدئو
00:23:13
پروژه Todos - قسمت 3 | HTML Nodes ویدئو
00:23:28
پروژه Todos - قسمت 4 ویدئو
00:14:34
Event Handler ویدئو
00:48:18
مینی پروژه مختصات ماوس و شمارشگر متن ویدئو
00:21:17
Event Listener ویدئو
00:16:29
پروژه Todos - قسمت 5 (قسمت پایانی) ویدئو
00:18:00
گیت چیه؟ ویدئو
00:08:52
نصب گیت ویدئو
00:02:57
تفاوت Git , GitHub و GitLab ویدئو
00:05:22
Configuring Git ویدئو
00:05:32
Git Workflow ویدئو
00:03:00
Initializing a Repository ویدئو
00:03:34
Staging & Unstaging Files ویدئو
00:20:32
Committing Changes ویدئو
00:28:37
Popular Git GUIs ویدئو
00:20:48
Checking Out a Commit ویدئو
00:17:14
Ignoring Files ویدئو
00:13:01
Branches Intro ویدئو
00:05:45
Working With Branches ویدئو
00:16:57
Stashing ویدئو
00:12:16
Merging ویدئو
00:06:11
Fast Forward Merges ویدئو
00:08:09
Three Way Merges ویدئو
00:18:27
See Merged Branches ویدئو
00:04:05
Merge Conflicts ویدئو
00:11:52
GIT Reset ویدئو
00:20:21
معرفی دوره / jQuery چیه؟ ویدئو
02:21
شروع کار با جی کوئری در محیط توسعه ویدئو
27:51
jQuery Selectors ویدئو
30:16
Events - بخش 1 ویدئو
48:19
Events - بخش 2 - Focus & Blur ویدئو
23:53
Events - بخش 3 - Change ویدئو
10:37
Events - بخش 4 - Submit & Form Validation ویدئو
33:19
Events - بخش 5 - توابع scroll و resize ویدئو
23:15
jQuery Effects ویدئو
25:34
Callback Function ویدئو
14:22
jQuery Animate - بخش 1 ویدئو
27:38
jQuery Animate - بخش 2 (مینی پروژه) ویدئو
36:30
نحوه کار با متد Stop ویدئو
10:36
jQuery Method Chaining ویدئو
12:02
Get Data From HTML Elements - بخش 1 ویدئو
13:22
Get Data From HTML Elements - بخش 2 ویدئو
13:35
Get Data From HTML Elements - بخش 3 ویدئو
13:39
Set Data From HTML Elements - بخش 1 ویدئو
07:23
Set Data From HTML Elements - بخش 2 ویدئو
14:16
Set Data From HTML Elements - بخش 3 ویدئو
11:07
مینی پروژه : Dynamic Link ویدئو
09:00
jQuery Add ویدئو
09:40
jQuery Remove ویدئو
06:07
مینی پروژه : Dynamic Rows ویدئو
40:33
jQuery CSS - بخش 1 ویدئو
09:23
jQuery CSS - بخش 2 ویدئو
10:39
jQuery Dimensions ویدئو
15:36
jQuery Traversing ویدئو
12:28
Traversing - Ancestors ویدئو
15:16
Traversing - Descendants ویدئو
26:14
Traversing - Siblings ویدئو
21:39
Traversing - Filter ویدئو
13:50
پیاده سازی عملی پروژه واقعی کارفرما
پروژه طراحی سایت وکالت آنلاین - بخش اول ویدئو
01:49:58
پروژه طراحی سایت وکالت آنلاین - بخش دوم ویدئو
01:40:24
پروژه طراحی سایت وکالت آنلاین - بخش سوم ویدئو
00:30:43
پروژه طراحی سایت وکالت آنلاین - بخش چهارم ویدئو
01:59:09
پروژه طراحی سایت وکالت آنلاین - بخش پنجم ویدئو
01:39:40
دانلود نسخه نهایی پروژه
طبق آخرین تخمین ها، گفته می شود که در سال 2020 بیش از یک میلیون شغل برنامه نویسی کامپیوتر در آمریکا ایجاد خواهد شد. در حالی که این مقدار در اروپا 700،000 عدد است.
در ایران نیز روزانه هزاران شغل برنامه نویسی کامپیوتر در مراجع مختلف آگهی می شود که بخش قابل توجهی از آن ها مربوط به حوزه وب و طراحی سایت است.
امروز در آکادمی وبسیلا قصد داریم به مهارت هایی که برای ورود به بازار کار این رشته مورد نیاز است بپردازیم.
فرانت اند چیست؟
برنامه نویسی فرانت اند یکی از شاخه های بسیار مهم توسعه نرم افزار است. به لطف این تخصص است که صفر تا صد ظاهر وب سایت شما شکل می گیرد. هرچه مهارت و تجربه ی شما در این کار بیشتر باشد، توانایی طراحی وب سایت های جذاب تر و زیبا تری را خواهید داشت. به همین دلیل است که هر ساله تقاضا برای جذب نیروی متخصص فرانت اند رو به افزایش است.
یک برنامه نویس فرانت اند چه کار می کند؟
یک Front-End Developer تشکیل دهنده بخش اصلی هر تیم فعال در حوزه وب است که در ارتباط نزدیکی با شخص Back-End Developer کار می کند.
در حالی که شخص توسعه دهنده Back-End بر روی عملکرد توابع و بخش های درونی سیستم تمرکز می کند، برنامه نویس فرانت اند مشغول طراحی هر آنچه که کاربران در ظاهر سایت خواهند دید می شود.
آنها قالبا مسئول این موارد هستند :
- تبدیل ماکت ها و طرح های گرافیکی به صفحات استاندارد وب
- بهینه سازی سرعت بارگذاری سایت
- ارتباط با توسعه دهنده بک اند برای هماهنگی چگونگی نقل و انتقال اطلاعات
- تست ظاهر سایت جهت داشتن تمام امکانات مورد نظر کارفرما و کاربران سایت
مسیر صفر تا صد برنامه نویسی فرانت اند
HTML
واژه ی HTML مخفف عبارت Hyper Text Markup Language بوده که شامل المنت هایی است که ساختار پایه صفحات وب سایت های مختلف بر آن استوار است. به عنوان مثال موارد مختلف یک وب سایت مانند عناوین، پاراگراف ها، جداول، تصاویر، ویدئو ها و… به وسیله این زبان تعریف می شود.این المنت های HTML به وسیله ی علامت های <> که تگ نامیده می شوند معرفی می شوند.
یادگیری زبان HTML بسیار آسان است!
یادگیری زبان HTML آسان است. با این وجود امکاناتی که برای ساخت صفحات وب به شما می دهد فوق العاده قدرتمند است. پس اولین قدم در راه یادگیری فرانت اند، آموزش HTML میباشد.
CSS
پس از یادگیری زبان HTML و ایجاد ساختار اولیه صفحات وب سایت نوبت به رنگ و لعاب دادن به آن است. برای فهم بهتر تفاوت میان HTML و CSS به تصاویر زیر توجه کنید.
یک مثال عملی برای یادگیری رابطه HTML و CSS :
در واقع اگر یک وب سایت را به یک ساختمان تشبیه کنیم، زیربنا و اسکلت ساختمان همان زبان HTML می شود. از طرف دیگر رنگ دیوار ها و نمای ساختمان برایمان نقش CSS را خواهد داشت.
JavaScript
جاوا اسکریپت یک زبان برنامه نویسی است که به وسیله آن می توان امکانات و ویژگی های پیچیده تری را به صفحات وب اضافه کرد. به عنوان مثال محتوای زمان بندی شده (مانند اسلایدر تصاویر موجود در وب سایت ها که به طور اتوماتیک هر چند ثانیه یک بار تصویر آن عوض می شود)، گوگل مپ، انیمیشن های دو بعدی و سه بعدی و… . جاوا اسکریپت مقداری پیچیده تر از HTML و CSS می باشد که در لایه ی سوم کیک استاندارد تکنولوژی های وب قرار می گیرد.
فریم ورک چیست؟
قبل از اینکه بخواهیم به ادامه مسیر صفر تا صد کد نویسی فرانت اند بپردازیم باید راجع به مفهومی به نام فریم ورک (FrameWork) توضیحاتی را بیان کنیم و ببینیم که واژه ی فریم ورک به چه معناست؟
برای توضیح مفهوم فریم ورک توجه شما را به مثالی جلب می کنیم :
دو زبان فارسی و کردی را در نظر بگیرید. هر دوی آن ها تقریبا از حروف الفبای یکسانی تشکیل شده اند اما یادگیری این دو زبان نیازمند دوره های آموزشی کاملا جداگانه است.
در دنیای کامپیوتر نیز زبان های مختلفی مانند HTML, CSS, JavaScript وجود دارد که هر کدام از آن ها ممکن است چندین فریم ورک داشته باشند.
اما چرا این فریم ورک ها به وجود آمده اند و استفاده کردن از آن ها چه فایده ای برای ما خواهد داشت؟
- کاهش میزان کد نویسی برنامه نویس
- افزایش سرعت کدنویسی
- به عبارت دیگر استفاده از فریم ورک ها موجب می شود تا برنامه نویس بتواند در زمان کمتر مقدار بیشتری از پروژه را جلو ببرد.
حال که تا حدی با مفهوم فریم ورک ها آشنا شدید به ادامه مسیر صفر تا صد یادگیری فرانت اند می پردازیم.
تا به اینجای کار به 3 زبان برنامه نویسی HTML, CSS, JavaScript اشاره کردیم.
در ادامه ی این دوره و پس از فراگیری این 3 زبان قصد داریم یکی از فریم ورک های (گویش های) زبان CSS با نام Bootstrap را یاد بگیریم.
Bootstrap
بوت استرپ یک ابزار ویژه یا بهتر بگوییم، محبوب ترین فریم ورک دنیا برای زبان CSS است. به کمک این فریم ورک و شبکه بندی قدرتمند آن می توان صفحات وب را در کمترین زمان ممکن، به شکل کاملا ریسپانسیو (سازگار با تبلت و موبایل) طراحی کرد.
استفاده از این فریم ورک کاملا رایگان است!
jQuery
پس از یادگیری بوت استرپ در انتهای این مسیر به ظاهر سخت و طولانی به فریم ورک جی کوئری خواهیم رسید.
یکی از محبوب ترین فریم ورک های زبان JavaScript کتابخانه جی کوئری است. شما با یادگیری این زبان می توانید در زمان کمتر و با سرعت بسیار بالاتری کارهای جاوا اسکریپتی خود را انجام دهید.
چرا باید از جی کوئری استفاده کنیم؟
- جی کوئری سرعت کدنویسی ما را بالاتر می برد و کد های ما را کارآمد تر می کند
- یک کتابخانه متن باز است (یعنی هرکسی می تواند در توسعه و ارتقاء آن مشارکت کند)
- سازگاری بالا با کتابخانه های دیگر جاوا اسکریپت
- تنوع بسیار شگفت انگیز پلاگین ها و افزونه های آماده
پنج دوره آموزش تصویری فرانت اند در یک دوره!
مبحث Front-End یا طراحی ظاهر وب سایت، به تنهایی آمیخته از چندین زبان برنامه نویسی مختلف است که هر کدام دوره ی آموزشی خاص خود را می طلبند.
دوره آموزش تصویری پروژه محور End of Front-End ، یک پکیج آموزشی کامل (شامل پنج دوره مختلف) است که توسط گروه آموزشی آکادمی وبسیلا ضبط و فیلم برداری شده است.
شما می توانید هر آنچه که برای ورود به بازار کار طراحی فرانت اند سایت مورد نیاز است را در فیلم های آموزشی موجود در این پکیج جامع به صورت کاملا پروژه محور و عملی یاد بگیرید.
سرفصل های اصلی دوره :
- آموزش کامل و پروژه محور زبان پایه وب HTML
- آموزش کامل و پروژه محور زبان طراحی وب CSS و رسپانسیو
- آموزش کامل و پروژه محور فریم ورک بوت استرپ Bootstrap
- آموزش کامل و پروژه محور زبان JavaScript
- آموزش کامل و پروژه محور jQuery
- آموزش Ajax : آشنایی با نحوه ارتباط فرانت اند با بخش سرورساید وب سایت به کمک تکنولوژی ایجکس
پیش نیاز های آموزش فرانت اند؟
در یک جمله : هیچ پیش نیازی ندارد!
به دلیل اینکه این دوره مفاهیم طراحی سایت را از ابتدایی ترین نقطه آغاز می کند هیچگونه پیش نیازی نداشته و همه ی افراد علاقمند با تهیه این دوره می توانند پا به عرصه ی وب بگذارند.
این دوره آموزشی نه تنها پیشنیازی ندارد بلکه خود پیش نیاز اکثر دوره های آموزشی طراحی سایت می باشد. مانند :
- آموزش طراحی سایت با وردپرس
- آموزش طراحی سایت بدون کد نویسی
- فیلم آموزش طراحی سایت فروشگاهی
- و…
جلسه پرسش و پاسخ حضوری
بعد از خرید این دوره، ما شمارو از یاد نمی بریم و این تازه آغاز راه ماست، تا زمانی که شما به یک برنامه نویس حرفه ای فرانت اند تبدیل بشید!
علاقمندان می توانند با هماهنگی قبلی هفته ای نیم ساعت از پشتیبانی و جلسه پرسش و پاسخ حضوری در دفتر آژانس سئو و طراحی سایت وبسیلا در تهران به صورت رایگان بهره مند شوند.
امکان کارآموزی در آژانس سئو و طراحی سایت وبسیلا
دانشجویان در پایان دوره می توانند درخواست خود را جهت گذراندن دوره کارآموزی در آژانس سئو و طراحی سایت وبسیلا اعلام نمایند.
جزوه آموزش طراحی سایت
تمامی منابع مختلف از جمله فایل های PDF و کتاب های مختلف آموزش طراحی سایت را کنار بگذارید و از جزوه صفر تا صد طراحی سایت آکادمی وبسیلا که به صورت رایگان در دسترس همه ی عزیزان است استفاده نمایید.
زهرا محمودی( خریدار محصول )
سلام و عرض ادب استاد محمدی عزیز
استاد من ی سوالی ازتون داشتم من میخوام فیلم های آموزشیمو از دسکتاپم منتقل کنم به لب تاب باید چیکار کنم؟
علیرضا محمدی کردخیلی(مدیریت)
سلام وقت شما بخیر
لطف کنید به آی دی @websila_support توی تلگرام پیام بدین کمتر از ۲۴ ساعت راهنماییتون میکنن بچه های پشتیبانی.
اشکان
سلام لطفا برای دوره تخفیف بذارید
همه سایتها و گروه ها معمولا تخفیف میذارن اونم 50 درصد یا حتی بیشتر(بی کیفیت هم نیستند. ده بیست ساعته و واقعا ازشون استفاده کردیم کلی هم دعاشون کردیم)
شما هم تخفیف بذارید تا افراد بیشتری بتونن از دوره های باکیفیت استفاده بکنن
به امیدی که در این ره به خدا میداری!!
علیرضا محمدی کردخیلی(مدیریت)
سلام خدمت شما
اتفاقا کمپین تخفیف آخر تابستونمون امروز شروع شد و تا اخر تابستون ادامه داره.
امیدوارم نهایت استفاده رو ببرید.