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

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

مقدمه Introduction

• مقدمه Introduction

• مقدمه ای بر وب Introduction to the Web

• نقل قول ها Quotes

مقدمه ای بر ویرایشگرهای متن Introduction to Text Editors

• ویرایشگرهای متن Text Editors

• نصب کد VS Installing VS code

مقدمه ای بر HTML Introduction To HTML

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

• آماده سازی فایل ها 1 Preparing Files 1

• آماده سازی فایل ها 2 Preparing Files 2

• نظر دادن Commenting

• نقل قول ها Quotes

• شروع کار با HTML Getting started with HTML

درج تصاویر Inserting Images

• درج تصاویر محلی Inserting Local Images

• درج تصاویر آنلاین Inserting online Images

• میانبرها Shortcuts

• تگ های سرفصل Heading Tags

درج فیلم ها Inserting Videos

• درج فیلم ها Inserting Videos

• برچسب های رایج Common Tags

لیست ها Lists

• لیست های مرتب و نامرتب Ordered and Unordered lists

• بیشتر در لیست ها More on lists

پیمایش های صفحه Page Navigations

• پیمایش صفحه page Navigation

• پیوند دادن ایمیل Linking Email

• باز کردن لینک های خارجی Opening external links

• نقل قول ها Quotes

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

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

• برچسب سبک CSS CSS Style Tag

• سبک درون خطی CSS CSS Inline style

• نقل قول ها Quotes

انتخابگرهای CSS CSS Selectors

• انتخابگر گروه بندی CSS CSS Grouping Selector

• CSS ID Selector-Pound علامت CSS ID Selector-Pound sign

• انتخابگر کلاس CSS CSS Class Selector

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

• درج تصویر پس زمینه Inserting Background Image

• حاشیه و بالشتک Margin and Padding

• رنگ های CSS CSS Colors

• نظر دادن CSS CSS Commenting

• سبک قلم CSS CSS Font Styling

CSS Flex CSS Flex

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

• دارای کد شبه کد هوشمند Has Pseudo Class-Code Smarter

• خواندن-MDN Read-MDN

متن گرادیان Gradient Text

• متن گرادیان Gradient Text

وب سایت ساده Simple Website

• شروع به کار - سرور زنده Getting Started-Live Server

• ماژول 1-سربرگ Module 1-Header

• ماژول 2-Styling Header Module 2-Styling Header

• ماژول 3-دکمه استایل Module 3-Styling Button

• ماژول 4-بخش Module 4-Sections

• ماژول 5-بخش Module 5-Sections

• ماژول 6-Divs Module 6-Divs

• ماژول استایل 7 پا Module 7-footer Styling

• نقل قول ها Quotes

صفحه وب Frontend -Prediction AI Frontend -Prediction AI Webpage

• صفحه وب پیش بینی ماژول-1 Module-1 Prediction Webpage

• ماژول-2 پیش بینی یک ظاهر طراحی صفحه وب Module-2 Prediction Webpage Styling

• ماژول 3 پیش بینی یک ظاهر طراحی صفحه وب Module-3 Prediction Webpage Styling

• ماژول-4 مدل‌سازی صفحه وب پیش‌بینی Module-4 Prediction Webpage Styling

• ماژول 5 پیش بینی یک ظاهر طراحی صفحه وب Module-5 Prediction Webpage Styling

• نقل قول ها Quotes

صفحه وب رتبه بندی مشتریان Customer Rating Webpage

• ماژول 1-رده بندی ساختار سند رابط کاربری Module 1-Rating UI Document Structure

• رابط کاربری ماژول 2-Styling Rating Module 2-Styling Rating UI

• رابط کاربری ماژول 3-Styling Rating Module 3-Styling Rating UI

• رابط کاربری ماژول 4-Styling Rating Module 4-Styling Rating UI

• نقل قول ها Quotes

کارت کد QR QR Code Card

• ماژول 1-ساختار سند- کد QR Module 1-Document Structure- QR code

• ماژول 2-Styling- کد QR Module 2-Styling- QR code

• ماژول 3-استایلینگ کارت- کد QR Module 3-Card Styling- QR code

• ماژول 4-استایل کردن متن کارت- کد QR Module 4-Card Text Styling- QR code

• نقل قول ها Quotes

صفحه وب داشبورد مالی Financial Dashboard Webpage

• ماژول-1 ساختار HTML-داشبورد مالی Module-1 HTML Structure-Financial Dashboard

• داشبورد مالی ماژول-2 استایلینگ Module-2 Styling Financial Dashboard

• داشبورد مالی بخش مدل‌سازی ماژول-3 Module-3 Section Styling Financial Dashboard

• ماژول-4 داشبورد مالی یک ظاهر طراحی کانتینر Module-4 Container Styling Financial Dashboard

• ماژول-5 طرح افقی کانتینر FD Module-5 Horizontal Rule Container Styling FD

• ماژول-6 FD استایل کردن متن پایین Module-6 Bottom Text Styling FD

• نقل قول ها Quotes

جستجوی وب سایت-Frontend Search Webpage-Frontend

• ماژول 1-ساختار HTML UI جستجو Module 1-Search UI HTML Structure

• ماژول 2-Search UI Body Styling Module 2-Search UI Body Styling

• ماژول 3-Search UI text Styling Module 3-Search UI text Styling

• ماژول 4-Search UI Input Field Styling Module 4-Search UI Input Field Styling

• نقل قول ها Quotes

پیش نمایش محصول Product Preview

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

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

• عناصر یک ظاهر طراحی و تراز Styling-Aligning Elements

• استایل-دکمه Styling-Button

• عناصر یک ظاهر طراحی شده-مرکز Styling-Centering Elements

• Styling-h4 Elements Styling-h4 Elements

• یک ظاهر طراحی دکمه با نماد Styling-Button with Icon

• استایل-متن Styling-Text

• نقل قول ها Quotes

جزء کارت گرافیک Video Card Component

• کامپوننت کارت گرافیک - ساختار HTML Video Card Component-HTML Structure

• یک ظاهر طراحی بدنه و ظرف Styling-Body Iframe and container

• استایل-دکمه Styling-Button

• ظرف حالت دهی Styling-Positioning Container

• استایل-متن Styling-Text

• استایل-ادامه متن Styling-Text continuation

• نقل قول ها Quotes

با تشکر از شما جزء کارت Thank you Card Component

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

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

• یک ظاهر طراحی شده-بدن Styling-Body

• یک ظاهر طراحی شده-تصویر و ظرف Styling-Image and Container

• استایل-متن Styling-Text

• Styling-Exit Button Styling-Exit Button

• یک ظاهر طراحی دکمه با آیکون Styling-Buttons with Icons

• نقل قول ها Quotes

رابط کاربری کارت جشن Celebration Card UI

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

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

• یک ظاهر طراحی ظرف 1 Container Styling 1

• طراحی ظرف 2 Container Styling 2

• قالب بندی کانتینر-متن 3 Container-Text Styling 3

• یک ظاهر طراحی ظروف-دکمه Container-Button Styling

UI فرم ها Forms UI

• Form Validation-HTML Document Structure-1 Form Validation-HTML Document Structure-1

• اعتبار سنجی فرم-ساختار سند HTML-2 Form Validation-HTML Document Structure-2

• اعتبار سنجی فرم-ساختار سند HTML-3 Form Validation-HTML Document Structure-3

• استایل اعتبار سنجی فرم-1 Form Validation Styling-1

• استایل اعتبار سنجی فرم-2 Form Validation Styling-2

• استایل اعتبار سنجی فرم-3 Form Validation Styling-3

پخش کننده صوتی Audio Player

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

• استایل پخش کننده صوتی-1 Audio Player Styling-1

• استایل پخش کننده صوتی-2 Audio Player Styling-2

• پخش کننده صوتی Styling-3 Audio Player Styling-3