آموزش دوره کامل توسعه وب فرانت اند

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

به دوره خوش آمدید! Welcome to the Course!

• معرفی دوره Introduction to the course

• راه اندازی اتم Atom setup

مبانی توسعه وب - HTML Web Development Basics - HTML

• ساختار سند HTML HTML document structure

• عناصر HTML - div و span HTML elements - div and span

• عناصر HTML - i، b، p و a HTML elements - i, b, p, and a

• عناصر HTML - ul، li، و ol HTML elements - ul, li, and ol

• عناصر HTML - سرصفحه و پاورقی HTML elements - header and footer

• عناصر HTML - بخش، اصلی و مقاله HTML elements - section, main, and article

• عناصر HTML - h1-h6 و کنار HTML elements - h1-h6 and aside

• جداول HTML HTML tables

• پروژه شماره 1 - سایت متنی HTML Project #1 - HTML text site

مفاهیم پیشرفته HTML Advanced HTML Concepts

• تصاویر Images

• تشکیل می دهد Forms

• ورودی ها Inputs

• چک باکس ها Checkboxes

• دکمه های رادیویی Radio buttons

• انتخاب، گزینه و دکمه ها Select, option, and buttons

• ویدیوهای HTML5 HTML5 videos

• صوتی HTML5 HTML5 audio

• Doctypes Doctypes

• برچسب های متا Meta tags

مقدمه ای بر برگه های سبک آبشاری (CSS) Introduction to Cascading Style Sheets (CSS)

• رنگ و پس زمینه را هدف قرار می دهد Targeting color and background

• ویژگی عنصر Element specificity

• هدف گذاری شناسه، حاشیه و مرز ID targeting, margin, and border

• بالشتک، حاشیه و شناور Padding, margin, and float

• حداکثر عرض و تصویر پس زمینه Max-width and background-image

• جابجایی به یک IDE Switching over to an IDE

• وزن، سبک و خانواده فونت Font weight, style, and family

• تزیینات متن Text decorations

• فاصله متن Text spacing

• اصلاح دکوراسیون متن Text decoration modification

• سایه متن Text shadow

CSS پیشرفته Advanced CSS

• حالت های شبه Pseudo-states

• شعاع مرزی Border radius

• موقعیت ها Positions

• شبه عناصر Pseudo-elements

• شاخص Z Z-index

• عرض و ارتفاع دیدگاه، محتوای سرریز Viewpoint width and height, overflowing content

• دارایی انتقال Transition property

جاوا اسکریپت برای مبتدیان JavaScript for Beginners

• معرفی جاوا اسکریپت Intro to JavaScript

• هشدارها و ورود به سیستم کنسول Alerts and console logging

• اعداد صحیح، رشته ها و متغیرها Integers, strings, and variables

• متغیرهای تعریف نشده و تغییر مقادیر متغیرها Undefined variables and modifying values of variables

• عملگرهای بولی Boolean operators

• مقایسه ارزش ها Comparing values

• اگر اظهارات If statements

• برای حلقه ها For loops

• تعریف توابع Defining functions

• رسیدگی به رویداد Event handling

• تنظیم یک عنصر innerHTML Setting an elements innerHTML

مفاهیم بیشتر جاوا اسکریپت More JavaScript Concepts

• آرایه ها pt.1 Arrays pt.1

• آرایه ها pt.2 Arrays pt.2

• آرایه ها pt.3 Arrays pt.3

• Textareas و دریافت ارزش ورودی ها Textareas and getting the value of inputs

• توابع - پارامترها و مقادیر بازگشتی Functions - parameters and return values

• چندین پارامتر در توابع Multiple parameters in functions

• پارامترهای تابع انعطاف پذیر Flexible function parameters

• تمرین - عدد گم شده را پیدا کنید Exercise - find the missing number

• راه حل تمرین Exercise solution

• کلاس ها توضیح داده شد Classes explained

• سازنده کلاس، متغیرهای نمونه و متغیرهای استاتیک Class constructor, instance variables, and static variables

• گسترش کلاس ها Extending classes

شروع کار با jQuery Getting Started with jQuery

• راه اندازی جی کوئری jQuery setup

• عناصر هدف Targeting elements

• رسیدگی به رویداد Event handling

• منوهای کشویی Dropdown menus

• ناپدید شدن فهرست بازشوی ما Making our dropdown disappear

• اهداف متعدد، رویدادها و روش attr Multiple targets, events, and attr method

• Prepend، ضمیمه و html Prepend, append, and html

• جلوگیری از پیش فرض preventDefault

• event.which و ویژگی های سوئیچ event.which and switch properties

• منوی زمینه سفارشی، pageY، و pageX Custom context menu, pageY, and pageX

• روش است is method

جی کوئری بیشتر More jQuery

• نوشتن نسخه خودمان از jQuery Writing our own version of jQuery

• روش را پیدا کنید Find method

• اولین و آخرین First and last

• تمرکز و تمرکز Focusin and focusout

• شامل، است و دارای کلاس است Contains, is, and hasClass

• هر روش Each method

• تماس های تلفنی Callbacks

• CSS CSS

مبانی بوت استرپ Bootstrap Basics

• راه اندازی بوت استرپ Bootstrap setup

• Navbar pt.1 Navbar pt.1

• Navbar pt.2 Navbar pt.2

• فرم های pt.1 Forms pt.1

• فرم های pt.2 Forms pt.2

• دکمه ها Buttons

پروژه شماره 2 - Pipboy از Fallout 4 Project #2 - Pipboy from Fallout 4

• برپایی Setup

• نوار ناوبری Navbar

• صفحه اصلی Main page

• تصویر و پاورقی Pipboy Pipboy image and footer

• رنگ ها Colors

• خط اصلی فونت و استایل Font and styling main nav

• اسکن لاین ها Scanlines

• سبک ناوبری Navigation styling

• زبانه ها Tabs

• نوارهای پیشرفت Progress bars

• نوارهای آمار Stat bars

• اصلاحات پاورقی Footer fixes

• آسیب و مقاومت Damage and resistance

• نمادها Icons

• قالب موجودی Inventory template

• فهرست اشیا Item list

• ظرف آمار سلاح Weapon stat container

• پایان کار با جاوا اسکریپت Finishing touches with JavaScript

پروژه شماره 3 - برنامه افزودنی Google Chrome Project #3 - Google Chrome Extension

• حل مسئله Problem solving

• فایل های مانیفست Manifest files

• راه اندازی اولیه Basic setup

• دریافت آدرس های اینترنتی ویدیو Getting video URLs

• تزریق جاوا اسکریپت Injecting JavaScript

• دریافت اشیاء زیبا برای هر URL Getting pretty objects for each URL

• ایجاد لیست گزینه های دانلود Creating download options list

• برقراری ارتباط بین صفحه و افزونه Communicating between the page and extension

• Chrome API و اسکریپت‌های پس‌زمینه را دانلود می‌کند Chrome downloads API and background scripts

• دریافت پیام و دانلود فایل Receiving messages and downloading files

• طراحی فرمت و انتشار ما Styling our extension and publishing

افکار نهایی Final Thoughts

• نکاتی برای شروع به عنوان یک توسعه دهنده وب حرفه ای Tips for getting started as a professional web developer

پاداش - کدنویسی یک برنامه افزودنی دیگر Google Chrome BONUS - Coding Another Google Chrome Extension

• معرفی و مانیفست Introduction and manifest

• اسکریپت های محتوا Content scripts

• پیام رسانی به بخش های مختلف برنامه افزودنی Messaging different parts of the extension

• ایجاد پنجره اشتراک گذاری Creating share popup

• نمادها Icons

• ساخت دانلود کننده تصویر Building an image downloader

• تعامل با DOM Interacting with the DOM

• در حال آپلود در فروشگاه وب Google Chrome Uploading to the Google Chrome Web Store

• کد منبع Source code