Энд дарж 6ш үнэгүй хичээлийг үзэх

36466 харсан 126 видео 30 цаг 8 мин

Худалдаж авах     42,000189,000


Энэхүү сургалт нь Flexbox, CSS Grid, Sass зэрэг орчин үеийн HTML5 ба CSS3+ технологиудыг ашиглан Responsive (мэдрэмтгий) вэбсайт, хэрэглэгчийн интерфэйсийг хэрхэн хийх тухай эхлэн суралцагчид болон туршлагатай вэб хөгжүүлэгчдэд зориулагдсан цогц сургалт юм. Уг сургалт нь олон цагийн турш үргэлжлэх бодит төсөл дээр тулгуурласан хичээлүүдийг агуулсан. Bootstrap мэтийн framework-уудад хэт их найдахаа больж, өөрийн гэсэн бүтэц, хэрэгслүүдийг зохиож цоо шинэ хэв маягтай вэб сайт, UI-ийг бүтээцгээе.
Сургалтын эхний хэдэн бүлэг нь эхлэн суралцагчдад зориулагдсан бөгөөд хэрэв та урд нь вэб бүтээхтэй холбоотой юу ч хийж байгаагүй бол яг л энэ хэдэн бүлгээс та бүх үндсэн ойлголтуудыг авах болно. Харин та HTML болон CSS-ийн талаар тодорхой мэдлэгтэй бол шууд 3 болон 4 дүгээр бүлгийн хичээлүүдийг үзэж эхлээрэй.

Бидний судлах зүйлс:

Вэб сайт хэрхэн ажилладаг вэ?
Visual Studio Code-ын тохиргоо, Live Server болон Emmet
HTML5 Semantic бүтэц
CSS-ийн үндсэн ойлголтууд
Media Query бүхий Responsive дизайн
CSS-ийн хэмжих нэгжүүд - rem, em, vh, vw гэх зэрэг
Flexbox
CSS Grid
Keyframe, Transition ашиглан Animation хийх
CSS хувьсагчууд
Sass
Бүрэн болон мини төслүүд
Shared Host дээр вэбийг байршуулах

Суралцагчдын ур чадварын түвшин: Бүх түвшний
Сургалтыг үзэхэд шаардагдах зүйлс бий юу? Уг сургалт нь эхлэн суралцагчаас мэргэжлийн хөгжүүлэгчид хүртэл бүх хүмүүст зориулагдсан. Ямар нэг урьдчилсан нөхцөл шаардагдахгүй.
Сургалт маань анх удаа нээгдэж байгаа тул өдөрт нэг видео хичээл нэмэгдэх байдлаар явах болно. Магадгүй зарим өдрүүдэд илүү олон сургалтууд нэмэгдэх боломжтой. Хэрэв танд өдөрт нэг видео хангалттай гэж үзэж байвал яг одоо сургалтандаа бүртгүүлээрэй.
Сургалтын явцад та орчин үеийн шаардлагад нийцсэн гоёмсог дизайн бүхий вэб сайтыг өөрөө бүтээж сурах бөгөөд таны вэб сайт тэс өөр түвшинд хүрч хөгжинө гэдэгт итгэлтэй байна.
Сургалт маань нээлтээ тохиолдуулан хямдарсан байгаа бөгөөд та хямдралын хугацаанд амжиж сургалтаа аваарай!

   Хичээлүүд :   

  1. 3:51
    Нэгдүгээр бүлэг. Сургалтанд тавтай морил.
  2. 9:41
    Вэб хэрхэн ажилладаг вэ?
  3. 7:14
    Вэб хөгжүүлэлтэд HTML болон CSS-ийн гүйцэтгэх үүргүүд
  4. 13:21
    Visual Studio Code-ыг суулгах, тохируулах
  5. 3:16
    Хоёрдугаар бүлэг. HTML-ийн үндэс. Бүлгийн танилцуулга.
  6. 10:35
    HTML хуудсыг үүсгэх, нээх
  7. 13:32
    Doctype болон үндсэн layout
  8. 9:20
    Live Server-ийг тохируулах (Visual Studio Code-ын нэмэлт)
  9. 12:12
    Meta Tag болон Хайлтын системүүд
  10. 16:27
    Heading, Paragraph болон текстийн харагдах байдал
  11. 23:32
    Вэб холбоос (link), зураг, attribute-ийн тухай
  12. 19:04
    Жагсаалт болон хүснэгт
  13. 30:26
    Form болон Input
  14. 9:22
    Block level болон Inline level элементүүд
  15. 17:02
    Div, Span, ID болон классууд
  16. 11:27
    Html Entities, Symbols
  17. 7:24
    Html5 Semantic Таg-ууд
  18. 6:05
    Html5 Semantics үргэлжлэл
  19. 2:24
    Гуравдугаар бүлэг. CSS-ийн үндэс. Бүлгийн танилцуулга.
  20. 15:47
    CSS-ийг implement хийх
  21. 17:24
    CSS-ийн үндсэн selector-ууд
  22. 9:38
    Developer Tools-ийн тухай
  23. 17:01
    CSS дэх фонтууд
  24. 11:01
    Өнгөний төрлүүд
  25. 24:47
    Хүрээ болон дэвсгэр өнгө
  26. 26:45
    Box модель, Margin болон Padding
  27. 22:37
    Float болон зэрэгцүүлэлт
  28. 16:45
    Вэб холбоосын төлөв болон товчлуурын загварыг өөрчлөх нь
  29. 20:16
    Цэстэй ажиллах
  30. 13:12
    Inline, Block болон Inline-Block
  31. 19:41
    Positioning буюу байрлуулах
  32. 3:25
    Form-ийн загварын даалгавар
  33. 17:48
    Form-ийн загварын шийдлүүд
  34. 9:27
    Visibility, Order болон хасах Margin
  35. 5:10
    Дөрөвдүгээр бүлэг. Зочид буудлын вэб сайт. Төслийн танилцуулга.
  36. 5:39
    Дизайны санаа
  37. 36:47
    Файлын бүтэц, Navbar
  38. 35:50
    Showcase болон Hotel Info
  39. 20:29
    Feature-ууд болон Footer
  40. 30:07
    Бидний тухай хуудас
  41. 18:55
    Холбоо барих хуудас
  42. 5:10
    Тавдугаар бүлэг. Responsive Layout. Responsive дизайн гэж юу вэ?
  43. 24:44
    Media Query-г ашиглах нь
  44. 20:30
    Em болон Rem хэмжих нэгжүүд
  45. 19:25
    Vh болон Vw хэмжих нэгжүүд
  46. 28:29
    Зочид буудлын сайтаа бүрэн Responsive болгох
  47. 5:38
    Зургаадугаар бүлэг. Flexbox-ын тухай. Flexbox гэж юу вэ?
  48. 15:38
    Flex-ийн үндсэн ойлголтууд
  49. 21:18
    Flex зэрэгцүүлэлт болон эрэмбэ
  50. 5:00
    Долдугаар бүлэг. Platinum Financial вэб сайт (Flexbox). Төслийн танилцуулга.
  51. 23:22
    Файлын бүтэц, Flex NavBar
  52. 18:02
    Showcase Header
  53. 15:47
    Бид юу хийдэг вэ? хэсэг
  54. 18:34
    Бид хэн бэ? болон үйлчлүүлэгчдийн хэсэг
  55. 23:34
    Холбоо барих форм, газрын зураг, footer
  56. 10:56
    Widescreen болон таблетад үзүүлэх
  57. 13:02
    Ухаалаг утсанд үзүүлэх
  58. 7:45
    Бяцхан даалгавар
  59. 16:18
    Наймдугаар бүлэг. CSS-ийн бусад ойлголтууд. Targeted Selector-ууд.
  60. 11:28
    nth-child Pseudo selector-ууд
  61. 14:09
    before, after Pseudo selector-ууд
  62. 13:46
    Box Shadows
  63. 7:09
    Text Shadows
  64. 13:41
    CSS-ийн хувьсагчууд
  65. 12:33
    Keyframe анимаци 1
  66. 7:10
    Keyframe анимаци 2
  67. 12:36
    CSS Transition-ууд
  68. 8:07
    Transform Property
  69. 11:30
    Есдүгээр бүлэг. Keyframe, Transition бүхий мини төслүүд. Пресентэйшн вэб сайт 1 - HTML
  70. 14:08
    Пресентэйшн вэб сайт 2 - Хуудаснуудын CSS
  71. 12:34
    Пресентэйшн вэб сайт 3 - Text Animation
  72. 26:32
    Hamburger Menu Overlay 1 - HTML болон үндсэн СSS
  73. 11:32
    Hamburger Menu Overlay 2 - Гамбургер хийх
  74. 6:20
    Hamburger Menu Overlay 3 - Гамбургер шугамуудад анимаци хийх
  75. 21:07
    Hamburger Menu Overlay 4 - Menu Overlay
  76. 17:03
    Он цагийн товчоо 1 - HTML болон үндсэн CSS
  77. 19:25
    Он цагийн товчоо 2 - Box болон Arrow
  78. 9:27
    Он цагийн товчоо 3 - Responsive Media Query
  79. 12:32
    Он цагийн товчоо 4 - Scroll In анимаци
  80. 26:04
    Drop Down Menu
  81. 6:03
    Аравдугаар бүлэг. CSS grid. CSS grid гэж юу вэ?
  82. 12:48
    Grid-ийн тухай үндсэн ойлголтууд, багана
  83. 7:10
    Grid мөрнүүд
  84. 10:00
    Grid-ийн мөр болон баганыг сунгах
  85. 6:14
    Autofit болон Minmax
  86. 15:21
    Grid Template-ийн талбарууд
  87. 9:00
    Media Query болон Grid
  88. 3:32
    Арваннэгдүгээр бүлэг. NewsGrid вэбсайт. Төслийн танилцуулга.
  89. 12:06
    Тохиргоо болон Favicon
  90. 20:07
    Үндсэн style-ууд, хувьсагчид, Navbar
  91. 19:40
    Overlay бүхий Showcase, товчлуурын загварууд
  92. 26:41
    Эхлэлийн Article Grid
  93. 18:45
    Grid Footer
  94. 11:39
    Бидний тухай хуудас, Page container
  95. 15:23
    Article хуудас
  96. 21:34
    Responsive Media Query
  97. 9:47
    Бонус: Photoshop дээр лого хийх.
  98. 5:24
    Арванхоёрдугаар бүлэг. Вэб сайтыг байршуулах (Netlify). Энэ хэрхэн ажилладаг вэ?
  99. 7:06
    Git-ийн тухай. GitHub руу илгээх.
  100. 10:25
    Netlify байршуулалт
  101. 6:36
    Хямд домэйн нэр авах тухай
  102. 7:44
    Арвангуравдугаар бүлэг. Sass-ыг сурцгаая. Sass гэж юу вэ?
  103. 11:47
    Node-Sass аар ажиллах орчноо бэлтгэх
  104. 6:11
    Koala Sass Compiler
  105. 8:21
    Хувьсагчид болон partial
  106. 8:24
    Nesting, Structuring
  107. 5:53
    Удамшил болон контраст
  108. 17:03
    Функцүүд
  109. 4:46
    Арвандөрөвдүгээр бүлэг. Sass ашиглан Portfolio вэб сайт хийх. Төслийн танилцуулга.
  110. 18:25
    Төслийн тохиргоо
  111. 34:41
    Header болон Main Nav
  112. 19:08
    Мэргэшил болон Статистик хэсэг
  113. 31:01
    Процесс хэсэг, Footer
  114. 21:09
    About Page Info хэсэг
  115. 19:58
    About хуудасны лого
  116. 30:14
    Transition бүхий Галерей
  117. 20:09
    Холбоо барих хуудас
  118. 33:50
    Responsive Media Query
  119. 11:55
    Spam filter бүхий холбоо барих форм, вэб байршуулах
  120. 2:52
    Арвантавдугаар бүлэг. Төгсөв. Үүнээс цааш яах вэ?
  121. CSS-ийн жишээ. Бонус хичээл 1.
  122. CSS-ийн жишээ. Бонус хичээл 2.
  123. CSS-ийн жишээ. Бонус хичээл 3.
  124. CSS-ийн жишээ. Бонус хичээл 4.
  125. CSS-ийн жишээ. Бонус хичээл 5.
  126. Холбоо барих форм. PHP script. Бонус хичээл 6.
189,000    42,000

Худалдаж авах

== Сурагчдын сэтгэгдлүүд ==

uneheer goy hicheeluud baina bayrllaa
tamir, 2019-10-02 15:00:36
Маш хэрэгтэй, сайн сургалт болжээ
Тэмүүлэн, 2019-10-11 18:56:26
Энэхүү сургалт нь маш ойлгомжтой сайн сургалт байна .
Анх Youtube-ээс бичлэг үздэг байсан англи хэл дээр ойлгохгүй зүйл их гардаг басан шантрах үе их гардаг байсан.
Харин одоо 1234.mn Онлайн Сургалт гарч ирсэнээр өөрийн хийж чадахгүй байсан зүйлээ амархан хийж чаддаг болсон .
1234.mn Багш нартаа Баярлаллаа
Б. Мөнхбаяр, 2019-11-14 16:45:29
Маш сайн
Ган-эрдэнэ Гани, 2019-11-18 17:16:13
thanks.
Насанбат, 2019-11-23 17:09:37
Сайн байна уу? маш их баярлалаа маш олон зүйлийг мэдэж авлаа
Б. Сугар, 2019-11-26 10:36:04
Миний хувьд тун дажгүй гэж бодож байна
Мөнхбат Дамбийням, 2019-11-27 16:25:15
hi
Hurelhuu, 2019-11-30 18:52:44
За үнэхээр хэрэгтэй хичээл байна.
Болдбаатар, 2019-12-01 20:51:40
Энэ үнэхээр ойлгомжтой юм аа. Хямдралтай үед нь авсандаа үнэхээр баяртай байна. Сонирхож байгаа хүмүүст хандаж хэлэхэд заавал сургалтын төвд гэхгүйгээр ингээд үзэхэд нилээн юм сурна шүү. Баярлалаа
Gantulga Munkhtur, 2019-12-02 15:37:54
Сургалт маш сайн бас ойлгомжтой байгаа хамгийн давуу тал нь хичээл хаагдан гэж байхгүй нь анхлан суралцаж байгаа надад маш хэргтэй байгаа маш их баярлаа <3
Enhmend Bizya, 2019-12-06 19:44:19
Sain bagsh nar, chanartai surgalt, hymd
А. Сайхан-Ундарга, 2019-12-07 13:37:14
тА БҮХЭНД АМЖИЛТ ХҮСЬЕ
Самдан, 2019-12-09 20:54:34
баярлалаа. Их сайн хичээлүүд байна.
Баярбат, 2019-12-10 13:14:50
Сайн болсон байнаа
Мөнхбат, 2019-12-11 14:51:18
Маш ойлгомжтой гоё хичээл болжээ. баярлалаа
ヒッキ ハチマン, 2019-12-14 00:49:23
Хичээл таалагдаж байна. Баярлалаа
Bazarragchaa, 2019-12-16 17:50:57
Ene surgaltand suusnaar mash ih zuiliig medej awj bnaa. Eh heldeere iim chanartai surgalt awj baigada mash bayrtai baina . Tsaashid iluu olon zuil medj awmaar bna ilvv ih surgalt oruularai bagsha
Ganbat Batbileg, 2019-12-17 02:13:39
Uneheer goy surgalt baina mash ih bayrlalaa
Sodbileg Sodoo, 2019-12-18 22:39:48
үнхээр сайхан сургалт болсон байна илүү олон сургалт хиймээр байна python хэлний талаар хийвэл маш олон хүн үзэх байх сургалтаа хөнгөлөлттөй урамшуулал зарлаж байгаа чинь их дажгүй санагдсан бас дээр нь олон сургалт авбал нэгийг бонус болговол сайхан санаа байгааз баярлалаа
Teach Hack, 2019-12-19 13:36:06
Баярлалаа. Маш сонирхолтой ур чадваруудыг эзэмшиж авч байна. HTML and CSS бодсоноос маш их өөрчлөгджээ. Багшдаа ажлын амжилт хүсье.
zob, 2019-12-21 22:57:57
Үнэхээр их баярлалаа. YouTube -ээс янз бүрийн бичлэг үзээд толгой эргээд нэг л ойлгож өгөхгүй байсан чинь танай сургалтыг үзээд яг гоё дэс дараалалаар нь ойлгож байна.
Hurlee Huu, 2019-12-24 10:04:19
unheer dajgui shuu
Dorj, 2019-12-26 01:12:45
mash ih bayrlalaa
Сайнболд, 2019-12-26 18:01:40
Мартсан санасан зүйлүүдийг сануулж мэддэггүй зүйлийг зааж өгч байгаад баярлаж байна.
Баярлаллаа таньд
Баттөр, 2019-12-28 20:48:35
Сайн сургалт байна. Маш ойлгомжтой
Ochiroo Tsegii, 2019-12-30 19:00:04
Сургалтууд ойлгомжтой бөгөөд суурь түвшингийн мэдлэгийг сайн тавьж өгөхөөр болжээ. Баярлалаа
Ermuun, 2019-12-31 18:19:53
nice
enkhtulga, 2019-12-31 23:24:48
Mash oilgomjtoi
Наранзана, 2020-01-01 00:27:06
Маш их таалагдаж байна
Tsogerdene, 2020-01-02 16:22:50
Энэ сургалт надад маш их хэрэгтэй байсан сургалтыг зааж байгаа багш нартаа маш их баярллаа та нар минь байгаагүй бол цахим ертөнц гэж юу байдаг талаар юуч мэдэхгүй явж.
Та нарынхаа ачийг яаж хариулах билээ би үгээр хэлэшгүй ачтан ачтан та нар минь билээ
Bayraa Ql, 2020-01-03 10:09:06
Сайн ойлгомжтой байна аа. Баярлалаа
Х. Золбаяр, 2020-01-04 16:17:07
Үнэхээр сэтгэл хангалуун байна. Анх би хаанаас сурах вэ? гэж их удаан хайсан нэг бол хэлний асуудал тулгараад, нэг бол ойлгомжгүй, эмх цэгцгүй гээд олигтой ойлголт мэдлэг олж аваагүй. Харин танай сургалтанд хамрагдсанаар би маш их зүйлийг сурч ойлгож авч байна. Монголд ийм гоё сургалт явуулж байгаа та бүхэнд баярлалаа. Улам хичээж өргөжин тэлээрэй. Над шиг ингэж энэ чиглэлээр сурахыг хүссэн маш олон хүүхэд байгаа тэр бүх хүүхдүүдэд энэ сургалт нээлттэй байж улам олон хүнд хүрээсэй гэж хүсч байна. Би чадах чинээгээрэй таниулж сурталчилах болно оо. Та бүхэн улам хичээгээрэй.
GanaaG, 2020-01-06 22:05:39
Надад үнэхээр таалагдаж байгаа . Би ирээдүйд программист болно гэж боддог. Тийм учраас энэ сургалт надад их туслаж байгаа . Одоо хичээлээ сайн үзээд хийгээд явнаа .
Munkh-Orgil, 2020-01-07 18:00:25
Их ойлгомжтой гоё сургалт байна. Багш ч гэсэн их таалагдсан. Баярлалаа.
Доржнямбуу, 2020-01-10 02:41:40
mash saihan surgalt boljee
Eegii Sundui, 2020-01-12 14:31:54
сайн сургалт ,,,
Batbaatar, 2020-01-13 11:46:13
(y)
Билигт, 2020-01-14 15:13:56
perfect
Hna Khosbayar, 2020-01-16 23:54:26
Good.
javkhlan, 2020-01-17 01:09:21
анх сурахад ойлгомжтой тайлбарласан байна. Баярлалаа
Булгадай, 2020-01-26 17:49:37
Багш : Ганзориг
Мэргэжил : Програмист
Заах чиглэл : Мэдээллийн технологи, Хувь хүний хөгжил
Элссэн огноо : 2018-06-02

Боловсрол :
1996-2001 ШУТИС, Компьютерийн техник менежментийн сургууль
1986-1996 Д.Сүхбаатарын нэрэмжит 10 жилийн 2-р дунд сургууль

Танилцуулга :
2019- : Primitive Mind LLC, Маркетингийн албаны захирал
2016- : 4life Research LLC, USA. Бие даасан дистрибьютер. Хувиараа бизнес эрхлэгч.
2012-2017: "Арвайн Үндэс" хүнсний манлай үйлдвэр. Мэдээллийн технологийн инженер.
2006-2008: "ЗМН" кино продюссерийн компани. Line продюссер.
2002-2005: "Старсофт" ХХК. Програм зохиогч. Төслийн удирдагч.
2001-2002: "Сторм" студи. Редактор, эвлүүлэгч.
1997-2001: ШУТИС, КТМС. Лаборант

Ганзориг багштай холбогдох
Ганзориг -ийн бусад сургалтууд