طراحی سایت مدرن با Bootstrap ،Tailwind ،HTML/CSS

  • مدت: ۸۰ ساعت

این دوره مناسب شماست اگر...

هر مبتدی که می خواهد به عنوان طراح وب شغل خود را ایجاد کند ، می تواند در این دوره شرکت کند.

  • علاقمندان به طراحی سایت
  • پشتیبان کننده های سایت
  • طراحان و توسعه دهندگان وب

بعد از این دوره چه کاری می‌توانم انجام دهم؟

  • تسلط بر ساختاردهی صفحات وب با HTML
  • طراحی و استایل‌دهی حرفه‌ای صفحات با CSS
  • ساخت صفحات Responsive برای موبایل، تبلت و دسکتاپ
  • آشنایی با سیستم Grid و کامپوننت‌های آماده در Bootstrap
  • طراحی سریع‌تر رابط کاربری با Utility Classهای Tailwind CSS
  • توانایی تبدیل طرح‌های گرافیکی و UI به صفحات واقعی وب
  • آشنایی با اصول طراحی رابط‌های مدرن، منظم و قابل توسعه
  • کسب آمادگی برای ادامه مسیر در حوزه Front-End Development

سرفصل‌ها

web design 1
  • معرفی DOCTYPE
  • آموزش روش آماده سازی بستر طراحی وب و نرم افزارهای مربوطه
  • معرفی Project Structure در طراحی وب
  • ارائه طبقه بندی تگ ها مانند Test Level و Block Level و …
  • بررسی نکات مربوط به List ها
  • بررسی پاراگراف ها، Span و کلیه تگ های طبقه بندی شده
  • معرفی مفهوم Attribute
  • معرفی مفهوم Comment و دلائل استفاده از آن
  • معرفی و ارائه مثال از تگ های مربوط به هر طبقه بندی
  • بررسی استانداردهای نامگذاری المان ها
  • بررسی مفهوم Validation در اسناد Html
  • معرفی CSS
  • بررسی نقش CSS در آرایش تگ ها
  • بررسی نکات مربوط به فونت مانند Size و Weight و …
  • معرفی انواع فونت ها و پسوندهای مربوطه
  • بررسی Icon ها و فونت های گوگل
  • بررسی روش استفاده از کاراکترهای خاص در سند HTML
  • معرفی مفهوم Hyper Link و نکات مربوط به Navigation
  • آشنایی با مفهوم Anchor و Hash
  • ایجاد Shortcut برای لینک ها
  • بررسی Site Map و روش ایجاد آن
  • بررسی روش ایجاد منو و انواع آن
  • بررسی روش های مختلف آدرس دهی لینک ها مثلا Internal و External
  • بررسی نکات جدید HTML5 در مورد لینک ها مانند Download
  • بررسی تگ Table و اجزا مختلف آن
  • بررسی معایب و مزایای Table
  • بررسی نحوه استفاده از Table برای چیدمان
  • بررسی نحوه اختصاص اندازه به المانها
  • معرفی قابلیت های Design Envirement مانند منوها و قسمت های مختلف Dream Weaver
  • بررسی روش های مختلف اعمال Style روی تگ ها مانند Inline، Internal، External
  • معرفی انواع Selector ها در CSS
  • بررسی نحوه استفاده از تصاویر در سند HTML
  • بررسی انواع File Path
  • بررسی مفهوم Save/Export For Web
  • بررسی نحوه Load شدن تصاویر
  • بررسی پسوندهای مختلف تصاویر
  • بررسی تصاویرPNG و مشکلات نمایشی مرورگرها
  • بررسی نکات مربوط به تصاویر مانند Transparency
  • بررسی Image Map
  • بررسی نحوه ویرایش و بهینه سازی تصاویر برای وب با نرم افزارهای مربوطه
  • بررسی نحوه استفاده از تصاویر در Background
  • بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و …
  • بررسی نحوه استفاده از صدا و تصویر در Background
  • معرفی IFrame و روش استفاده از آن
  • بررسی روش استفاده از Google Map و سایر موارد مرتبط با IFrame
  • ایجاد انیمیشن با تصاویر و ابزارهای مربوطه
  • بررسی نحوه استفاده از رنگ
  • بررسی نحوه استفاده از فونت
  • بررسی نکات مربوط به Formatting در Table
  • بررسی نکات جدید HTML5 در جداول
  • بررسی مفهوم Layout های Tableless
  • بررسی Div و نکات مربوطه در حیطه Positioning
  • بررسی روش های تقسیم بندی صفحه
  • بررسی مفهوم Margin و Padding
  • بررسی Border و نکات مربوطه
  • بررسی نکات مربوط به Text مانند Direction ، Decoration، Align و …
  • بررسی نکات مربوط به Positioning در css
  • بررسی نکات حرفه ای تر css مانند Animation و Translation
  • بررسی انواع Effect ها در CSS3
  • بررسی انواع Layout ها
  • بررسی Localization برای زبانهای RTL
  • معرفی مفهوم Float و Absolute و…
  • معرفی مفاهیم مرتبط با Boxing
  • بررسی Form و انواع Input ها
  • معرفی تگ های مفهومی HTML5 مانند مفاهیم موارد زیر
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
  • و بررسی نقش هر یک
  • بررسی امکانات مرتبط با شبکه های اجتماعی
  • طرح مشکل نمایش وب سایت در مرورگرهای متفاوت و نکات مربوطه
  • بررسی Drag & Drop
  • بررسی Canvas و نحوه استفاده از آن
  • بررسی SVG و نحوه استفاده از آن
  • معرفی Edge و Illusttator و کاربرد آنها
  • معرفی Mute و کاربرد آن
web design 2
  • طراحی وب سایت با کد های css و bootstrap
  • طراحی وی سایت ریسپانسیو / واکنشگرا ( نمایش صحیح و بهینه صفحات وب در کامپیوتر ، تبلت ، موبایل و …) با کدهای css و همچنین به کمک bootstrap
  • اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایت ( ux)
  • پیاده سازی وب سایت بر اساس هارمونی در طرح ، رنگ و چیدمان

درباره دوره

تو این دوره با مفاهیم اصلی طراحی صفحات وب آشنا می‌شی و یاد می‌گیری با HTML و CSS ساختار و ظاهر سایت رو از پایه پیاده‌سازی کنی. بعد با Bootstrap و Tailwind CSS کار می‌کنی تا بتونی صفحات مدرن، واکنش‌گرا و مرتب‌تری بسازی و روند طراحی رابط کاربری رو سریع‌تر و حرفه‌ای‌تر پیش ببری.

در طول دوره، تمرکز فقط روی یادگیری کدها نیست؛ بلکه با ساخت صفحات واقعی و استفاده از ابزارهای پرکاربرد فرانت‌اند، کم‌کم به تسلطی می‌رسی که بتونی طرح‌های مختلف رو به صفحات وب تبدیل کنی.

موضوعات دوره

web design 1:

    • معرفی DOCTYPE
    • آموزش روش آماده سازی بستر طراحی وب و نرم افزارهای مربوطه
    • معرفی Project Structure در طراحی وب
    • ارائه طبقه بندی تگ ها مانند Test Level و Block Level و ...
    • بررسی نکات مربوط به List ها
    • بررسی پاراگراف ها، Span و کلیه تگ های طبقه بندی شده
    • معرفی مفهوم Attribute
    • معرفی مفهوم Comment و دلائل استفاده از آن
    • معرفی و ارائه مثال از تگ های مربوط به هر طبقه بندی
    • بررسی استانداردهای نامگذاری المان ها
    • بررسی مفهوم Validation در اسناد Html
    • معرفی CSS
    • بررسی نقش CSS در آرایش تگ ها
    • بررسی نکات مربوط به فونت مانند Size و Weight و ...
    • معرفی انواع فونت ها و پسوندهای مربوطه
    • بررسی Icon ها و فونت های گوگل
    • بررسی روش استفاده از کاراکترهای خاص در سند HTML
    • معرفی مفهوم Hyper Link و نکات مربوط به Navigation
    • آشنایی با مفهوم Anchor و Hash
    • ایجاد Shortcut برای لینک ها
    • بررسی Site Map و روش ایجاد آن
    • بررسی روش ایجاد منو و انواع آن
    • بررسی روش های مختلف آدرس دهی لینک ها مثلا Internal و External
    • بررسی نکات جدید HTML5 در مورد لینک ها مانند Download
    • بررسی تگ Table و اجزا مختلف آن
    • بررسی معایب و مزایای Table
    • بررسی نحوه استفاده از Table برای چیدمان
    • بررسی نحوه اختصاص اندازه به المانها
    • معرفی قابلیت های Design Envirement مانند منوها و قسمت های مختلف Dream Weaver
    • بررسی روش های مختلف اعمال Style روی تگ ها مانند Inline، Internal، External
    • معرفی انواع Selector ها در CSS
    • بررسی نحوه استفاده از تصاویر در سند HTML
    • بررسی انواع File Path
    • بررسی مفهوم Save/Export For Web
    • بررسی نحوه Load شدن تصاویر
    • بررسی پسوندهای مختلف تصاویر
    • بررسی تصاویرPNG و مشکلات نمایشی مرورگرها
    • بررسی نکات مربوط به تصاویر مانند Transparency
    • بررسی Image Map
    • بررسی نحوه ویرایش و بهینه سازی تصاویر برای وب با نرم افزارهای مربوطه
    • بررسی نحوه استفاده از تصاویر در Background
    • بررسی نکات مربوط به استفاده از تصاویر در Background مانند Repeat و ...
    • بررسی نحوه استفاده از صدا و تصویر در Background
    • معرفی IFrame و روش استفاده از آن
    • بررسی روش استفاده از Google Map و سایر موارد مرتبط با IFrame
    • ایجاد انیمیشن با تصاویر و ابزارهای مربوطه
    • بررسی نحوه استفاده از رنگ
    • بررسی نحوه استفاده از فونت
    • بررسی نکات مربوط به Formatting در Table
    • بررسی نکات جدید HTML5 در جداول
    • بررسی مفهوم Layout های Tableless
    • بررسی Div و نکات مربوطه در حیطه Positioning
    • بررسی روش های تقسیم بندی صفحه
    • بررسی مفهوم Margin و Padding
    • بررسی Border و نکات مربوطه
    • بررسی نکات مربوط به Text مانند Direction ، Decoration، Align و ...
    • بررسی نکات مربوط به Positioning در css
    • بررسی نکات حرفه ای تر css مانند Animation و Translation
    • بررسی انواع Effect ها در CSS3
    • بررسی انواع Layout ها
    • بررسی Localization برای زبانهای RTL
    • معرفی مفهوم Float و Absolute و...
    • معرفی مفاهیم مرتبط با Boxing
    • بررسی Form و انواع Input ها
    • معرفی تگ های مفهومی HTML5 مانند مفاهیم موارد زیر
    • <article>
    • <aside>
    • <details>
    • <figcaption>
    • <figure>
    • <footer>
    • <header>
    • <main>
    • <mark>
    • <nav>
    • <section>
    • <summary>
    • <time>
    • و بررسی نقش هر یک
    • بررسی امکانات مرتبط با شبکه های اجتماعی
    • طرح مشکل نمایش وب سایت در مرورگرهای متفاوت و نکات مربوطه
    • بررسی Drag & Drop
    • بررسی Canvas و نحوه استفاده از آن
    • بررسی SVG و نحوه استفاده از آن
    • معرفی Edge و Illusttator و کاربرد آنها
    • معرفی Mute و کاربرد آن

web design 2:

      • طراحی وب سایت با کد های css و bootstrap
      • طراحی وی سایت ریسپانسیو / واکنشگرا ( نمایش صحیح و بهینه صفحات وب در کامپیوتر ، تبلت ، موبایل و ...) با کدهای css و

همچنین به کمک bootstrap

    • اصول ایجاد تجربه کاربری مطلوب برای بازدید کننده وبسایت ( ux)
    • پیاده سازی وب سایت بر اساس هارمونی در طرح ، رنگ و چیدمان

انتخاب دوره و ثبت‌نام

در حال حاضر گزینه‌ای برای ثبت‌نام در دسترس نیست.

از کلاس بعدی این دوره باخبر شوید

اطلاعات خود را بگذارید تا کارشناسان کندو برای کلاس بعدی با شما تماس بگیرند.

فیلد های "(اجباری)" اجباری هستند

نظر کاربران

۱ نظر

  1. من دو سال پیش تو همین آموزشگاه دانشجوی استاد پورسادات عزیز بودم و دوره‌های وب رو از ایشان یاد گرفتم. به نظرم برای کسایی که هیچ آشنایی با کد زنی ندارند این دوره خیلی می‌تونه کمکشون کنه. تدریس استاد هم خیلی خوبه و بعدش کلا به خود طرف بستگی داره که چقدر تلاش کنه. از محیط بخوام بگم باید بگم خوبه اما نمی‌دونم الان چجوریه، اما آن زمان جا داشت بهترم بشه.

    محمدرضا