متخصص طراحی وب سون لرن

محتوای این دوره، شامل ویدئوها، فایل‌های پیوست، پروژه‌ها و یادداشت‌ها، با هدف یادگیری سریع‌تر و مؤثرتر طراحی شده‌اند. تمامی دوره های رایگان کده به‌صورت رایگان و همچنین از طریق خرید اشتراکی در دسترس بوده و سعی شده همواره تمامی دوره ها بدون قفل و دارای آخرین آپدیت باشند. دوره ها فقط از سمت ربات تلگرامی رایگان کده قابل دانلود هستند.

بدون امتیاز
|
70 ساعت
-
-

متخصص طراحی وب سون لرن

محتوای این دوره، شامل ویدئوها، فایل‌های پیوست، پروژه‌ها و یادداشت‌ها، با هدف یادگیری سریع‌تر و مؤثرتر طراحی شده‌اند. تمامی دوره های رایگان کده به‌صورت رایگان و همچنین از طریق خرید اشتراکی در دسترس بوده و سعی شده همواره تمامی دوره ها بدون قفل و دارای آخرین آپدیت باشند.

بدون امتیاز
وضعیت آپدیت

این دوره تا پارت (تصویر سازی ( illustration ) در فتوشاپ - بخش دوم) قرار گرفته است!

نوع لایسنس

این دوره بدون هیچ لایسنس و قفل نرم‌افزاری با فرمت MP4 قرار گرفته است!

توضیحات
بدون امتیاز

اگر در دنیای برنامه‌نویسی تازه‌وارد هستید، یادگیری طراحی وب برای شما دوست داشتنی و نسبتا ساده است. برای کسب‌وکارهای بزرگ، طراحی سایت با استفاده از زبان‌های برنامه‌نویسی وب جذابیت و اهمیت زیادی دارد. بنابراین با یک جستجوی ساده در بین آگهی‌های استخدامی متوجه داغ بودن بازار این حوزه و نیاز شرکت‌ها به طراح وب حرفه‌ای می‌شویم. در چنین شرایطی، یادگیری طراحی وب نویدبخش کسب درآمد بالا و حتی همکاری با شرکت‌های خارجی و کسب درآمد ارزی خواهد بود.

دوره‌ متخصص طراحی وب با هدف تدریس تمامی مباحث و سرفصل‌های لازم برای تسلط و آمادگی دانشجویان جهت ورود به بازار کار ارائه شده است. در این دوره‌‌ کامل‌ترین سرفصل‌های طراحی وب به صورت غیرحضوری تدریس می‌شوند.

چرا باید این دوره را بگذرانید؟

  • آموزش از مبتدی تا پیشرفته: این دوره برای همه سطوح مهارتی مناسب است، از مبتدیان تا حرفه‌ای‌ها.
  • اصول طراحی وب: شما اصول اساسی طراحی وب را فرا خواهید گرفت، از جمله طراحی رابط کاربری (UI)، تجربه کاربری (UX) و بهینه‌سازی موتورهای جستجو (SEO).
  • استفاده از ابزارهای مدرن: در این دوره، با استفاده از ابزارهای مدرن و روش‌های به‌روز طراحی وب آشنا خواهید شد، از جمله HTML5، CSS3، JavaScript، و Bootstrap.
  • پروژه‌های عملی: شما با انجام پروژه‌های عملی و تمرین‌های متعدد، مهارت‌های خود را تثبیت خواهید کرد و به یک طراح وب ماهر تبدیل خواهید شد.

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

سرفصل‌ها
  • آشنایی با ابزارهای مورد نیاز یک طراحی وب و معرفی انواع مرورگر‌های محبوب
  • آشنایی با امکانات مرورگر‌های chrome و firefox – بخش اول
  • آشنایی با امکانات مرورگر‌های chrome و firefox – بخش دوم
  • آشنایی با امکانات مرورگر‌های chrome و firefox – بخش سوم
  • معرفی محبوب‌ترین IDE و EDITOR‌ها برای کدنویسی رابط‌های کاربری
  • نصب و پیکربندی vscode – بخش اول
  • معرفی و نصب اکستنشن‌های کاربردی vscode در طراحی وب – بخش اول
  • معرفی و نصب اکستنشن‌های کاربردی vscode در طراحی وب – بخش دوم
  • آموزش HTML5 – قسمت اول – مقدمات و آشنایی با HTML
  • آموزش HTML5 – قسمت دوم – بررسی ساختار اسناد html و پیاده سازی چارچوب اولیه یک سند
  • HTML5 – قسمت سوم – بررسی مفهوم المان‌های block level و inline level و معرفی تگ‌های قالب دهی
  • HTML5 – قسمت چهارم – بررسی تگ‌های جدول , نقل قول و استناد
  • جلسه HTML5 – قسمت پنجم – بررسی تگ‌های تصویر و قالب دهی کد
  • جلسه HTML5 – قسمت ششم – بررسی تگ‌های مالتی مدیا در HTML5
  • جلسه HTML5 – قسمت هفتم- بررسی انواع تگ‌های input در HTML5
  • جلسه HTML5 – قسمت هشتم- بررسی انواع اتریبیوت‌ها برای input‌ها در HTML5
  • جلسه HTML5 – قسمت نهم- بررسی انواع تگ‌های مفهومی ( semantic web elements ) در HTML5 – اول
  • جلسه 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 – کدنویسی بخش مقالات2
  • نهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی منوی آکاردئونی
  • دهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی منوی آکاردئونی2
  • یازدهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش فوتر – بخش اول
  • دوازدهم – پروژه طراحی قالب رسپانسیو توسط css و html – کدنویسی بخش فوتر – بخش دوم
  • سیزدهم – پروژه طراحی قالب رسپانسیو توسط css و html – مباحث تکمیلی
  • اول – معرفی کتابخانه جی کوئری و بررسی ساختار آن
  • دوم – سلکتورها در جی کوئری
  • سوم – event‌ها در جی کوئری
  • چهارم – افکت‌ها در جی کوئری
  • پنجم – افکت animate در جی کوئری
  • ششم – دستکاری محتوای عناصر سند ( DOM Manipulation )
  • هفتم – اعمال و حذف المان‌ها توسط add و remove
  • هشتم – کار با کلاس‌های css در جی کوئری
  • نهم – کار با ابعاد عناصر در جی کوئری ( Elements Dimention )
  • دهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش اول
  • یازدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش دوم
  • دوازدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش سوم
  • سیزدهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش چهارم
  • چهاردهم – پیمایش عناصر در جی کوئری ( Traversing ) بخش پنجم
  • پانزدهم – پروژه شماره 1 – پیاده سازی accordion menu
  • شانزدهم – پروژه شماره 2 – پیاده سازی Scroll To Top
  • هفدهم – پروژه شماره 3 – پیاده سازی Modal Box
  • هجدهم – پروژه شماره 4 – پیاده سازی Add Dynamic Inputs
  • نوزدهم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 1 – sweet alert
  • بیستم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 2 – owl carousel
  • بیست و یکم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 3 – slick carousel
  • بیست و دوم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 4 – AOS animate
  • بیست و سوم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 5 – zoomy slider
  • بیست و چهارم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 6 – countdown timer
  • بیست و پنجم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 7 – google map
  • بیست و ششم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 8 – date picker
  • بیست و هفتم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 9 – video js
  • بیست و هشتم – پلاگین‌های کاربردی جی کوئری – پلاگین شماره 10 – 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
  • اول – بررسی و پیاده سازی لایه بندی تک ستونه ( 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 )
  • اول – 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 – پروژه
  • اول – بررسی اصول طراحی فرم‌ها – بخش اول
  • دوم – بررسی اصول طراحی فرم‌ها – بخش دوم
  • سوم – بررسی اعتبار سنجی فرم‌ها سمت client – بخش اول
  • چهارم – بررسی اعتبار سنجی فرم‌ها سمت client – بخش دوم
  • پنجم – بررسی اعتبار سنجی فرم‌ها سمت client – بخش سوم
  • ششم – پروژه شماره یک – فرم ثبت نام
  • هفتم – پروژه شماره دو – فرم ثبت نام همراه با تصویر
  • هشتم – پروژه شماره سه – فرم مدرن ورود و ثبت نام همراه با انیمیشن – بخش اول
  • نهم – پروژه شماره سه – فرم مدرن ورود و ثبت نام همراه با انیمیشن – بخش دوم
  • دهم – پروژه شماره چهارم – فرم پشرفته همراه با انیمیشن – بخش اول
  • یازدهم – پروژه شماره چهارم – فرم پشرفته همراه با انیمیشن – بخش دوم
  • معرفی سر فصل انیمیشن‌ها در CSS3
  • اول – 2D-transform در css
  • دوم – 3D-transform در css
  • سوم – transition در css
  • چهارم – keyframe‌ها در انمیشن‌ها در css
  • پنجم – پروژه شماره 1 – loading
  • ششم – پروژه شماره 2 – flip card
  • هفتم – پروژه شماره 3 – ماشین متحرک – بخش اول
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش دوم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش سوم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش چهارم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش پنجم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش ششم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش هفتم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش هشتم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش نهم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش دهم
  • هشتم – پروژه شماره 3 – ماشین متحرک – بخش یازدهم
  • اول- پروژه اول – منو افقی
  • دوم – پروژه دوم – منوی عمودی تمام صفحه
  • سوم – پروژه سوم – منوی تمام صفحه
  • چهارم – پروژه چهارم – سایدبار منو ( 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
  • آشنایی با Git و چرایی استفاده از آن
  • نصب و شروع کار با گیت
  • کانفیگ کردن git
  • آشنایی با وضعیت فایل‌ها و LifeCycle در git
  • ایجاد و مدیریت انشعاب‌ها در پروژه (Git Branches)
  • رفع تداخل‌ها (Fix Conflicts)
  • مدل برنچینگ بهینه (Git Flow)
  • ثبت و نمایش تغیرات در git
  • برگردوندن و ریست کردن پروژه به یک کامیت خاص
  • آموزش Stashing در git
  • معرفی، کانفیگ و استفاده از GitLab
  • آشنایی با فایل gitignore و اهمیت اون
  • جلسه اول – معرفی و مروری بر فریم ورک بوت استرپ 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 و نمایش محصول – بخش دوم
  • چهل و هشتم – پروژه – جلسه بیست و چهارم – پیاده سازی صفحه محصول – مشخصات محصول – بخش اول
  • چهل و نهم – پروژه – جلسه بیست و پنجم – پیاده سازی صفحه محصول – مشخصات محصول – بخش دوم
  • پنجاه – پروژه – جلسه بیست و ششم – پیاده سازی صفحه محصول – مشخصات محصول – بخش سوم
  • پنجاه و یکم – پروژه – جلسه بیست و هفتم – پیاده سازی صفحه محصول – مشخصات محصول – بخش چهارم
  • پنجاه و دوم – پروژه – جلسه بیست و هشتم – پیاده سازی صفحه محصول – مشخصات محصول – بخش پنجم
  • پنجاه و سوم – پروژه – جلسه بیست و نهم – ایجاد تغیرات و بهینه سازی پروژه
  • پنجاه و چهارم ( پایانی ) – پروژه – جلسه سی ام – پیاده سازی اسلایدر تصاویر محصول با قابلیت بزرگ نمایی تصویر محصول
  • جلسه اول – معرفی و مروی بر GULP.JS
  • جلسه دوم – نصب و راه اندازی GULP
  • جلسه سوم – شروع کار با GULP
  • جلسه چهارم – انتقال فایل‌ها و بهینه سازی تصاویر
  • جلسه پنجم – فشرده سازی فایل‌های جاوااسکریپت
  • جلسه ششم – کامپایل فایل‌های sass به css
  • جلسه هفتم – فشرده سازی فایل‌های css
  • جلسه هشتم – کامپایل فایل‌های PUG , پیاده سازی default task و ادغام فایل‌های js
  • جلسه نهم – پیاده سازی تسک watch برای خودکار سازی اجرای تمام تسک‌ها در ورژن 3 و 4 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 – بخش دوم
  • پروژه – جلسه ششم – پیاده سازی بخش دوره‌های آموزشی – بخش اول
  • پروژه – جلسه هفتم – پیاده سازی بخش دوره‌های آموزشی – بخش دوم
  • پروژه – جلسه هشتم – پیاده سازی بخش مسیر آموزشی
  • پروژه – جلسه نهم- پیاده سازی بخش مطالب
  • پروژه – جلسه دهم – پیاده سازی بخش فوتر
  • پروژه – جلسه یازدهم – ماژولار کردن فایل‌های استایل پروژه و مباحث تکمیلی
  • اول – حذف پس زمینه از تصاویر در فتوشاپ
  • دوم – بررسی کاربرد و پیاده سازی action‌ها در فتوشاپ
  • سوم – بهینه سازی تصاویر برای وب در فتوشاپ
  • چهارم – تصویر سازی ( illustration ) در فتوشاپ – بخش اول
  • پنجم – تصویر سازی ( illustration ) در فتوشاپ – بخش دوم
  • مروری بر بوتسترپ ۵ و آماده سازی
  • بررسی سیستم گرید – بخش اول -بررسی شبکه بندی‌های یکسان
  • بررسی سیستم گرید – بخش دوم – بررسی ترازبندی ستون ها
  • بررسی سیستم گرید – بخش سوم – media query‌ها و شبکه بندی غیر یکسان – بخش اول
  • بررسی سیستم گرید – بخش چهارم- media query‌ها و شبکه بندی غیر یکسان – بخش دوم
  • بررسی سیستم گرید – بخش پنجم – media query‌ها و شبکه بندی غیر یکسان – بخش سوم
  • مینی پروژه – پیاده سازی layout – بخش اول
  • مینی پروژه – پیاده سازی layout – بخش دوم
  • مینی پروژه – پیاده سازی layout – بخش سوم
  • مینی پروژه – پیاده سازی layout – بخش چهارم
  • بررسی reboot elements و تایپوگرافی
  • بررسی جداول و تصاویر
  • بررسی فرم‌ها – بخش اول
  • بررسی فرم‌ها – بخش دوم
  • بررسی فرم‌ها – بخش سوم
  • بررسی کامپوننت‌ها – بخش اول
  • بررسی کامپوننت‌ها – بخش دوم
  • بررسی کامپوننت‌ها – بخش سوم
  • بررسی کامپوننت‌ها – بخش چهارم
  • بررسی کامپوننت‌ها – بخش پنجم
  • بررسی کامپوننت‌ها – بخش ششم
  • بررسی helper ها
  • بررسی utility‌ها – بخش اول
  • بررسی utility‌ها – بخش دوم
  • بررسی utility‌ها – بخش سوم
مخاطبین
  • مناسب برای همه: این دوره بدون نیاز به دانش یا تجربه قبلی، برای همه افراد قابل دسترسی است.
  • آموزش از صفر: با شروع از مباحث ابتدایی، این دوره به صورت کامل از سطح صفر آموزش داده می‌شود.
  • توجه به هدف: اگر هدف شما یادگیری مفاهیم و تکنیک‌های طراحی وب است، این دوره برای شما مناسب است.
  • علاقه شخصی: اگه علاقه ای به طراحی وب ندارید این دوره مناسب شما نیست.
  • پشتکار فردی: اگه در کار های خود تعهد و صبر و استمرار کافی ندارید این دوره برای شما مناسب نیست.
  • خلاقیت: لازمه این دوره به روز بودن و داشتن خلاقیت کافی در توسعه وب باشد. چرا که این بازار کار به دنبال نواوری های جدید و به خصوص است.
سوالات متداول

پیش نیاز یادگیری طراحی وب صرفا آشنایی با کامپیوتر، نحوه نصب برنامه‌ها روی کامپیوتر، و کار با مرورگرهاست. سایر موارد به صورت جامع از صفر آموزش داده می‌شود.

به نسبت سال‌های گذشته منابع آموزشی رایگانی مثل یوتیوب در اختیار ما است. که به راحتی قابل استفاده است. اما منابع آموزشی رایگان معمولا دو ضعف بزرگ دارند:

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

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

طبق تجربه من در صورت استفاده از دوره‌های جامع غیررایگان + پشتیبانی بازدهی دانشجو و سرعت یادگیری‌اش ۳ برابر استفاده از محتواهای رایگان پراکنده و بدون پشتیبانی است. و دانشجو سریع‌تر می‌تواند وارد بازار کار شود.

دوره متخصص طراحی وب سون لرن هم یک دوره جامع + پشتیبانی منتور و مدرس دوره است، که دانشجو بعد از ثبت‌نام، شروع یادگیری، تمرین مستمر مباحث، در مدت ۶ ماه الی یکسال آماده ورود به بازار کار است.

اگر تازه وارد دنیای برنامه نویسی شده‌اید باید بدانید که کسب درآمد بعد از یادگیری هر مهارتی به فاکتورهای متعددی وابسته است:

در یادگیری استمرار و نظم داشته باشید.
با نمونه کار بیشتر رزومه‌تان را تقویت کنید.
یک راه تقویت رزومه این است که دانشجوها برای خودشان پروژه تعریف کنند و آنها را پیاده‌سازی کنند که به عنوان نمونه کار بتوانند به شرکت‌ها ارائه بدهند. هر چند در ابتدای کار در تمامی فیلدهای برنامه نویسی ممکن است شرکت‌ها شما را به عنوان کارآموز استخدام کنند. تا بتوانند توانایی شما را محک بزنند. اما بعد از مدت کارآموزی و اثبات توانایی شما، استخدام می‌شوید. پیشنهاد من برای پیدا کردن فرصت‌های شغلی بهتر این است که بعد از یادگیری مباحث این دوره جاوااسکریپت و React‌ را هم یاد بگیرید.

اما اگر به یک زبان برنامه نویسی سمت بک اند مسلط باشید و طراحی وب را برای اینکه به یک برنامه نویس فول استک تبدیل شوید یاد می‌گیرید قطعا به افزایش درآمد شما کمک زیادی می‌کند.

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

ما در این دوره در حد نیاز شما در مورد جاوااسکریپت (به صورت خاص جی کوئری) صحبت خواهیم کرد و شما با همین دانش قادر خواهید بود که نیازهای خود را در صفحات وب برآورده کنید و از پلاگین‌های مختلف جاوااسکریپت و جی کوئری برای غنی‌تر کردن صفحات وب طراحی شده خود استفاده کنید.

اما باید بدانید که دنیای جاوااسکریپت دنیای بزرگی است و برای تسلط در این زبان و فریمورک‌های مطرح آن به صورت جداگانه بیش از ۶ ماه زمان نیاز است. ادغام کردن آموزش کامل جاوااسکریپت در این دوره معایب زیر را داشته و به همین دلایل تیم سون لرن جاوااسکریپت را در دوره‌ای جداگانه به صورت کامل طراحی کرده است:

ادغام این دو دوره و افزودن آموزش جامع جاوااسکریپت (که بیش از 50 ساعت زمان مفید آموزش نیاز دارد) باعث افزایش حجم محتوا و عدم تمرکز دانشجو روی مفاهیم طراحی وب و به تناسب آن افزایش قیمت دوره تا دو برابر خواهد شد.
طبق اطلاعات جمع‌آوری شده از دانشجویان قبلی دوره تعداد زیادی از دانش آموختگان دوره طراحی وب (نزدیک به ۵۰٪) تمایلی به مسلط شدن و عمیق‌تر شدن در جاوااسکریپت ندارند و طبیعتا جداسازی این دو مبحث به آنها حق انتخاب و صرفه‌جویی در هزینه پرداختی خواهد داد. (نیازی به پرداخت اضافه برای محتوایی که نیاز ندارند، نخواهند داشت).

قدم بعدی شما بعد از این دوره بستگی به هدف شما دارد اگر به برنامه نویسی بک اند علاقه دارید می‌توانید به سراغ یادگیری یکی از زبان‌های برنامه نویسی php یا پایتون یا NodeJS بروید که قطعا این دوره برای شما کافی است.

اما اگر به برنامه نویسی فرانت اند علاقه دارید. بعد از این دوره پیشنهاد می‌کنم جاوااسکریپت خالص را یاد بگیرید. که البته در سون‌لرن دوره آموزش جاوااسکریپت خالص وجود دارد. بعد از یادگیری جاوااسکریپت خالص بهتر است یکی از فریم ورک‌های جاوااسکریپت را یاد بگیرید. پرکاربردترین فریم ورک‌های جاوااسکریپت در حال حاضر Angular.js و React و Vue.js هستند. که از بین اینها فریم ورک React محبوب‌تر است. در سون‌لرن دوره آموزش React هم وجود دارد. مطمئن باشید اگر برای یادگیری هر سه مهارت طراحی وب و جاوااسکریپت خالص و React وقت کافی بگذارید موقعیت شغلی خوبی را هم پیدا می‌کنید.

قطعا هر چه شما زمان بیشتری برای یادگیری بگذارید سریع‌تر به نتیجه می‌رسید. اما به طور کلی اگر:

در روز ۲ تا ۳ ساعت زمان مفید بگذارید.
بعد از دیدن ویدیوهای دوره خودتان هم کدنویسی کنید.
استمرار و نظم در یادگیری داشته باشید
فاصله استراحت تا یادگیری را زیاد نکنید.
مفاهیم را بهتر یاد می‌گیرید. و در مدت زمان ۶ ماه تا یکسال بر مفاهیم طراحی وب مسلط می‌شوید.

یادگیری زبان انگلیسی در هر مهارتی به شما کمک می‌کند. در برنامه نویسی هم اگر شما زبان انگلیسی را بلد باشید:

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

این موضوع کاملا بستگی به علاقه شما دارد. اگر به حل مسئله و الگوریتم و معماری نرم افزار و الگوهای طراحی و … علاقه دارید. می‌توانید بک اند را انتخاب کنید. در غیر این صورت می‌توانید فرانت اند را انتخاب کنید. که هر دو حوزه بازار کار خوبی دارد. البته شما می‌توانید هر دو مهارت را یاد بگیرید که در این صورت شما اصطلاحا یک برنامه نویس فول استک (full stack developer) هستید و قطعا فرصت‌های شغلی بهتری برای شما هست.

سایر دوره‌ها
دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *