Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
Тийм бол энэхүү заагийг арилгах гайхалтай сургалтыг танд танилцуулж байна. Уг сургалтын явцад бид хамтдаа 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-ийн талаар ярилцахгүй.
Өөрийнхөө ур чадварыг шинэ түвшинд гаргаж, өөрчлөлт хийхээр шийдсэн танд баяр хүргэе. Сургалтандаа эргэж уулзацгаая.
Хичээлүүд
- 16:59Энэ сургалтаар бид юу үзэх вэ?
- 15:03Git гэж юу вэ?
- 9:26Git яаж ажилладаг вэ? 1-р хэсэг
- 20:06Git-ийг суулгах, gitbash-ийн тохиргоо
- 7:10GitHub: Өөрийн GitHub account-ийг үүсгэх
- 12:30Зохион байгуулалт, автоматжуулалт нь зайлшгүй шаардлагатай юу?
- 7:15Node.js гэж юу вэ?
- 9:14NPM, package management гэж юу вэ?
- 4:15Webpack: Webpack гэж юу вэ?
- 3:41VS Code-ыг PostCSS syntax-ыг ойлгодог болгож тохируулах
- 5:51Webpack: CSS workflow гэж юу вэ?
- 16:48CSS файлуудын архитектур. 1-р хэсэг
- 21:55BEM гэж юу вэ?
- 10:46Large-Hero block-ийг хийж дуусгах
- 22:40Git яаж ажилладаг вэ? 2-р хэсэг
- 17:19Git-ийн үндсэн командуудыг ажиллуулж үзэцгээе
- 5:22Node-ийг өөрийн компьютерт суулгах
- 17:13Node.js-ийн туршилт
- 16:00NPM-ийн туршилт
- 20:21Webpack: Webpack.config
- 14:08Webpack: Webpack.config-т үндсэн CSS support нэмэх
- 11:22Webpack: Webpack.config-т PostCSS support нэмэх
- 13:30CSS файлуудын архитектур. 2-р хэсэг
- 12:06Class-ын нэр, CSS selector-уудыг бичих дүрмүүд
- 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: Хийж буй вэб сайтаа нэг сүлжээнд буй төхөөрөмжүүд дээр зэрэг харах
- 35:11Сургалтанд тавтай морил
- 16:57GitHub: Сургалтаар хийх вэб сайтын маань starter файлуудыг агуулсан Repository үүсгэх
- 31:46Завсарлага: VS Code editor суулгах, тохируулах
- 28:57Завсарлага: VS Code editor-т extention-ууд суулгах
- 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-аа тестлэх
- 17:29Cloud functions: Хэрэглэгчдийн хэсгийн javascript-ийг бичих
- 12:57Cloud functions: Хэрэглэгчдийн хэсгийн HTML, CSS-ийг хийх
- 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 фрэймворкууд уу?
== Сурагчдын сэтгэгдлүүд ==