تسلط بر طراحی وب: HTML، CSS و هوش مصنوعی مولد

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

شروع کار با HTML Getting Started with HTML

• ساختار اصلی یک سند HTML Basic Structure of an HTML Document

• مقدمه ای بر برچسب ها، عناصر و ویژگی ها Introduction to tags, elements, and attributes

• قالب بندی متن و هایپرلینک ها Text Formatting and Hyperlinks

• با استفاده از عناصر سطح درون خطی و بلوک Using inline and Block level elements

• تمرینات را با قالب بندی متن و پیوند دادن تمرین کنید Practice exercises with text formatting and linking

کار با لیست ها، جداول و فرم ها با ابزارهای مختلف هوش مصنوعی Working with Lists , Tables and Forms with different AI tools

• ایجاد لیست ها و جداول در اسناد HTML Creating lists and tables in HTML documents

• مقدمه ای بر فرم ها Introduction to Forms

• درک تگ های <form>، <input>، <textarea>، <button> Understanding <form>, <input>, <textarea>, <button> tags

• ساخت فرم های اولیه برای ورودی کاربر Building basic forms for user input

معرفی CSS با استفاده از ChatGPT Introduction to CSS using ChatGPT

• یک ظاهر طراحی اولیه با CSS Basic Styling with CSS

• CSS داخلی، داخلی و خارجی Inline, Internal, and External CSS

• نحو و انتخابگرهای CSS CSS syntax and selectors

• تغییر اندازه فونت، رنگ، خانواده Changing font size, color, family

• مقدمه ای بر فونت های گوگل و فونت های سفارشی Introduction to Google Fonts and Custom Fonts

5. کار با رنگ ها و پس زمینه 5. Working with Colors and Backgrounds

• درک کدهای رنگ و مقادیر RGB Understanding color codes and RGB values

• اضافه کردن رنگ و تصاویر پس زمینه Adding background colors and images

• چیدمان و موقعیت یابی Layout and Positioning

درک ظروف فلکس و اقلام فلکس Bard, ChatGPT Understanding Flex Containers and Flex items Bard, ChatGPT

• معرفی مدل جعبه در (حاشیه، بالشتک، حاشیه) Introduction to box model in (margin, padding, border)

• تعیین موقعیت عناصر با CSS (نسبی، مطلق، ثابت) Positioning elements with CSS (relative, absolute, fixed)

مفاهیم پیشرفته HTML و CSS با هوش مصنوعی Advanced HTML and CSS Concepts with AI

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

• مقدمه ای بر پرسش های رسانه ای Introduction to Media Queries

• ایجاد طرح‌بندی‌های واکنش‌گرا Creating responsive layouts

شبکه CSS و انیمیشن ها با کمک هوش مصنوعی CSS Grid and Animations with help of AI

• درک گرید Understanding Grid

• ایجاد طرح بندی با CSS Grid Creating layouts with CSS Grid

• انتقال و انیمیشن های CSS CSS Transitions and Animations

• افزودن انیمیشن به عناصر با استفاده از CSS Adding animations to elements using CSS

• جلوه‌های انتقال روی شناور، کلیک و غیره Transition effects on hover, click, etc.

پیش پردازنده های CSS با استفاده از ChatGPT CSS Preprocessors using ChatGPT

• آشنایی با ابزارهایی مانند SASS Introduction to tools like SASS

• مزایا و استفاده در توسعه CSS Benefits and usage in CSS development

تمرین و کار پروژه با هوش مصنوعی Practice and Project Work with AI

• پروژه 1: وب سایت نمونه کارها شخصی Project 1: Personal Portfolio Website

• صفحه محصول تجارت الکترونیک E-commerce Product Page

• یکپارچه سازی فرم ها برای تعامل با کاربر (به عنوان مثال، افزودن به سبد خرید) Integrating forms for user interaction (e.g., add to cart)

منابع و یادگیری بیشتر Resources and Further Learning

• کتاب ها، آموزش ها و دوره های آنلاین توصیه شده Recommended books, tutorials, and online courses

• وب سایت ها و انجمن های مفید برای جامعه توسعه وب Useful websites and forums for web development community

• گزینه های آموزش مداوم برای تسلط بر HTML/CSS Continuing education options for mastering HTML/CSS

• تشویق به کشف موضوعات پیشرفته مانند جاوا اسکریپت و فریمورک ها Encouragement to explore advanced topics like JavaScript and frameworks

نتیجه گیری Conclusion

• خلاصه ای از یادگیری های کلیدی در HTML، CSS، و هوش مصنوعی تولیدی Recap of key learnings in HTML, CSS, and Generative AI

• سخنان پایانی تشویق و انگیزه برای توسعه دهندگان مشتاق وب Final words of encouragement and motivation for aspiring web developers