قیمت این دوره: 700,000 تومان
  • مدرس دوره : علی شاهوی
  • تعداد ویدیوها : 72 ویدیو
  • مدت زمان دوره : 17:18:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1403/09/01
ثبتـــ نام در این دوره ثبت نام در دوره
دوره جامع و پروژه محور متخصص فرانت اند - مقدماتی

دوره جامع و پروژه محور متخصص فرانت اند - مقدماتی

باسلام دوستان گرامی.

 در این دوره قصد داریم تبدیل به یک طراح وب سایت (برنامه نویس فرانت اند) بشویم. ما در این دوره با بررسی کد های برنامه نویسان دیگر به یادگیری نکات به کار رفته در پروژه های مختلف خواهیم پرداخت.همچنین مهم ترین نقطه قوت این دوره طرح چالش های واقعی از پروژه های واقعی است که ما در این دوره به حل مسا‌ئل پیش آمده خواهیم پرداخت. از مباحث پایه شروع میکنیم و قدم به قدم به مباحث پیشرفته تر میرسیم. در این دوره پس از هر فصل و مبحث تمرین ها و پروژه و مینی پروژه های مختلفی داریم که با انجام دادنش باعث آشنایی شما با اون مبحث میشود و مباحث ملکه ذهن خواهد شد. هر فصل حداقل دو پروژه را خواهد داشت و هیچ نکته ای جا نخواهد ماند. با بنده همراه باشید تا از 0 به برنامه نویس فرانت اند برسیم. این دوره آشنایی خاصی نیاز ندارد اما شما کامل باید مسلط به کامپیوتر و موارد اون باشید و ترجیحا دوره رایگان مفاهیم پایه و پیش نیاز طراحی وب : https://toplearn.com/c/6043 رو ببینید.

سرفصل های دوره

معرفی دوره
شروع فصل اول – نحوه تمرین و توضیحات
HTML چیست ؟
تعریف صفحه وب ایستا و پویا
نصب و معرفی VSCode
ساختار HTML – المان ، تگ ، اتریبیوت (Attributes)
ساختار متنی یک صفحه در HTML
حالت های مختلف متن در HTML
تگ های نگارشی در HTML
لینک ها در HTML
تصاویر در HTML
جداول در HTML
لیست ها در HTML
معرفی المان های Block و Inline در HTML
معرفی تگ Div در HTML
معرفی Iframes در HTML
متا تگ ها در HTML
فرم ها در HTML
ساختار و قواعد یک صفحه وب
متن ها در HTML – بخش دوم
المان‌های مفهومی در HTML
کاراکترهای ویژه در HTML
SVG چیست ؟
کار با فرمت صوتی و ویدئویی در HTML
بررسی ویژگی های سراسری (Global Attributes) در HTML
بررسی کل ویژگی های (Attributes) المان های HTML
چگونه استاندارد کد بزنیم ؟؟ - بخش HTML
معرفی پروژه اول - فصل اول
انجام پروژه اول – فصل اول
معرفی پروژه دوم – فصل اول
انجام پروژه دوم – اتمام فصل اول
شروع فصل دوم – CSS چیست ؟
نوشتن اولین CSS – روش های نوشتن CSS
معرفی ID و Class
انتخابگر ها در CSS
معرفی واحد های رنگی در CSS
بک گراند (Backgrounds) در CSS
بوردرها (Borders) در CSS
مارجین (Margins) در CSS
پدینگ (Padding) در CSS
عرض و ارتفاع در CSS
حداقل و حداکثر عرض و ارتفاع در CSS
تعریف باکس مدل (Box Model)
اوت لاین (OutLine) در CSS
متن ها در CSS
فونت ها در CSS
آیکن ها در CSS
لینک ها در CSS
لیست ها در CSS
جداول در CSS
ساختار صفحه وب در CSS – تعریف Display
ساختار صفحه وب در CSS – تعریف Position
ساختار صفحه وب در CSS – تعریف Z-Index
ساختار صفحه وب در CSS – تعریف Overflow
ساختار صفحه وب در CSS – تعریف Float
تعریف المان Inline-Block
ساختار صفحه وب در CSS – تراز کردن در CSS
رابطه انتخابگر ها در CSS
سودو کلاس ها (Pseudo-classes) در CSS
سودو المان ها (Pseudo-elements) در CSS
شفافیت گرافیکی در CSS
مینی پروژه : طراحی چند منو در CSS
مینی پروژه : طراحی منوی باز شو در CSS
مینی پروژه : طراحی گالری تصاویر در CSS
انتخابگر های اتریبیوت (Attribute) در CSS
فرم ها در CSS
شمارنده ها در CSS
ساختار صفحه وب در CSS – بخش پایانی
واحد های اندازه گیری در CSS
تقدم و تاخر در CSS
تعریف Important در CSS
توابع ریاضی در CSS
شروع CSS پیشرفته
تصاویر با گوشه های گرد در CSS
تعریف پراپرتی Border-Image در CSS
بک گراند (Backgrounds) پیشرفته در CSS
حالت های رنگی در CSS
گرادینت (Gradiants) در CSS
تعریف سایه در CSS
حالت های متن در CSS
Transforms دو بعدی در CSS
Transforms سه بعدی در CSS
Transitions در CSS
انیمیشن در CSS
مینی پروژه : ساخت Tooltip در CSS
استایل دهی به تصاویر در CSS
انعکاس تصاویر در CSS
تعریف Object-Fit در CSS
تعریف Object-Position در CSS
ماسک کردن در CSS
دکمه ها در CSS
مینی پروژه : ساخت باکس صفحه بندی در CSS
مفهوم قاعده Box Sizing
متغیر ها در CSS
تعریف Resize و Outline-offset در CSS
شروع مبحث واکنش گرایی – مدیا کوئری
پروژه اول فصل دوم : پیاده سازی ساختار یک صفحه واکنش گرا
FlexBox در CSS – بخش اول
FlexBox در CSS – بخش دوم
FlexBox در CSS – بخش سوم
FlexBox در CSS – بخش چهارم
واکنش گرایی پیشرفته – CSS Grid
CSS Grid – بخش دوم
CSS Grid – بخش سوم
CSS Grid – بخش چهارم
واکنش گرایی تخصصی – مبانی واکنش گرایی
مبانی واکنش گرایی ۲ – دید کاربر
مبانی واکنش گرایی ۳ – ستون ها و سطر ها
مبانی واکنش گرایی ۴ – مدیا کوئری پیشرفته
مبانی واکنش گرایی 5 – استفاده از تصاویر
مبانی واکنش گرایی 6 – معرفی مختصر فریم ورک ها
پروژه دوم فصل دوم – معرفی
پروژه دوم فصل دوم – طراحی مینی فریم ورک اختصاصی
پروژه دوم فصل دوم – اجرای پروژه



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

مدت زمان دوره 17:18:00

  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1

  • معرفی دوره

00:04:56

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

2

  • شروع فصل اول و نحوه تمرین و توضیحات

00:10:53

در این جلسه درباره نحوه تمرین و نحوه آموزش دیدن و تفاوت سریال با آموزش !! صحبت خواهیم کرد.

3

  • HTML چیست ؟؟

00:18:37

در این جلسه در مورد تاریخچه HTML و یک سری مفاهیم مرتبط به طراحی وب صحبت خواهیم کرد.

4

  • تعریف صفحه وب ایستا و پویا

00:15:45

در این جلسه در رابطه با صفحات وب استاتیک (Static) و داینامیک (Dyanamic) صحبت خواهد شد.

5

  • نصب و معرفی نرم افزار VSCode

00:08:25

در این جلسه در رابطه با نصب و افزونه های نرم افزار قدرتمند VSCode صحبت خواهد شد.

6

  • ساختار HTML – المان ، تگ ، اتریبیوت (Attributes)

00:44:23

در این جلسه در رابطه با مفاهیم اتریبیوت،تگ،المان و قواعد و قوانین HTML صحبت خواهیم نمود.

7

  • ساختار متنی یک صفحه در HTML

00:30:28

در این جلسه به معرفی تگ های h,p,span و قواعد نوشتاری تگ ها,ساختار متنی یک صفحه وب می پردازیم.

8

  • حالت های مختلف متن در HTML

00:37:21

در این جلسه در رابطه با تگ های b,strong,i,em,mark,del,ins,sub,sup صحبت خواهد شد.

9

  • تگ های نگارشی در HTML

00:21:47

در این بخش در رابطه با تگ های blockqoute,q,cite,abbr,bdo,bdi,address صحبت خواهد شد.

10

  • لینک ها در HTML

00:38:55

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

11

  • پروژه اول فصل اول – نوشتن یک نامه

00:23:04

در این جلسه به عنوان یک مینی پروژه یک نامه مینویسم اما با زبان HTML

12

  • تصاویر در HTML

00:17:25

در این جلسه در رابطه با تصاویر و تگ img قواعد آن صحبت خواهیم کرد.

13

  • جداول در HTML

00:14:42

در این جلسه در رابطه با جداول و تگ های table,th,tr,td,thead,tbody,tfoot صحبت خواهد شد.

14

  • لیست ها در HTML

00:13:45

در این جلسه در رابطه با لیست ها و تگ های ul,li,ol,dd,dt,dl و قواعد آن صحبت خواهد شد.

15

  • معرفی المان های Block و Inline در HTML

00:14:04

در این بخش در رابطه با مفهوم المان های Inline , Block و قواعد آن صبحت خواهد شد.

16

  • معرفی تگ Div در HTML

00:08:48

در این جلسه در رابطه با تگ div و قواعد آن صحبت خواهیم کرد.

17

  • معرفی اتریبیوت های Class و ID در HTML

00:16:15

در این جلسه در رابطه با دو عدد از مهم ترین اتریبیوت های HTML یعنی Class و Id صحبت خواهیم کرد.

18

  • فرم ها در HTML – بخش اول

00:15:14

در این جلسه در رابطه با تگ form و ویژگی و قواعد آن صحبت خواهد شد.

19

  • فرم ها در HTML – بخش دوم

00:31:20

در این جلسه در رابطه با المان های داخلی تگ form نظیر textarea,select و ... صحبت خواهد شد.

20

  • فرم ها در HTML – بخش سوم

00:46:55

در این جلسه در رابطه با مقادیر اتریبیوت (Attrbute) تایپ (Type) المان Input در مبحث فرم ها صبحت خواهد شد.

21

  • فرم ها در HTML – بخش چهارم

00:30:43

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

22

  • فرم ها در HTML – بخش پنجم

00:05:46

در این جلسه در رابطه با سلسله اتریبیوت های form* صحبت خواهد شد.

23

  • ساختار و قواعد یک صفحه وب

00:14:37

در این جلسه در رابطه با ساختار و قواعد یک صفحه وب و نحوه طراحی صحبت خواهیم کرد.

24

  • المان‌های مفهومی در HTML

00:25:26

در این جلسه در رابطه با تگ های nav,header,footer,aside و دیگر المان های معنا دار دیگر صحبت خواهد شد.

25

  • المان های زبان ماشین در HTML

00:08:40

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

26

  • معرفی Iframes در HTML

00:08:46

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

27

  • کاراکترهای ویژه در HTML

00:05:22

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

28

  • SVG چیست ؟

00:11:01

در این جلسه در رابطه با SVG و نحوه استفاده از آن صحبت خواهیم کرد .

29

  • کار با فرمت صوتی و ویدئویی در HTML

00:15:47

در این جلسه در رابطه با مالتی مدیا ، فرمت های مالتی مدیا و نحوه نمایش آن ها صحبت خواهد شد.

30

  • تعریف زیرنویس در ویدئو و صوت در HTML

00:10:23

در این جلسه در رابطه با تگ Track و اتریبیوت های آن به جهت تعریف زیرنویس و توضیحات برای ویدئو توضیح خواهیم داد.

31

  • متاتگ ها در HTML

00:11:18

در این جلسه در رابطه با متاتگ ها (Metatags) صحبت خواهیم کرد.

32

  • تگ Map و Area در HTML

00:14:40

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

33

  • تگ Meter و Progress در HTML

00:14:53

در این بخش در رابطه با المان های meter,progress صبحت خواهیم کرد.

34

  • تگ dfn در HTML

00:13:23

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

35

  • بررسی ویژگی های سراسری (Global Attributes) در HTML

00:28:43

در این جلسه در رابطه با کلیه ویژگی ها (Attributes) سراسری صحبت و توضیح داده خواهد شد.

36

  • چگونه استاندارد کد بزنیم ؟؟ - بخش HTML

00:18:47

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

37

  • معرفی پروژه دوم - فصل اول

00:02:19

در این جلسه درباره پروژه صفحه جستجوی گوگل و صفحه نتایج جستجو گوگل توضیحاتی داده خواهد شد.

38

  • انجام پروژه دوم – فصل اول

00:23:05

در این جلسه ساختار کلی دومین پروژه از فصل اول را پیاده سازی می کنیم.

39

  • معرفی پروژه سوم – فصل اول

00:02:11

در این جلسه درباره سومین پروژه از فصل اول توضیحاتی داده خواهد شد.

40

  • انجام پروژه سوم – اتمام فصل اول

00:15:28

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

41

  • شروع فصل دوم – CSS چیست ؟

00:06:51

در این جلسه در رابطه با CSS و موارد استفاده آن صحبت می کنیم .

42

  • نوشتن اولین CSS – روش های نوشتن CSS

00:13:16

در این جلسه در رابطه با روش های نوشتن و قواعد نوشتاری CSS صحبت خواهد شد.

43

  • انتخابگر ها در CSS

00:14:45

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

44

  • معرفی واحد های رنگی در CSS

00:18:47

در این بخش درباره واحد و یکا های رنگ در HTML,CSS صحبت خواهیم کرد.

45

  • بک گراند (Backgrounds) در CSS

00:14:58

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

46

  • بوردرها (Borders) در CSS

00:09:07

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

47

  • مارجین (Margins) در CSS

00:15:26

در این جلسه در رابطه با مفهوم Margin در Css صحبت خواهد شد.

48

  • پدینگ (Padding) در CSS

00:04:57

در این جلسه در رابطه با Padding و مفهوم آن صحبت خواهیم کرد.

49

  • عرض و ارتفاع در CSS

00:02:34

در این جلسه در رابطه با مفهوم عرض و ارتفاع صحبت خواهیم کرد.

50

  • حداقل و حداکثر عرض و ارتفاع در CSS

00:07:54

در این جلسه در رابطه با Max و Min در CSS صحبت خواهیم کرد.

51

  • تعریف باکس مدل (Box Model)

00:10:24

در این جلسه درباره مدل جعبه و مفهوم کلی لایه های آن صحبت خواهیم کرد.

52

  • اوت لاین (Outline) در CSS

00:08:40

در این جلسه در رابطه با مبحث Outline در Css و نحوه ایجاد آن صحبت خواهیم کرد.

53

  • متن در CSS

00:22:12

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

54

  • فونت در CSS

00:10:12

در این جلسه به صورت مختصر درباره خانواده و نوع فونت ها صحبت می شود.

55

  • آیکن در CSS

00:06:55

در این جلسه در رابطه با استفاده از کتابخانه Font Awesome صحبت می شود

56

  • لیست ها در CSS

00:15:02

در این جلسه در رابطه با سفارشی سازی و استایل دادن به لیست ها در CSS صحبت خواهد شد.

57

  • جداول در CSS

00:04:22

در این جلسه استایل و حاشیه دادن به جداول در CSS بررسی می شود.

58

  • ساختار صفحه وب در CSS – تعریف Display

00:14:17

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

59

  • ساختار صفحه وب در CSS – تعریف Position

00:14:44

در این جلسه کلیه مقادیر پراپرتی Position را بررسی میکنیم.

60

  • ساختار صفحه وب در CSS – تعریف Z-Index

00:11:01

در این جلسه در رابطه با Z Index و ترتیب عناصر صحبت می کنیم.

61

  • ساختار صفحه وب در CSS – تعریف Overflow

00:10:39

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

62

  • ساختار صفحه وب در CSS – تعریف Float

00:13:23

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

63

  • تعریف المان Inline-Block

00:04:03

در این جلسه درباره المان Inline-block (ترکیب المان بلاکی و اینلاینی) صحبت خواهیم کرد.

64

  • ساختار صفحه وب در CSS – تراز کردن در CSS

00:07:03

در این جلسه درباره تراز کردن و توضیح کلی ساختار صفحه وب صحبت خواهیم کرد.

65

  • Combinator ها در CSS

00:09:47

در این جلسه در رابطه با انتخابگر های ترکیبی و نحوه کار آن ها در CSS صحبت خواهیم نمود

66

  • تفاوت انتخابگر های Child و Descendant

00:02:32

درباره تفاوت انتخابگر های Child و Descendant در CSS صحبت خواهیم کرد

67

  • شبه کلاس ها (Pseudo-classes) در CSS

00:15:48

درباره شبه کلاس ها در CSS صحبت خواهیم کرد

68

  • شبه المان ها (Pseudo-elements) در CSS

00:06:07

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

69

  • شفافیت گرافیکی در CSS

00:02:41

در این جلسه درباره شفافیت (Transpanency) در تصاویر و Background در CSS صحبت خواهیم کرد.

70

  • مینی پروژه طراحی منوی ساده در CSS

00:09:45

در این جلسه یک پروژه کوچک بسیار بسیار مختصر و ساده و اما با نکات مهمی رو میزنیم.

71

  • انتخابگر های صفت (Attribute) در CSS

00:10:00

در این جلسه درباره یک دسته دیگر و مهم از انتخابگر های داخل CSS صحبت خواهیم نمود.

72

  • ساختار صفحه وب در CSS – بخش پایانی

00:06:23

در اخرین جلسه از دوره توضیح مختصری درباره الگوی استاندارد و ساده طراحی و نقش تگ های معنایی در آن صحبت خواهد شد.

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

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

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