Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
Та HTML болон CSS-ын талаар
үндсэн ойлголтуудыг мэддэг боловч өөрийгөө вэб хөгжүүлэгчийн ажлын байрны шаардлагыг
бүрэн хангаж хараахан чадахгүй гэж бодож байна уу?
Тийм бол энэхүү заагийг арилгах гайхалтай сургалтыг танд танилцуулж байна.
Уг сургалтын явцад бид хамтдаа mobile-first дизайнтай responsive вэб сайтыг бүр эхнээс
нь алхам алхмаар хийж таныг жинхэнэ мэргэжилтэн болгож хөгжүүлэх болно. Мэдээж үүний
зэрэгцээ компаниудын хамгийн ихээр эрж хайж байдаг орчин үеийн вэб хөгжүүлэгчдийн заавал
эзэмшсэн байх ёстой чухал ур чадвар, технологиудад суралцаад явах юм. Вэб хөгжүүлэгч,
компанийн захирал олон найзууд, танилуудтайгаа ярилцаж байхад миний толгойд "ажил
горилогчдод яг тохирсон, тэдэнд компаниудын хайж байдаг ур чадваруудыг эзэмшүүлэх сургалтууд
байвал сайхан шүү" гэсэн бодол байнга төрдөг байсан бөгөөд харамсалтай нь яг ийм
сургалт зах зээл дээрээс бараг олдохгүй байлаа. Тийм ч учраас би өөрөө энэхүү сургалтыг
бэлтгэн та бүхэнд хүргэхээр шийдсэн юм.Та сургалтын явцад Git, GitHub, Node.js, NPM, обьект хандалтат JavaScript, ES6, webpack, Netlify, BEM method-ын талаар үзэх болно.
Энэхүү сургалт нь 2019 оны 11-р сарын байдлаар вэб хөгжүүлэлтийн салбарт трэнд болоод байгаа технологи, мэдээллүүд, шинэчлэлтүүд дээр тулгуурлан хийгдсэн учраас та хамгийн сүүлийн үеийн арга барилаар дээрх ур чадваруудыг эзэмших юм.
Эрднийн чулуу засаагүй байхдаа хямд үнэтэй байдаг. Харин хэн нэг уран гартны гараар дамжиж, урлагийн бүтээл болсны дараа үнэ цэнэ нь хэд дахин өсдөг билээ. Яг үүнтэй адилаар та HTML, CSS-ийг зүгээр нэг мэддэг байгаад зогсохгүй, жинхэнэ орчин үеийн аргаар HTML, CSS кодыг бичиж сурснаар өөрийнхөө үнэ цэнийг улам бүр нэмэгдүүлэх боломжтой болно.
Хэрэв та эхлэн суралцагч бол манай сайтад байгаа "HTML5, CSS3-ыг эхнээс нь дуустал" сургалтыг эхлээд үзээрэй.
Өөрийн вэб хөгжүүлэгчийн карьерийг шинэ түвшинд гаргахын тулд:
- Git, Github болон command-line ийг ашиглан, бусадтай хамтран ажиллах ур чадвараа хөгжүүлэх
- NPM, Webpack ашиглан үйл ажиллагаагаа автоматжуулж, цаг хэмнэж сурах
- BEM, PostCSS зэрэг аргуудыг ашиглан ямар ч том хэмжээний вэб сайтад тохирсон, супер зохион байгуулалттай стайлуудыг бүтээж, CSS-ийн мэдлэгээ улам дээшлүүлэх
- Mobile-first философийг баримтлан өөрийн вэб сайтыг гайхалтай хурдан болгох
- Обьект хандалтат Javascript-ийн үндсийг ойлгох
- AWS Lambda cloud функцүүдийн үндсэн ойлголтуудтай танилцах
- Ажлын ярилцлаганд тань туслах чухал зөвлөгөөнүүдийг авах зэрэг
олон гайхалтай зүйлсийг энэхүү сургалтаас олж авах юм.
Миний хувьд 1234.mn сайт дээр "HTML5, CSS3-ыг эхнээс нь дуустал" сургалтыг бэлтгэж оруулсан нь суралцагчдаас өндөр үнэлгээ авсаар байна. Одоо танд хүргэж байгаа энэхүү шинэ сургалт нь бүр илүү түвшинд хийгдсэн бөгөөд өмнөх сургалт бол ердөө л бие халаалт байсан гэж ойлгоход болно. Та тэгвэл энэ сургалтыг үзэж дууссанаар яг ямар амжилтанд хүрэх вэ?
- Хамгийн орчин үеийн хэрэгсэл, технологиудыг ашиглан супер responsive вэб хийж сурна.
- Бусад хөгжүүлэгчдэд маш хялбархан ойлгогдох, супер зохион байгуулалттай Javascript, CSS кодыг бичиж сурна.
- Ямар ч вэб хөгжүүлэлтийн багт оронгуутаа шууд зохицож ажиллах чадвартай болно.
Сургалтыг үзэхэд шаардагдах зүйлс:
- HTML, CSS-ийн үндсэн ойлголтуудыг мэддэг байх. Та HTML ашиглан paragraph элемент үүсгэж чадах уу? Та тэр paragraph-аа улбар шар өнгөтэй болгож чадах уу? Хэрэв эдгээрийг чаддаг бол та уг сургалтыг үзэхэд асуудалгүй.
- Мөн та JavaScript хэлний тодорхой мэдлэгтэй байх хэрэгтэй. Хэрэв та өөрийн JavaScript-ийн мэдлэгийг хангалтгүй гэж үзэж байвал манай сайтын хамгийн өндөр рэйтингтэй сургалт болох JavaScript хэлийг эхнээс нь дуустал сургалтыг авч суралцахад энэхүү хэлний хангалттай өндөр түвшний мэдлэгтэй болж чадах юм.
- Бидний хэрэглэх бүх програмууд 100% үнэгүй. Бидний вэбээ байршуулах Github, Netlify үйлчилгээнүүд ч гэсэн үнэгүй.
- Бид Visual Studio Code текст засварлагч програмыг ашиглах болно.
- Яг өөрийн гэсэн компьютераа хэрэглэхийг зөвлөж байна. Яагаад гэвэл бид шаардлагатай програм хангамж, хэрэгслүүдээ суулгаж ашиглах учраас. Windows болон Mac OS үйлдлийн системтэй байвал илүү тохиромжтой. Хэдийгээр бидний хийх зүйлс Linux дээр бүрэн ажиллах боловч бид энэ сургалтаар Linux-ийн талаар ярилцахгүй.
Өөрийнхөө ур чадварыг шинэ түвшинд гаргаж, өөрчлөлт хийхээр шийдсэн танд баяр хүргэе. Сургалтандаа эргэж уулзацгаая.
Хичээлүүд :
-
35:11Сургалтанд тавтай морил
-
16:59Энэ сургалтаар бид юу үзэх вэ?
-
15:03Git гэж юу вэ?
-
9:26Git яаж ажилладаг вэ? 1-р хэсэг
-
22:40Git яаж ажилладаг вэ? 2-р хэсэг
-
20:06Git-ийг суулгах, gitbash-ийн тохиргоо
-
17:19Git-ийн үндсэн командуудыг ажиллуулж үзэцгээе
-
7:10GitHub: Өөрийн GitHub account-ийг үүсгэх
-
16:57GitHub: Сургалтаар хийх вэб сайтын маань starter файлуудыг агуулсан Repository үүсгэх
-
31:46Завсарлага: VS Code editor суулгах, тохируулах
-
28:57Завсарлага: VS Code editor-т extention-ууд суулгах
-
12:30Зохион байгуулалт, автоматжуулалт нь зайлшгүй шаардлагатай юу?
-
7:15Node.js гэж юу вэ?
-
5:22Node-ийг өөрийн компьютерт суулгах
-
17:13Node.js-ийн туршилт
-
9:14NPM, package management гэж юу вэ?
-
16:00NPM-ийн туршилт
-
4:15Webpack: Webpack гэж юу вэ?
-
20:21Webpack: Webpack.config
-
3:41VS Code-ыг PostCSS syntax-ыг ойлгодог болгож тохируулах
-
5:51Webpack: CSS workflow гэж юу вэ?
-
14:08Webpack: Webpack.config-т үндсэн CSS support нэмэх
-
11:22Webpack: Webpack.config-т PostCSS support нэмэх
-
16:48CSS файлуудын архитектур. 1-р хэсэг
-
13:30CSS файлуудын архитектур. 2-р хэсэг
-
21:55BEM гэж юу вэ?
-
12:06Class-ын нэр, CSS selector-уудыг бичих дүрмүүд
-
10:46Large-Hero block-ийг хийж дуусгах
-
15:00Button block-ийг хийж дуусгах
-
15:28Webpack Dev Server: CSS, JS дээр хийгдсэн өөрчлөлтийг Web Browser-ыг full reload хийлгүйгээр харуулах
-
5:54Webpack Dev Server: HTML дээр хийгдсэн өөрчлөлтийг Web Browser-ыг reload хийлгүйгээр харуулах
-
10:20Webpack Dev Server: Хийж буй вэб сайтаа нэг сүлжээнд буй төхөөрөмжүүд дээр зэрэг харах
-
10:00Mobile-first: Mobile-first гэж юу вэ?
-
4:18Mobile-first: Mobile-first дизайн манай төсөлд
-
14:37Mobile-first: CSS кодоо mobile-first аргаар бичиж эхлэцгээе
-
5:33Mobile-first: Responsive image гэж юу вэ?
-
6:39Mobile-first: Responsive image. Нөхцөл 1. Зургийн байршил болон Crop
-
8:06Mobile-first: Responsive image. Нөхцөл 2. Файлын хэмжээ болон нягтрал
-
13:14Mobile-first: Өөрсдийн вэб сайтад responsive image нэмж эхлэх
-
11:22Mobile-first: Responsive image-ийг тестлэх зарим аргууд
-
17:37Дахин ашиглагдах блокуудыг хийх. 1-р хэсэг
-
11:57Дахин ашиглагдах блокуудыг хийх. 2-р хэсэг
-
19:31Headline блок
-
18:35Modifier систем яагаад чухал вэ?
-
16:55Дахин ашиглагдах Column Layout блокийг хийх. 1-р хэсэг
-
16:20Дахин ашиглагдах Column Layout блокийг хийх. 2-р хэсэг
-
30:49Intro хэсгийн зургуудыг responsive болгох
-
20:42Intro хэсгийн текстүүдийн стайл
-
10:35Завсарлага. Git branch: Git branch шинээр үүсгэх
-
10:44Завсарлага. Git branch: Branch-ууд хооронд шилжиж ажиллах, command line ашиглан merge хийх
-
18:31Завсарлага. Git branch: Github ашиглан merge хийх
-
17:23Бидний онцлогууд section стайл 1-р хэсэг
-
16:43Бидний онцлогууд section стайл 2-р хэсэг
-
12:24Бидний онцлогууд section стайл 3-р хэсэг
-
28:12Талархал section-ийн стайл. 1-р хэсэг. Дахин ашиглагдах testimonial block-ийг хийх
-
21:32Талархал section-ийн стайл. 2-р хэсэг. Small screen-д тохируулах
-
17:41Талархал section-ийн стайл. 3-р хэсэг. Medium screen-д тохируулах
-
11:24Footer-ийн стайл
-
26:22Header-ийн стайл. Large screen-д тохируулах
-
13:20Header-ийн стайл. Small screen-д тохируулах
-
35:09JavaScript. Обьект хандалтат програмчлалын тухай товчхон
-
13:11JavaScript. JS файлаа олон файлуудад хуваах. Class-ын удамшил
-
22:25Мобайл цэс. JavaScript шпагетти код бичихээс хэрхэн зайлсхийх вэ?
-
22:35Мобайл цэс. Мобайл цэсний стайл
-
21:21Мобайл цэс. Гамбургер шугамуудын анимаци
-
26:06Scroll хийх үед элементүүдийг харуулах. 1-р хэсэг
-
28:55Scroll хийх үед элементүүдийг харуулах. 2-р хэсэг. Кодоо илүү үр өгөөжтэй болгох
-
24:29Scroll хийх үед элементүүдийг харуулах. 3-р хэсэг. Reveal Feature-ээ дахин ашиглах
-
21:05Sticky Header. 1-р хэсэг. Header-ийг sticky болгох, логоны анимаци
-
28:01Sticky Header. 2-р хэсэг. Цэсний линкийг highlight хийх
-
23:47Modal Overlay. 1-р хэсэг. Modal Overlay-ийн CSS-ийг бичих
-
24:27Modal Overlay. 2-р хэсэг. Modal Overlay-ийн JS-ийг бичих
-
20:17Webpack Code splitting
-
13:23Lazy Loading хийж вэбийн дуудагдах хурдыг сайжруулах
-
19:53Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Dev болон Build script-ийн тохиргоо
-
25:58Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Bundled.js файлаас CSS файлаа extract хийж гаргаж авах
-
21:22Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: HTML файлуудаа үүсгэх
-
10:55Вэбийн файлуудаа сэрвэрт байршуулахдаа бэлдэх: Зургуудаа Dist folder-т хуулах
-
13:36Вэбээ GitHub pages дээр байршуулах
-
16:12Netlify-ийг ашиглан Build хийх
-
14:14Cloud functions: Cloud function гэж юу вэ?
-
17:57Cloud functions: Postman ашиглан cloud function-аа тестлэх
-
12:57Cloud functions: Хэрэглэгчдийн хэсгийн HTML, CSS-ийг хийх
-
17:29Cloud functions: Хэрэглэгчдийн хэсгийн javascript-ийг бичих
-
19:54React-ийг өөрсдийн project-доо холбож ажилуулах
-
21:13Git-ийн merge-ийн зөрчлөөс сэргийлэх, гарсан зөрчлийг зохицуулах
-
12:38CSS-ийн тухай бусад зүйлс: CSS gradient
-
26:40CSS-ийн тухай бусад зүйлс: CSS gradient-ийг анимаци хийх
-
27:11CSS-ийн тухай бусад зүйлс: CSS transition properties
-
17:06CSS-ийн тухай бусад зүйлс: Swup ашиглан HTML page-үүдийн хооронд transition хийх
-
9:56CSS-ийн тухай бусад зүйлс: CSS calc функцийн тухай
-
12:14CSS-ийн тухай бусад зүйлс: CSS transform skew ашиглан hover эффект бүхий товчлуур хийх
-
17:13HTML и-мэйл илгээх: Mailtrap ашиглан и-мэйл илгээж тестлэх
-
16:28HTML и-мэйл илгээх: Nodemailer ашиглан gmail хаягаараа и-мэйл илгээх
-
23:37HTML и-мэйл илгээх: HTML, CSS бүхий и-мэйлийн кодыг бичихэд тавигдах шаардлагууд
-
26:54HTML и-мэйл илгээх: HTML, CSS бүхий и-мэйлийг яаж responsive байдлаар бичих вэ?
-
26:17HTML и-мэйл илгээх: Гоё HTML и-мэйл бичиж үзэцгээе! 1-р хэсэг
-
19:41HTML и-мэйл илгээх: Гоё HTML и-мэйл бичиж үзэцгээе! 2-р хэсэг
-
17:05Мөрөөдлийн ажил: Яаж илүү олон ажлын ярилцлагад орох вэ?
-
17:54Мөрөөдлийн ажил: Ажлын ярилцлагад орохдоо бүтэлгүйтэхгүй байх аргууд
-
23:30Frontend, backend фрэймворкууд үүссэн шалтгаан, тэдгээрийн эзлэх байр суурь
-
44:55Орчин үеийн вэб хөгжүүлэх архитектурын дүр зураг, ашиглах фрэймворкууд
-
33:05CSS Framework-уудын тулаанд хэн ялж байна вэ? Бидний дараагийн судлах зүйл
-
36:24Уламжлалт CSS үү? CSS фрэймворкууд уу?
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2824 | Үнэ:
29,900₮
|
|
Javascript хэлийг эхнээс нь дуустал!
Хугацаа: 52 цаг 21 мин | Сурагчид: 3094 | Үнэ:
29,900₮
|
|
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 310 | Үнэ:
29,900₮
|
|
Tailwind - Дэлхийн хамгийн шилдэг CSS
framework
Хугацаа: 14 цаг 59 мин | Сурагчид: 646 | Үнэ:
29,900₮
|
|
CSS animation супер хийж сурцгаая
Хугацаа: 26 цаг 3 мин | Сурагчид: 464 | Үнэ:
29,900₮
|
|
Bootstrap 5 - CSS Framework эхнээс нь
дуустал
Хугацаа: 19 цаг 3 мин | Сурагчид: 369 | Үнэ:
29,900₮
|
|
== Сурагчдын сэтгэгдлүүд ==
$ git push origin master
fatal: protocol '?[200~https' is not supported
fatal: protocol '?[200~https' is not supported
ajilahgui bol live view eer bol oorchiloltuud ni hargdahgui ym bn da yaj ajiluuldin bgan
port: 3000,
static: {
directory: path.join(__dirname, "app")
},
hot: true,
historyApiFallback: { index: "index.html" }
},
энэ code-ийг хуулж тавиад ажиллаа. Энэ code-оор ажиллуулаад явахад webpack-dev-server тохиргоон дээр ямар нэгэн асуудал үүсэх үү
Эсвэл шинээр үүсгэсэн react-ийн прожект дээр webpack-ын тохиргоо үүсгээд оролдоод явчихвал тохиргоонууд нь алдагдах уу?
сургалтын хамгийн сүүлд бэлэн болсон web source бичиглэл байна уу? хожуу үзэж байгаа болохоор webpack Дээрхи тохиргоонууд хоцрогдсон байна
-9
Сэтгэлд нийцсэн маш гайхалтай сургалт байна