~/courses/web $ npm run dev
Заманауи сайттарды кәсіби деңгейде жасауды үйренеміз. HTML → CSS → Tailwind → JavaScript → React. 6 айда бала AI-мен vibe-coding-тан нағыз React-әзірлеушіге дейінгі жолды өтеді.
0
сабақ
0
апта
0
сертификат
0–17
жас
import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Кликнули {count} раз </button> );}Нәтиже
React + Tailwind + API-дегі нақты финалдық жоба. Сілтеме бойынша 24/7 жұмыс істейді.
README, PR-тарихы, CI/CD-мен 5–7 жоба. Жұмыс берушіге көрсетуге дайын.
Web Starter, HTML Master, CSS Master, JS Developer, React Developer + Web Developer ДИПЛОМЫ.
ChatGPT, v0, Lovable-мен жұмыс істей алады. Бірақ жобаны AI-СЫЗ қорғайды — бәрі өзінікі.
Курс бағдарламасы
Әр кезең аралық нәтижеге жетелейді — көрсетуге болатын нақты артефакт.
Оқушы 3 аптада ChatGPT көмегімен жұмыс істейтін сайт алады. Вау-әсерді көреді, IT-ге ғашық болады, кодтың не үшін керегін түсінеді.
Кезең соңында
✓ Интернеттегі алғашқы сайт (Netlify) ✓ GitHub-профиль ✓ Demo-day презентация
Толық бағдарлама
6 сабақ — ашу үшін басыңыз
Веб-әзірлеуге қош келдіңіз
Сайт неден тұрады: HTML, CSS, JS. StackBlitz — браузердегі IDE.
Vibe-coding: AI арқылы алғашқы сайт
Prompt дегеніміз не. ChatGPT арқылы портфолио-сайт жасаймыз.
Кастомизация: сайтты «өзіндік» етеміз
Unsplash, Google Fonts, палитра. Ереже: «AI сенің орныңа жазбайды».
AI арқылы интерактив
ChatGPT арқылы батырмалар, анимациялар, слайдерлер. Бөгде кодты қалай оқу керек.
Git және Netlify-ге деплой
git init/add/commit/push. GitHub. Сайтты интернетке деплой.
Demo-day #1: «Нені мен, нені AI жасады»
Видеопрезентация: сайтты көрсету, қай код өзіндік екенін айту.
Кодты қолмен жазуды үйренеміз. Әр сабақта талдау: «AI осыны жасады, мынасы дұрыс емес, дұрысы былай». Tailwind, Flexbox, React Hooks, fetch API.
Кезең соңында
✓ AI-макет бойынша лендинг ✓ Интерактивті портфолио ✓ Todo-list ✓ API-мен Dashboard ✓ React SPA-портфолио
Толық бағдарлама
24 сабақ — ашу үшін басыңыз
HTML: құрылым және семантика
header/main/section/footer. W3C валидаторы. AI неге бәрін div-пен жазады.
AI дұрыс жасамайтын формалар
input, валидация. Провокация: AI қателерін көрсетеміз.
Медиа және жылдамдық: сайт неге баяулайды
Суреттер, WebP, lazy-loading. Lighthouse.
5 минутта AI-макет (v0.dev)
Vercel v0. Figma макетті оқу құралы ретінде.
Бейімді дизайн: mobile-first
Media queries, DevTools, breakpoints.
AI-макет бойынша лендинг
v0-макетті қолмен верстаймыз. AI-ға сұрақ болады — код болмайды.
CSS-детектив: каскад пен ерекшелік
Селекторлар, !important. CSS Diner — 32 деңгей.
Flexbox + аралық нәтиже
Flexbox Froggy — 24 деңгей. HTML Master сертификаты.
CSS Grid: екі өлшемді лэйаут
Grid Garden — 28 деңгей. Grid-тегі галерея.
Анимациялар + алғашқы JS
CSS transitions, keyframes. addEventListener.
v0 + Tailwind: секундта компоненттер
Utility-first CSS. 2026 жылғы React-әзірлеу стандарты.
Tailwind-тегі портфолио-сайт
Портфолионы нөлден жинау. AI-ға сұрақ болады.
JavaScript: айнымалылар мен типтер
VS Code. var/let/const, операторлар. JSchallenger.
Шарттар мен циклдар
if/else, for, while. CodeCombat — ойын арқылы JS.
Функциялар мен оқиғалар
Arrow functions, scope. localStorage. AI рефакторшы ретінде.
DOM + CSS Master сертификаты
querySelector, classList. Тема ауыстырғышы + модалка.
API және fetch: сыртқы деректер
HTTP, JSON, async/await. Ауа райы/әзіл виджеті.
2–3 виджеттен Dashboard
Барлық күйлер: loading/error/success. Шығу нүктесі.
React-қа кіріспе: келесі деңгей
Компонент = функция. JSX. Vite + Tailwind.
Props және композиция
Props, children, .map() + key. Card-компонент.
useState және оқиғалар
Иммутабельділік. Табтар, форма-фильтр.
useEffect: «неге циклге түсті»
Бэгтен бастаймыз: dependency array. Ауа райы виджеті.
React Router: көпбеттілік
BrowserRouter, Routes, Link. Портфолио → 4 маршрутты SPA.
Lovable: 10 минутта қосымша + JS Developer сертификаты
Шарықтау шегі: Lovable + жолдарды қолмен түзету. «Сен AI-дан күштісің».
Спикер «КиноГид» демо-жобасын жүргізеді (React SPA), оқушы қатар өзінікін жасайды. Спринттер, PR, code review, қорғау. AI — көмекші, бірақ қорғау AI-СЫЗ.
Кезең соңында
✓ Интернеттегі дайын жоба ✓ README және CI/CD-мен GitHub ✓ Lighthouse ≥85 ✓ Қорғау видеосы
Толық бағдарлама
18 сабақ — ашу үшін басыңыз
Жоба таңдау + HTML-семантиканы қайталау
Жоба тақырыптары. 5 сөйлемдік ТТ. HTML-қаңқа.
ТТ + AI-макет + Tailwind
Финалдық жоба үшін v0. Tailwind орнату.
Git-workflow: тармақтар мен PR
develop, feature-branch, merge-конфликтілер. Oh My Git!
Спринт 1: қаңқа (Flex/Grid)
Scaffolding үшін Bolt.new. Tailwind-тегі лэйаут.
Спринт 2: стильдеу + dark mode
sm:/md:/lg: арқылы бейімделу. dark: кластары.
Спринт 3: JS-функционал
Іздеу, сүзгілеу, иммутабельділік. AI debug-көмекші ретінде.
Спринт 4: API + 4 күй
TMDB API. Loading/error/empty/success — әрқайсысына Tailwind.
Mid-demo #5: жоба 70%-да
Видео-презентация. Self-feedback start/stop/continue.
Firebase: бэкендсіз ДБ (опц.)
Firestore + auth. Немесе балама ретінде Supabase.
Жеткізілетін формалар
Formspree. mailto: неге нашар.
Қауіпсіздік: $400 шот тарихы
Нақты оқиға. .env, GitGuardian, XSS.
Оптимизация: −1 сек = +7% конверсия
Lighthouse, WebP, lazy-loading, Core Web Vitals.
Қолжетімділік + SEO
WAVE, ARIA. Open Graph, sitemap.
Тестілеу және баг-фикс
Чек-лист. GitHub Issues. Bug Hunt Challenge.
CI/CD + README
Автодеплой. GitHub Action. Readme.so.
Mock-сұхбат + React Developer сертификаты
5 минуттық питч. «Білмеймін» — қалыпты жағдай.
Жылтырату және backup
15 тармақтан финалдық чек-лист. Backup-видео.
ФИНАЛДЫҚ DEMO-DAY → ДИПЛОМ
AI-СЫЗ қорғау. 7 мин демо + 5 мин QA. Web Developer дипломы.
Курстың AI-стратегиясы
Біз ChatGPT жоқтай сыңай танытпаймыз. Онымен дұрыс жұмыс істеуді үйретеміз — әр кезеңде өз стратегиясы.
Оқушы 3 аптада ChatGPT арқылы жұмыс істейтін сайт алады. Вау-әсерді көреді — «мен істей аламын екенмін!». IT-ге ғашық болады.
Vibe-codingAI = түсіндіру, кодты оқушы жазады. Сабақтарда «AI осыны жасады — мынау 3 қате» деп талдаймыз. Оқушы сыни көзқарасқа үйренеді.
Сұрақ болады, код болмайдыФиналдық қорғауда оқушы жалғыз жұмыс істейді. Көрсеткенінің бәрі — өзінікі. Нақты сұхбаттардағыдай.
ДербестікОйын арқылы үйренеміз
Git-ті браузердегі интерактивті деңгейлер арқылы үйренеміз. Командалық жолдан қорықпай.
CSS-селекторларға 32 деңгей. Дұрыс селекторлармен жәндіктерді тамақтандырамыз.
24 деңгей — бақаларды flexbox-қасиеттерімен жылжытамыз. Соңында — Flexbox шебері.
CSS Grid туралы 28 деңгей. Бақшаны grid-аймақтармен суарамыз.
Лезде тексерілетін JS-тапсырмалар. «Basics»-тен «Arrays»-ге дейін — нақты тәжірибе.
Кейіпкерді JavaScript-кодпен басқарамыз. Циклдар мен шарттарды шытырман оқиға арқылы үйренеміз.
Ешкім тұрып қалмайды
Егер оқушы негізгі тапсырманы орындай алмаса — 48 сағаттан кейін жеңілдетілген нұсқасы ашылады. Дайын код шаблоны, видео таймкодтарымен кеңестер. Ең бастысы — қозғалыс, «бір тапсырмада апта бойы отыру» емес.
2-деңгей — ұят емес. Бұл әрі қарай жүру үшін scaffold, «әлсіздерге» арналған нұсқа емес.
Нұсқаусыз толыққанды тапсырма. Орындаса — әрі қарай жүреміз. 5-7 тармақ, кейде жұмыстың видео-демонстрациясы.
Курс ұстазы
Frontend-әзірлеуші
Нағыз frontend-әзірлеуші — күнде продакшенде React-те интерфейс жазады. Университет теоретигі емес, нақты жобалар жасайтын және соны үйрететін практик.
Құны мен старты
Бүкіл оқу кезеңінде бірдей · жасырын төлемсіз
💛 Жеңілдік санатына (көп балалы, мүгедектік) — айына 60 000 ₸
🔥 Kaspi 0% бөліп төлеу 3 не 6 айға
🔒 Баға бүкіл курсқа бекітілген
Ашық
топ жиналған сайын басталады
🕐 2 рет аптасына, 90 минуттан
📆 Икемді кесте — ыңғайлы күн мен уақыт таңдаймыз
👥 Топ 8 адамға дейін
Бала байқап көреді, ұстазбен танысады, AI арқылы алғашқы сайтын жасайды. Ұнамаса — ешқандай міндеттеме жоқ.
60 минут · Discord-та · менеджер бір сағат ішінде хабарласады