قیمت این دوره: رایگانــ
  • مدرس دوره : صادق جعفری
  • تعداد ویدیوها : 39 ویدیو
  • مدت زمان دوره : 12:4:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1399/07/08
آموزش تبدیل قالب PSD به HTML و CSS

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

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




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

مدت زمان دوره 12:4:00
  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

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 بخش فوتر را می نویسیم

27
  • کلاس بندی css بخش footer

00:04:30

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

28
  • کدنویسی css بخش footer و پایان صفحه Index

00:10:30

در این جلسه کدهای css بخش footer رو می نویسیم و صفحه Index رو تکمیل می کنیم

29
  • انتقال بخش های مشترک به صفحه Single

00:11:30

در این جلسه کد های مشترک بین صفحات را به Single منتقل کرده، همچنین کد های html و کلاس بندی css قالب بندی Single را انجام می دهیم

30
  • کدنویسی html بخش SideBar

00:10:38

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

31
  • کلاس بندی css بخش SideBar

00:06:20

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

32
  • کدنویسی css بخش SideBar

00:31:12

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

33
  • کدنویسی html و کلاس بندی css بخش cover

00:14:19

در این جلسه کد های html بخش cover را نوشته و کلاس بندی css مربوطه را تنظیم می کنیم

34
  • کدنویسی css بخش cover

00:26:12

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

35
  • کدنویسی بخش هایی از صفحه single

00:25:54

در این جلسه کدنویسی html و css و کلاس بندی css بخش های feature و fullText را بصورت کامل و کمی از بخش comments را می نویسیم

36
  • تکمیل کدنویسی صفحه Single

00:17:46

در این جلسه کدنویسی صفحه Single را تکمیل می کنیم

37
  • کامنت گذاری کد های html

00:20:24

در این جلسه کد های HTML صفحات Index و Single را Comment گذاری می کنیم

38
  • تفکیک سایز ها و استایل های css تمام صفحات

00:17:18

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

39
  • آموزش شیوه ریسپانسیو سازی

00:25:22

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


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

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