قیمت این دوره : رایگانــ
  • مدرس دوره : صادق جعفری ( رزومه )
  • تعداد دانشجویان این دوره : 3,602 نفر
  • تعداد ویدیوها : 26 ویدیو
  • مدت زمان دوره : 8:23:00
  • سطح دوره : متوسط
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1399/05/19

آموزش تبدیل قالب PSD به HTML و CSS

در این دوره قصد داریم یک قالب وبسایت را که به صورت PSD و کاملا لایه باز، در دو صفحه (ایندکس و سینگل) طراحی شده است را با استفاده از HTML و Css کدنویسی کنیم>
برای واکنش گرایی یا ریسپانسیو کردن قالب در این دوره از مدیا کوئری در Css استفاده می کنیم و از هیچ پلتفرم خاصی (مثل بوت استرپ یا ...) استفاده نخواهیم کرد.
پروژه عملی، یک قالب فروشگاهی دو صفحه ای هست که به صورت کاملا اختصاصی و حرفه ای طراحی شده و در اینترنت موجود نیست.
پیش نیاز های این دوره آشنایی با HTML و CSS می باشد.

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

فهرستـــ ویدیوها

مدت زمان دوره 08:38:00
در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.
راهنما ! جهت دریافت لینک دانلود تمامی قسمت ها بر روی این لینک .کلیک کنید.
1
  • معرفی دوره

  • 00:08:00
  • رایگانــ

معرفی دوره

2
  • ایجاد پروژه

  • 00:17:00
  • رایگانــ

در این جلسه پروژه را ایجاد می کنیم و پوشه بندی و فایل های مورد نیاز را در آن قرار می دهیم.

3
  • شروع کدنویسی بخش Header

  • 00:25:00
  • رایگانــ

در این جلسه کد های HTML مربوط به بخش Header قالب رو می نویسیم. همچنین فایل های PSD صفحات قالب به صورت لایه باز در این جلسه ضمیمه شده است.

4
  • کدنویسی بخش Header - جلسه دوم

  • 00:16:00
  • رایگانــ

در این جلسه تمام کلاس بندی های مربوط به Header رو در style.css انجام داده و استایل های پیش فرض مرورگر را صفر می کنیم.

5
  • کدنویسی بخش Header - جلسه سوم

  • 00:30:00
  • رایگانــ

در این جلسه استایل های مربوط به Menu در بخش Header قالب رو می نویسیم و سایر بخش های Header رو برای جلسات آینده آماده می کنیم.

6
  • کدنویسی بخش Header - جلسه چهارم

  • 00:19:00
  • رایگانــ

در این جلسه استایل های مربوط به  SearchBox رو می نویسیم و یک قدم تا پایان کدنویسی بخش Header باقی می ماند.

7
  • کدنویسی بخش Header - جلسه آخر

  • 00:24:00
  • رایگانــ

در این جلسه استایل های مربوط به باکس های سمت چپ Header رو می نویسیم و بخش Header رو بصورت کامل تکمیل می کنیم.

8
  • هاور افکت های بخش های داخلی Header

  • 00:12:00
  • رایگانــ

در این جلسه به تمام المان های داخلی Header افکت های انیمیشنی می دهیم و رویداد hover آنها را فعال می کنیم. لازم به ذکر است که این جلسه صرفا جهت زیباتر شدن قالب می باشد و در اصل، کدهای Header در جلسه قبل تمام شده اند.

9
  • کدنویسی بخش Slider - جلسه اول

  • 00:21:00
  • رایگانــ

در این جلسه کد های HTML مربوط به بخش های Slider و Levels و ADS و همچنین Newslatter رو می نویسیم

10
  • کدنویسی بخش Slider - جلسه دوم

  • 00:11:00
  • رایگانــ

در این جلسه کلاس بندی مربوط به بخش های Slider و Levels و ADS و همچنین Newslatter رو در Css می نویسیم و برای شروع کدنویسی Css های مربوطه آماده میشیم.

11
  • کدنویسی بخش Slider - جلسه دوم

  • 00:26:00
  • رایگانــ

در این جلسه کد های Css مربوط به بخش Slider رو می نویسیم 

12
  • کدنویسی بخش Slider - جلسه سوم

  • 00:14:00
  • رایگانــ

در این جلسه کد های JQuery مربوط به اسلایدر تصاویر را می نویسیم و اسلایدر تصاویر را تمام می کنیم.

13
  • کدنویسی بخش Slider - جلسه چهارم

  • 00:20:00
  • رایگانــ

در این جلسه کد های CSS مربوط به بخش Levels رو می نویسیم.

14
  • کدنویسی بخش Slider - جلسه آخر

  • 00:37:00
  • رایگانــ

در این جلسه کد های CSS مربوط به بخش بنر های تبلیغاتی و خبرنامه را در اسلایدر می نویسیم.

15
  • کدنویسی بخش Orders - جلسه اول

  • 00:16:00
  • رایگانــ

در این جلسه کد های Html مربوط به بخش نمایش محصولات را می نویسیم.

16
  • کدنویسی بخش Orders - جلسه دوم

  • 00:32:00
  • رایگانــ

در این جلسه کلاس بندی Css مربوط به بخش Orsers رو انجام میدیم و کد های Jquery مربوط به بخش دکمه های نمایش دسته بندی محصولات رو می نویسیم، همچنین تصاویر و محتوای محصولات را به پروژه منتقل می کنیم.

17
  • کدنویسی بخش Orders - جلسه سوم

  • 00:37:00
  • رایگانــ

در این جلسه کد های css مربوط به بخش Orders رو می نویسیم

18
  • کدنویسی بخش Orders - جلسه چهارم

  • 00:17:00
  • رایگانــ

در این جلسه کد های css مربوط به بخش hoverBox و افکت های انیمیشنی را می نویسیم

19
  • کدنویسی بخش Orders - جلسه آخر

  • 00:27:30
  • رایگانــ

در این جلسه کد های css مربوط به بخش after دکمه های محصولات رو می نویسیم و اسلایدر محصولات رو با JQuery تکمیل می کنیم

20
  • کدنویسی بخش اخبار - جلسه اول

  • 00:11:30
  • رایگانــ

در این جلسه کد های html مربوط به بخش آخرین اخبار را می نویسیم

21
  • کدنویسی بخش اخبار - جلسه دوم

  • 00:08:30
  • رایگانــ

در این جلسه کلاس بندی های css مربوط به بخش آخرین اخبار را می نویسیم

22
  • کدنویسی بخش اخبار - جلسه آخر

  • 00:25:00
  • رایگانــ

در این جلسه کد های css مربوط به بخش آخرین اخبار رو می نویسیم

23
  • کدنویسی بخش Gift - جلسه اول

  • 00:09:00
  • رایگانــ

در این جلسه کد های html مربوط به بخش Gift رو می نویسیم

24
  • کدنویسی بخش Gift - جلسه دوم

  • 00:04:30
  • رایگانــ

در این جلسه کلاس بندی CSS بخش Gift رو پیاده سازی می کنیم

25
  • کدنویسی بخش Gift - جلسه آخر

  • 00:28:30
  • رایگانــ

در این جلسه کد های CSS مربوط به بخش Gift رو می نویسیم

26
  • کدنویسی html بخش footer

  • 00:06:30
  • رایگانــ

در این جلسه کد های html بخش فوتر را می نویسیم

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .