Loading...
  • 0.0/5.0
  • (0 نظرات)
  • تعداد قسمت 57
  • مدت زمان 13:34:34
  • انتشار 1401/12/27
  • آخرین ویرایش 1401/12/27

جواد عوض زاده

مدرس دانشسرا

آموزش کاربردی HTML و CSS

  • 0.0/5.0
  • تعداد مهارتجو 29
  • آخرین ویرایش 1401/12/27
  • انتشار 1403/09/23

توضیحات آموزش کاربردی HTML و CSS

آموزش کاربردی HTML و CSS در واقع اولین قدم برای ورود به کانتکست وب و طراحی وب سایت است. اگر Html و Css را به یک ساختمان تشبیه کنیم، Html بدنه ساختمان است که به کمک Css جلوه و زیبایی پیدا می کند. در واقع این دو در کنار هم کامل می شوند و یک پکیج قوی را تشکیل می دهند. آموزش کاربردی HTML و CSS به طور کل در تقریبا همه زبان‌های برنامه نویسی و حتی طراحی وب یک پروژه رو میشه به دو بخش frontend و backend تقسیم کرد. فرانت‌اند یعنی بخش جلویی و بک‌اند یعنی بخش پس زمینه کار. این اتفاق برای یک سایت ساده شخصی یا یک سایت خبری یا مثلا آشپزی هم میافته. شما در واقع دو بخش دارید. در آموزش کاربردی HTML و CSS ما قصد داریم که روش طراحی بخش جلویی کار یا frontend رو بهتون آموزش بدیم. جدا از اینکه در بخش پشتی کار چه اتفاقی داره میافته و از چه تکنولوژی استفاده میشه، در نهایت بخش جلویی کار در یک وب سایت ساده تا پیچیده‌ترین وب...

آموزش کاربردی HTML و CSS در واقع اولین قدم برای ورود به کانتکست وب و طراحی وب سایت است.



اگر Html  و Css  را به یک ساختمان تشبیه کنیم، Html بدنه ساختمان است که به کمک Css جلوه و زیبایی پیدا می کند. در واقع این دو در کنار هم کامل می شوند و یک پکیج قوی را تشکیل می دهند.



آموزش کاربردی HTML و CSS



به طور کل در تقریبا همه زبان‌های برنامه نویسی و حتی طراحی وب یک پروژه رو میشه به دو بخش frontend و backend تقسیم کرد. فرانت‌اند یعنی بخش جلویی و بک‌اند یعنی بخش پس زمینه کار. این اتفاق برای یک سایت ساده شخصی یا یک سایت خبری یا مثلا آشپزی هم میافته. شما در واقع دو بخش دارید.



در آموزش کاربردی HTML و CSS ما قصد داریم که روش طراحی بخش جلویی کار یا frontend رو بهتون آموزش بدیم. جدا از اینکه در بخش پشتی کار چه اتفاقی داره میافته و از چه تکنولوژی استفاده میشه، در نهایت بخش جلویی کار در یک وب سایت ساده تا پیچیده‌ترین وب سایت‌ها از html و css‌ تشکیل شده است.



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



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



پیش نیاز دوره آموزش کاربردی HTML و CSS :



تنها پیش نیاز لازم برای دوره آموزش کاربردی HTML و CSS علاقه مندی به حوزه برنامه نویسی وب می باشد.



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




  1. آموزش مقدماتی وب 

  2. توضیحات تکمیلی Html

  3. سینتکس CSS

  4. آموزش Border ها 

  5. ارتفاع و پهنا 

  6. آموزش تکست ها و نحوه کار با آن

  7. آموزش فونت

  8. مقیاس های اندازه دهی 

  9. لینک ها

  10. لیست ها

  11. سلکتورها 

  12. باکس مدل 

  13. CSS ریست

  14. اچ تی ام ال 5 

  15. طرح بندی css 

  16. تمرین طرح بندی

  17. ابزار برش(snipping tools) 

  18. آموزش Inspect

  19. CSS پوزیشن

  20. تمرین CSS پوزیشن

  21. شناور 

  22. توضیحات تکمیلی طرح بندی

  23. سلکتورها

  24. سلکتورها قسمت دوم 

  25. نوار ناوبری

  26. تمرین نوار ناوبری 

  27. آموزش Dropdowns

  28. تمرین آموزش Dropdowns

  29. عکس ها و کاربردهای آن

  30. فرم ها

  31. ویژگی CSS Counters

  32. سی اس اس 3(CSS3) 

  33. بک گراند سی اس اس سه

  34. رنگ ها

  35. متن ها و سایه دادن

  36. وب فونت

  37. وب فونت قسمت دوم 

  38. ترنسفورم(Transforms) چیست؟ 

  39. متحرک سازی

  40. انیمیشن

  41. عکس ها 

  42. دکمه ها 

  43. شماره گذاری

  44. ستون ها

  45. رابط کاربری

  46. باکس انعطاف پذیری 

  47. فیلترها

  48. Media Queries

  49. طراحی واکنش گرا(Responsive)

  50. راهکاری برای دیده شدن سایت 

  51. Css Fremeworks

  52. Ermile Fremework

  53. نکات تکمیلی

  54. نکات تکمیلی

  55. آموزش SVG

  56. گوگل مپ 

  57. توضیحات تکمیلی 


قسمت های آموزش کاربردی HTML و CSS

1 - آموزش مقدماتی وب

00:25:25

مشاهده

2 - توضیحات تکمیلی Html

00:11:32

مشاهده

3 - سینتکس CSS

00:23:53

مشاهده

4 - آموزش Border ها

00:19:42

مشاهده

5 - ارتفاع و پهنا

00:07:21

مشاهده

6 - آموزش تکست ها و نحوه کار با آن

00:10:14

مشاهده

7 - آموزش فونت

00:08:20

مشاهده

8 - مقیاس های اندازه دهی

00:15:22

مشاهده

10 - لیست ها

00:11:22

مشاهده

12 - باکس مدل

00:09:22

مشاهده

13 - CSS ریست

00:09:21

مشاهده

14 - اچ تی ام ال 5

00:20:46

مشاهده

15 - طرح بندی css

00:15:28

مشاهده

16 - تمرین طرح بندی

00:23:09

مشاهده

17 - ابزار برش(snipping tools)

00:04:39

مشاهده

18 - آموزش Inspect

00:23:08

مشاهده

19 - CSS پوزیشن

00:25:06

مشاهده

20 - تمرین CSS پوزیشن

00:12:16

مشاهده

21 - شناور

00:10:43

مشاهده

22 - توضیحات تکمیلی طرح بندی

00:13:24

مشاهده

23 - سلکتورها

00:05:49

مشاهده

24 - سلکتورها قسمت دوم

00:18:24

مشاهده

25 - نوار ناوبری

00:19:52

مشاهده

26 - تمرین نوار ناوبری

00:08:36

مشاهده

27 - آموزش Dropdowns

00:29:20

مشاهده

28 - تمرین آموزش Dropdowns

00:13:29

مشاهده

29 - عکس ها و کاربردهای آن

00:12:27

مشاهده

30 - فرم ها

00:14:57

مشاهده

31 - ویژگی CSS Counters

00:11:06

مشاهده

32 - سی اس اس 3(CSS3)

00:09:03

مشاهده

33 - بک گراند سی اس اس سه

00:11:21

مشاهده

34 - رنگ ها

00:11:54

مشاهده

35 - متن ها و سایه دادن

00:14:42

مشاهده

36 - وب فونت

00:19:21

مشاهده

37 - وب فونت قسمت دوم

00:12:26

مشاهده

38 - ترنسفورم(Transforms) چیست؟

00:06:40

مشاهده

39 - متحرک سازی

00:09:54

مشاهده

40 - انیمیشن

00:16:43

مشاهده

41 - عکس ها

00:06:43

مشاهده

42 - دکمه ها

00:10:29

مشاهده

43 - شماره گذاری

00:08:21

مشاهده

44 - ستون ها

00:03:53

مشاهده

45 - رابط کاربری

00:07:07

مشاهده

46 - باکس انعطاف پذیری

00:14:37

مشاهده

47 - فیلترها

00:03:01

مشاهده

48 - Media Queries

00:15:59

مشاهده

49 - طراحی واکنش گرا(Responsive)

00:15:18

مشاهده

50 - راهکاری برای دیده شدن سایت

00:11:53

مشاهده

51 - Css Fremeworks

00:20:04

مشاهده

52 - Ermile Fremework

00:45:13

مشاهده

53 - نکات تکمیلی

00:16:22

مشاهده

54 - نکات تکمیلی

00:16:22

مشاهده

55 - آموزش SVG

00:10:19

مشاهده

56 - گوگل مپ

00:05:35

مشاهده

57 - توضیحات تکمیلی

00:13:14

مشاهده

سوالت را بپرس ...