لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش 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
یودمی یکی از بزرگترین پلتفرمهای آموزشی آنلاین است که به میلیونها کاربر در سراسر جهان امکان دسترسی به دورههای متنوع و کاربردی را فراهم میکند. این پلتفرم امکان آموزش در زمینههای مختلف از فناوری اطلاعات و برنامهنویسی گرفته تا زبانهای خارجی، مدیریت، و هنر را به کاربران ارائه میدهد. با استفاده از یودمی، کاربران میتوانند به صورت انعطافپذیر و بهینه، مهارتهای جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.
یکی از ویژگیهای برجسته یودمی، کیفیت بالای دورهها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد میدهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و میتوانند به بهترین شکل ممکن از آموزشها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرمهای آموزشی آنلاین، به افراد امکان میدهد تا به راحتی و با کیفیت، مهارتهای مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.
نمایش نظرات