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

HTML and CSS for Web Designers: From Basics to Beautiful

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: طراحی وب پاسخگو: تسلط بر HTML و CSS اصول HTML از جمله هدف آن، ساختار تگ های HTML و تاریخچه HTML و HTML5 را درک کنید. عناصر ضروری قالب‌بندی HTML مانند سرفصل‌ها، پاراگراف‌ها و تگ‌های قالب‌بندی مختلف را برای ایجاد محتوای وب با ساختار مناسب بررسی کنید. نحوه استفاده از تگ های HTML مرتبط با نقل قول، از جمله نقل قول های بلوکی، نقل قول های کوتاه و سایر عناصر معنایی برای استناد و مخفف محتوا را بیاموزید. در هنر ایجاد لینک‌ها در HTML، از جمله لینک‌های داخلی و خارجی، لینک‌های ایمیل، و پیوندهای پرش صفحه، در عین حال درک ویژگی‌های پیوند و غیره، مهارت در ترکیب تصاویر در صفحات وب با استفاده از HTML، بهینه‌سازی تصاویر برای نمایش وب، و اطمینان از دسترسی مناسب کسب کنید. بین عناصر HTML سطح بلوک و درون خطی تمایز قائل شوید و نقش آنها را در طرح بندی صفحه وب و ساختار محتوا درک کنید. نحوه ایجاد جداول در HTML5 از جمله استفاده از عناصر جدول، ویژگی ها و ساختار مناسب داده های جدولی را بیاموزید. عناصر رسانه‌ای HTML5، از جمله برچسب‌های ویدیویی و صوتی را کاوش کنید و نحوه جاسازی محتوای چندرسانه‌ای، از جمله ویدیوهای YouTube، در صفحات وب را بیابید. در ایجاد فرم‌های HTML، درک ویژگی‌های فرم و کار با انواع ورودی برای جمع‌آوری داده‌های کاربر مهارت داشته باشید. استفاده از عناصر HTML معنایی را برای افزایش دسترسی و معنی محتوای وب، چه در تئوری و چه در عمل، بپذیرید. اصول CSS از جمله نقش آن در طراحی وب، انواع مختلف CSS و انتخابگرهای CSS برای استایل دادن به عناصر HTML را معرفی کنید. اصول CSS، از جمله مدل جعبه، سایه جعبه، شعاع حاشیه، شبکه CSS، و flexbox را برای یک ظاهر طراحی کاربردی صفحه وب کاوش کنید. با کار با فونت‌های گوگل، فونت‌های سفارشی و ویژگی‌های تایپوگرافی CSS برای بهبود ارائه متن، به تایپوگرافی در طراحی وب بپردازید. در هنر استفاده از تصاویر پس‌زمینه و گرادیان‌ها در CSS برای ایجاد پس‌زمینه‌های وب جذاب و قابل تنظیم بصری مسلط شوید. مهارت‌های آموخته‌شده در بخش‌های قبلی را برای ایجاد یک وب‌سایت تک صفحه‌ای کامل، از جمله ناوبری، بخش‌های قهرمان و بخش‌های محتوا، به کار ببرید. اصول طراحی وب ریسپانسیو را با استفاده از پرسش های رسانه ای بیاموزید و یک منوی واکنش گرا برای پروژه وب خود ایجاد کنید. برای افزودن تعامل و جذابیت بصری به عناصر وب، تبدیل‌ها و انیمیشن‌های CSS3 را کاوش کنید. تکنیک های پیشرفته طراحی وب را کشف کنید، از جمله پیاده سازی یک نوار لغزنده و یک لایت باکس گالری با استفاده از کتابخانه های جاوا اسکریپت. بیاموزید که چگونه صفحات وب را با استفاده از ابزارهای توسعه دهنده مرورگر و روش های تشخیص ویژگی تست و اشکال زدایی کنید و از سازگاری بین مرورگرها اطمینان حاصل کنید. دانش به دست آمده در طول دوره را برای ایجاد یک پروژه وب سایت تک صفحه ای دیگر به کار ببرید، که نشان دهنده مهارت در طراحی و توسعه وب است. پیش نیازها: بدون نیاز به تجربه برنامه نویسی. شما هر آنچه را که نیاز دارید یاد خواهید گرفت.

آیا مشتاق سفری خلاقانه به دنیای طراحی وب هستید؟ جلوترش رو نگاه نکن! دوره آموزشی "HTML و CSS برای طراحان وب: از مبانی تا زیبا" طراحی شده است تا شما را به مهارت ها و دانش ضروری مورد نیاز برای ایجاد صفحات وب خیره کننده و کاربر پسند مجهز کند.

در این دوره جامع، شما با یادگیری اصول اصلی HTML (زبان نشانه گذاری فرامتن) و CSS (برگ های سبک آبشاری) از ابتدا شروع خواهید کرد. چه یک مبتدی کامل باشید و چه تجربه قبلی داشته باشید، ما شما را در تمام مراحل فرآیند طراحی وب، از ایجاد کدهای HTML تمیز و ساختاریافته تا اعمال سبک های زیبای CSS، راهنمایی می کنیم.


نکات برجسته دوره:

  • تسلط بر HTML: درک کاملی از HTML، از جمله تاریخچه، برچسب‌ها، ویژگی‌ها و هنر قالب‌بندی محتوای وب به دست آورید.

  • سبک‌سازی CSS: دنیای CSS را کاوش کنید، با تسلط بر مفاهیم اساسی مانند مدل جعبه، تایپوگرافی، سفارشی‌سازی پس‌زمینه، و تکنیک‌های طراحی واکنش‌گرا.

  • یادگیری مبتنی بر پروژه: دانش جدید خود را با ایجاد پروژه‌های دنیای واقعی، از جمله یک وب‌سایت تک صفحه‌ای، برای نشان دادن مهارت‌های خود به کار ببرید.

  • عناصر تعاملی: بیاموزید که چگونه صفحات وب خود را با تغییرات CSS3، انیمیشن‌ها و استفاده از کتابخانه‌های جاوا اسکریپت زنده کنید.

  • دسترسی و معناشناسی: اهمیت HTML معنایی و دسترسی به وب برای ایجاد وب‌سایت‌های جامع و کاربرپسند را کشف کنید.

  • آزمایش و اشکال‌زدایی: مهارت‌های ضروری را در آزمایش، اشکال‌زدایی، و اطمینان از سازگاری بین مرورگرها برای یک تجربه وب یکپارچه کسب کنید.


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

مقدمه 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

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش HTML و CSS برای طراحان وب: از اصول اولیه تا زیبا
جزییات دوره
8 hours
103
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,050
4.5 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Mehmood Khalil Mehmood Khalil

مدرس توسعه وب Full Stack | مهندس نرم افزار