Front-end Developer Professional

SEOWORK Academy · Professional track

Front-end Developer Professional

Безкоштовний практичний трек від вебплатформи, семантичного HTML і CSS foundations до JavaScript, TypeScript, React, testing і командного capstone. Сертифікат відкриється після 60 уроків, чотирьох прийнятих проєктів і фінального іспиту.

Всі 16 модулів доступні60/60 уроків600 питаньСерія FE

Професійний результат

60уроків із тестами
180питань у lesson checks
4проєкти за рубрикою
30питань фіналу

Чотири проєкти

01

Landing page

Семантична, доступна й адаптивна сторінка з перевіреною структурою.

02

Responsive catalog

Каталог із JavaScript state, filters, validation і responsive UI.

03

API app

Асинхронні дані, loading/error/empty states, modules і tooling.

04

React capstone

Командний застосунок із TypeScript, tests, performance budget і handoff.

Модуль 1 · Веб і робоче середовище

1Як працює веб і з чого складається сторінкаBrowser, client/server, URL, HTTP та ролі HTML/CSS/JavaScript.Відкрити →2Структура проєкту, файли й шляхиExtensions, kebab-case, folders, absolute і relative paths.Відкрити →3Редактор коду, браузер і DevToolsWorkspace, Elements, Console, Network і Sources.Відкрити →4Командний рядок і локальний серверcwd, safe commands, localhost, port і document root.Відкрити →

Модуль 2 · Семантичний HTML

5Документ, landmarks і heading outlineDocument shell, structural elements, section purpose і logical headings.Відкрити →6Текст, списки, посилання та зображенняText semantics, descriptive links, alt decisions і figure/figcaption.Відкрити →7Семантичні таблиці данихCaption, row/column headers, scope та data relationships.Відкрити →8Форми, labels і native validationControls, names, labels, fieldset/legend, button types і constraints.Відкрити →

Модуль 3 · CSS foundations

9CSS rules, selectors і DevToolsStylesheet connection, selector purpose, invalid/overwritten rules і computed evidence.Відкрити →10Cascade, specificity та inheritanceWinning declaration, ID–CLASS–TYPE, source order і predictable overrides.Відкрити →11Box model, sizing і overflowContent/padding/border/margin, border-box, display і resilient sizing.Відкрити →12Кольори й типографікаColor tokens, contrast, font stack, line-height, resize і text spacing.Відкрити →

Модуль 4 · Flexbox і Grid

13Flex axes, alignment і gapFlex container/items, main/cross axis, justify/align і одновимірні patterns.Відкрити → 14Flex sizing, wrapping і source orderBasis, free space, grow/shrink, intrinsic minimum, lines і доступний порядок.Відкрити → 15Grid tracks, sizing і auto-placementLines, tracks, fr, minmax, repeat, explicit/implicit grid та placement flow.Відкрити → 16Grid placement, areas і subgridNamed placement, subgrid, Flexbox-vs-Grid decision та DevTools evidence.Відкрити →

Модуль 5 · Responsive design

17Fluid foundation, viewport і breakpointsMobile-first normal flow, fluid sizing і content-driven точки зміни.Відкрити → 18Media queries, ranges і user preferencesWidth ranges, input capabilities, color, contrast і motion preferences.Відкрити → 19Container queries і автономні componentsInline-size containment, named contexts і component-level adaptation.Відкрити → 20Responsive images, media й доказовий QAsrcset, sizes, picture, stable layout і перевірка без випадкових screenshots.Відкрити →

Практичний проєкт 1

Після уроку 20 відкриється здача responsive landing page: artifact, source, README, QA evidence і review SEOWORK.

Відкрити умови проєкту →

Модуль 6 · Web accessibility

21Accessibility foundations і accessible namePOUR, accessibility tree, native semantics, role, name, state і value.Відкрити → 22Keyboard navigation і focusLogical order, visible indicator, skip link, no traps і no obscured focus.Відкрити → 23Accessible forms і помилкиLabels, groups, instructions, constraints, text errors і useful suggestions.Відкрити → 24Images, contrast і accessibility auditContext-based alt, color/contrast, manual checks, evidence та limitations.Відкрити →

BookFlow Accessibility Audit Lab

Локальна flawed/reference сторінка і 12 робочих артефактів для ручного аудиту без PII, trackers чи production endpoints.

Завантажити accessibility lab →

Модуль 7 · Git і GitHub

25Repository, staging і commitsWorking tree, index, HEAD, status/diff та атомарний snapshot.Відкрити → 26Branches, merge і conflictsCommit graph, topic branches, merge types і evidence-driven resolution.Відкрити → 27Remotes, pull requests і reviewFetch/pull/push, base/head, focused PR, checks і review decisions.Відкрити → 28Safe recovery, credentials і secretsRestore/revert/reflog boundaries, authentication та incident response.Відкрити →

BookFlow Git Workflow Lab

Локальний synthetic starter і 13 worksheets/templates без .git, real remote, scripts, credentials або destructive automation.

Завантажити Git workflow lab →

Модуль 8 · JavaScript basics

29Execution, scripts і DevToolsLanguage vs host, defer, strict mode, errors і call stack.Відкрити →30Values, types, variables і conversionPrimitives/Object, const/let, null/undefined/NaN і explicit conversion.Відкрити →31Expressions, operators і equalityPrecedence, strict equality, truthiness, short-circuit і nullish defaults.Відкрити →32Conditions, loops і debuggingDecision tables, termination proof, boundary tests і evidence-driven diagnosis.Відкрити →

BookFlow JavaScript Basics Lab

15 локальних safe-файлів: starter/reference, synthetic inputs і worksheets для execution, types, conversion, expressions, decisions, loops, tests та debugging.

Завантажити JavaScript basics lab →

Модуль 9 · Functions, objects і arrays

33Function contracts, scope і closuresParameters/return, declarations/arrows, lexical scope, closures і pure-ish logic.Відкрити →34Objects і data modelingSchema, property access, own fields, references, shallow copy та normalization.Відкрити →35Arrays і iteration pipelinesmap/filter/find/reduce, mutating boundaries, toSorted і deterministic callbacks.Відкрити →36Decomposition, catalog logic і testsNormalize → validate → filter → sort → project → summarize з fixtures та evidence.Відкрити →

BookFlow Catalog Logic Lab

17 safe-файлів: starter/reference, synthetic schema, function contracts, traces, fixtures, tests, debugging і non-mutation evidence.

Завантажити catalog logic lab →

Практичний проєкт 2

Після уроку 36 відкриється здача data-driven catalog logic: HTTPS artifact, source, README, tests і review SEOWORK від 80/100.

Відкрити умови проєкту →

Модуль 10 · DOM, events, forms і UI state

37DOM selection і safe renderingDOM tree, selectors/null policy, createElement, textContent і scoped updates.Відкрити →38Events, propagation і delegationaddEventListener, target/currentTarget, phases, closest і default actions.Відкрити →39Accessible forms і Constraint ValidationNative semantics, FormData, validity API, errors, focus і server boundary.Відкрити →40UI state, render cycle й interaction QAExplicit state, transitions, render, notifications, keyboard і regression evidence.Відкрити →

BookFlow DOM Interaction Lab

18 safe-файлів: starter/reference HTML+CSS+JS, DOM/event/form/state matrices, fixtures, focus/keyboard і release QA.

Завантажити DOM interaction lab →

Модуль 11 · Async, promises, fetch і HTTP/API

41Promises і async/awaitPending/fulfilled/rejected, chains, await, error flow і concurrency policy.Відкрити →42HTTP contract і Fetch APIMethod/URL/headers/body/status, response.ok, CORS/cache/auth boundaries.Відкрити →43Response validation і error taxonomyContent type/body/schema checks, network/HTTP/parse/domain errors і retry policy.Відкрити →44Cancellation, races й async UI QAAbortSignal, latest-wins, stale guard, state machine і deterministic fixtures.Відкрити →

BookFlow Async API Lab

18 safe-файлів із deterministic mock transport, HTTP/schema fixtures, error/race/state traces та async QA — без real network.

Завантажити Async API lab →

Модуль 12 · ES modules, npm і tooling

45ES modules і dependency graphModule scope, import/export, specifiers, public API та cycles.Відкрити →46package.json, lockfile і scriptsDependencies/devDependencies, exact tree, npm ci та script review.Відкрити →47Dev server і production buildVite workflow, source/generated boundary, assets, base paths і diagnostics.Відкрити →48Supply-chain hygiene і release QAConfig/secrets, dependency evidence, fresh build, preview та rollback.Відкрити →

BookFlow Modules & Tooling Lab

18 safe-файлів: ES-module starter, exact manifest/lockfile, build/config/dependency/release worksheets; без node_modules, dist, secrets або real network.

Завантажити tooling lab →

Практичний проєкт 3

Після уроку 48 відкриється review Accessible API application: HTTPS artifact, source, reproducible build і evidence. Прийняття від 80/100.

Відкрити умови проєкту →

Модуль 13 · TypeScript basics

49Compiler model, inference і strict configCompile-time vs runtime, annotations, primitives, arrays і tsconfig.Відкрити →50Object types, unions і narrowingStructural types, optional/readonly, discriminants, null і exhaustive states.Відкрити →51Functions, generics, unknown і migrationTyped callbacks/Promise, runtime boundary, constrained generics і JS migration.Відкрити →

BookFlow TypeScript Contracts Lab

17 safe-файлів: strict TypeScript 7.0.2 setup, unknown fixtures, domain states, runtime validator, diagnostics, migration і release evidence.

Завантажити TypeScript lab →

Модуль 14 · React fundamentals

52Components, JSX, props і list keysPure component tree, semantic markup, composition і stable identity.Відкрити →53Minimal state, snapshots і data flowState ownership, derived values, batching, immutable updates і lifting state.Відкрити →54Events, controlled forms і accessibilityHandlers, native form semantics, keyboard, validation і visible states.Відкрити →55Effects і external synchronizationEvent vs Effect, dependencies, cleanup, Strict Mode та async race guards.Відкрити →

BookFlow React State Lab

22 safe-файли: exact React 19.2.8 + TypeScript/Vite app, component/data-flow evidence, controlled form, local fixture, runtime validation та abort cleanup.

Завантажити React lab →

Модуль 15 · Testing та performance

56Test strategy і deterministic VitestRisk layers, pure logic, boundary cases, controlled mocks і CI gate.Відкрити →57React Testing Library і async UISemantic queries, user-event, fetch boundary та loading/error/empty/success.Відкрити →58Core Web Vitals, Profiler і budgetsField vs lab, LCP/INP/CLS, measured optimization і bundle gate.Відкрити →

BookFlow Testing & Performance Lab

29 safe-файлів: React/Vitest/Testing Library app, 7 deterministic tests, coverage/gaps, bundle budget, Web Vitals і Profiler evidence.

Завантажити quality lab →

Модуль 16 · Командний capstone

59Capstone architecture, ownership і deliveryBounded brief, vertical slices, state/data ownership, ADR, PR review і CI gates.Відкрити →60Production release, portfolio case і defenseDeploy inventory, accessibility/privacy/performance evidence, rollback, case study і захист.Відкрити →

React Capstone Delivery Pack

21 safe-шаблон: brief/DoD, ADR/boundaries, team/PR/CI, acceptance/a11y/performance/privacy, deploy/rollback, README/case/evidence/defense.

Завантажити capstone pack →

Практичний проєкт 4

Після уроку 60 відкриється review оригінального React + TypeScript capstone. Прийняття від 80/100 без blocker; після чотирьох accepted projects відкриється фінал.

Відкрити умови capstone →

Дорожня карта

1Веб і робоче середовище4 урокиДоступний
2Семантичний HTML4 урокиДоступний
3CSS: каскад, box model і типографіка4 урокиДоступний
4Flexbox і Grid4 урокиДоступний
5Responsive design4 урокиДоступний
6Accessibility4 урокиДоступний
7Git і GitHub4 урокиДоступний
8JavaScript basics4 урокиДоступний
9Функції, об’єкти й масиви4 урокиДоступний
10DOM, події та форми4 урокиДоступний
11Async JavaScript і API4 урокиДоступний
12Модулі, npm і tooling4 урокиДоступний
13TypeScript basics3 урокиДоступний
14React fundamentals4 урокиДоступний
15Тестування та performance3 урокиДоступний
16Командний capstone2 урокиДоступний

Офіційні орієнтири

Межа сертифікації

Усі 60 уроків доступні. Фінальний іспит відкривається лише після review чотирьох проєктів; PDF/QR-сертифікат серії FE створюється після успішного фіналу.

Далі →
SEOWORK Education · контроль знань

Прогрес і сертифікація

Складіть практичний тест після кожного уроку, а потім фінальний іспит. Сертифікат міститиме унікальний номер і QR-перевірку справжності.

Урок 1 Як працює веб: HTML, CSS і JavaScript Пройти тест Урок 2 Файли проєкту, шляхи та структура Пройти тест Урок 3 Редактор коду, браузер і DevTools Пройти тест Урок 4 Командний рядок і локальний сервер Пройти тест Урок 5 Семантичний документ, landmarks і заголовки Пройти тест Урок 6 Текст, списки, посилання, зображення та figure Пройти тест Урок 7 Семантичні таблиці даних: caption і scope Пройти тест Урок 8 Форми, labels, controls і native validation Пройти тест Урок 9 CSS rules, selectors і DevTools evidence Пройти тест Урок 10 Cascade, specificity та inheritance Пройти тест Урок 11 Box model, sizing і overflow Пройти тест Урок 12 Кольори й читабельна типографіка Пройти тест Урок 13 Flex axes, alignment і gap Пройти тест Урок 14 Flex sizing, wrapping і source order Пройти тест Урок 15 Grid tracks, sizing і auto-placement Пройти тест Урок 16 Grid placement, areas і subgrid Пройти тест Урок 17 Fluid foundation, viewport і breakpoints Пройти тест Урок 18 Media queries, ranges і user preferences Пройти тест Урок 19 Container queries і responsive components Пройти тест Урок 20 Responsive images, media й QA Пройти тест Урок 21 Accessibility foundations і accessible name Пройти тест Урок 22 Keyboard navigation і focus Пройти тест Урок 23 Accessible forms і помилки Пройти тест Урок 24 Images, contrast і accessibility audit Пройти тест Урок 25 Git repository, staging і commits Пройти тест Урок 26 Git branches, merge і conflicts Пройти тест Урок 27 GitHub remotes, pull requests і review Пройти тест Урок 28 Git safe recovery, credentials і secrets Пройти тест Урок 29 JavaScript execution, scripts і DevTools Пройти тест Урок 30 JavaScript values, types, variables і conversion Пройти тест Урок 31 JavaScript expressions, operators і equality Пройти тест Урок 32 JavaScript conditions, loops і debugging Пройти тест Урок 33 Function contracts, scope і closures Пройти тест Урок 34 Objects і data modeling Пройти тест Урок 35 Arrays і iteration pipelines Пройти тест Урок 36 Decomposition, catalog logic і tests Пройти тест Урок 37 DOM selection і safe rendering Пройти тест Урок 38 Events, propagation і delegation Пройти тест Урок 39 Accessible forms і Constraint Validation Пройти тест Урок 40 UI state, render cycle й interaction QA Пройти тест Урок 41 Promises і async/await Пройти тест Урок 42 HTTP contract і Fetch API Пройти тест Урок 43 Response validation і error taxonomy Пройти тест Урок 44 Cancellation, races й async UI QA Пройти тест Урок 45 ES modules і dependency graph Пройти тест Урок 46 package.json, lockfile і npm scripts Пройти тест Урок 47 Vite і production build Пройти тест Урок 48 Tooling, supply chain і release QA Пройти тест Урок 49 TypeScript compiler, inference і strict config Пройти тест Урок 50 Object types, unions і narrowing Пройти тест Урок 51 Functions, generics, unknown і migration Пройти тест Урок 52 React components, JSX, props і list keys Пройти тест Урок 53 React minimal state, snapshots і data flow Пройти тест Урок 54 React events, controlled forms і accessibility Пройти тест Урок 55 React Effects і safe cleanup Пройти тест Урок 56 Test strategy і deterministic Vitest Пройти тест Урок 57 React Testing Library і async UI Пройти тест Урок 58 Core Web Vitals, Profiler і budgets Пройти тест Урок 59 Capstone architecture, ownership і delivery Пройти тест Урок 60 Production release, portfolio case і defense Пройти тест

Практичні проєкти: 0/4 прийнято

Кожен проєкт перевіряється SEOWORK окремо. Для професійного сертифіката потрібен статус «Прийнято» для всіх обов’язкових робіт.

Проєкт 1 Responsive landing page Ще не подано Проєкт 2 Data-driven catalog logic Ще не подано Проєкт 3 Accessible API application Ще не подано Проєкт 4 React + TypeScript capstone Ще не подано
Фінальний іспит відкриється після зарахування всіх 60 уроків. Зараз: 0/60.