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

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

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




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

مدت زمان دوره 12:4:00
00:00
00: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

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

اینستاگرام
تلگرام

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

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

شائشیقثظش

ارسال شده در 1401/04/27

سلام من چرا وقتی فایل ها رو دان کردم اصلا صدا ندارم برای کسی این مشکل پیش نیومده؟

soheil sj

soheil sj

ارسال شده در 1400/08/23

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

soheil sj

soheil sj

ارسال شده در 1400/08/23

دم شما گرم. خیلی عالی بود. در واقع برای من خیلی کمک کننده بود. 

hamid.

ارسال شده در 1400/05/08

سلام ای کاش با کدهای html5 و css3 پروژه محورهای زیادی مثل این تولید کنید با طرح ها و psd های مختلف از سایت های معروف ایرانی ...

با تشکر

"کسی که یک حرف به من بیاموزد، مرا عبد خود کرده"

keyvan0031

ارسال شده در 1400/04/14

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

صرفا چون آخر ویدیو گفته بودین که نظر بدین نظر مو خواستم که بدم!

keyvan0031

ارسال شده در 1400/04/14

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

آرمىن-چنارى

ارسال شده در 1400/03/29

:)

marcel

ارسال شده در 1400/03/14

خیلی خوب بود قبلا اموزش های خوب همش انگلیسی بود خدارو شکر یه اموزش فارسی عالی دیدم ممنون استاد 

 

مهسا خاتمی راد

مهسا خاتمی راد

ارسال شده در 1400/02/16

سلام به همه عزیزان. 

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

ap6518732@gmail.com

ارسال شده در 1400/02/03

  با سلام وخسته نباشید دوره هارو در یه فایل قرار ندادهید و دانلود کردن قسمت ها سخت هست اگر همه را در یه فایل قرار بدید خیلی عالی میشه . باتشکر