آموزش وب سایت های واکنش گرا با HTML و CSS مدرن با Sass بسازید

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

معرفی Introduction

• 01. مقدمه 01. Introduction

بررسی اجمالی پروژه Project Overview

• نمای کلی پروژه HTML و CSS HTML & CSS Project Overview

• بررسی اجمالی پروژه SASS SASS Project Overview

• نمای کلی پروژه نمونه کارها Portfolio Project Overview

02. آماده سازی اولیه 02. Basic Preparation

• راه اندازی محیط توسعه وب Setup Web Development Environment

03. آموزش ضروری HTML 03. HTML Essential Training

• مقدمه های HTML HTML Introductions

• عناصر HTML HTML Elements

• ویژگی های HTML HTML Attributes

• سرفصل های HTML HTML Headings

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

• سبک های HTML HTML Styles

• قالب بندی متن HTML HTML Text Formatting

• نقل قول HTML HTML Quotation

• نظرات HTML HTML Comments

• رنگ های HTML HTML Colors

• سبک های HTML - CSS HTML Styles - CSS

• لینک های HTML HTML Links

• تصاویر HTML HTML Images

• فاویکون HTML HTML Favicon

• عنوان صفحه HTML HTML Page Title

• جداول HTML HTML Tables

• لیست های HTML HTML Lists

• بلوک HTML و عناصر درون خطی HTML Block and Inline Elements

• HTML Div Element HTML Div Element

• ویژگی کلاس HTML HTML class Attribute

• ویژگی HTML id HTML id Attribute

• HTML Iframes HTML Iframes

• فرم های HTML HTML Forms

• رسانه HTML HTML Media

• پیاده سازی HTML JavaScript HTML JavaScript implementation

• مسیرهای فایل HTML HTML File Paths

• عنصر سر HTML HTML Head Element

• عناصر چیدمان HTML HTML Layout Elements

• طراحی وب سایت واکنشگرا HTML HTML Responsive Web Design

• اشتباهات HTML برای جلوگیری از HTML Mistakes to Avoid

• بعد چه می شود؟ What's Next?

04. CSS3 Essential Training 04. CSS3 Essential Training

• 01. CSS مقدمه 01. CSS Introduction

• نحو CSS CSS Syntax

• 03. انتخابگرهای CSS 03. CSS Selectors

• 04. نحوه اضافه کردن CSS 04. How To Add CSS

• 05. نظرات CSS 05. CSS Comments

• 06. رنگ و پس زمینه CSS 06. CSS Color & Backgrounds

• 07. مرزهای CSS 07. CSS Borders

• 08. CSS Margins & Padding 08. CSS Margins & Padding

• 09. ارتفاع و عرض CSS 09. CSS Height and Width

• 10. متن CSS 10. CSS Text

• 11. فونت های CSS 11. CSS Fonts

• 12. پیوندهای CSS 12. CSS Links

• 13. لیست های CSS 13. CSS Lists

• 14. جداول CSS 14. CSS Tables

• 15. ویژگی موقعیت CSS 15. CSS position Property

• 16. CSS z-index Property 16. CSS z-index Property

• 17. سرریز CSS 17. CSS Overflow

• 18. شناور CSS 18. CSS float

• 19. CSS شبه کلاس و عناصر 19. CSS Pseudo Class and Elements

• 20. کدورت CSS 20. CSS Opacity

• 21. CSS Navigation Bar 21. CSS Navigation Bar

• 22. فرم CSS 22. CSS Form

• 23. پس زمینه های متعدد 23. Multiple Backgrounds

• 24. گرادیان های CSS 24. CSS Gradients

• 25. CSS Shadow Effects 25. CSS Shadow Effects

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

• 27. CSS Transforms And Transitions 27. CSS Transforms And Transitions

• 28. انیمیشن CSS 28. CSS Animation

• 29. CSS Box Sizing Property 29. CSS Box Sizing Property

• 30. CSS Media Queries 30. CSS Media Queries

• 31. CSS Flex Container 31. CSS Flex Container

• 32. CSS Grid 32. CSS Grid

• 33. متغیرهای CSS 33. CSS Variables

05. نکات و ترفندهای اضافی 05. Extra Tips and Tricks

• 01. حل مسائل رنگ 01. Solving color problems

• میانبرهای صفحه کلید VS Code VS Code Keyboard Shortcuts

• 02. فونت عالی 02. Font Awesome

• 03. منابع اضافی 03. Extra Resources

• 04. ابزارهای توسعه دهنده کروم 04. Chrome Developer Tools

• 05. میانبرهای کد VS 05. VS Code Shortcuts

• چگونه یک بخش را در مرکز قرار دهیم How to Center A Div

• وب سایت های CSS مفید Useful CSS websites

• انتخابگر فرزند نهم در CSS nth Child Selector in CSS

06. ایجاد یک پروژه از ابتدا 06. Creating A Project from Scratch

• 01. جمع آوری منابع برای پروژه 01. Collecting resources for the project

• 02. ایجاد ناحیه Top Header 02. Creating Top Header area

• 03. ایجاد ناحیه سربرگ 03. Creating Header Area

• 04. ایجاد منطقه بنر 04. Creating Banner Area

• 05. ایجاد منطقه خدمات 05. Creating Service Area

• 06. ایجاد بخش تماس با ما 06. Creating Contact Area Section

• 07. ایجاد منطقه پاورقی 07. Creating Footer Area

• 08. اضافه کردن منوی موبایل برای وب سایت واکنش گرا 08. Adding Mobile menu for Responsive Website

• 09. ایجاد وب سایت ما برای موبایل دوستانه پاسخگو 09. Creating our website Mobile Friendly Responsive

• 10. زنده کردن وب سایت 10. Making the website live

07. آموزش SCSS 07. SCSS Tutorial

• 01. SASS مقدمه 01. SASS Introduction

• 02. مبانی SASS 02. SASS Basics

• 03. ایجاد یک بخش با SASS 03. Creating a section with SASS

• 04. مدیریت فایل های SASS 04. Managing SASS Files

• 05. SASS mixin 05. SASS mixin

• 06. SASS Extend & Oparetor 06. SASS Extend & Oparetor

• 07. تابع SASS 07. SASS Function

08. ایجاد یک پروژه SASS 08. Creating A SASS Project

• 01. جمع آوری منابع برای پروژه 01. Collecting resources for the project

• 02. ایجاد قسمت بالای سرصفحه 02. Creating Top Header Area

• 03. ایجاد ناحیه سربرگ 03. Creating Header Area

• 04. ایجاد منطقه قهرمان 04. Creating Hero Area

• 05. ایجاد بخش پرداخت 05. Creating Checkout Section

• 06. ایجاد منطقه درباره ما 06. Creating About Us Area

• 07. ایجاد منطقه چرا 07. Creating Why Area

• 08. ایجاد منطقه زندگی 08. Creating Living Area

• 09. ایجاد منطقه تماس 09. Creating Contact Area

• 10. ایجاد منطقه پاورقی 10. Creating Footer Area

• 11. طراحی واکنشگرا 11. Responsive Design

پروژه نمونه کارها Portfolio Project

• 01. راه اندازی پوشه کار 01. Setup Work Folder

• 02. ناحیه سربرگ 02. Header Area

• 03. منطقه قهرمان 03. Hero Area

• 04. منطقه خدمات 04. Service Area

• 05. منطقه نمونه کارها 05. Portfolio Area

• 06. منطقه گواهی 06. Testimonial Area

• 07. منطقه تماس 07. Contact Area

• 08. منطقه پاورقی 08. Footer Area

• 09 طراحی واکنشگرا 09 Responsive Design

بعدش چی؟ What's next?

• بعدش چی؟ What's next?