Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Що потрібно вчити, щоб стати веброзробником

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Всім привіт. Мене звати Максим Рудний, і останні 9 років я займаюсь веброзробкою. Спираючись на свій досвід, хочу поділитися планом, що потрібно вивчити, щоб стати хорошим Front-end розробником.

Матеріал буде цікавий початківцям, хто прагне пов’язати своє життя з веброзробкою. Сьогодні навчання програмуванню є неймовірно простим — будь-який матеріал можна загуглити або глянути на YouTube. Найскладніше — визначити, а що ж саме потрібно гуглити. Я впевнений, що стаття дасть відповідь на це запитання та зекономить комусь багато часу.

Список сформований для освоєння лише напряму Front-end розробки і конкретно для роботи в Україні. Я не даватиму порад, що потрібно вчити, щоб потрапити в міжнародні компанії або компанії зі списку FAANG. І так, кожен Front-end розробник має трохи знати Back-end, тому в цьому списку будуть різноманітні технології. Наша мета — дійсно висококваліфікований Front-end розробник.

Важливо зауважити, що теми з цього списку не потрібно вчити всі й одразу. Це шлях, який розтягнеться на роки. Освоївши один пункт, можна переходити до наступного. Разом з тим, навіть для junior-спеціалістів важливо знати про існування усіх технологій з цього списку, поверхневого ознайомлення буде достатньо. З ростом вашої експертизи у веброзробці будуть і поглиблюватися знання в кожному з цих пунктів.

Весь список можна знайти в документі за посиланням, а також переглянути відео з детальним поясненням (для тих, хто більше любить відеоформат).

Рекомендації, побудовані на основі мого досвіду роботи, менторства, викладанні на курсах та YouTube-каналі. Якщо вам є, що додати, залишайте коментарі. Впевнений, що ваш досвід та поради будуть корисними іншим.

Ставимо мету

Все розпочинається з мети. Чого ми хочемо досягти? Перш, ніж залазити в стоси навчальних матеріалів та розбиратися з мовами програмування, переконайтеся, що програмування — це те, що вам подобається. Чи любите ви розв’язувати задачі та можете годинами сидіти над монотонними завданнями? Чи лише нещодавно дізналися, що веброзробкою можна непогано заробляти? Від цього залежить, як швидко та ефективно ви навчатиметесь та чи перетвориться цей процес на каторгу.

Щоб пройти шлях від точки А до точки Б, було б чудово розуміти, де знаходиться ця точка Б. Ви хочете працювати senior-розробником в Україні та отримувати свої $5000 чи плануєте переїзд за кордон та роботу в міжнародних компаніях?

Базовий Computer Science

Потрібно отримати базові знання про роботу комп’ютера, браузера, вебсайту. Що таке програма та як вона працює. Можна пройти якийсь базовий курс інформатики, те, що вивчають в школі. Освоїти ази будь-якої мови програмування (С, С++, Python) для того, щоб було розуміння, що таке змінна, конструкції мови, функції.

Корисним буде проходження популярного курсу CS50. Переклад українською доступний на Прометеусі — Основи програмування CS50 2019.

Command line (Terminal)

Робота з консоллю або терміналом — невід’ємна частина буденності програміста. Освоюємо базові команди: навігації по каталогах, створення файлів та папок, змін прав, запуск інших програм через консоль. Чим раніше освоїмо цей інструмент, тим легше буде в майбутньому. Можна пройти будь-який курс з Linux та роботи з консоллю. На Udemy легко знайти дуже популярні пропозиції, наприклад, Linux Basics: All You Need To Know To Start.

HTML

HTML — мова розмітки (не програмування). З неї ми розпочинаємо вивчення веброзробки. Освоюємо теги та побудову сторінки — каркас вебсайту. Доступних матеріалів багато, наприклад, той же CS50 від Гарвардського університету, але уже спеціально для вебпрограмування. Переклад українською також доступний на Прометеус. Також можна заглянути сюди. Хоч HTML і не оновлюється часто, зручніше навчатися по курсах або туторіалах на вебсайтах, ніж по книгах — наочніше буде.

CSS

CSS — каскадні таблиці стилів. Якщо HTML — це голий та нудний каркас, то з CSS наші сторінки починають виглядати красиво та стильно. Освоївши ці дві технології, ми вже можемо створювати перші проєкти. Прості «лендінги» або сайти-візитки. Потрібно набивати руку. Можна копіювати інші сайти, головне зробити якомога більше сторінок, щоб запам’ятати назви тегів та правил.

З цікавих ресурсів для вивчення можу порекомендувати цей або безкоштовний курс від Google.

Система контролю версій Git

Створені нами проєкти потрібно десь зберігати, щоб можна було ділитися вихідним кодом, дивитися, коли ми це створювали і як змінювали. Git — ідеальне рішення, адже це найпопулярніша система контролю версій. Весь код комітимо і публікуємо на GitHub.

Найкраще в Git — те, що його використовують абсолютно всі. Незалежно від того, ви Back-end, Front-end, mobile-розробник чи взагалі DevOPS, без Git просто нікуди.

Додатково до CS50 курсу, де також згадується GIT, можу порекомендувати свій безкоштовний курс Git for beginenrs на YouTube. Скоро буде ще переклад українською. Також на офіційному сайті можна абсолютно безкоштовно використовувати підручник «Pro Git» від Scott Chacon та Ben Straub.

JavaScript

JS — основна мова програмування у вебі й для front-end розробників в цілому. Її вивчення та практика забере найбільше часу. І разом з цим, освоївши JS core, вивчення будь-яких бібліотек та фреймворків не становитиме суттєвих проблем. Освоївши JS ми можемо додати інтерактивності до наших сайтів: валідації форм, складні анімації та ефекти.

Матеріалів з JS неймовірно багато. На своєму YouTube-каналі я ділюсь своїм досвідом. Також є декілька книг, які обов’язкові для прочитання, але не відразу, лише коли зрозумієте суть мови JavaScript і трішки наб’єте руку. Книги:

jQuery (для старих проєктів)

Однією з найпопулярніших бібліотек для JS була jQuery. Зараз вона менш популярна, але це не означає, що ми можемо пропустити ознайомлення з нею. Не всім нам працювати з сучасними та топовими технологіями, комусь і підтримувати старий (legacy) код потрібно.

Значною перевагою цієї бібліотеки є наявність тисяч плагінів та доповнень. Можна зробити будь-який слайдер, галерею чи складний анімаційних ефект.

Ajax / Fetch API

Цінність нашим проєктам надають актуальні дані та їхнє своєчасне оновлення. За допомогою Ajax ми можемо робити асинхронні запити на сервер для отримання чи відправлення даних. Fetch API — нова реалізація цього підходу.

CSS-препроцесори

Оскільки CSS — це лише таблиці стилів, то ні про які змінні, цикли чи функції ми говорити не можемо. Для цього можна використати препроцесори: Sass, Less або PostCSS. Вони дають нам можливість використовувати змінні та mixins (щось на кшталт функцій). Потім цей коди «компілюється» у звичайний CSS.

CSS-методології

Хто хоч трішки працював з CSS, знає, наскільки може бути складно підтримувати його організацію. Правильне формування селекторів та стилів є складною задачею. Весь цей код потрібно ж підтримувати та модифікувати. Щоб спростити життя, придумали різні методології: BEM, Atomic CSS, OOCSS та багато інших. Це, по суті, набір правил, який описує, як ми називаємо класи та використовуємо селектори.

CSS-фреймворки

На щастя, нам не потрібно все писати самому чи реалізовувати якусь з методологій на проєкті. Можна скористатися готовими рішеннями. Тут приходить час для використання CSS-фреймворку. Вибір великий: Bootstrap, Material, Tailwind, Compass та безліч інших. Готові до використання набори компоненів, глобальни стилі та можливість кастомізації під будь-який проєкт.

Даних знань та технологій уже буде достатньо для створення повноцінних сайтів-візиток, лендінгів та інших простих сайтів на декілька сторінок. Звісно, це за умови, що ми не пишемо Back-end, а всі дані уже для нас підготовлені.

Регулярні вирази

З регулярними виразами завжди проблеми. Скільки б ми їх не вчили, все одно до пуття не знаємо. Чим раніше познайомимося, тим швидше дізнаємось, як їх використовувати. Найчастіше застосовуються у Front-end для валідації форм.

Project deploy

Коли ми створили перші проєкти, прийшов час показати їх світові. Тут ми починаємо освоювати найпростіші підходи до розгортання проєктів і їхній доступ в інтернеті. Потрібно купити доменне ім’я та хостинг. Коштують вони не дуже дорого, але користі принесуть вам багато. На співбесідах буде, що показати, адже своє портфоліо потрібно кудись завантажити.

Найпростіший спосіб — завантаження вихідних файлів через FTP на сервер хостингу.

PHP

Так, вам не здалося. У 2022 році я досі раджу вивчити PHP фронтенд-розробнику. Чому? За допомогою jQuery чи навіть React (Angular, Vue) побудова дійсно складного сайту забере місяці, якщо не роки. А вам потрібен досвід роботи з блогами, інтернет-магазинами, будь-чим, що містить адмін-панель та можливість налаштування віджетів та плагінів. Про це ми поговоримо в розділі 17 CMS.

MySQL

Мова запитів SQL і бази даних MySQL стануть в пригоді в будь-якому разі. Якщо ми вже працюємо з PHP, то без них нікуди, а якщо і ні, то не проблема. Навіть зараз я час від часу використовую SQL, наприклад, перевіряю аналітику в BigQuery.

CMS (WordPress, Joomla, Drupal)

Основна причина, з якої варто вивчити PHP — це WordPress (або будь-яка інша CMS). В жодній іншій мові немає такої кількості простих та функціональних систем управління контентом. Блог чи інтернет-магазин можна зробити за годину. А функціоналу там буде стільки, що самому за все життя стільки не написати. Потрібно вміти перевикористовувати готові рішення.

Ці інструменти дадуть вам змогу створювати комерційні проєкти, знаходити своїх перших клієнтів і продавати їм готові сайти. Робота з клієнтами — безцінний досвід. Коли клієнти починають жалітися на продані їм сайти, швидкість навчання з пошуку багів зростає в рази.

Nginx

Зручний та популярний вебсервер. Тут нам знадобляться наші знання роботи з консоллю, адже це сервер на Linux. Ми не часто з ним працюємо, але розуміння, як він обробляє запити та повертає файли, важливе.

SEO

Нам не потрібно виводити сайти в ТОП-10 пошукової видачі, але розуміти, що таке оптимізація сайту під пошукові сервіси, необхідно. Сюди входить семантична верстка, оптимізація продуктивності сторінок, робота з Lighthouse, Google PageSpeed, WebPageTest та іншими сервісами. Від того, як ви оптимізуєте сайт (розумієте, що це таке та навіщо), залежить, скільки грошей заробить ваш клієнт.

Аналітика (Google Analytics)

Коли наші сайти уже доступні світові, хотілося б дізнатися, хто на них заходить, які сторінки переглядає та яка поведінка користувачів в цілому. Тут нам допоможуть різні аналітики. Найпростішою є Google Analytics. Встановлюємо за допомогою Google Tag Manager та збираємо інформацію. На всіх проєктах та компаніях, де я працював, ми використовували цей сервіс, і я займався його налаштуванням.

Architecture patterns (MVC, MVVM)

Погравшись з різними CMS, пора продовжувати прокачувати свої Hard Skills. Архітектурні патерни MVC, MVVM допоможуть зрозуміти принципи побудови складних додатків. Як розділити логіку, дані та представлення цих даних.

ООП

Об’єктно орієнтоване програмування — класика. Якщо упустите розуміння принципів Наслідування, Поліморфізму та Інкапсуляції, створите собі безліч проблем під час роботи з TypeScript чи складнішими програмами на JS.

JS-фреймворки та бібліотеки

React, Vue, Angular є зараз найпопулярнішими JS-фреймворками. У більшості вакансій вимагається їхнє знання. Саме їх використовує більшість outsource та продуктових компаній. Оберіть один з них і копайте в цьому напрямку.

Стейт менеджер

В доповнення до фреймворків — стейт менеджери. Їх зараз багато, але найпопулярніші —це Redux, MobX. Спростять (або навпаки) життя при роботі над складними проєктами де багато даних, вони часто оновлюються, і всі ці зміни потрібно показувати користувачу.

Webpack

Найпопулярніший бандлер. Що він робить? Для спрощення роботи ми використовуємо різні бібліотеки, мови програмування (наприклад, TypeScript), безліч ресурсів (зображення, шрифти). Щоб це все оптимально зібрати та створити оптимізований білд проєкту, ми й використовуємо Webpack.

NodeJS

Найкраще в JavaScript — те, що цю мову можна використовувати й на серверах. Серверна версія JS називається NodeJS — це програмна платформа, яка компілює JS в машинний код. Без неї Front-end розробникам нікуди. Хочете чи ні, але якісь основи потрібно знати.

Express

Найпопулярніший фреймворк для NodeJS. Спрощує життя у багатьох випадках. Навіть якщо вам потрібно просто створити простий вебсервер, він стане у пригоді. Офіційна документація за посиланням.

Package managers (npm, yarn)

Оскільки більшість бібліотек запаковані в пакети та зберігаються в спеціальних репозиторіях, знання npm чи yarn будуть обов’язковими. Там нічого складного, просто потрібно знати, як встановити потрібний пакет з npm.

Build tools

До цієї категорії я відніс додаткові інструменти, без яких нам буде важко зробити якісний продукт, наприклад, лінтери або раннери. Код повинен бути чистим і, як мінімум, в одному стилі. На щастя, це можна автоматизувати за допомогою EsLint або Prettier. Також нам потрібно запускати наші додатки з консолі однією командою. Тут на допомогу приходять npm script, Grunt, Gulp або той самий Webpack.

RESTful

Реалізація протоколів обміну даними між клієнтом та сервером. Навіть, якщо ви не пишете Back-end сторону, розуміти. якими методами можуть робитися запити до сервера (GET, POST, DELETE...) та які статуси можуть повертатися (200, 301, 404...), потрібно розуміти. Кожен з них має свої обмеження, про які ми повинні пам’ятати.

MongoDB

Популярна документо-орієнтована база даних. При роботі з NodeJS стане в пригоді. На щастя, дуже сильно розбиратися з нею не потрібно.

Маючи базові знання з Back-end (NodeJS, Express, MongoDB), ми можемо уже створити повноцінний складний проєкт з допомогою одного JavaScript. Досвід показує, що такі знання будь-якому висококваліфікованому Front-end розробнику особливо важливі.

Performance (оптимізація)

Прийшов час покращувати якість наших проєктів. При роботі з SEO ми вже трішки зачепили тему продуктивності наших додатків. Пора копнути глибше. Оптимізація коду, швидкості завантаження сторінок, швидкість відображення контенту. Тут знадобляться знання Webpack, Nginx. Профайлінг — сукупність методів та технік пошуку найповільніших місць ваших додатків.

Логування

Не важливо, чи працює ваш додаток, чи завалився з якоїсь причини — все це має бути записане в логах. Вони стануть в пригоді під час пошуку помилок. Можна налаштувати сповіщення, щоб дізнатися про неполадки в роботі від спеціальних систем моніторингу, а не від ваших клієнтів.

ElasticSearch

ElasticSearch може бути чудовим вибором для зберігання логів і подальшої їхньої візуалізації. Можна глянути на весь ELK стек. Інструменти корисні та цікаві.

Практики чистого коду

Прочитайте Роберта Мартіна та його книгу «Чистий код». Ця книга дасть відповіді на більшість запитань з написання чистого коду. Ви з майбутнього та ваші колеги будуть неймовірно вдячні вам.

Тестування

Є багато видів тестування, наприклад e2e, unit testing, функціональне, мануально. Найважливішим для програміста є unit-testing (модульне тестування). Без нього ваш код неможливо назвати чистим. Написання тестів зменшує кількість помилок, спрощує модифікацію коду, створює додаткову документацію вашого коду. Найпопулярнішими фреймворками для модульного тестування JS є Jest, Jasmine.

Безпека

Окрім чистоти, ваш код має забезпечувати вимоги безпеки. Гляньте на ТОП-10 правил OWASP. Ну і не забудьте налаштувати HTTPS-протокол та перевірити CORS.

Code review процес

Оскільки робота програміста — це переважно командна робота, вміння проводити code review є необхідним. GitHub дає чудові можливості та інструментарій для проведення code review. Які цілі та призначення цього процесу? Що таке collective code ownership та як він досягається review?

Design and Development принципи

Є кілька принципів написання коду, які вам потрібно освоїти: KISS, SOLID, YAGNI, DRY. Ці принципи часто запитують на співбесідах — покажіть себе з найкращого боку. Кожен з цих принципів також реалізовує практики чистого коду.

CI/CD

Continuous integration — регулярно мержимо наш код в репозиторій, після чого автоматично проганяються тести, лінтінг, білд та будь-які додаткові кроки. Ми впевнені, що наші зміни не зламали проєкт.

Continuous delivery (deployment) — максимально часто деплоїмо код в продакшин.

Найпопулярнішими інструментами є Jenkins та CircleCI. Вам, як Front-end розробнику, не потрібно вміти налаштовувати їх з нуля, але вміти запустити джобу або переглянути логи — просто необхідно. З Jenkins та CI/CD можна переглянути цей курс на YouTube.

Agile

Робота в команді вимагає знання деяких технік та практик. Тут на допомогу приходять Scrum, Kanban та XP.

Cloud

Так уже сталося, що зараз все переносять в хмари. Ознайомтесь з найпопулярнішими рішеннями: AWS, GCP чи Azure.

Docker

Частину роботи Front-end розробника передали дизайнеру, а саме частину верстки. Інструменти Figma та їй подібні генерують CSS компонентів. З одного боку, стало легше, але з іншого — на вільне місце додали іншу технологію — Docker. Фронт ми пишемо у зв’язці з беком, і щоб його підняти, потрібно запускати Docker.

TypeScript

Чудова мова, яка розширює можливості JS для розробників, наприклад, додавши типізацію чи інтерфейси. Активно зараз використовується як на back-end, так і на front-end.

GraphQL

Мова запитів, альтернатива для REST. Дозволяє отримувати лише ті дані, які безпосередньо потрібні для клієнта. Такі реалізації як Apollo додають безліч додаткових можливостей, наприклад, менеджмент стейту. Ми замінили Redux на Apollo, і все працює чудово. Як бонус, завжди актуальна документація для ваших запитів.

Кайдзе́н — «безперервне вдосконалення»

Програмування — шлях з початком, але без кінця. Щоб залишатися кваліфікованим спеціалістом, потрібно щодня навчатися та розуміти, що відбувається у світі Front-end розробки. Кожного дня виходять нові бібліотеки чи фреймворки та потрібно встигати за оновленням інформації. Упустивши цей процес хоча б на рік, можна швидко втратити кваліфікацію.

Підсумки

В цьому плані та списку технологій я повністю упустив такі речі, як англійська мова та soft skills. Вони не менш важливі, але не є темою цієї статті.

На перший погляд, список технологій може здатися довгим, але ж ви не думали, що програмістам платять великі гроші просто так? Це складна робота, яка потребує постійного навчання. І як я вже писав на початку, ці теми та технології вивчаються роками, поступово.

Сподіваюсь, цей матеріал дав вам відповіді на ваші запитання та зробив шлях навчання програмуванню більш зрозумілим.

👍ПодобаєтьсяСподобалось40
До обраногоВ обраному25
LinkedIn

Найкращі коментарі пропустити

Звернення до майбутнього юного вайтішника: сподіваюся шо ’чуйка’ убереже тебе від вивчення всього того шо дядя в статті написав.
Html+css+js+vuejs(або react/angular) +англ=майже перемога. А весь інший жах ти вивчиш коли/якщо життя змусить.

Це якось відразу на Архітекта)

Гадаю що для початку
HTML, CSS, JS, Git і один з фреймворків (React/Vue/Angular) — то вже достатньо для того щоб знайти роботу і почати працювати. Все інше вже можна вивчити вже на проекті. (це на фронтенд)

Все одно вього знати ніколи не будеш, веб це кроляча нора, технологій просто занадто багато, щоб їх всі вивчити.

Хоча протягом років роботи, все одна з багатьма цими речами, вам доведеться розібратися хоч трохи

Статью можно назвать так «как заставить начинающего перестать заниматься веб-разработкой». Этим списком вы только отпугнете начинающего.

Всю статью можно сократить до следующего: учим html, css, один из препроцессоров + БЭМ — верстаете пока не начинает тошнить. Учите джаваскрипт по learn.javascript.ru, делаете todo app на чистом джс. Затем учите Реакт+Редакс или Вью и делаете это же туду, но на нем. Все это выкладываете на гитхаб в процессе изучения таким образом практикуясь с гитом. Теперь ходим на собесы чтобы нас куда-то взяли трейни на 500 баксов.

Оскільки CSS — це лише таблиці стилів, то ні про які змінні, цикли чи функції ми говорити не можемо. Для цього можна використати препроцесори: Sass, Less або PostCSS. Вони дають нам можливість використовувати змінні та mixins (щось на кшталт функцій). Потім цей коди «компілюється» у звичайний CSS.

В цсс есть переменные, если что. Custom properties

Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Максим, дякую, дуже корисна добірка. Мабуть, більш орієнтовна на фронтенд, але непогана для всіх девелоперів. Для «продвинутых» я б ще додав Kiss, Dry, SOLID, Шаблони проектування, agile/scrum, AWS/Cloud/docker, Hibernate — must have для типізованих мов. Можливо б додав основи tcp/ip, http, sftp/ftp, ssl/tls.

Дякую. Так, це конкретно для front-end напрямку, я наголошував в статті про це. KISS, DRY, SOLID згадував в розділі

Design and Development принципи

. Agile/Scrum теж важливі, але я більш на технічних складових акцентував увагу.

Звернення до майбутнього юного вайтішника: сподіваюся шо ’чуйка’ убереже тебе від вивчення всього того шо дядя в статті написав.
Html+css+js+vuejs(або react/angular) +англ=майже перемога. А весь інший жах ти вивчиш коли/якщо життя змусить.

Це якось відразу на Архітекта)

Гадаю що для початку
HTML, CSS, JS, Git і один з фреймворків (React/Vue/Angular) — то вже достатньо для того щоб знайти роботу і почати працювати. Все інше вже можна вивчити вже на проекті. (це на фронтенд)

Все одно вього знати ніколи не будеш, веб це кроляча нора, технологій просто занадто багато, щоб їх всі вивчити.

Хоча протягом років роботи, все одна з багатьма цими речами, вам доведеться розібратися хоч трохи

Как считают галеровладельцы: «плох тот джун, которого нельзя продать, как синьора».

типу сайту школи

Я б не проти супроводжувати сайт школи, що знаходиться у якомусь Міннеаполісі :-)
Якщо в них власні люди не можуть

І яка буде твоя перспектива на ринку праці в довгостроковому періоді?

1) Що саме є «довгостроковий»
2) Shitty-old-legacy нікуди не дівається, і його потрібно підтримувати
3) Ніхто не забороняє параллельно вчитись, і, якщо щось буде довподопи — перейти.

Взагалі якщо ти вважаєш що перспектива — то є біг за техлогогіями та грошима, то її нема, перспективи, у пості вище.
Але для комфортного життя (конкретної людини) це не завжди потрібно (біг за техлогогіями та грошима)

Як продавати години власного життя то вже ха максимальною ціною.

Ну, а батькам на годину така людина скільки платить? 🤔😎

Причому тут це?

Ну я до того, що батьки нам віддали купу годин власного життя і не за максимальною ставкою.

Про сучасний проект та несучасний я ж вище написав: «якщо вважати що перспектива — то є біг за техлогогіями та грошима, то її нема, перспективи, у пості вище.»
Здається однозначно висказався (?)

Не, я просто подумав, що через те, що всі толкові йдуть за грошима, ми маємо Дію та зламані сайти і таке інше. Адже їх саппортять посередності :(
А болото, в якому живемо — спільне ж.
Та це таке...

Мова ж була про сайт школи чи універу у США.

А скільки плотять в Fiverr я не знайшов.

Потрібно отримати базові знання про роботу комп’ютера, браузера, вебсайту. Що таке програма та як вона працює. Можна пройти якийсь базовий курс інформатики, те, що вивчають в школі. Освоїти ази будь-якої мови програмування (С, С++, Python) для того, щоб було розуміння, що таке змінна, конструкції мови, функції.

І як працює Firefox? Як працює dou.ua?

  1. Англійська мова та мʼякі уміння
  2. Linux та роботу в командній оболнці (BASH).
  3. HTML
  4. CSS
  5. Git
  6. JavaScript
  7. jQuery
  8. Ajax / Fetch API
  9. CSS-препроцесори
  10. CSS-методології
  11. CSS-фреймворки
  12. Project deploy
  13. PHP
  14. MySQL
  15. CMS (WordPress, Joomla, Drupal)
  16. Nginx
  17. SEO
  18. Аналітика (Google Analytics)
  19. Architecture patterns (MVC, MVVM)
  20. JS-фреймворки та бібліотеки (React, Vue, Angular)
  21. Стейт менеджер
  22. Webpack
  23. NodeJS
  24. Express
  25. Package managers (npm, yarn)
  26. Build tools
  27. RESTful
  28. MongoDB
  29. ElasticSearch
  30. Тестування
  31. Docker
  32. TypeScript
  33. GraphQL
Шах і мат вайтішники. Багато, але це правда. Все це треба знати Достатньо подивитися оголошення про роботу. Наприклад тут готові плотити 20000₴ і хочуть щоб пролетарій знав JavaScript, jQuery, Gulp, Npm, SASS / SCSS, React, PHP, MySQL, WordPress та все що з ними повʼязане.

Desing and Development принципи виправте очепятку. Design. Загалом дуже корисна стаття: стисло, без води. І це лише верхівка айсберга.

Зроблено. Дякую.

Desing and Development принципи

Знати потрібно більше, значно більше. Тут лише основні теми. Деякі можна виключити (частину про PHP та CMS), але це за умови що плануєте працювати лише на компанії де цього не використовують.

Автор напихал всего и всякого видимо исходя сугубо из своего опыта. Проблема в том, что он у каждого разный и с многим из списка знакомство можно смело откладывать до первой встречи на реальном проекте. Можно (и даже нужно) работать фронтендером и не касаться цмс или монги годами. Зачем выносить аякс запросы отдельно? Тогда можно все браузерное api вынести по пунктом — список получится внушительней и текста будет больше. jQuery в 22 году — без комментариев.

Все, что нужно на начальном этапе уже написали ниже. Хорошая база + занние одного фреймворка из топ-4 (без него трудно на рынке Украины что-то найти) + английский. Остальное человек дотянет по необходимости/желанию.

Можно (и даже нужно) работать фронтендером и не касаться цмс или монги годами

Я пишу бек на пхп и то не касаюсь Монги и цмс годами)) Из баз основная — MySQL, попадалась также PostgreSQL. С цмс не работаю принципиально, на них, в основном, проекты не фонтан.

А як без jQuery зробити плавну зміну видимості якого—небудь елементу на сторінці?

я плох в нативных анимациях, но полагаю, как то так:
codesandbox.io/...​ut-zm0ek?file=/index.html
речь не от том, что jQuery плох (он хорош), а о том, что в большинстве случаев сейчас он не нужон. А если вдруг и столкнешься, то этот тот случай, когда с докой все ок и вытащить нужный метод — занятие на несколько минут.

По перше, з jQuery це всього один рядок коду. По друге, я здиваваний як можна робити сайтики сидячи на зарплаті в тисячі доларів і не знати як зробити таку просту річ.

потому что нативно мало кто пишет (вопрос был то в том как сделать без джейквери — очевидно это несложно и естественно, что любая нативная имплементация потребует писанины). И потому, что анимации не всегда нужны, но даже когда нужны, фреймворки по типу Вуйя или Ангулара предоставляют для этого свои инструменты.

разом із цим рядком тягнеться ще сто+ кілобайт коду

А скільки тягнеться за всілякими ангулярками?

Мда, плавную смену видимости можно сделать чистым цсс и без джс, я уже молчу о том, чтобы тянуть еще и библиотеку

Я знаю карате, кунг-фу, джиу-джитсу, и много других страшных слов

Відверто кажучи, то вистачить мати знання з наступних технологій html, css, javascript, typescript. Щодо git то на початку вистачить знати наступні команди: merge, commit, stash, push, pull. Ну і теорія звійсно.

Статья как резюме хитрого джуна. Все слова которые знал вписал. Еще не хватает ассемблера и фортрана.

Статью можно назвать так «как заставить начинающего перестать заниматься веб-разработкой». Этим списком вы только отпугнете начинающего.

Всю статью можно сократить до следующего: учим html, css, один из препроцессоров + БЭМ — верстаете пока не начинает тошнить. Учите джаваскрипт по learn.javascript.ru, делаете todo app на чистом джс. Затем учите Реакт+Редакс или Вью и делаете это же туду, но на нем. Все это выкладываете на гитхаб в процессе изучения таким образом практикуясь с гитом. Теперь ходим на собесы чтобы нас куда-то взяли трейни на 500 баксов.

Оскільки CSS — це лише таблиці стилів, то ні про які змінні, цикли чи функції ми говорити не можемо. Для цього можна використати препроцесори: Sass, Less або PostCSS. Вони дають нам можливість використовувати змінні та mixins (щось на кшталт функцій). Потім цей коди «компілюється» у звичайний CSS.

В цсс есть переменные, если что. Custom properties

Представляю фронта который изучал С, для того, чтобы потом бахать на пхп. Чтобы изучить пхп, нужно изучать пхп, а не устройство вселенной, С или цыганскую магию.

Відео курси — даремна трата часу. Людина зазвичай читає швидше, ніж говорять у відео. Тому відео просто нудні за визначенням. (Втім, деколи в них є сенс «подивитися як це працює».)

Знову ж таки, найкраще — відразу робити на практиці. Тому пріоритет: «прочитав невеликий розділ — відразу зробив практичне завдання», а не «завдання наприкінці великої теми».

Перепробував багато курсів. Найбільше зайшли FreeCodeCamp. Хоч й вони далекі від ідеялу (погана структурованість тем. Ну і їх вбудований редактор коду — жерсть.)

П.С. Поки джун вчитиме усі технології із списку у статті, половина із них стане неактуальними :)

На технічних відео сприймати «швидкий» звук складно. Це для гуманітарних хіба що.

Звичайно, що відсутні скіли. Тому ж і вчу :)

Якщо ж ви про скіл «вчити матеріал із відео», то навіть НЕ бачу сенсу його прокачувати. Матеріал текстовий читається і засвоюється швидше.

А сенс витрачати час і зусилля на НЕпотрібний скіл? :)

Ну, фізична швидкість сприймання інформації із тексту усе одно перевищує швидкість сприймання із відео. Така біологія :)

Звісно, декому краще сприймати із відео. Однак, ці люди гірше сприймають із тексту. Тому максимальна текстова швидкість їм недоступна :)

А вчитися мені сприймати із відео, щоб знизити швидкість навчання (бо відосики — це модно) — ну, навіщо?

В процесі навчання мозок має «відпочивати» для засвоєння інформації. От якраз «відпочиваю» тут :)

Видеокурсы лично для меня лучший формат обучения. Именно благодаря видеокурсам я сейчас работаю в веб-разработке.

Ну ок. Вам зайшли. Мені — ні. Узагалі.

Какие курсы вы прошли? Дайте, пожалуйста, названия

Відео курси — даремна трата часу

c Udemy — 100% трата времени. Но есть куча скрин-кастов, конференций, личных каналов, на которых материал в видео, частенько это воркшопы, изложен офигительно и воспринимается очень легко. Так что все зависит

Дивився канал автора статті, дивився гарвардський CS50, дивився ще на ютубі — трата часу.

Якщо є вдалі приклади — покажіть :)

канал автора статті, дивився гарвардський CS50

 —

— трата часу

вероятнее всего, я это все не смотрел. Но, вот это

дивився ще на ютубі

преувеличение, youtube сам как интернет в интернете, чтобы утверждать, что там чего-то нет, а что-то есть. Для себя я оттуда вынес очень много новых знаний.

Я перелічив частину відеокурсів, які мені не зайшли.

Ви, зі свого боку, можете навести приклади вдалих відеокурсів?

Дякую. Перегляну — оціню :)

Переглянув канали, що ви пропонували. ≈Нормальний аж...останній канал (Magic Of SQL). Однак, це із серії «як це працює», а не повний навчальний курс.

Решта — просто нудні. (Від деяких голосів аж спати захотів.)

Ну значит лично вам не подходит, я многие из них посмотрел с интересом и пользой.

Можливо, ми просто говоримо про різні речі :) Є відео:
1) Ознайомлювальні («вступ в професію»).
2) Повні навчальні курси.
3) «Як це працює».

По пункту 3 бувають нормальні відео. Однак, Я говорю про пункт 2. НЕ знаю жодного нормального відео курсу.

Ну і відео канал автора стартової статті — це про те, як залякати і відштовхнути новачка, а не навчити.

Видео в начале — это импрувмент уже.
Есть вот такой видео-курс www.appacademy.io/course/app-academy-open , по которому я сам учился, но он с повторениями в тексте: шикарные видосы, могли бы зайти и без текста — просто с выполнением практических заданий.

І цей курс не зайшов :) Читати — швидше.

І цей курс не зайшов

За 0-15 минут, учитывая, что этот курс по другому курсу? 0_0 NotBad_analytics

Читати — швидше.

Если написано лаконично — что большая редкость в наше время.
P.S. Кстати, можно огласить список тех книг, которые быстрее читать?

W3School і FreeCodeCamp.

Так, у них є свої мінуси (наприклад, у FreeCodeCamp погана структурованість, а у W3School немає завдань). Однак, в цілому процес навчання швидший у них.

W3School і FreeCodeCamp.

Не ожилал... это же Udemy, но только в тексте

Однак, в цілому процес навчання швидший у них.

Проходил FreeCodeCamp — в голове не осталось вообще ничего.

Ну так тема ж статті: «що потрібно вчити, щоб стати....» Звісно, далі треба продвинутіші курси.

Проходил FreeCodeCamp — в голове не осталось вообще ничего.

Їх в комплекті із W3School.

У в W3School хороша теорія (структурованість), але немає практичних завдань. А FreeCodeCamp — якраз із купою завдань «на кожен крок» (а не вкінці великих тем).

«що потрібно вчити, щоб стати....»

вот именно ЧТО, а не КАК. FreeCodeCamp и W3School => это ж просто поток инфы, коих тысячи

Головне (як для мене) це:
1) Структурованість матеріалу.
2) Практичні завдання «після кожного маленького розділу» (а не «після великих тем»).

W3School і FreeCodeCamp (в комплекті!) це вирішують.

эти пункты формально выполняются очень многими курсами, но качественные «далеко лишь не все»

Ну, звісно. Далеко не всі текстові курси хороші.

Втім, які у вас критерії?)

Формализовать критерии не получится, но ведь и у вас не получится

Так і є. Тому...просто перепробувати різні варіянти — щось та й зайде :)

Просто зараз модно — це відео. А мені не заходить. І текст — просто швидше.

Да всегда были и видео и текстовые обучающие материалы, даже в середине прошлого века: курсы по-чему-угодно от СССР/США.

Я не кажу: були чи ні :) Але Я кажу що зараз це модно, в тренді.

Он, автор стартової статті робить якраз відео курси, а не текстові.

Не согласен, что сейчас тренд на видео. Текста не меньше, а то и больше.

відносно «швидкості» сприйняття... якщо те, що потрібно вивчити, буде використовуватись довше за два тижні, то немає жодної значення скільки часу пішло на вивчення, одна година, чи півтори;), наголос слід ставити на індивідуальному комфорті, а він у кожного свій.

Має значення час. Бо може бути нудно :)

Я дивився відео автора цієї статті. Такі відео швидше відлякають новачків, аніж навчать.

для тих, хто більше любить відеоформат

Відео для ознайомлення — ок
Для навчання — ні
Практикувати по відео — це таке собі заняття

Монга — хоч і популярна в цих колах ЗУБД, інструмент з великим підвохом.
Для простоти і початку — статичний json її повністю замінить.
Потім краще вивчити повноцінну ЗУБД PostgreSQL, мову SQL і нормальні форми.
Це дозволить структурувати дані

jQuery — blog.garstasio.com/you-dont-need-jquery

CSS-препроцесори — по суті один SASS з libsass на C

postcss — пишеться одним не дуже адекватним рфіянином
Ви ж ще пам’ятаєте Petya і padleft

Один из разработчиков постгреса был русским (Бартунов) и сейчас их вклад в него активный. Это же не означает, что нужно его не использовать. Что не так с Ситником?) он очень многое сделал для опенсорса. Думаю, что все вебразработчики пользуются как минимум одним его инструментом :)

Що не так?
Підтримує пюрера, ненавидить пендосів
І що він до речі такого зробив для опенсорса?
Чи вам вистачить одного аутопрефіксера, щоб виправдати будь-які його дії і слова?

PostgreSQL пише не одна людина
Ті хто пише не помічені за такими сентенціями
Але якщо якісь натяки, то поділіться

и к nginx россияне тоже руку прикладывали. Выкидываем nginx. И Kotlin туда же.
Redux делал Абрамов. Значимый вклад в разработку OpenCV сделало нижегородское отделение Интела. И т.д.

А вони також підтримують використання рфією хімічної зброї в Сирії і ненавидять пендосів?

Ну тоді нащо ви їх привели як приклад?

Вероятно потому, что я не имею обыкновения пристально изучать биографии разработчиков опенсорса. И не могу найти ни одной причины, почему вдруг я должен начать это делать.

Я навів дві причини

Якщо вони вас не турбують, то повідомте про це ваших клієнтів та/чи SecOps

О чем еще по вашему мнению я должен уведомлять своих клиентов и секьюрити опсов? О том, что разработчики опенсорса думают о вегетарианстве / гендерном равноправии / атеизме?

о вегетарианстве / гендерном равноправии / атеизме

Ці категорії займаються тероризмом і атаками на інфраструктуру як рфіяни?
Тоді — так

А что, все любители путина и «ненавистники пиндосов» занимаются терроризмом и атаками на инфраструктуру?

Так «новічок» також не всіх підряд травить

І що тут такого повідомити клієнтів, що ви готові ризикнути їх безпекою, бо вам так зручніше?

А мне нужно сообщать обо всём оупенсорсе, который разрабатывают мусульмане, например? А то вдруг окажется что там одни игиловцы и в свободное от кодинга время они головы кафирам режут.

На вашу країну напав IS?

Тоді так, повідомляйте і звертайте увагу

«Пристально следить и своевременно уведомлять клиентов об оупенсорсе среди авторов которого есть мусульмане / коммунисты / атеисты / форумные борцуны». Понял. Спасибо за ценный совет.

О чем еще, по вашему мнению, следовало бы знать клиентам и их секьюрити опсам?

А чого в вашому переліку немає рфіян, тобто терористів?

Підписатись на коментарі