آموزش ساخت وب سایت های دنیای واقعی با استفاده از HTML5، CSS3، Flexbox، Grid، و Sass [ویدئو]

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

مقدمه - میزبانی وب نامحدود رایگان خود را - HTML دریافت کنید Introduction - Get Your Free Unlimited Web Hosting - HTML

• معرفی Introduction

• ساختار یک وب سایت Structure of a Website

• اولین وب سایت شما Your First Website

• میزبانی وب نامحدود خود را رایگان دریافت کنید Get Your Free Unlimited Web Hosting

• وب سایت خود را با جهان به اشتراک بگذارید Share Your Website with the World

• وب سایت خود را با جهان به اشتراک بگذارید - نسخه Cyberduck Share Your Website with the World - Cyberduck Version

• وب سایت خود را با جهان به اشتراک بگذارید - نسخه FileZilla Share Your Website with the World - FileZilla Version

• سرفصل ها Headings

• پاراگراف ها Paragraphs

• پیوندها Links

• تصاویر Images

• درون خطی در مقابل عناصر بلوک Inline Versus Block Elements

• iframes - فعالیت: یک ویدیوی آرامش بخش از یوتیوب را در وب سایت خود جاسازی کنید iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website

• لیست های نامرتب Unordered Lists

• لیست های مرتب شده Ordered Lists

• لیست های توضیحات Description Lists

• جداول Tables

• موجودیت ها Entities

• فرم ها قسمت 1 - فعالیت: یک فرم ورود ساده ایجاد کنید Forms Part 1 - Activity: Create a Simple Login Form

• Forms Part 2 - Activity: Form Checkout Marketplace ایجاد کنید Forms Part 2 - Activity: Create a Marketplace Checkout Form

• تزیین متن Text Decoration

• نظرات Comments

CSS CSS

• معرفی Introduction

• CSS درون خطی Inline CSS

• CSS داخلی Internal CSS

• CSS خارجی External CSS

• کلاس ها و شناسه ها Classes and IDs

• Div و Span Div and Span

• مدل جعبه Box Model

• لایی مدل جعبه Box Model Padding

• مدل جعبه: حاشیه Box Model: Border

• مدل جعبه: طرح کلی Box Model: Outline

• مدل جعبه: حاشیه Box Model: Margin

• زمینه Background

• شناور Floating

• تثبیت موقعیت Positioning

• نمایش دادن Display

• تزیین متن Text Decoration

• تراز کردن متن Text Align

• فونت متن Text Font

• جلوه های متن Text Effects

• اسپرایت های تصویری Image Sprites

• کدورت تصویر Image Opacity

• لیست های یک ظاهر طراحی شده Styling Lists

• پیوندهای یک ظاهر طراحی شده Styling Links

• گرادیان ها Gradients

• تبدیل های دوبعدی 2D Transforms

• تبدیل های سه بعدی 3D Transforms

• انتقال ها Transitions

• تصاوير متحرك Animations

پروژه حرفه ای: وب سایت آموزش ریاضیات (HTML و CSS) Professional Project: Mathematics Tutorials Website (HTML and CSS)

• معرفی Introduction

• سربرگ – قسمت 1 Header – Part 1

• سربرگ – قسمت 2 Header – Part 2

• منو Menu

• جعبه معرفی Introduction Box

• میله های جانبی - قسمت 1 Sidebars – Part 1

• میله های جانبی - قسمت 2 Sidebars – Part 2

• پاورقی و تبریک Footer and Congratulations

CSS پیشرفته با Flexbox، Grid و Sass Advanced CSS with Flexbox, Grid, and Sass

• Flexbox: مقدمه Flexbox: Introduction

• فلکس باکس: فلکس باکس پایه Flexbox: Basic Flexbox

• Flexbox: موارد فلکس را تراز کنید Flexbox: Align Flex Items

• Flexbox: خطوط فلکس را تراز کنید Flexbox: Align Flex Lines

• Flexbox: تغییر اندازه موارد فلکس - قسمت 1 Flexbox: Resize Flex Items – Part 1

• Flexbox: تغییر اندازه موارد فلکس - قسمت 2 Flexbox: Resize Flex Items – Part 2

• برنامه Flexbox: گالری عکس – قسمت 1 Flexbox Application: Photo Gallery – Part 1

• برنامه Flexbox: گالری عکس – قسمت 2 Flexbox Application: Photo Gallery – Part 2

• برنامه Flexbox: Amazon Checkout – قسمت 1 Flexbox Application: Amazon Checkout – Part 1

• برنامه Flexbox: Amazon Checkout – قسمت 2 Flexbox Application: Amazon Checkout – Part 2

• برنامه Flexbox: Amazon Checkout – قسمت 3 Flexbox Application: Amazon Checkout – Part 3

• برنامه Flexbox: وب سایت ریاضی – قسمت 1 Flexbox Application: Math Website – Part 1

• برنامه Flexbox: وب سایت ریاضی – قسمت 2 Flexbox Application: Math Website – Part 2

• برنامه Flexbox: وب سایت ریاضی – قسمت 3 Flexbox Application: Math Website – Part 3

• CSS Grid: Introduction and Basic Grid Template CSS Grid: Introduction and Basic Grid Template

• شبکه CSS: شبکه ضمنی در مقابل شبکه آشکار CSS Grid: Implicit Versus Explicit Grid

• شبکه CSS: مناطق شبکه و طراحی پاسخگو CSS Grid: Grid Areas and Responsive Design

• CSS Grid: بر ویژگی "grid-column" مسلط شوید CSS Grid: Master the "grid-column" Property

• CSS Grid: مختصات شبکه CSS Grid: Grid Coordinates

• شبکه CSS: موارد شبکه را تراز کنید CSS Grid: Align Grid Items

• برنامه CSS Grid: گالری عکس CSS Grid Application: Photo Gallery

• برنامه CSS Grid: Picture Grid CSS Grid Application: Picture Grid

• Sass: Introduction - Installation - Nesting Syntax Sass: Introduction - Installation - Nesting Syntax

• Sass: .scss در مقابل .sass - متغیرها Sass: .scss Versus .sass - Variables

• Sass: @import and @extend Directives Sass: @import and @extend Directives

• Sass: Mixins - Operators - Functions Sass: Mixins - Operators - Functions