Переглянути вкладення 23965
пройдіть повний ЦИКЛ створення ВЕБ-додатків
Довгий час вважалося, що frontend — це про верстку і інтерактивність. Однак сьогодні розробнику все частіше доводиться виходити за межі браузера і розбиратися в суміжних областях.
Ми всі були ДЖУНАМИ і пройшли цей шлях:
1) вивчив основи фронтенду
2) потрапив в компанію
3) зробив кілька завдань і зрозумів, що знань не вистачає
Довгий час вважалося, що frontend — це про верстку і інтерактивність. Однак сьогодні розробнику все частіше доводиться виходити за межі браузера і розбиратися в суміжних областях.
Ми всі були ДЖУНАМИ і пройшли цей шлях:
1) вивчив основи фронтенду
2) потрапив в компанію
3) зробив кілька завдань і зрозумів, що знань не вистачає
- Брак системних знань заважає підніматися кар'єрними сходами. Особливо це помітно на співбесідах: кандидати начебто знають, як вирішувати типові завдання, але якщо копнути глибше, відразу губляться.
- Сильний frontend-Розробник чітко розуміє, як працює веб, впевнено спілкується з бекендерами, тестувальниками, девопсами і навіть може самостійно щось налаштувати.
починайте з НУЛЯ, відштовхуючись від реальних ПРОБЛЕМ
Наш проект почнеться з голого HTML і CSS на GitLab Pages, а закінчиться готовим сервісом на React зі своїм деплоем на власному сервері. Ми перейдемо на React, щоб усвідомити проблеми розробки і по-справжньому розібратися, навіщо потрібен той чи інший інструмент.
вивчайте суміжні теми
Сучасний frontend-розробник повинен вміти виходити за межі браузера. Деплой, CI/CD, моніторинг, кешування, оптимізація на сервері — все це допоможе вам робити якісні, швидкі інтерфейси і вирішувати складні проблеми.
розбирайте тонкощі і нюанси розробки
ми не теоретики — кожен день ми створюємо інтерфейси для мільйонів користувачів і вже набили шишки і зібрали лайфхаки, як розробляти швидко і ефективно. Всі ці знання і навички ми передамо вам на цьому курсі.
Для КОГО ця програма:
BACKEND Розробник
Ви хочете бути fullstack розробником - ми допоможемо Вам придбати необхідні компетенції і робити більш цікаві завдання, за які вам будуть платити більше.
MIDDLE FRONTEND
Ви успішно вирішуєте робочі завдання, але хочете структурувати знання і глибше копнути в інструментарій. Ми допоможемо отримати навички, які дозволять вам рости вище.
JUNIOR FRONTEND
Ви вже працюєте в компанії або на фрілансі і хочете вирости в middle frontend фахівця. Ми допоможемо вам отримати всі навички, які потрібні на роботі.
що необхідно для курсу:
- HTML: знання синтаксису і вміння верстати
- CSS: знання бази для оформлення сайтів (специфічність, важкі селектори, блокова модель)
- JAVASCRIPT: базові знання (синтаксис, змінні, функції, цикли, замикання, this, fetch)
- Git: базові знання (вміння створити репозиторій, створити гілку, закоммітити зміни, запушити в гілку, змержити з майстром)
1) новинна стрічка 1.0
Часта помилка розробників-намагатися створити ідеальний продукт відразу. Однак, як показує практика, набагато важливіше спочатку швидко створити мінімально життєздатний продукт, а вже потім займатися його доопрацюванням і поліпшенням. У цьому модулі ми напишемо працюючий прототип новинної стрічки за допомогою React, Webpack, TypeScript і Gitlab Pages.
Сьогодні frontend-розробнику важливо не тільки вміти писати клієнтський код, але і знати, як цей код доставляти на сервер. Ці знання дозволяють знаходити спільну мову з іншими членами команди розробки і істотно підвищують цінність фахівця на ринку праці. У цьому модулі ми поговоримо про те, як збирати і доставляти код.
Адмінка-це сайт, доступний власникам для управління основним додатком. Адмінки робляться за допомогою готових технологій, щоб не витрачати час дизайнерів і розробників. У цьому модулі ми навчимося збирати адмінку швидко і ефективно.
Коли на ринку є кілька конкуруючих продуктів, важливо, щоб ваш продукт був привабливішим з точки зору UX. Продукт з багатим функціоналом, але зроблений недбало, програє більш модному. Плавні і продумані анімації, адаптація під різні екрани і темна тема — ці UX оптимізації можуть сильно вплинути на популярність вашого продукту.
5) Оффлайн і доступність
PWA-це ряд вимог до веб-додатків, сформованих компанією Google. Доступність програми в офлайні-одне з основних вимог, яке значно підвищує його юзабіліті. Також в індустрії все частіше зустрічається запит на інклюзивність, оскільки частина аудиторії веб-сервісу-люди з обмеженими можливостями. Їм необхідно забезпечити комфортні умови користування продуктом. У цьому модулі ми детально зупинимося на кожному з цих актуальних вимог.
Рано чи пізно коду стане так багато, що сайт почне гальмувати. Тому важливим завданням є підвищення продуктивності за рахунок збільшення швидкості завантаження ресурсів і швидкості виконання коду. У більшості браузерів є спеціальні інструменти для аналізу продуктивності. У цьому модулі навчимося за допомогою них знаходити причини проблем з продуктивністю і оперативно їх усувати.
У міру розвитку продукту стає все складніше стежити за тим, щоб нові фічі не ламали сайт. Щоб бути впевненим в тому, що ми пишемо працездатний код, необхідно покривати його автотестами — спеціальними програмами, які виявляють помилки в коді. У цьому модулі ми розглянемо, які бувають тести і як їх писати. Також торкнемося теми моніторингу помилок, який дозволяє вчасно дізнаватися про проблеми в роботі продукту.
У деяких ситуаціях застосування складних інструментів розробки себе не виправдовує і є зайвим. У цьому модулі ми поговоримо про те, як в дуже стислі терміни і в умовах нестачі ресурсів швидко запустити працюючий продукт.
Після вивчення hard skill frontend-розробки, важливо поговорити і про те, як знайти їм застосування і презентувати роботодавцю. У цьому блоці ми обговоримо ринок вакансій frontend-розробки, в тому числі і ринок для junior фахівців. Також поговоримо про те, як краще шукати вакансії і як влаштовані інтерв'ю.
Часта помилка розробників-намагатися створити ідеальний продукт відразу. Однак, як показує практика, набагато важливіше спочатку швидко створити мінімально життєздатний продукт, а вже потім займатися його доопрацюванням і поліпшенням. У цьому модулі ми напишемо працюючий прототип новинної стрічки за допомогою React, Webpack, TypeScript і Gitlab Pages.
- HTML, CSS, JavaScript
- Деплой на Gitlab Pages
- Вступ до React: JSX, hooks
- Webpack + NodeJS
- API, fetch, CORS
- TypeScript
Сьогодні frontend-розробнику важливо не тільки вміти писати клієнтський код, але і знати, як цей код доставляти на сервер. Ці знання дозволяють знаходити спільну мову з іншими членами команди розробки і істотно підвищують цінність фахівця на ринку праці. У цьому модулі ми поговоримо про те, як збирати і доставляти код.
- Реєстрація домену
- Як браузер відкриває сайт: IP, DNS
- Пов'язуємо домен і GitLab Pages
- Роутинг в сучасних веб-додатках, React Router
- Заводимо свій сервер: Linux, Nginx, VPS, VDS, SSH
- CI/CD через GitLab
- Як викрасти дані: HTTP/HTTPS, SSL
Адмінка-це сайт, доступний власникам для управління основним додатком. Адмінки робляться за допомогою готових технологій, щоб не витрачати час дизайнерів і розробників. У цьому модулі ми навчимося збирати адмінку швидко і ефективно.
- Швидкий інтерфейс без дизайну: Bootstrap
- Firebase: backend для frontend
- Авторизація: HTTP, Cookie, JWT, oAuth
Коли на ринку є кілька конкуруючих продуктів, важливо, щоб ваш продукт був привабливішим з точки зору UX. Продукт з багатим функціоналом, але зроблений недбало, програє більш модному. Плавні і продумані анімації, адаптація під різні екрани і темна тема — ці UX оптимізації можуть сильно вплинути на популярність вашого продукту.
- Як браузер малює сторінки
- Анімації
- Робимо сортування за датою
- Мобільна версія і темна тема: media queries, window.onresize
5) Оффлайн і доступність
PWA-це ряд вимог до веб-додатків, сформованих компанією Google. Доступність програми в офлайні-одне з основних вимог, яке значно підвищує його юзабіліті. Також в індустрії все частіше зустрічається запит на інклюзивність, оскільки частина аудиторії веб-сервісу-люди з обмеженими можливостями. Їм необхідно забезпечити комфортні умови користування продуктом. У цьому модулі ми детально зупинимося на кожному з цих актуальних вимог.
- Service Worker, IndexedDB
- PWA
- Локалізація
- Доступність: Lighthouse, VoiceOver
Рано чи пізно коду стане так багато, що сайт почне гальмувати. Тому важливим завданням є підвищення продуктивності за рахунок збільшення швидкості завантаження ресурсів і швидкості виконання коду. У більшості браузерів є спеціальні інструменти для аналізу продуктивності. У цьому модулі навчимося за допомогою них знаходити причини проблем з продуктивністю і оперативно їх усувати.
- Звідки беруться лаги. Профілювання, тонкощі і нюанси
- Why-did-you-render, memo, useMemo, useCallback, віртуалізація
- Webpack-analyze
- Клієнтські оптимізації швидкості завантаження сайту
- Серверні оптимізації швидкості завантаження сайту
У міру розвитку продукту стає все складніше стежити за тим, щоб нові фічі не ламали сайт. Щоб бути впевненим в тому, що ми пишемо працездатний код, необхідно покривати його автотестами — спеціальними програмами, які виявляють помилки в коді. У цьому модулі ми розглянемо, які бувають тести і як їх писати. Також торкнемося теми моніторингу помилок, який дозволяє вчасно дізнаватися про проблеми в роботі продукту.
- Які бувають тести
- UNIT-тести: Jest, TDD
- E2E: Cypress
- Статичний аналіз коду: ESLint, Stylelint
- Моніторинг: Sentry
У деяких ситуаціях застосування складних інструментів розробки себе не виправдовує і є зайвим. У цьому модулі ми поговоримо про те, як в дуже стислі терміни і в умовах нестачі ресурсів швидко запустити працюючий продукт.
- Create React App
- Firebase
- NextJS
- Heroku, Vercel і друзі
Після вивчення hard skill frontend-розробки, важливо поговорити і про те, як знайти їм застосування і презентувати роботодавцю. У цьому блоці ми обговоримо ринок вакансій frontend-розробки, в тому числі і ринок для junior фахівців. Також поговоримо про те, як краще шукати вакансії і як влаштовані інтерв'ю.
- Ринок вакансій
- Пошук роботи
- Інтерв'ю
https://privatelink.de/?https://karpov.courses/frontend#Price