مروری بر دوره
در این دوره ابتدا با اصول اولیه و اصطلاحات و ابزارهای مورد نیاز با این تخصص آشنا میشویم سپس با فراگیری اصول تجربه کاربری شروع به ایجاد قالب وب سایت با استفاده از نرم افزار فیگما میکنیم بعد از این مراحل وارد مرحله کد نویسی میشویم. ابتدا با اصول html آشنا شده بعد به کمک css طرح دلخواه خود را پیاده میکنیم سپس با استفاده از ۳ html & css جلوه های پیشرفته به قالب اضافه میکنیم در نهایت با فراگیری اصول اولیه جاوا اسکریپت و آشنایی با jQuery پروژه خود را نهایی میکنیم. در جلسات پایانی این دوره شما با فریم ورکهای پرکاربرد طراحی وب آشنا خواهید شد.
.
آنچه خواهید آموخت
- آشنایی کامل با مفاهیم پایه ای و اصطلاحات طراحی وب
- کار با ابزارهای تخصصی طراحی ادیتورها مرورگرها هاست دامنه و....
- آشنایی با اصول تجربه کاربری (UX) و طراحی رابط کاربری (UI) با Figma
- کدنویسی حرفه ای صفحات وب با HTML5 و CSS3
- پیاده سازی صفحات ریسپانسیو با Flexbox Grid و Media Queries
- آشنایی با اصول اولیه برنامه نویسی با JavaScript و jQuery
- کار با فرم ها، جداول، منوها و عناصر پیشرفته در وب
- استفاده از هوش مصنوعی در طراحی و تولید کد
- آشنایی مقدماتی با فریمورک Bootstrap برای طراحی واکنشگرا
- آشنایی اولیه با WordPress و ساخت وب سایتهای داینامیک
- رعایت نکات دسترس پذیری (Accessibility) و بهینه سازی کد
- آماده سازی پروژه های واقعی و نهایی سازی طراحی وب
سرفصل ها
ابتدا با اصول اولیه و اصطلاحات مربوط به طراحی وب سایت آشنا میشویم
- آشنایی با اصطلاحات رایج در دنیای وب
- ابزارهای لازم برای طراحی وب ادیتورها، مرورگرها، FTP ...
- انتخاب دامنه مناسب و نکات ثبت آن
- فضای میزبانی (هاستینگ) و آشنایی با پنلهای مدیریت هاست
- آشنایی اولیه با قراردادهای طراحی سایت
- روان شناسی رنگها و اصول انتخاب رنگ در طراحی وب
- معرفی محیطهای کدنویسی و مقایسه آنها
- مروری بر مفاهیم اولیه دیجیتال مارکتینگ برای طراحان وب
سپس شروع به فراگیری اصول کدنویسی HTML خواهیم نمود
- معرفی HTML و تاریخچه آن
- بررسی نسخه های مختلف HTML
- ساختار صفحات HTML :
- تگهای اصلی <head> و <body>
- عنوانها (<h1> تا h6>
- پاراگراف ها (<p>)
- لینک ها (<a>)
- تصاویر (<img>)
- لیست ها و جدول ها
- تگ های رسانه ای :
- ویدیو (<Video>)
- صدا (<audio>)
- فریم های خارجی (<iframe>)
- تگهای معنایی و ظرف ها (Containers)
- استفاده از <div> و <span> برای ساختاردهی
- بررسی عناصر معنایی مثل <section>, <article>, <nav>, <header> <footer>
- تفاوت عناصر درون خطی (Inline) و بلوکی (Block)
- ساخت فرم ها و صفحات چندگانه
- اعتبار سنجی (Validate) کدهای HTML و بررسی خطاها
پس از آشنایی با html شروع به یادگیری css خواهیم کرد
- آشنایی با CSS و روشهای افزودن آن به صفحات HTML :
- Inline, Internal, External
- انواع سلکتورها (Selectors)
- سلکتورهای پایه (Basic Selectors)
سلکتورهای نسبی (Relational Selectors: descendant, child, sibling)
سلکتورهای شبه کلاس (Pseudo-class Selectors: :hover, :nth-child)
سلکتورهای شبه عنصر (Pseudo-element Selectors: ::before, ::after)
- مفاهیم Value و Property در CSS
- وراثت (Inheritance) و اختصاص‌پذیری (Specificity) :
- ترتیب و اولویت استایل‌ها
- مفهوم !important
- مدل جعبه‌ای (Box Model) :
- محتوا، padding، margin، border
- نحوه محاسبه اندازه عنصر
- ابعاد و موقعیت‌دهی عناصر
- ویژگی display (block, inline, inline-block, none)
- ویژگی position (static, relative, absolute, fixed, sticky)
- ویژگی float و clear
- واحدهای اندازه‌گیری (px, %, em, rem, vw, vh)
- مخفی‌سازی عناصر (display: none, visibility: hidden, opacity)
- ابزارهای مدرن چیدمان
- ساختار flexbox
- ساختار grid
- Media Queries برای طراحی واکنشگرا
- استایل‌دهی به عناصر مختلف :
- متن‌ها (تایپوگرافی)
- لیست‌ها
- فرم‌ها
- جدول‌ها
- تصاویر
- لینک‌ها
- رنگها و پس‌زمینه‌ها در CSS
- انواع رنگها (RGB, HEX, HSL)
- گرادیان‌ها (Linear و Radial)
- سایه‌ها (text-shadow, box-shadow)
- حاشیه‌ها (borders)
- ساخت منوهای آبشاری با CSS
- طراحی فرم‌ها و جداول پیشرفته
- استایل‌دهی برای چاپ (Print Stylesheet)
- اعتبارسنجی و رفع خطاهای رایج در CSS
- مفاهیم دسترس‌پذیری (Accessibility) در استایل‌دهی
مباحث HTML5 و CSS3
- معرفی HTML5 و ساختار جدید آن
- تگهای معنایی جدید: header, footer, section, article, nav, aside
- فرم‌های پیشرفته در HTML5 و فیلدهای جدید
- اضافه کردن فونت سفارشی (web fonts) و تایپوگرافی
- کار با تگهای svg و canvas
- آشنایی با APIهای HTML5 و پشتیبانی مرورگرها
- ترنزیشن‌ها، انیمیشن‌ها، Transformها
- بررسی تفاوت مرورگرها و مشکلات رایج در نمایش CSS3
ریسپانسیو
- معرفی Bootstrap و استفاده از آن در طراحی صفحات
- معرفی افزونه‌ها و ابزارهای مفید توسعه فرانت‌اند
مباحث مربوط به Figma
- کاربردپذیری
- المان‌های یک application
- نحوه کار با Figma
کاربرد هوش مصنوعی در طراحی وب
- هوش مصنوعی چیست و چرا در طراحی وب مهم است؟
- نگاهی به آینده طراحی وب با کمک AI
- معرفی ابزارهای تولید کد با AI مثل GitHub Copilot، Codeium
- ابزارهای تولید تصویر و طراحی رابط کاربری مثل Figma AI
سپس به یادگیری jQuery و آشنایی با وردپرس می‌پردازیم
سوالات متداول
بله، این دوره از صفر شروع می‌شود و تمام اصول پایه‌ای HTML، CSS و طراحی وب را پوشش می‌دهد. حتی اگر هیچ تجربه‌ای در طراحی وب نداشته باشید، می‌توانید با این دوره شروع کنید.
برای شروع دوره شما به نرم‌افزارهای ساده‌ای مانند مرورگر وب و یک ویرایشگر کد مثل VSCode نیاز خواهید داشت. در مراحل پیشرفته‌تر ممکن است به ابزارهایی مانند Figma و Git نیز نیاز پیدا کنید.
خیر، پیش‌نیاز خاصی برای این دوره وجود ندارد. اما اگر با مفاهیم پایه‌ای کامپیوتر و اینترنت آشنا باشید، یادگیری برای شما راحت‌تر خواهد بود.
در این دوره تمرکز اصلی بر روی HTML، CSS و طراحی وب است. با این حال، در بخش‌های پایانی دوره با اصول ابتدایی JavaScript و فریم‌ورک‌های طراحی وب آشنا خواهید شد.
بله، این دوره تمام مهارت‌های لازم برای شروع به عنوان یک طراح وب را به شما می‌دهد. با این حال، برای دستیابی به موقعیت‌های شغلی بیشتر ممکن است نیاز به تجربه و انجام پروژه‌های بیشتری داشته باشید.
به عنوان اولین نفر، نظر خود را بنویسید!