آموزش توسعه وب Frontend HTML5 CSS3 جاوا اسکریپت و بوت استرپ

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

مقدمه HTML5 HTML5 Introduction

• نمای کلی بخش Section Overview

• مقدمه ای بر HTML5 Introduction to HTML5

• برچسب های HTML5 HTML5 Tags

• ویژگی های برچسب Tag's Attributes

• فاویکون در صفحه وب HTML5 Favicon in HTML5 Webpage

• تاریخچه HTML5 History of HTML5

• بخش نتیجه گیری Section Conclusion

قالب بندی HTML5 HTML5 Formatting

• نمای کلی بخش Section Overview

• سرفصل ها Headings

• پاراگراف Paragraph

• برچسب های قالب بندی مختلف Different Formatting Tags

• بخش نتیجه گیری Section Conclusion

نقل قول HTML5 HTML5 Quotation

• نمای کلی بخش Section Overview

• برچسب Blockquote Blockquote Tag

• برچسب نقل قول کوتاه Short Quotation Tag

• برچسب اختصاری Abbreviation Tag

• تگ آدرس Address Tag

• برچسب استناد Cite Tag

• لغو دو جهته Bi-Directional Override

• بخش نتیجه گیری Section Conclusion

هایپرلینک های HTML5 HTML5 Hyperlinks

• نمای کلی بخش Section Overview

• هایپرلینک داخلی Internal Hyperlink

• هایپرلینک خارجی External Hyperlink

• هایپرلینک ایمیل Email Hyperlink

• Hyperlink Page Jump یا Hyperlink Bookmark Pagejump Hyperlink or Bookmark Hyperlink

• ویژگی پیوند Link Attribute

• تصویر به عنوان پیوند Image as a Link

• بخش نتیجه گیری Section Conclusion

تصاویر HTML5 HTML5 Images

• نمای کلی بخش Section Overview

• تصاویر در HTML5 Images in HTML5

• بخش نتیجه گیری Section Conclusion

سطح بلوک HTML5 و سطح درون خطی HTML5 Block Level and Inline Level

• نمای کلی بخش Section Overview

• برچسب‌های سطح بلوک Block Level Tags

• برچسب های درون خطی Inline Tags

• بخش نتیجه گیری Section Conclusion

جدول HTML5 HTML5 Table

• نمای کلی بخش Section Overview

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

• بخش نتیجه گیری Section Conclusion

رسانه HTML5 HTML5 Media

• نمای کلی بخش Section Overview

• رسانه در HTML5 Media in HTML5

• برچسب ویدیو Video Tag

• برچسب صوتی Audio Tag

• جاسازی ویدیوی یوتیوب در صفحه وب HTML5 Embedding Youtube Video in HTML5 Webpage

• بخش نتیجه گیری Section Conclusion

فرم HTML5 HTML5 Form

• نمای کلی بخش Section Overview

• فرم و ویژگی های آن Form and Its Attributes

• عنصر فرم Form Element

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

• ویژگی های ورودی Input Attributes

• بخش نتیجه گیری Section Conclusion

عناصر معنایی HTML5 HTML5 Semantic Elements

• نمای کلی بخش Section Overview

• عناصر معنایی قسمت 1 Semantic Elements Part 1

• عناصر معنایی قسمت 2 Semantic Elements Part 2

• بخش نتیجه گیری Section Conclusion

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

• نمای کلی بخش Section Overview

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

• انواع CSS Types of CSS

• انواع انتخابگرهای CSS Types of CSS Selectors

• بخش نتیجه گیری Section Conclusion

اصول CSS CSS Fundamentals

• نمای کلی بخش Section Overview

• مدل جعبه Box Model

• سایه جعبه Box Shadow

• شعاع مرزی Border Radius

• سیستم شبکه CSS CSS Grid System

• CSS Flexbox CSS Flexbox

• میز طراحی Designing Table

• بخش نتیجه گیری Section Conclusion

تایپوگرافی Typography

• نمای کلی بخش Section Overview

• تایپوگرافی CSS CSS Typography

• فونت های گوگل Google Fonts

• فونت های سفارشی Custom Fonts

• بخش نتیجه گیری Section Conclusion

پس زمینه و تصاویر Background & Images

• نمای کلی بخش Section Overview

• تصاویر پس زمینه Background Images

• پس زمینه گرادیان خطی Linear Gradient Background

• گرادیان شعاعی Radial Gradient

• گرادیان مخروطی Conic Gradient

• ایجاد پس زمینه شفاف Making Transparent Background

• بخش نتیجه گیری Section Conclusion

ساخت وب سایت تک صفحه ای - پروژه 1 Making a Single Page Website - Project 1

• نمای کلی بخش Section Overview

• منوی ناوبری Navigation Menu

• بخش قهرمان Hero Section

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

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

• بخش تماس Contact Section

• بخش نتیجه گیری Section Conclusion

طراحی وب سایت ریسپانسیو Responsive Web Design

• نمای کلی بخش Section Overview

• ساخت منوی پاسخگو Making a Responsive Menu

• بخش نتیجه گیری Section Conclusion

CSS Transition & Animations CSS Transition & Animations

• نمای کلی بخش Section Overview

• تبدیل CSS CSS Transformation

• انتقال CSS CSS Transition

• انیمیشن CSS CSS Animation

• نتیجه گیری CSS CSS Conclusion

موضوعات و کتابخانه های پیشرفته Advanced Topics & Libraries

• نمای کلی بخش Section Overview

• ساخت اسلایدر با استفاده از Cycle 2 JS Library Making a Slider using Cycle 2 JS Library

• ساخت گالری لایت باکس با استفاده از کتابخانه Lightbox 2 JS Making a Lightbox Gallery using Lightbox 2 JS Library

• بخش نتیجه گیری Section Conclusion

تست و نتیجه گیری Testing & Conclusion

• نمای کلی بخش Section Overview

• تشخیص ویژگی Feature Detection

• Chrome Inspect Element & Developer Tools Chrome Inspect Element & Developer Tools

• بخش نتیجه گیری Section Conclusion

ساخت وب سایت تک صفحه ای دیگر - پروژه 2 Making Another Single Page Website - Project 2

• ساخت وب سایت تک صفحه ای دیگر - پروژه 2 Making Another Single Page Website - Project 2

مبانی جاوا اسکریپت Javascript Basics

• سلام جهانی جاوا اسکریپت Hello World Javascript

• موتورهای جاوا اسکریپت Javascript Engines

• متغیرها و انواع داده ها Variables & Data Types

• اپراتورها Operators

• نوع و اولویت اپراتور Type of and Operator Precedence

اظهارات مشروط Conditional Statements

• اگر دیگر بیانیه If Else Statement

• بیانیه شرطی مثال 1 Conditional Statement Example 1

• بیانیه شرطی مثال 2 Conditional Statement Example 2

• اپراتور سه تایی Ternary Operator

• بیانیه مورد سوئیچ Switch Case Statement

مفاهیم پیشرفته Advance Concepts

• ارزش کاذب Falsy Value

• پایه عملکرد Basic of Function

• عملکرد به عنوان یک متغیر Function as a Variable

کار با ساختارهای داده Working with Data Structures

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

• آرایه روش پر کردن و فیلتر کردن Fill & Filter Method Array

• روش های برش و برش Slice & Splice Methods

• اشیاء Objects

• روش ها در اشیاء Methods in Objects

حلقه ها و تکرارها Loops & Iterations

• برای حلقه For Loop

• در حالی که حلقه While Loop

• انجام while Loop Do While Loop

• حلقه Foreach Foreach Loop

• برای حلقه For Of Loop

• برای در حلقه For in Loop

Dom Manipulation Dom Manipulation

• Dom چیست؟ What is Dom

• رویدادهای Dom Dom Events

• عناصر HTML را بگیرید Grab HTML Elements

• عناصر HTML را تغییر دهید Change HTML Elements

• ویژگی های محاسبه شده را دریافت کنید Get Computed Properties

ویژگی های مدرن Modern Features

• ایجاد اشیاء Creating Objects

• نمونه اولیه Prototype

• تکنیک کدنویسی بهتر Better Coding Technique

• عملکرد ناشناس خود اجرا Self Executing Anonymous Function

• الفاظ الگو Template Literals

• نقشه ها Maps

• ساختارزدایی داده ها De-Structuring Data

موضوعات پیشرفته Advance Topics

• ماژول کلاس و صادرات Class & Export Module

• گیرنده و تنظیم کننده Getter & Setter

• ارث Inheritance

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

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

• تاریخچه بوت استرپ Bootstrap History

• آنچه در Bootstrap 5 جدید است What is new in Bootstrap 5

• اصطلاحات پایه Basic Terminology

• نحوه نصب بوت استرپ How to Install Bootstrap

• کد تمرین بوت استرپ Bootstrap Practice Code

طرح بوت استرپ Bootstrap Layout

• نقاط شکست Breakpoints

• ظرف Container

• شبکه Grid

• ستون Column

• ناودان Gutter

اجزای بوت استرپ Bootstrap Components

• آکاردئون Accordion

• هشدار Alert

• نشان Badge

• خرده نان Breadcrums

• دکمه Button

• گروه دکمه Button Group

• کارت Card

• چرخ فلک Carousel

• فرو ریختن Collapse

• کشویی Dropdown

• گروه لیست List Group

• مدال Modal

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

• Navs & Tabs Navs & Tabs

• خارج از بوم Offcanvas

• صفحه بندی Pagination

• مکان نگهدار Placeholder

• پاپاور Popover

• پیشرفت Progress

• Scrollspy Scrollspy

• اسپینر Spinner

• نان تست Toast

• راهنمای ابزار Tooltip

یک ظاهر طراحی محتوا با بوت استرپ Content Styling with Bootstrap

• تایپوگرافی Typography

• تصاویر Images

• جداول Tables

• ارقام Figures

کار با فرم بوت استرپ Working with Bootstrap Form

• کنترل فرم Form Control

• انتخاب کنید Select

• چک باکس و دکمه رادیو Checkbox & Radio Button

• محدوده Range

• گروه ورودی Input Group

• برچسب شناور Floating Label

• طرح بندی Layout

• اعتبار سنجی Validation

ابزارهای بوت استرپ Bootstrap Utilities

• مرز Border

• متن Text

• سایه Shadow

پروژه های بوت استرپ Bootstrap Projects

• ساخت صفحه آلبوم Making a Album Page

• تهیه جدول قیمت گذاری Making a Pricing Table