آموزش HTML و CSS برای طراحان وب: از اصول اولیه تا زیبا

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

مقدمه HTML HTML Introduction

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

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

• تگ های HTML HTML Tags

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

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

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

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

قالب بندی HTML HTML Formatting

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

• سرفصل ها Headings

• پاراگراف Paragraph

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

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

نقل قول HTML HTML Quotation

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

• برچسب Blockquote Blockquote Tag

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

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

• تگ آدرس Address Tag

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

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

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

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

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

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

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

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

• پیوند پرش صفحه یا هایپرلینک نشانک Page jump Hyperlink or Bookmark Hyperlink

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

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

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

تصاویر HTML HTML Images

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

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

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

سطح بلوک HTML و سطح درون خطی HTML Block Level & Inline Level

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

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

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

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

جدول HTML HTML Table

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

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

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

رسانه HTML HTML Media

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

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

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

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

• جاسازی ویدیوهای یوتیوب در صفحه وب HTML Embedding YouTube Videos in HTML Web Page

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

فرم های HTML HTML Forms

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

• اشکال و ویژگی های آن Forms and Its Attributes

• عنصر فرم Form Element

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

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

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

عناصر معنایی HTML HTML 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

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

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

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

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

پس زمینه و تصاویر Backgrounds and Images

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

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

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

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

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

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

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

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

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

• نوار ناوبری Navigation Bar

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

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

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

• بخش تماس Contact Section

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

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

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

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

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

تبدیل CSS و انیمیشن ها CSS Transformation and Animations

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

• تبدیل CSS CSS Transformation

• انتقال CSS CSS Transitions

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

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

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

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

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

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

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

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

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

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

• Chrome Inspect Element و Developer Tools Chrome Inspect Element and Developer Tools

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

وب سایت تک صفحه ای دیگری بسازید - Project-2 Make Another Single Page Website - Project-2

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