آموزش Bootcamp توسعه دهنده وب پیشانی کامل - 14 پروژه

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

مقدمه، دریافت ابزارهای توسعه و اصول اولیه HTML Introduction, getting the development tools and basics of HTML

• نگاهی گذرا به پروژه هایی که در این دوره خواهیم ساخت A quick look at projects that we will build in this course

• مقدمه ای بر دوره توسعه front end Introduction to the front end development course

• مقدمه ای بر دوره توسعه front end Introduction to the front end development course

• یک صحبت شخصی A personal talk

• جمع آوری و نصب ابزارهای توسعه دهنده Collecting and installing developer tools

• جمع آوری و نصب ابزارهای توسعه دهنده Collecting and installing developer tools

• ساختار فایل ها و ایجاد اولین فایل Structuring the files and creating first file

• برچسب های متنی Text tags

• لیست موارد list items

• لیست موارد list items

• پایان با چالش و راه حل Ending with challenge and solution

• پایان با چالش و راه حل Ending with challenge and solution

• فایل های تمرین خود را از اینجا دریافت کنید Get Your Exercise files here

مقدمه، دریافت ابزارهای توسعه و اصول اولیه HTML Introduction, getting the development tools and basics of HTML

• نگاهی گذرا به پروژه هایی که در این دوره خواهیم ساخت A quick look at projects that we will build in this course

• یک صحبت شخصی A personal talk

• ساختار فایل ها و ایجاد اولین فایل Structuring the files and creating first file

• برچسب های متنی Text tags

• فایل های تمرین خود را از اینجا دریافت کنید Get Your Exercise files here

Div، جداول و Forms with Challenge برای ایجاد صفحه FB Div, tables and Forms with Challenge to create FB page

• تقسیمات و دهانه ها Divisions and Spans

• تصاویر و لینک ها Images and links

• چالش برای پیوندها در تصاویر و راه حل Challenge for links in images and solution

• چالش برای پیوندها در تصاویر و راه حل Challenge for links in images and solution

• جداول در HTML Tables in HTML

• فرم های پایه Basic forms

• فرم های پایه Basic forms

• اطلاعات بیشتر در مورد فرم ها در HTML More about forms in HTML

• چالش ایجاد صفحه ورود به فیس بوک و راه حل Challenge to create a facebook login page and solution

Div، جداول و Forms with Challenge برای ایجاد صفحه FB Div, tables and Forms with Challenge to create FB page

• تقسیمات و دهانه ها Divisions and Spans

• تصاویر و لینک ها Images and links

• جداول در HTML Tables in HTML

• اطلاعات بیشتر در مورد فرم ها در HTML More about forms in HTML

• چالش ایجاد صفحه ورود به فیس بوک و راه حل Challenge to create a facebook login page and solution

معانی HTML 5 و افزودن صدا، ویدئو و یوتیوب به صفحه وب HTML 5 semantics and adding audio, video and YouTube to web page

• معرفی HTML 5 Introducing HTML 5

• معرفی HTML 5 Introducing HTML 5

• مقایسه معناشناسی HTML 4 با HTML 5 Comparing HTML 4 semantics with HTML 5

• مقایسه معناشناسی HTML 4 با HTML 5 Comparing HTML 4 semantics with HTML 5

• افزودن فیلم ها، فایل های صوتی و ویدیوهای YouTube Adding Videos, audios and YouTube Videos

معانی HTML 5 و افزودن صدا، ویدئو و یوتیوب به صفحه وب HTML 5 semantics and adding audio, video and YouTube to web page

• افزودن فیلم ها، فایل های صوتی و ویدیوهای YouTube Adding Videos, audios and YouTube Videos

CSS - مدل جعبه، انتخاب رنگ، فونت های گوگل و فونت عالی ادغام CSS - Box model, color selection, Google Fonts and Font Awesome integration

• آشنایی با CSS و محل نوشتن آن Introduction to CSS and where to write it

• حل مشکل انتخاب رنگ Solving the color selection problem

• به زودی مدل قالب و جعبه Coming soon Template and box model

• مدل جعبه و وسط متن Box model and centering text

• فونت های گوگل و فونت ادغام عالی Google fonts and Font awesome integration

CSS - مدل جعبه، انتخاب رنگ، فونت های گوگل و فونت عالی ادغام CSS - Box model, color selection, Google Fonts and Font Awesome integration

• آشنایی با CSS و محل نوشتن آن Introduction to CSS and where to write it

• حل مشکل انتخاب رنگ Solving the color selection problem

• به زودی مدل قالب و جعبه Coming soon Template and box model

• مدل جعبه و وسط متن Box model and centering text

• فونت های گوگل و فونت ادغام عالی Google fonts and Font awesome integration

پروژه های توسعه وب - قالب های GYM و Sushi Restro Web development projects - GYM and Sushi Restro Templates

• پروژه - GYM به زودی قسمت -1 Project - GYM coming soon Part -1

• Project GYM به زودی قسمت - 2 Project GYM coming soon Part - 2

• پروژه - Sushi Restro به زودی با قسمت ویدیویی - 1 عرضه می شود Project - Sushi Restro coming soon with Video Part - 1

• پروژه - Sushi Restro به زودی با قسمت ویدیویی - 2 عرضه می شود Project - Sushi Restro coming soon with Video Part - 2

• پروژه - Sushi Restro به زودی با قسمت ویدیویی - 2 عرضه می شود Project - Sushi Restro coming soon with Video Part - 2

پروژه های توسعه وب - قالب های GYM و Sushi Restro Web development projects - GYM and Sushi Restro Templates

• پروژه - GYM به زودی قسمت -1 Project - GYM coming soon Part -1

• Project GYM به زودی قسمت - 2 Project GYM coming soon Part - 2

• پروژه - Sushi Restro به زودی با قسمت ویدیویی - 1 عرضه می شود Project - Sushi Restro coming soon with Video Part - 1

CSS - کلاس ها، شناسه ها، اختلاف منظر و پروژه برای ویرایش قالب CSS - classes, ID's, parallax and project to edit template

• استایل دادن به پیوندها Styling the links

• کلاس ها و شناسه در CSS Classes and ID in CSS

• کلاس ها و شناسه در CSS Classes and ID in CSS

• طراحی نوار ناوبری از ابتدا Designing a navigation bar from scratch

• پالت رنگ و بوم برای طراحی Color palettes and canva for design

• پالت رنگ و بوم برای طراحی Color palettes and canva for design

• اضافه کردن اختلاف منظر قسمت 1 Adding parallax part 1

• اضافه کردن اختلاف منظر قسمت 1 Adding parallax part 1

• اضافه کردن اختلاف منظر قسمت 2 Adding parallax part 2

• اضافه کردن اختلاف منظر قسمت 2 Adding parallax part 2

• پروژه - آموزش ویرایش قالب ها قسمت 1 Project - Learn to edit templates part 1

• پروژه - آموزش ویرایش قالب ها قسمت 1 Project - Learn to edit templates part 1

• پروژه - آموزش ویرایش قالب ها قسمت 2 Project - learnt to edit templates part 2

• پروژه - آموزش ویرایش قالب ها قسمت 2 Project - learnt to edit templates part 2

• پروژه - چالش برای ویرایش یک الگو Project - Challenge to edit a template

CSS - کلاس ها، شناسه ها، اختلاف منظر و پروژه برای ویرایش قالب CSS - classes, ID's, parallax and project to edit template

• استایل دادن به پیوندها Styling the links

• طراحی نوار ناوبری از ابتدا Designing a navigation bar from scratch

• پروژه - چالش برای ویرایش یک الگو Project - Challenge to edit a template

CSS - اندازه جعبه، گرادیان ها و پروژه لیست TODO CSS - box sizing, gradients and TODO list project

• گرادیان در CSS Gradients in CSS

• از طریق CSS بررسی کنید Check through CSS

• از طریق CSS بررسی کنید Check through CSS

• اندازه جعبه در CSS Box sizing in CSS

• پروژه - لیست TODO APP قسمت 1 Project - TODO list APP part 1

• Project - Todo List APP قسمت 2 Project - Todo List APP part 2

• Project - Todo List APP قسمت 2 Project - Todo List APP part 2

• Project - Todo List App قسمت 3 Project - Todo List App part 3

• Project - Todo List App قسمت 3 Project - Todo List App part 3

CSS - اندازه جعبه، گرادیان ها و پروژه لیست TODO CSS - box sizing, gradients and TODO list project

• گرادیان در CSS Gradients in CSS

• اندازه جعبه در CSS Box sizing in CSS

• پروژه - لیست TODO APP قسمت 1 Project - TODO list APP part 1

شروع به کار با Bootstrap - Tour و ایجاد پروژه صفحه فرود Getting started with Bootstrap - Tour and creating landing page project

• مقدمه ای بر بوت استرپ Introduction to Bootstrap

• مقدمه ای بر بوت استرپ Introduction to Bootstrap

• ایجاد اولین ساختار فایل بوت استرپ Creating first bootstrap file structure

• بررسی اجمالی کار بوت استرپ Overview of bootstrap working

• درک سیستم شبکه Understanding the grid system

• درک سیستم شبکه Understanding the grid system

• به قسمت CSS از بوت استرپ بروید Tour to CSS part of the bootstrap

• تور به اجزای بخش بوت استرپ Tour to Components part of bootstrap

• اجزای جاوا اسکریپت و سازنده وب سایت layoutIt Javascript components and layoutIt website builder

• پروژه - بخش فرود پاسخگو - 1 Project - responsive landing page part - 1

• پروژه - بخش فرود پاسخگو - 1 Project - responsive landing page part - 1

• پروژه - بخش فرود پاسخگو - 2 Project - responsive landing page part - 2

• پروژه - اضافه کردن لاگین فیس بوک و توییتر Project - adding facebook and twitter logins

شروع به کار با Bootstrap - Tour و ایجاد پروژه صفحه فرود Getting started with Bootstrap - Tour and creating landing page project

• ایجاد اولین ساختار فایل بوت استرپ Creating first bootstrap file structure

• بررسی اجمالی کار بوت استرپ Overview of bootstrap working

• به قسمت CSS از بوت استرپ بروید Tour to CSS part of the bootstrap

• تور به اجزای بخش بوت استرپ Tour to Components part of bootstrap

• اجزای جاوا اسکریپت و سازنده وب سایت layoutIt Javascript components and layoutIt website builder

• پروژه - بخش فرود پاسخگو - 2 Project - responsive landing page part - 2

• پروژه - اضافه کردن لاگین فیس بوک و توییتر Project - adding facebook and twitter logins

پروژه - سایت شرکتی پوکمون، صفحه فروش یاهو و داشبورد مدیریت Project - Pokemon Corporate site, yahoo selling page and Admin Dashboard

• Project Pokemon Company در حال افزودن ناوبری Project pokemon Company adding navigations

• Project Pokemon Company در حال افزودن ناوبری Project pokemon Company adding navigations

• پروژه پوکمون - اضافه کردن نوار لغزنده Project pokemon - adding slider

• پروژه پوکمون - اضافه کردن بخش تیم Project pokemon - adding team section

• پروژه پوکمون - اضافه کردن بخش تیم Project pokemon - adding team section

• پروژه پوکمون - اضافه کردن بخش محتوا Project Pokemon - adding content section

• پروژه پوکمون - اضافه کردن بخش محتوا Project Pokemon - adding content section

• پروژه پوکمون - پاورقی و انیمیشن Project Pokemon - footer and animations

• صفحه فروش یاهو - نوارهای ناوبری Yahoo Selling page - navbars

• صفحه فروش یاهو - کامل شد Yahoo Selling page - complete

• صفحه فروش یاهو - کامل شد Yahoo Selling page - complete

• Project AdminDashboard - اضافه کردن نوارهای ناوبری Project AdminDashboard - adding navbars

• Project AdminDashboard - اضافه کردن نوارهای ناوبری Project AdminDashboard - adding navbars

• Project AdminDashboard - افزودن داشبورد سمت چپ Project AdminDashboard - adding left dashboard

• Project AdminDashboard - اضافه کردن محتوای اصلی Project AdminDashboard - adding main content

• Project AdminDashboard - اضافه کردن محتوای اصلی Project AdminDashboard - adding main content

• داشبورد مدیریت پروژه - کامل شد Project AdminDashboard - complete

پروژه - سایت شرکتی پوکمون، صفحه فروش یاهو و داشبورد مدیریت Project - Pokemon Corporate site, yahoo selling page and Admin Dashboard

• پروژه پوکمون - اضافه کردن نوار لغزنده Project pokemon - adding slider

• پروژه پوکمون - پاورقی و انیمیشن Project Pokemon - footer and animations

• صفحه فروش یاهو - نوارهای ناوبری Yahoo Selling page - navbars

• Project AdminDashboard - افزودن داشبورد سمت چپ Project AdminDashboard - adding left dashboard

• داشبورد مدیریت پروژه - کامل شد Project AdminDashboard - complete

گرفتن ابزار برای یادگیری و نوشتن جاوا اسکریپت Grabbing the tools to learn and write Javascript

• نکته مهم قبل از اینکه به جاوا اسکریپت برویم Important note before we move on to javascript

• نکته مهم قبل از اینکه به جاوا اسکریپت برویم Important note before we move on to javascript

• آماده کردن ابزارها برای جاوا اسکریپت Getting the tools ready for javascript

• آماده کردن ابزارها برای جاوا اسکریپت Getting the tools ready for javascript

گرفتن ابزار برای یادگیری و نوشتن جاوا اسکریپت Grabbing the tools to learn and write Javascript

جاوا اسکریپت - مفهوم پایه، متغیرها، عملیات و بهترین عملکرد Javascript - Basic concept, variables, operations and best practice

• جاوا اسکریپت را کجا قرار دهیم Where to put Javascript

• خلاص شدن از شر پنجره های بازشو Getting rid of popups

• خلاص شدن از شر پنجره های بازشو Getting rid of popups

• برخی از مفاهیم اساسی برای JS Some basic concepts for JS

• نظرات برای تست واحد Comments for unit testing

• متغیرها - نامگذاری، نحو و مشکلات Variables - Naming, syntax and problems

• متغیرها - نامگذاری، نحو و مشکلات Variables - Naming, syntax and problems

• عملیات روی متغیرها Operations on variables

• بحث در مورد انواع داده A talk on datatypes

• بحث در مورد انواع داده A talk on datatypes

جاوا اسکریپت - مفهوم پایه، متغیرها، عملیات و بهترین عملکرد Javascript - Basic concept, variables, operations and best practice

• جاوا اسکریپت را کجا قرار دهیم Where to put Javascript

• برخی از مفاهیم اساسی برای JS Some basic concepts for JS

• نظرات برای تست واحد Comments for unit testing

• عملیات روی متغیرها Operations on variables

جاوا اسکریپت - شرطی ها و توابع Javascript - conditionals and functions

• شرایط و مقایسه ها Conditionals and comparisions

• سوئیچ و کیس در JS Switch and case in JS

• حلقه For و For در JS For and For In loop in JS

• حلقه while و Do while در JS While and Do While loop in JS

• شکستن و ادامه در JS Break and continue in JS

• شکستن و ادامه در JS Break and continue in JS

• توابع در JS Functions in JS

• توابع در JS Functions in JS

• متغیرهای سراسری و محلی در JS Global and local variables in JS

• اشیاء - استفاده و اعلامیه Objects - Usage and Declaration

• اشیاء - استفاده و اعلامیه Objects - Usage and Declaration

• توابع اتصال به رویدادها Binding functions to events

جاوا اسکریپت - شرطی ها و توابع Javascript - conditionals and functions

• شرایط و مقایسه ها Conditionals and comparisions

• سوئیچ و کیس در JS Switch and case in JS

• حلقه For و For در JS For and For In loop in JS

• حلقه while و Do while در JS While and Do While loop in JS

• متغیرهای سراسری و محلی در JS Global and local variables in JS

• توابع اتصال به رویدادها Binding functions to events

جاوا اسکریپت - استثناها، Hoisting و عبارات منظم Javascript - Exceptions, Hoisting and regular expressions

• گرفتن از استثنا با استفاده از try catch Catching from exception using try catch

• گرفتن از استثنا با استفاده از try catch Catching from exception using try catch

• رشته در متدهای ساخته شده String in built methods

• روش های InBuilt اعداد Numbers InBuilt methods

• بررسی اجمالی Hoisting و strict.js Hoisting and strict.js overview

• استفاده از بیان منظم در JS regular expression Usage in JS

• استفاده از بیان منظم در JS regular expression Usage in JS

جاوا اسکریپت - استثناها، Hoisting و عبارات منظم Javascript - Exceptions, Hoisting and regular expressions

• رشته در متدهای ساخته شده String in built methods

• روش های InBuilt اعداد Numbers InBuilt methods

• بررسی اجمالی Hoisting و strict.js Hoisting and strict.js overview

جاوا اسکریپت - توابع و بسته شدن Javascript - functions and closures

• اصول عملکرد Function basics

• اصول عملکرد Function basics

• اعلام یک تابع Declaring a function

• اعلام یک تابع Declaring a function

• فراخوانی یک تابع calling a function

• فراخوانی یک تابع calling a function

• استفاده از یک تابع به عنوان یک شی Using a function as an object

• ایجاد شی با استفاده از یک تابع Object creation using a function

• نمونه سازی یک تابع Prototyping a function

• چندین آرگومان و CALL و APPLY در JS Multiple arguments and CALL and APPLY in JS

• چندین آرگومان و CALL و APPLY در JS Multiple arguments and CALL and APPLY in JS

• بسته شدن در عملکرد Closure in function

• بسته شدن در عملکرد Closure in function

جاوا اسکریپت - توابع و بسته شدن Javascript - functions and closures

• استفاده از یک تابع به عنوان یک شی Using a function as an object

• ایجاد شی با استفاده از یک تابع Object creation using a function

• نمونه سازی یک تابع Prototyping a function

جاوا اسکریپت - اجرای کدهایی برای دریافت محتوای HTML و تغییر ویژگی های CSS Javascript - implementing codes to get content of HTML and change CSS properties

• پاک کردن مفهوم DOM و NODES Clearing DOM and NODES concept

• پاک کردن مفهوم DOM و NODES Clearing DOM and NODES concept

• DOM: دسترسی به عناصر DOM: accessing elements

• ایجاد گره های جدید با استفاده از DOM creating new nodes using DOM

• گرفتن محتوای فرم در JS Grabbing form content in JS

• گرفتن محتوای فرم در JS Grabbing form content in JS

• تغییر خصوصیات CSS با استفاده از JS Changing CSS properties using JS

• تغییر خصوصیات CSS با استفاده از JS Changing CSS properties using JS

• اتصال به رویدادهای ماوس Binding on Mouse events

• اتصال به رویدادهای ماوس Binding on Mouse events

• منبع JS چشمگیر برای آینده Impressive JS resource for future

جاوا اسکریپت - اجرای کدهایی برای دریافت محتوای HTML و تغییر ویژگی های CSS Javascript - implementing codes to get content of HTML and change CSS properties

• DOM: دسترسی به عناصر DOM: accessing elements

• ایجاد گره های جدید با استفاده از DOM creating new nodes using DOM

• منبع JS چشمگیر برای آینده Impressive JS resource for future

پروژه های جاوا اسکریپت برای تمرین Javascript projects to practice

• پروژه - رمز عبور تصادفی Gen Project - Random Password Gen

• پروژه - یک ظاهر طراحی تصادفی رمز عبور Project - Random Password Gen Styling

• پروژه - یک ظاهر طراحی شده ساعت Project - Ticky Clock Styling

• پروژه - جاوا اسکریپت TickyClock Project - TickyClock javascript

• پروژه - جاوا اسکریپت TickyClock Project - TickyClock javascript

پروژه های جاوا اسکریپت برای تمرین Javascript projects to practice

• پروژه - رمز عبور تصادفی Gen Project - Random Password Gen

• پروژه - یک ظاهر طراحی تصادفی رمز عبور Project - Random Password Gen Styling

• پروژه - یک ظاهر طراحی شده ساعت Project - Ticky Clock Styling

حرکت برای یادگیری Jquery - انتخابگرها و رویدادها Moving on to learn Jquery - Selectors and events

• آیا برای شروع Jquery در یک صفحه هستیم؟ Are we on the same page to start Jquery

• آیا برای شروع Jquery در یک صفحه هستیم؟ Are we on the same page to start Jquery

• ساخت نمونه فایل های تمرینی Creating Sample exercise files

• ساخت نمونه فایل های تمرینی Creating Sample exercise files

• اولین کد Jquery شما در عمل Your first Jquery code in action

• اولین کد Jquery شما در عمل Your first Jquery code in action

• مبانی انتخابگرها در جی کوئری Basics of Selectors in Jquery

• اصول وقایع در جی کوئری Basics of events in Jquery

• اصول وقایع در جی کوئری Basics of events in Jquery

حرکت برای یادگیری Jquery - انتخابگرها و رویدادها Moving on to learn Jquery - Selectors and events

• مبانی انتخابگرها در جی کوئری Basics of Selectors in Jquery

اقدامات در Jquery - محو شدن، انیمیشن ها و توابع پاسخ به تماس Actions in Jquery - fading, animations and callback functions

• مخفی کردن و نمایش تصاویر hiding and showing images

• مخفی کردن و نمایش تصاویر hiding and showing images

• محو شدن در جی کوئری fading out in Jquery

• اسلایدها و انیمیشن ها در جی کوئری Slides and Animations in Jquery

• Callbacks و chaining در Jquery Callbacks and chaining in Jquery

• Callbacks و chaining در Jquery Callbacks and chaining in Jquery

اقدامات در Jquery - محو شدن، انیمیشن ها و توابع پاسخ به تماس Actions in Jquery - fading, animations and callback functions

• محو شدن در جی کوئری fading out in Jquery

• اسلایدها و انیمیشن ها در جی کوئری Slides and Animations in Jquery

پروژه ها در Jquery و با استفاده از پلاگین های JS projects in Jquery and using JS plugins

• دریافت مقادیر HTML، متن و فرم Getting the HTML, text and form values

• دریافت مقادیر HTML، متن و فرم Getting the HTML, text and form values

• تنظیم مقادیر HTML، متن و فرم Setting the HTML, text and form values

• کلاس های CSS را با Jquery تغییر دهید Toggle CSS Classes with Jquery

• پروژه - قسمت 1 اسلایدر تصویر Project - Image Slider part 1

• پروژه - قسمت 1 اسلایدر تصویر Project - Image Slider part 1

• پروژه - اسلایدر تصویر قسمت 2 Project - Image Slider part 2

• پروژه - اسلایدر تصویر قسمت 2 Project - Image Slider part 2

• چالش TypeAhead و CSS TypeAhead and CSS challenge

• چالش TypeAhead و CSS TypeAhead and CSS challenge

پروژه ها در Jquery و با استفاده از پلاگین های JS projects in Jquery and using JS plugins

• تنظیم مقادیر HTML، متن و فرم Setting the HTML, text and form values

• کلاس های CSS را با Jquery تغییر دهید Toggle CSS Classes with Jquery

خداحافظی و هدیه Farewell and a gift

• خداحافظی و هدیه Farewell and a gift

خداحافظی و هدیه Farewell and a gift

• خداحافظی و هدیه Farewell and a gift

امتیاز: پروژه TODO در JS و جزئیات میزبانی وب Bonus: TODO project in JS and web hosting details

• پاداش - پروژه Todo و اصول میزبانی Bonus - Todo project and hosting basics

• پاداش - پروژه Todo و اصول میزبانی Bonus - Todo project and hosting basics

• اضافه کردن سبک به پروژه TODO Adding styles to TODO project

• اضافه کردن سبک به پروژه TODO Adding styles to TODO project

• جاوا اسکریپت برای کار todo Javascript for working of todo

• جاوا اسکریپت برای کار todo Javascript for working of todo

• میزبانی وب در سریعترین زمان ممکن Web hosting as quick as possible

امتیاز: پروژه TODO در JS و جزئیات میزبانی وب Bonus: TODO project in JS and web hosting details

• میزبانی وب در سریعترین زمان ممکن Web hosting as quick as possible

به روز رسانی جایزه - پروژه های سرگرم کننده و نکات BONUS updates - FUN projects and tips

• پروژه روز استقلال مبارک در particlesjs Happy Independence day project in particlesjs

• پروژه روز استقلال مبارک در particlesjs Happy Independence day project in particlesjs

• چگونه وب سایت خود را روی سرور زنده آپلود کنیم How to upload your website on live server

• چگونه وب سایت خود را روی سرور زنده آپلود کنیم How to upload your website on live server

به روز رسانی جایزه - پروژه های سرگرم کننده و نکات BONUS updates - FUN projects and tips