آموزش ساخت وب‌سایت‌های واقعی با استفاده از HTML5، CSS3، 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) Headings

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

• لینک‌ها Links

• تصاویر Images

• المان‌های Inline در مقابل Block Inline Versus Block Elements

• آی‌فریم‌ها (iframes) - تمرین: قرار دادن ویدیو یوتیوب در سایت iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website

• لیست‌های بدون ترتیب Unordered Lists

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

• لیست‌های توصیفی Description Lists

• جداول Tables

• کاراکترهای خاص (Entities) Entities

• فرم‌ها بخش اول - تمرین: ساخت فرم ورود ساده Forms Part 1 - Activity: Create a Simple Login Form

• فرم‌ها بخش دوم - تمرین: ساخت فرم پرداخت فروشگاه Forms Part 2 - Activity: Create a Marketplace Checkout Form

• تزیین متن (Text Decoration) Text Decoration

• کامنت‌ها Comments

سی‌اس‌اس (CSS) CSS

• مقدمه Introduction

• استایل Inline CSS Inline CSS

• استایل Internal CSS Internal CSS

• استایل External CSS External CSS

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

• تگ‌های Div و Span Div and Span

• مدل جعبه‌ای (Box Model) Box Model

• فاصله داخلی (Padding) Box Model Padding

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

• مدل جعبه‌ای: خط دور (Outline) Box Model: Outline

• مدل جعبه‌ای: فاصله خارجی (Margin) Box Model: Margin

• پس‌زمینه (Background) Background

• شناور کردن (Floating) Floating

• جای‌گذاری (Positioning) Positioning

• نمایش (Display) Display

• تزیین متن Text Decoration

• تراز متن (Text Align) Text Align

• فونت متن Text Font

• افکت‌های متنی Text Effects

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

• شفافیت تصویر (Opacity) Image Opacity

• استایل‌دهی به لیست‌ها Styling Lists

• استایل‌دهی به لینک‌ها Styling Links

• گرادینت‌ها (Gradients) Gradients

• ترانسفورم‌های دو بعدی (2D Transforms) 2D Transforms

• ترانسفورم‌های سه بعدی (3D Transforms) 3D Transforms

• انتقال‌ها (Transitions) Transitions

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

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

• مقدمه Introduction

• هدر (Header) - بخش اول Header - Part 1

• هدر (Header) - بخش دوم Header - Part 2

• منو (Menu) Menu

• باکس معرفی Introduction Box

• سایدبارها - بخش اول Sidebars - Part 1

• سایدبارها - بخش دوم Sidebars - Part 2

• فوتر و تبریکات Footer and Congratulations

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

• فلکس‌باکس (Flexbox): مقدمه Flexbox: Introduction

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

• فلکس‌باکس: تراز کردن آیتم‌ها Flexbox: Align Flex Items

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

• فلکس‌باکس: تغییر اندازه آیتم‌ها - بخش اول Flexbox: Resize Flex Items - Part 1

• فلکس‌باکس: تغییر اندازه آیتم‌ها - بخش دوم Flexbox: Resize Flex Items - Part 2

• کاربرد فلکس‌باکس: گالری عکس - بخش اول Flexbox Application: Photo Gallery - Part 1

• کاربرد فلکس‌باکس: گالری عکس - بخش دوم Flexbox Application: Photo Gallery - Part 2

• کاربرد فلکس‌باکس: پرداخت آمازون - بخش اول Flexbox Application: Amazon Checkout - Part 1

• کاربرد فلکس‌باکس: پرداخت آمازون - بخش دوم Flexbox Application: Amazon Checkout - Part 2

• کاربرد فلکس‌باکس: پرداخت آمازون - بخش سوم Flexbox Application: Amazon Checkout - Part 3

• کاربرد فلکس‌باکس: سایت ریاضی - بخش اول Flexbox Application: Math Website - Part 1

• کاربرد فلکس‌باکس: سایت ریاضی - بخش دوم Flexbox Application: Math Website - Part 2

• کاربرد فلکس‌باکس: سایت ریاضی - بخش سوم Flexbox Application: Math Website - Part 3

• سی‌اس‌اس گرید (CSS Grid): مقدمه و قالب پایه CSS Grid: Introduction and Basic Grid Template

• سی‌اس‌اس گرید: گرید ضمنی در مقابل صریح CSS Grid: Implicit Versus Explicit Grid

• سی‌اس‌اس گرید: نواحی گرید و طراحی ریسپانسیو CSS Grid: Grid Areas and Responsive Design

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

• سی‌اس‌اس گرید: مختصات گرید CSS Grid: Grid Coordinates

• سی‌اس‌اس گرید: تراز کردن آیتم‌ها CSS Grid: Align Grid Items

• کاربرد سی‌اس‌اس گرید: گالری عکس CSS Grid Application: Photo Gallery

• کاربرد سی‌اس‌اس گرید: گرید تصاویر CSS Grid Application: Picture Grid

• ساس (Sass): مقدمه، نصب و سینتکس Nesting Sass: Introduction - Installation - Nesting Syntax

• ساس: مقایسه scss و sass و متغیرها Sass: .scss Versus .sass - Variables

• ساس: دستورات import@ و extend@ Sass: @import and @extend Directives

• ساس: میکسین‌ها، عملگرها و توابع Sass: Mixins - Operators - Functions