میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

آموزش طراحی سایت در تبریز

آموزش طراحی سایت در تبریز

آموزش طراحی سایت در تبریز

  • طراحی سایت چیست؟
  • چطور میتونم بدون اینکه اطلاعاتی در زمینه برنامه نویسی داشته باشم سایت طراحی کنم؟
  • آیا طراحی سایت ملزم به داشتن تحصیلات دانشگاهی میباشد؟
و هزاران سوال دیگر که ذهن شما را درگیر کرده است
  • جوابتان پیش ماست
ما در دوره های آموزشی طراحی سایت این امر را برای شما کاملا به صورت پروژه محور آموزش داده و شما را برای ورود به بازار کار آماده میکنیم تا بتوانید با استفاده دانش فنی به دست آمده کسب درآمد کنید. مواردی که در این دوره به شما آموزش میدهیم

سرفصل های آموزشی

معرفی پلاگین emmet

معرفی اکستنش های کاربردی ویژوال استودیو در بحث طراحی وب

معرفی google inspector tool

css reset و فشرده سازی فایل های css

 

قسمت اول – مقدمات و آشنایی با HTML

قسمت دوم – بررسی ساختار اسناد html و پیاده سازی چارچوب اولیه یک سند

قسمت سوم – بررسی مفهوم المان های block level و inline level و معرفی تگ های قالب دهی

قسمت چهارم – بررسی تگ های جدول , نقل قول و استناد

قسمت پنجم – بررسی تگ های تصویر و قالب دهی کد

قسمت ششم – بررسی تگ های مالتی مدیا در HTML5

قسمت هفتم- بررسی انواع تگ های input در HTML5

قسمت هشتم- بررسی انواع اتریبیوت ها برای input ها در HTML5

قسمت نهم- بررسی انواع تگ های مفهومی ( semantic web elements ) در HTML5 – اول

قسمت دهم- بررسی انواع تگ های مفهومی ( semantic web elements ) در HTML5 – دوم

 

معرفی – مقدمات و آشنایی با CSS

جلسه اول قواعد نوشتاری و مفهوم Selector

دوم مفهوم box model در CSS

سوم استایل دهی به متن در CSS – بخش اول

چهارم استایل دهی به متن در CSS – بخش دوم

پنجم فونت ها در طراحی

ششم – کار با پس زمینه ( background ) در css

هفتم – فونت آیکون ها در css

هشتم – لیست ها ( list ) و نمایش المان ها ( display )

نهم – شبه کلاس ها ( seudo classes ) و position – بخش اول

دهم – تکمیل مینی پروژه منو

یازدهم – شبه کلاس ها ( seudo classes ) و position – بخش دوم

دوازدهم – شبه عناصر ( seudo elements )

سیزدهم – gradient و border image در CSS

چهاردهم – filter , root و ماژولار نویسی css

پانزدهم – شناور سازی عناصر ( float )

شانزدهم – combinator و attribute سلکتور ها – بخش اول

هفدهم – شانزدهم – combinator و attribute سلکتور ها – بخش دوم

هجدهم – object-fit و vertically element center در css

نوزدهم – مقادیر اولیه و ارث بری عناصر فرزند – ( initial-inherit )

 

معرفی سر فصل طراحی رسپانیسو در CSS3

اول – آشنایی با طراحی رسپانسیو

دوم معرفی مدیا کوئری ها در css3

سوم – معرفی سیستم grid در طراحی رسپانسیو

چهارم – پیاده سازی grid system اختصاصی – شروع طراحی مینی فریم ورک css – بخش اول

پنجم – پیاده سازی grid system اختصاصی – شروع طراحی مینی فریم ورک css – بخش دوم

ششم – پیاده سازی grid system اختصاصی – شروع طراحی مینی فریم ورک css – بخش سوم

 

  اول – پروژه طراحی قالب رسپانسیو توسط css و html – ساختار پروژه

دوم – پروژه طراحی قالب رسپانسیو توسط css و html – منوی رسپانسیو

سوم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی هدر

چهارم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش دوره ها

پنجم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش دربارما

ششم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش مدرسین

هفتم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش مقالات

هشتم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش مقالات۲

نهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی منوی آکاردئونی

دهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی منوی آکاردئونی۲

یازدهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش فوتر – بخش اول

دوازدهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش فوتر – بخش دوم

سیزدهم – پروژه طراحی قالب رسپانسیو توسط css و html – مباحث تکمیلی

 

معرفی سر فصل انیمیشن ها در CSS3

اول – ۲D-transform در css

دوم – ۳D-transform در css

سوم – transition در css

چهارم – keyframe ها در انمیشن ها در css

پنجم – پروژه شماره ۱ – loading

ششم – پروژه شماره ۲ – flip card

هفتم – پروژه شماره ۳ – ماشین متحرک – بخش اول

اول – flexbox در css – آشنایی با flex در css

دوم – flexbox در css – ساختار ردیف و ستون

سوم – flexbox در css – تراز المان ها در راستای عرض و ارتفاع سند

چهارم – flexbox در css – تنظیم عرض عناصر و نحوه ترتیب چینش آنها

پنجم – flexbox در css – تراز المان ها فرزند در راستای عرض و ارتفاع والد

ششم- flexbox در css – مینی پروژه

  اول – grid در css – آشنایی با css grid

دوم – grid در css – مفاهیم css grid

سوم – grid در css – ایجاد سطرها و ستون ها توسط css grid

چهارم – grid در css – تراز المان ها در css grid

پنجم – grid در css – بخش بندی المان ها در css grid – بخش اول

ششم – grid در css – بخش بندی المان ها در css grid – بخش دوم

هفتم – grid در css – بخش بندی المان ها توسط مفهوم naming در css grid

هشتم – grid در css – مفهوم fraction و توابع در css grid

نهم – grid در css – پروژه

 

آشنایی با Git و چرایی استفاده از آن

نصب و شروع کار با گیت

کانفیگ کردن git

آشنایی با وضعیت فایل ها و LifeCycle در git

ایجاد و مدیریت انشعاب ها در پروژه (Git Branches)

رفع تداخل ها (Fix Conflicts)

مدل برنچینگ بهینه (Git Flow)

ثبت و نمایش تغیرات در git

برگردوندن و ریست کردن پروژه به یک کامیت خاص

آموزش Stashing در git

معرفی، کانفیگ و استفاده از GitLab

آشنایی با فایل gitignore و اهمیت اون

  اول – تایپوگرافی در طراحی وب – قسمت اول

دوم – تایپوگرافی در طراحی وب – قسمت دوم

سوم – تایپوگرافی در طراحی وب – قسمت دوم

چهارم – تایپوگرافی در طراحی وب – قسمت چهارم

پنجم – تایپوگرافی در طراحی وب – قسمت پنجم

ششم – تایپوگرافی در طراحی وب – قسمت ششم

 

اول- پروژه اول – منو افقی

دوم – پروژه دوم – منوی عمودی تمام صفحه

سوم – پروژه سوم – منوی تمام صفحه

چهارم – پروژه چهارم – سایدبار منو ( canvas menu )

پنجم – پروژه پنجم- اسلایدر تصاویر – بخش اول

ششم – پروژه پنجم – اسلایدر تصاویر – بخش دوم

هفتم – پروژه ششم – dropdown menu

هشتم – پروژه هفتم – split page with menu – بخش اول

نهم – پروژه هفتم – split page with menu – بخش دوم

دهم – پروژه هشتم – dropdown menu یا accordion menu

یازدهم – پروژه نهم – انمیشن متحرک – بخش اول

دوازدهم – پروژه نهم – انمیشن متحرک – بخش دوم

سیزدهم – پروژه دهم – page scroller – بخش اول

چهاردهم – پروژه دهم – page scroller – بخش دوم

پانزدهم – پروژه یازدهم – کتابخانه animate.css

شانزدهم — پروژه دوازدهم – کتابخانه hover.css

هفدهم – پروژه سیزدهم – کتابخانه imagehover.css

هجدهم – پروژه چهاردهم – کتابخانه ihover

نوزدهم – پروژه پانزدهم – کتابخانه button.css

جلسه اول – معرفی و مروری بر فریم ورک bootstrap 4

جلسه دوم – نصب و راه اندازی فریم ورک bootstrap 4

جلسه سوم – سیستم گرید بخش اول – container و row

جلسه چهارم – سیستم گرید بخش دوم – col ها

جلسه پنجم- سیستم گرید بخش سوم – مینی پروژه – پیاده سازی layout

جلسه ششم – سیستم گرید بخش چهارم – column ordering و offset

جلسه هفتم – سیستم گرید بخش پنجم – alignment و flex

جلسه هشتم – کامپوننت ها – بخش اول – alert , badge و beardcrumb

جلسه نهم – کامپوننت ها – بخش دوم – دکمه ها و دکمه های گروهی

جلسه دهم – کامپوننت ها – بخش سوم – card ها بخش اول

جلسه یازدهم – کامپوننت ها – بخش چهارم – card ها – بخش دوم

جلسه دوازدهم – کامپوننت ها – بخش چهارم – carousel ( اسلایدر تصاویر )

جلسه سیزدهم – کامپوننت ها – بخش پنجم – collapse ( آکاردین منو ) و dropdown menu

جلسه چهاردهم – کامپوننت ها – بخش ششم – form ها

جلسه پانزدهم – کامپوننت ها – بخش هفتم – input group ها و list group ها

جلسه شانزدهم – کامپوننت ها – بخش هشتم- media object ها , pagination و progress bar ها

جلسه هفدهم – کامپوننت ها – بخش نهم – modal و tooltip

جلسه هجدهم – کامپوننت ها – بخش دهم- nav , tabs و sppiner

جلسه نوزدهم – کامپوننت ها – بخش یازدهم – navbar ( منو )

جلسه بیستم- کامپوننت ها – بخش دوازدهم – popover ,toast و scroll spy

جلسه بیستم و یکم – utility ها – بخش اول – border , clearfix, color, display و embed

جلسه بیستم و دوم – utility ها – بخش دوم – flex , screen reader , image replacement و interactions

جلسه بیستم و سوم – utility ها – بخش سوم – shadow, sizing , spacing , stretched link , vertical align ,text و visibility

جلسه بیستم و چهارم – content – تایپوگرافی , reboot , code, images , tables و figures

بیست و پنجم – پروژه – جلسه اول – پیاده سازی بخش جستجو و سبد خرید بخش اول

بیست و ششم- پروژه – جلسه دوم – پیاده سازی بخش جستجو و سبد خرید – بخش دوم

بیست و هفتم – پروژه – جلسه سوم – پیاده سازی مگا منو – بخش اول

بیست و هشتم – پروژه – جلسه چهارم – پیاده سازی مگا منو – بخش دوم

بیست و نهم – پروژه – جلسه پنجم – پیاده سازی مگا منو – بخش سوم

سی – پروژه – جلسه ششم – پیاده سازی اسلایدر محصولات – بخش اول

سی و یکم – پروژه – جلسه هفتم – پیاده سازی اسلایدر محصولات – بخش دوم

سی و دوم – پروژه – جلسه هشتم – پیاده سازی بنر ها و دسته بندی محصولات

سی و سوم- پروژه – جلسه نهم – پیاده پیشنهادات ویژه محصولات – بخش اول

سی و چهارم – پروژه – جلسه دهم – پیاده پیشنهادات ویژه محصولات – بخش دوم

سی و پنجم – پروژه – جلسه یازدهم – پیاده سازی پیشنهادات ویژه محصولات – بخش سوم

سی و ششم – پروژه – جلسه دوازدهم – پیاده سازی پیشنهادات ویژه محصولات – بخش چهارم

سی و هفتم – پروژه – جلسه سیزدهم – پیاده سازی پیشنهادات ویژه محصولات – بخش پنجم

سی و هشتم – پروژه – جلسه چهاردهم – نمایش محصولات دسته بندی های متفاوت در قالب اسلایدر تصویر – بخش اول

سی و نهم – پروژه – جلسه پانزدهم – نمایش محصولات دسته بندی های متفاوت در قالب اسلایدر تصویر – بخش دوم

چهل – پروژه – جلسه شانزدهم – نمایش بنر محصولات

چهل و یکم – پروژه – جلسه هفدهم – پیاده سازی اسلایدر برندها و پرفروش ترین محصولات دسته ای خاص

چهل و دوم – پروژه – جلسه هجدهم – پیاده سازی فوتر – بخش اول

چهل و سوم – پروژه – جلسه نوزدهم – پیاده سازی فوتر – بخش دوم

چهل و چهارم – پروژه – جلسه بیستم- پیاده سازی فرم لاگین – بخش اول

چهل و پنجم – پروژه – جلسه بیست و یکم – پیاده سازی فرم لاگین – بخش دوم

چهل و ششم – پروژه – جلسه بیست و دوم- پیاده سازی صفحه محصول – breadcrumb و نمایش محصول – بخش اول

چهل و هفتم – پروژه – جلسه بیست و سوم – پیاده سازی صفحه محصول – breadcrumb و نمایش محصول – بخش دوم

چهل و هشتم – پروژه – جلسه بیست و چهارم – پیاده سازی صفحه محصول – مشخصات محصول – بخش اول

چهل و نهم – پروژه – جلسه بیست و پنجم – پیاده سازی صفحه محصول – مشخصات محصول – بخش دوم

پنجاه – پروژه – جلسه بیست و ششم – پیاده سازی صفحه محصول – مشخصات محصول – بخش سوم

پنجاه و یکم – پروژه – جلسه بیست و هفتم – پیاده سازی صفحه محصول – مشخصات محصول – بخش چهارم

پنجاه و دوم – پروژه – جلسه بیست و هشتم – پیاده سازی صفحه محصول – مشخصات محصول – بخش پنجم

پنجاه و سوم – پروژه – جلسه بیست و نهم – ایجاد تغیرات و بهینه سازی پروژه

پنجاه و چهارم ( پایانی ) – پروژه – جلسه سی ام – پیاده سازی اسلایدر تصاویر محصول با قابلیت بزرگ نمایی تصویر محصول

 

 

 

اول – معرفی کتابخانه جی کوئری و بررسی ساختار آن

دوم – سلکتورها در جی کوئری

سوم – event ها در جی کوئری

چهارم – افکت ها در جی کوئری

پنجم – افکت animate در جی کوئری

ششم – دستکاری محتوای عناصر سند ( DOM Manipulation )

هفتم – اعمال و حذف المان ها توسط add و remove

هشتم – کار با کلاس های css در جی کوئری

نهم – کار با ابعاد عناصر در جی کوئری ( Elements Dimention )

دهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش اول

یازدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش دوم

دوازدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش سوم

سیزدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش چهارم

چهاردهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش پنجم

پانزدهم – پروژه شماره ۱ – پیاده سازی accordion menu

شانزدهم – پروژه شماره ۲ – پیاده سازی Scroll To Top

هفدهم – پروژه شماره ۳ – پیاده سازی Modal Box

هجدهم – پروژه شماره ۴ – پیاده سازی Add Dynamic Inputs

نوزدهم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۱ – sweet alert

بیستم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۲ – owl carousel

بیست و یکم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۳ – slick carousel

بیست و دوم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۴ – AOS animate

بیست و سوم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۵ – zoomy slider

بیست و چهارم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۶ – countdown timer

بیست و پنجم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۷ – google map

بیست و ششم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۸ – date picker

بیست و هفتم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۹ – video js

بیست و هشتم – پلاگین های کاربردی جی کوئری – پلاگین شماره ۱۰ – CKEditor

 

  اول پروژه اول – sidebar menu

پروژه دوم – uploader button

پروژه سوم – count up

پروژه چهارم – dimensional social media button

پروژه پنجم – show/hidden password button

پروژه ششم – card

پروژه هفتم – corner animation menu

پروژه هشتم – toast

پروژه نهم – star Rating

پروژه دهم – tab

پروژه یازدهم – responsive animation card

پروژه دوازدهم – image gallery

پروژه سیزدهم – accordion menu

پروژه چهاردهم – full width search box

پروژه پانزدهم – split page

جلسه اول – معرفی و مروی بر GULP.JS

جلسه دوم – نصب و راه اندازی GULP

جلسه سوم – شروع کار با GULP

جلسه چهارم – انتقال فایل ها و بهینه سازی تصاویر

جلسه پنجم – فشرده سازی فایل های جاوااسکریپت

جلسه ششم – کامپایل فایل های sass به css

جلسه هفتم – فشرده سازی فایل های css

جلسه هشتم – کامپایل فایل های PUG , پیاده سازی default task و ادغام فایل های js

جلسه نهم – پیاده سازی تسک watch برای خودکار سازی اجرای تمام تسک ها در ورژن ۳ و ۴ gulp

 

اول – شروع کار با pug – نصب و راه اندازی

دوم – کار با فرم ها و استایل ها در pug

سوم – کار با external css در pug

چهارم – کار با حلقه ها در pug

پنجم – conditional statement در pug

ششم – case statement در pug

هفتم – ماژولار کردن فایل های html در pug

  مقدمه – معرفی وکاربرد پیش پردازنده SASS

اول – نصب و راه اندازی SASS

دوم – متغیرها و کاربرد آنها در SASS

سوم – بررسی مفهوم nesting در SASS و بررسی کاربرد آن

چهارم – بررسی مفهوم mixin ها در SASS – بخش اول

پنجم – بررسی مفهوم mixin ها در SASS – بخش دوم

ششم – بررسی مفهوم و ساختار extend در SASS

هفتم – بررسی ساختار حلقه ها در SASS

هشتم – بررسی conditional statement ها در SASS

پروژه – جلسه اول – آماده سازی ساختار پروژه و پیاده سازی متغیرهای اولیه

پروژه – جلسه دوم – پیاده سازی منو – بخش اول

پروژه – جلسه سوم – پیاده سازی منو – بخش دوم

پروژه – جلسه چهارم – پیاده سازی hero header – بخش اول

پروژه – جلسه پنجم – پیاده سازی hero header – بخش دوم

پروژه – جلسه ششم – پیاده سازی بخش دوره های آموزشی – بخش اول

پروژه – جلسه هفتم – پیاده سازی بخش دوره های آموزشی – بخش دوم

پروژه – جلسه هشتم – پیاده سازی بخش مسیر آموزشی

پروژه – جلسه نهم- پیاده سازی بخش مطالب

پروژه – جلسه دهم – پیاده سازی بخش فوتر

پروژه – جلسه یازدهم – ماژولار کردن فایل های استایل پروژه و مباحث تکمیلی

 

  اول – بررسی و پیاده سازی لایه بندی تک ستونه ( one columns layout )

دوم – بررسی و پیاده سازی لایه بندی دو ستونه ( two columns layout )

سوم – بررسی و پیاده سازی لایه بندی سه ستونه ( three columns layout )

چهارم – بررسی و پیاده سازی لایه بندی ( sidebar layout )

پنجم – بررسی و پیاده سازی لایه بندی ( two sidebar layout )

ششم – بررسی و پیاده سازی لایه بندی ستون های نابرابر ( unequal column layout )

هفتم – بررسی و پیاده سازی لایه بندی کاشی کاری ( tile column layout )

هشتم – بررسی و پیاده سازی لایه بندی زیگ زاگ ( zig zag layout )

نهم – لایه بندی ترکیبی ( mix layout )

  اول – بررسی اصول طراحی فرم ها – بخش اول

دوم – بررسی اصول طراحی فرم ها – بخش دوم

سوم – بررسی اعتبار سنجی فرم ها سمت client – بخش اول

چهارم – بررسی اعتبار سنجی فرم ها سمت client – بخش دوم

پنجم – بررسی اعتبار سنجی فرم ها سمت client – بخش سوم

ششم – پروژه شماره یک – فرم ثبت نام

هفتم – پروژه شماره دو – فرم ثبت نام همراه با تصویر

هشتم – پروژه شماره سه – فرم مدرن ورود و ثبت نام همراه با انیمیشن – بخش اول

نهم – پروژه شماره سه – فرم مدرن ورود و ثبت نام همراه با انیمیشن – بخش دوم

دهم – پروژه شماره چهارم – فرم پشرفته همراه با انیمیشن – بخش اول

یازدهم – پروژه شماره چهارم – فرم پشرفته همراه با انیمیشن – بخش دوم

 

اول – حذف پس زمینه از تصاویر در فتوشاپ

دوم – بررسی کاربرد و پیاده سازی action ها در فتوشاپ

سوم – بهینه سازی تصاویر برای وب در فتوشاپ

چهارم – تصویر سازی ( illustration ) در فتوشاپ – بخش اول

پنجم – تصویر سازی ( illustration ) در فتوشاپ – بخش دوم

آیا طراحی سایت ملزم به داشتن تحصیلات دانشگاهی میباشد؟

خیر! برای اینکه طراح وبسایت شوید به هیچ عنوان نیازمند مدرک تحضیلی خاصی نیستید.

پس لازم نیست نگران مدرک و رشته تحصیلی خود باشید.
تنها کافی است اراده کنید و در این راه خسته نشوید.
کافیه سبک خودتون رو پیدا کنید و رو به جلو حرکت کنید.

برای شرکت در دوره هاکافیست با ما تماس بگیرید

۰۹۱۴۲۳۹۳۱۰۱

۰۹۱۴۲۳۹۳۱۰۱

۰۴۱۳۵۲۳۴۶۶۰

۰۹۱۴۳۳۰۲۹۶۴

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟