قیمت این دوره: رایگانــ
  • مدرس دوره : امید پیشکار
  • تعداد ویدیوها : 37 ویدیو
  • مدت زمان دوره : 13:14:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1400/10/21
آموزش طراحی وب مقدماتی

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

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

پیش نیاز: پیش نیاز های این دوره html و css و flexbox هستند که آموزش های سه دوره در سایت تاپ لرن وجود دارد.

آموزش رایگان HTML و CSS

آموزش FlexBox

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


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

مدت زمان دوره 13:14:00
  • در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.

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

1
  • معرفی دوره

00:05:17

در این قسمت به معرفی پیش نیاز ها ، اهداف ، ابزار مورد نیاز و پروژه های دوره پرداخته شده است.

2
  • جلسه اول - معرفی دوره

00:05:30

در این قسمت به معرفی اهداف ، پیش نیاز ها ، ابزار و پروژه های موجود در دوره پرداخته شده است.

3
  • جلسه دوم - معرفی ابزار های مورد نیاز پروژه اول

00:19:01

معرفی ابزار ها مثل فونت مورد نیاز ، Text Editor مورد نیاز و موارد دیگر در این قالب.

4
  • قسمت سوم - طراحی کلاس های واکنش گرایی و طراحی بخش Header

00:32:46

در این قسمت کلاس هایی را طراحی خواهیم کرد که در تمام قالب به واکنش گرایی قالب کمک کند و همچنین بخش Header قالب را طراحی خواهیم کرد.

5
  • قسمت چهارم - طراحی بخش About me

00:30:37

در این قسمت بخش About me را طراحی خواهیم کرد.

6
  • قسمت پنجم - طراحی بخش Projects

00:08:59

در این قسمت بخش Projects را تنها با اعمال کلاس ها ایجاد می کنیم.

7
  • قسمت ششم - طراحی بخش Work

00:12:47

در این ویدیو یک بخش دیگر از پروژه اول به نام Work را طراحی می کنیم.

8
  • قسمت هفتم - طراحی بخش های Education و Languge

00:14:45

در این ویدیو دو بخش Education و Language از پروژه اول را طراحی می کنیم.

9
  • قسمت هشتم - طراحی بخش Projects

00:19:14

در این قسمت بخش Projects را طراحی می کنیم. ( این بخش با بخش Projects که در ابتدا طراحی کرده ایم متفاوت است.)

10
  • قسمت نهم - طراحی بخش های Social Network و Contact

00:27:31

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

11
  • قسمت دهم - طراحی بخش footer

00:13:15

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

12
  • قسمت یازدهم - معرفی پروژه دوم

00:07:52

در این ویدیو پروژه دوم را مورد بررسی قرار داده ایم.

13
  • قسمت دوازدهم - طراحی قسمت Navbar از بخش Header

00:58:44

در این قسمت توضیحات کاملی در مورد پروژه دوم ارائه شده است و همینطور قسمت Navbar را طراحی خواهیم کرد.

14
  • قسمت سیزدهم - طراحی بخش Header Caption

00:23:04

در این ویدیو قسمت دوم Header را طراحی خواهیم کرد.

15
  • قسمت چهاردهم - طراحی بخش About Me

00:39:15

در این ویدیو قسمت About Me را طراحی خواهیم کرد.

16
  • قسمت پانزدهم - طراحی بخش My Skills

00:40:18

در این ویدیو قسمت جدیدی از بخش About را طراحی خواهیم کرد.

17
  • قسمت شانزدهم - طراحی بخش Education

00:22:19

در این ویدیو قسمت Education از بخش About را طراحی خواهیم کرد.

18
  • قسمت هفدهم - طراحی بخش Service

00:27:17

در این ویدیو بخش Service را طراحی خواهیم کرد.

19
  • قسمت هجدهم - طراحی بخش Funfact

00:12:43

در این ویدیو بخش دیگری از قالب با نام Funfact را طراحی می کنیم.

20
  • قسمت نوزدهم - طراحی قسمت اول از بخش Portfolio

00:17:19

در این ویدیو قسمت اول از بخش Portfolio مانند Badge و Buttons را طراحی خواهیم کرد.

21
  • قسمت بیستم - طراحی قسمت دوم از بخش Portfolio

00:19:36

در این ویدیو قسمت دوم از بخش Portfolio را طراحی خواهیم کرد.

22
  • قسمت بیست و یکم - طراحی بخش Client

00:17:10

در این ویدیو بخش Client را طراحی خواهیم کرد.

23
  • قسمت بیست و دو - طراحی بخش Blog

00:19:54

در این ویدیو قسمت Blog را طراحی خواهیم کرد.

24
  • قسمت بیست و سه - طراحی بخش Contact

00:26:55

در این ویدیو قسمت قبل از Footer با عنوان Contact را طراحی خواهیم کرد.

25
  • قسمت بیست و چهارم - طراحی بخش اول Footer

00:15:10

در این ویدیو قسمت اول از بخش Footer را طراحی خواهیم کرد.

26
  • قسمت بیست و پنجم - طراحی بخش دوم Footer

00:28:34

در این ویدیو قسمت دوم از بخش Footer را طراحی خواهیم کرد.

27
  • قسمت بیست و ششم - معرفی پروژه سوم

00:08:58

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

28
  • قسمت بیست و هفتم - طراحی بخش Header

00:26:48

در این ویدیو اولین بخش از پروژه خود ، بخش Header را طراحی خواهیم کرد.

29
  • قسمت بیست و هفتم - طراحی بخش Intro

00:17:56

در این ویدیو قسمت دوم پروژه ، قسمت Intro را طراحی خواهیم کرد.

30
  • قسمت بیست و نهم - تحلیل و طراحی بخش ابتدایی Featured

00:18:37

در این ویدیو به ستون بندی و ایجاد ردیف برای بخش Featured خواهیم پرداخت.

31
  • قسمت سی - تکمیل و طراحی بخش Featured

00:31:02

در این ویدیو باقی مانده بخش Featured را طراحی خواهیم کرد.

32
  • قسمت سی و یک - طراحی بخش newsletter

00:24:58

در این ویدیو قسمت اول از بخش Sidebar یعنی قسمت newsletter را طراحی خواهیم کرد.

33
  • قسمت سی و دوم - تکمیل بخش Sidebar

00:08:54

در این ویدیو دو قسمت باقی مانده از بخش Sidebar را طراحی خواهیم کرد.

34
  • قسمت سی و سوم - طراحی بخش All Stories

00:21:44

در این ویدیو قسمت All Stories را طراحی خواهیم کرد.

35
  • قسمت سی و چهارم - طراحی بخش Before Footer

00:24:48

در این ویدیو Before Footer را طراحی خواهیم کرد.

36
  • قسمت سی و پنجم - طراحی بخش Footer

00:25:41

در این ویدیو بخش پایانی از پروژه سوم را طراحی خواهیم کرد.

37
  • قسمت سی و ششم - ویدیو پایانی

00:19:06

در این ویدیو به معرفی تمرین و یک Roadmap برای ادامه راه پرداخته ایم.

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

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