آموزش توسعه فرانت اند وب با جاوا اسکریپت، HTML، CSS و بوت استرپ - آخرین آپدیت

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

مقدمه‌ای بر توسعه وب فرانت اند، جاوا اسکریپت، HTML، CSS، بوت استرپ Intro to front end web development, javascript, html, css, boostrap

• بخش HTML را با هم ببینیم؟ Let's See What You Will Learn in HTML Part?

• فایل‌های پروژه و اسناد دوره توسعه وب فرانت اند Project Files and Course Documents for Front End Web Development

• اصطلاحات عمومی General Terms

• سوالات متداول درباره توسعه وب فرانت اند با جاوا اسکریپت، HTML، CSS، بوت استرپ FAQ about Front end web development with javascript, html, css, bootstrap

• وب‌سایت چگونه کار می‌کند؟ How the Website Works?

• IDE چیست؟ What Is IDE?

• اولین صفحه وب First Webpage

مبانی HTML HTML Fundamentals

• درباره این بخش About the Section

• HTML چیست؟ What is HTML?

• ساختار سند HTML HTML Document Structure

• عناصر متنی Text Element

• لیست‌ها Lists

• تصاویر Images

• پیوندهای ابرمتنی Hyperlinks

• عناصر کانتینر Container Elements

• HTML معنایی چیست؟ What is Semantic HTML?

• ایجاد جدول با HTML Creating Tables with HTML

• Colspan و Rowspan Colspan & Rowspan

• کار با عناصر فرم Working With Form Elements

• Checkbox Checkbox

• نوع ورودی؛ Radio و File Input type; Radio & File

• Select و Option Select & Option

• افزونه‌های جدید Visual Studio Code New Visual Studio Code Extensions

• چالش Challenge

• چالش‌ها را انجام دهیم Let’s Make the Challenges

• ادامه راه‌حل‌های چالش Challenge Solutions Continue

مبانی CSS CSS Fundamentals

• درباره این بخش About the Section

• CSS چیست What is CSS

• روش‌های استایل‌دهی – درون خطی، داخلی و خارجی Styling Methods-Inline, Internal and External

• کمی استایل‌دهی انجام دهیم Let’s Do Some Styling

• ترکیب انتخابگرها Combining Selectors

• عملیات استایل با تخصیص کلاس و شناسه Style Operation With Class and Id Assignment

• ترتیب اولویت در CSS Order of Priority in CSS

• کار با رنگ‌ها Working with Colors

• کار با رنگ‌ها در کد Working with Colors on Code

• استفاده از Border در CSS Using Border in CSS

• کلاس شبه در CSS Pseudo-Class in CSS

• استایل‌دهی پیوندهای ابرمتنی با کلاس شبه Styling Hyperlinks With Pseudo-Class

• Crome DevTools Crome DevTools

• نکات مهم برای CSS Important Advices for CSS

• چالش ۱ Challenge 1

• جعبه مدل Box Model

• Margin و Padding Margin & Padding

• شروع به استفاده از Margin و Padding کنیم Let’s Start Using Margin & Padding

• اندازه‌دهی با CSS Dimensioning with CSS

• صفحه خود را در مرکز قرار دهیم Let’s Centre Our Page

• چالش ۲ Challenge 2

• انواع جعبه‌ها Types of Boxes

• موقعیت‌دهی عناصر با CSS Element Positioning with CSS

• استفاده از Fixed و Sticky Use of Fixed and Sticky

• ایجاد سایه در CSS Creating Shadow in CSS

• چالش ۳ Challenge 3

چیدمان در صفحه وب Layout on Webpage

• درباره این بخش About the Section

• ۳ روش برای ایجاد چیدمان در صفحات وب 3 Ways to Create Layout on Web Pages

• Float Float

• Flexbox Flexbox

• مروری بر Flexbox Flexbox Overview

• به استفاده از Flexbox ادامه دهیم Let’s Keep Using Flexbox

• Flex-Wrap Flex-Wrap

• اضافه کردن Flexbox به پروژه ما Adding Flexbox to Our Project

• اضافه کردن Flexbox به پروژه ما - ۲ Adding Flexbox to Our Project - 2

• چیدمان صفحه را با Flexbox تغییر دهیم Let’s Change the Page Layout with Flexbox

• مقدمه‌ای بر CSS Grid Introduction to CSS Grid

• CSS Grid چیست؟ What Is CSS Grid?

• به بررسی ویژگی‌های CSS Grid ادامه دهیم Let’s Continue Examining CSS Grid Features

• سایر ویژگی‌های Grid Other Grid Features

Media Query و انیمیشن‌های CSS Media Query and CSS Animations

• مرور کلی بخش Section Overview

• نمونه کدهای Media Query و انیمیشن‌های CSS Media Query and CSS Animations Code Samples

• ساخت منوی واکنش‌گرا با Media Query Responsive Menu Making With Media Query

• انیمیشن‌های CSS CSS Animations

• ساخت منوی اسلایدر با Transform Making a Slider Menu With Transform

• Keyframes Keyframes

• نمونه‌های انیمیشن با Keyframes Animation Examples With Keyframes

وب‌سایت نمونه کار Portfolio Website

• وب‌سایت نمونه کار Portfolio Website

• شروع به ایجاد بخش‌ها کنیم Let’s Start Creating the Sections

• با ساخت Header شروع کنیم Let’s Start With Header Creation

• بخش خانه Home Section

• بخش درباره ما About Section

• بخش خدمات Services Section

• بخش نمونه کار Portfolio Section

• بخش تماس و فوتر Contact Section & Footer

• طراحی صفحه واکنش‌گرا Responsive Page Design

مبانی Bootstrap 5 Bootstrap 5 Fundamentals

• Bootstrap 5 Bootstrap 5

• نحوه ادغام Bootstrap در برنامه‌ها How to Integrate Bootstrap Into Applications

• Container و Container Fluid Container and Container Fluid

• مروری بر تایپوگرافی Bootstrap 5 Bootstrap 5 Typography Review

• ویژگی‌های متن Text Features

• استفاده از رنگ‌ها Use of Colors

• فاصله‌گذاری Spacing

• Border Border

• Display Display

• Position Relative & Absolute Position Relative & Absolute

• Position Fixed & Sticky Position Fixed & Sticky

• اندازه‌دهی Sizing

• دکمه‌ها Buttons

• استفاده از کلاس‌های تصویر Using Images Classes

• سایر ویژگی‌های Bootstrap 5 Other Bootstrap 5 Features

• مسابقه Quiz

Bootstrap 5 پیشرفته Bootstrap 5 Advanced

• Grid Grid

• استفاده از ساختار Grid بوت استرپ در اندازه‌های مختلف صفحه Using Bootstrap Grid Structure on Different Screen Size

• تراز کردن ستون‌ها و Gutters Aligning Columns and Gutters

• شروع به استفاده از Flex با Bootstrap 5 کنیم Let's Start Using Flex with Bootstrap 5

• تراز عمودی و افقی در ساختار Flex Vertical and Horizontal Alignment in Flex Structure

• سایر ویژگی‌های Flexbox Other Flexbox Features

• List Group List Group

• کلاس‌های فرم Form Classes

• کار با عناصر فرم را ادامه دهیم Let's Continue Working with Form Elements

• سایر ویژگی‌های ورودی Other Input Features

• ایجاد جدول با Bootstrap 5 Creating Tables With Bootstrap 5

• مسابقه Quiz

ویژگی‌های Bootstrap در کار با جاوا اسکریپت Bootstrap Features Working With JavaScript

• ویژگی‌های Bootstrap در کار با جاوا اسکریپت Bootstrap Features Working With Javascript

• Dropdown Dropdown

• Modal Modal

• Carousel Carousel

• Collapse & Accordion Collapse & Accordion

• مسابقه Quiz

پروژه Bootstrap 5 Bootstrap 5 Project

• ارائه پروژه Project Presentation

• Navbar Navbar

• شروع به ساخت Carousel کنیم Let’s Start Creating Carousel

• شروع به ساخت بخش اصلی کنیم Let’s Start Creating the Main Section

• ایجاد بخش‌های دانشجویان و سوالات Creation of Students and Questions Sections

• ایجاد بخش تماس و فوتر Creation of Contact and Footer Section

• مسابقه Bootstrap Bootstrap Quiz

مقدمه‌ای بر توسعه وب فرانت اند با جاوا اسکریپت Intro to Front End Web Development with Javascript

• مقدمه‌ای بر جاوا اسکریپت Introduction to JavaScript

• راه اندازی Visual Studio Code Setup Visual Studio Code

• اضافه کردن فایل js Adding js File

• مسابقه quiz

مبانی زبان در جاوا اسکریپت Language Basics in Javascript

• متغیرها و انواع داده‌ها در جاوا اسکریپت Variables and Data Types in Javascript

• تبدیل نوع در جاوا اسکریپت Type Coercion in Javascript

• جهش متغیر در جاوا اسکریپت Variable Mutation in Javascript

• عملگرهای پایه Basic Operators

• منطق بولی در جاوا اسکریپت Boolean Logic in Javascript

• عملگرهای منطقی در جاوا اسکریپت Logical Operators in Javascript

• مسابقه quiz

دستورات شرطی در جاوا اسکریپت Conditional Statements in Javascript

• دستورات شرطی Conditional Statements

• راه‌حل مسابقه کد ۱ Code Quiz 1 Solution

• عملگر سه‌تایی Ternary Operator

• دستورات Switch, Case در جاوا اسکریپت Switch, Case Statements in Javascript

• مسابقه کد ۲ Code Quiz 2

• راه‌حل مسابقه کد ۲ Code Quiz 2 Solution

• مسابقه quiz

حلقه‌ها Loops

• مقدمه‌ای بر حلقه‌ها Introduction to Loops

• حلقه‌های While While Loops

• مسابقه حلقه‌های While While Loops Quiz

• راه‌حل مسابقه حلقه‌های While While Loops Quiz Solution

• حلقه‌های for for Loops

• راه‌حل مسابقه حلقه‌های for for Loops Quiz Solution

• دستورات Continue و Break Continue and Break Statements

• مسابقه quiz

توابع Functions

• مقدمه‌ای بر توابع Introduction to Functions

• اعلام تابع Function Decleration

• تابع با آرگومان‌ها Function with Arguments

• مقدار بازگشتی تابع Function return

• عبارت تابع Function Expression

• مسابقه تابع Function Quiz

• راه‌حل مسابقه تابع Function Quiz Solution

• دامنه تابع Function Scope

• مسابقه quiz

آرایه‌ها Arrays

• مقدمه‌ای بر آرایه‌ها Introduction to Arrays

• ویژگی‌های آرایه Array Features

• متدهای آرایه Array Methods

• مسابقه آرایه Array Quiz

• راه‌حل مسابقه آرایه Array Quiz Solution

• پیمایش آرایه Array Iteration

• مسابقه پیمایش آرایه Array Iteration Quiz

• راه‌حل مسابقه پیمایش آرایه Array Iteration Quiz Solution

• مسابقه quiz

اشیاء Objects

• مقدمه‌ای بر اشیاء Introduction to Objects

• به‌روزرسانی شیء Object Update

• ساختارهای داده پیچیده Complex Data Structures

• مسابقه شیء Object Quiz

• راه‌حل مسابقه شیء Object Quiz Solution

• متدهای شیء Object Methods

• کلمه کلیدی this this Keyword

• مسابقه quiz

DOM Dom

• مقدمه‌ای بر DOM Introduction to DOM

• DOM چیست What is DOM

• انتخاب و تغییر Select and Change

• متدهای انتخاب Select Methods

• متدهای دستکاری Manipulation Methods

• innerHTML و textContext innerHTML and textContext

• دستکاری ویژگی‌ها Attribute Manipulation

• مسابقه quiz

مدیریت‌کننده‌های رویداد Event Handlers

• مقدمه‌ای بر مدیریت‌کننده‌های رویداد Introduction to Event handlers

• مسابقه کد مدیر رویداد-۱ Event Handler Codequiz-1

• راه‌حل مسابقه کد Codequiz Solution

• تابع بازگشتی callback Function

• انواع مختلف رویداد Different Event Types

• راه‌حل مسابقه Todolist Todolist Quiz Solutuion

• آنچه آموختیم What We Learned

• مسابقه quiz

اضافی Extra

• توسعه وب فرانت اند با جاوا اسکریپت HTML CSS Bootstrap Front End Web Development with Javascript HTML CSS Bootstrap