Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Какие бы советы дали начинающему web/frontend разработчику?

Поделитесь пожалуйста своим опытом:
-Расскажите какие ошибки совершали вы - что бы избежать этого нашему юному "разработчику";
- Полезную литературу (и чем хороша, та или иная "книга");
- На какие курсы или вебинары стоит обратить внимание;
- Какие сервисы, инструменты, программы используете вы и почему. Что бы вы порекомендовали попробовать, из перечисленного вами;
- Что НЕ стоит делать/учить/скачивать/использовать;
А так же немного от себя, так скажем слова напутствия и пожеланий. )
*
За ранее благодарю каждого, кто сможет расписать всё это.)
*
Прошу вас потратить чуть больше времени и дать развёрнутые ответы/советы, что бы прочитав - у человека не появилось еще больше вопросов. ))
ПрограммированиеВеб-разработка+3
Вадим Рамилевич
  ·   · 31,3 K
Веб-разработчик, геймер, специалист по этике  · 19 янв 2022
У вас довольно странные ожидания от этой профессии, если честно. Будто бы можно такой список "советов" дать, и всё, все вопросы отпадут. На freecodecamp.org не просто так рассчитывают, что курс фронтэнда вы пройдёте за 900 (девятьсот) часов (полгода учёбы фуллтайм 5/8).
что бы прочитав - у человека не появилось еще больше вопросов.
Вы что-то делаете не так, если после прочтения чужих советов у вас не появится больше вопросов. У вас должны появиться вопросы.
Расскажите какие ошибки совершали вы - что бы избежать этого нашему юному "разработчику";
Когда я верстал фронтэнд, в самом начале карьеры, моей главной проблемой, наверное, было то, что с самого начала код нужно писать с расчётом на сопровождаемость, а я писал лишь бы конечный результат сдать до дедлайна. Очень легко написать портянку CSS кода, которая превратит вашу страницу точно в то, что хочет заказчик (или вы сами). Гораздо сложнее написать CSS код так, чтобы кто-то другой или вы смогли потом вносить в него изменения, когда понадобится. CSS не зря иногда с иронией называют "append-only" языком, и именно поэтому Tailwind получил такую популярность. Принцип "пиши код так, будто бы сопровождать его будет маньяк-психопат, который знает, где ты живёшь" полезен в любом языке программирования, но в рамках фронтэнда в CSS это ощущается особенно остро.
  • Полезную литературу (и чем хороша, та или иная "книга");
Самое полезное, что я читал по фронтэнду, это были статьи на сайтах https://alistapart.com/ и https://www.smashingmagazine.com/ По крайней мере, когда я через поиск искал ответы на свои вопросы, ответы были чаще всего на этих сайтах. Две самые полезные справочные статьи с других сайтов, на которые я ссылаюсь до сих пор, это A Complete Guide To Flexbox и A Complete Guide To CSS Grid. А так, я распечатал себе краткий reference по всем директивам CSS и прям держал распечатку у себя на столе, пока не выучил самое нужное наизусть. Я использовал вот это: https://www.smashingmagazine.com/2009/07/css-3-cheat-sheet-pdf/ но он уже, боюсь, содержит далеко не всё, что есть в современном CSS3.
Я думаю, вы уже заметили, сколько внимания я уделяю CSS. Это потому что, наверное, 80% работы на фронтэнде - это работа с CSS. Сейчас, с приходом всяких Material-UI и Tailwind может показаться, что CSS знать не обязательно, но это заблуждение. На самом деле знать CSS стало ещё важнее, потому что готовые компоненты из фреймворков теперь скрывают от вас реализацию, и если вам понадобиться сделать что-то, обладающее уникальным внешним видом, то без уверенного знания CSS вы вообще ничего не поймёте.
Конечно же, от вас ожидается, что вы читали и поняли хотя бы разделы 1-7 и 13 спецификации HTML.
Я думаю, что вы уже поняли, что знание английского языка это свойство, которое будет отличать начинающего разработчика ПО от опытного.
Так как современный веб-фронт-энд включает в себя огромное количество Javascript, то, кроме вёрстки, вам придётся заниматься полноценным программированием. Это гигантская тема, в которой огромное количество литературы. Я предлагаю вам прочитать хотя бы фундаментальные "Совершенный код" МакКоннела, "Чистый код" Мартина, "Рефакторинг" Фаулера и "Экстремальное программирование" Бека. Все эти книги вроде уже изданы на русском, даже "Рефакторинг".
  • На какие курсы или вебинары стоит обратить внимание;
Конкретно по вёрстке ничего не скажу, я учил себя по книгам и блогам. Вроде бы курс на freecodecamp.org, который я выше упоминал, выглядел достаточно компетентно, но я его от начала до конца не проходил. По Javascript в рунете есть проверенный временем learn.javascript.ru, который, наверное, лучшее, что есть на русском языке из курсов по яваскрипту. htmlbook.ru такой же проверенный временем справочник по HTML/CSS, тоже на русском.
В целом по программированию существует столько литературы и документация в век интернета настолько доступна, что я сомневаюсь, нужно ли вообще проходить какие-то курсы. Разве что ради общения с преподавателем.
  • Какие сервисы, инструменты, программы используете вы и почему. Что бы вы порекомендовали попробовать, из перечисленного вами;
В современном фронтэнде типичный стек, который вы установите себе на компьютер для работы, это Node.js+NPM, Git, VSCode и Chrome.
Для полноценной проверки своей вёрстки нужно, конечно, поставить весь зоопарк браузеров - Chrome, Firefox, Яндекс.Браузер, Edge, Opera но необходимость в этом постепенно падает, потому что разница между движками рендеринга со временем уменьшается, а верстаете вы всё равно с фреймворками, которые в обязательном порядке используют reset.css в том или ином виде. Возможно, вам придётся обзавестись iMac, чтобы иметь доступ к родному Safari на маке, это отдельная тварь со своими собственными загонами.
Node.js вам придётся поставить, потому что все серьёзные фронтэнд-проекты нужно компилировать при помощи webpack, прежде чем из них получится что-то, пригодное для веба. Навыки работы в командной строке подразумеваются у любого вида разработчика ПО.
Git нужен, потому что работать вы будете скорее всего как часть команды, а Git победил другие системы контроля версий везде, кроме разработки игр.
VSCode благодаря деньгам Microsoft в 2022 году настолько впереди всех своих конкурентов (Atom, Sublime Text, что-то ещё, о чём я не знаю), что использовать что-то другое просто бессмысленно. Если вы готовы потратиться на действительно профессиональные инструменты, лучше VSCode будет только WebStorm от JetBrains, и после них - ничего.
Не забывайте, что все современные веб-браузеры включают в себя Developer Tools, которые вызываются обычно по F12. Это буквально бесценный инструмент, он экономит кучу времени в работе.
Из веб-сервисов стоит очень сильно полюбить caniuse.com, где можно увидеть, какая фича в каком браузере на данный момент поддерживается.
  • Что НЕ стоит делать/учить/скачивать/использовать;
  1. Слушать людей, которые на полном серьёзе, а не в шутку, говорят вам, что HTML и CSS это не языки программирования.
  2. Слушать людей, которые на полном серьёзе говорят, что вы действительно "можете верстать HTML/CSS в блокноте" и предлагают вам что-то типа Notepad++ в качестве среды разработки. Опытный разработчик ПО будет работать с кодом в блокноте только если его будут шантажировать жизнью его родных, потому что без подсветки синтаксиса, дерева файлов в проекте, Find Usages и Go To Definition вы кровавыми слезами умоетесь.
  3. Проверять результат своей работы только в одном браузере в одном размере окна.
  4. Не учить английский язык.
  5. Думать, что тот, кто читает документацию - это плохой разработчик, и не читать её.
  6. Слепо копировать готовые куски кода из ответов на Stackoverflow, а не перепечатывать их в свой код символ за символом.
  7. Как попало называть функции и переменные в своём коде, давать бессмысленные названия классам CSS и использовать везде div вместо подходящих семантических тэгов HTML.
А так же немного от себя, так скажем слова напутствия и пожеланий. )
Готовьтесь к страданиям.
В веб-фронтэнде постоянно появляются новые фичи, которые будут доступны не во всех браузерах. Значительная часть работы в нём состоит из взаимодействия с отвратительным недоязыком Javascript. Реклама гонит сюда огромное количество нубов, которые ничего не смыслят в разработке ПО, но очень много хотят. Заказчики будут ставить вам абсолютно технически невыполнимые задания, и удивляться, почему это вы не хотите сделать сайт, на котором посетитель будет видеть себя, как в зеркале. К фронтэндерам относятся как к недопрограммистам, хотя никакой классический программист, например, с операционных систем или графики, не сможет вообще ничего разобрать на фронтэнде без специальной подготовки. Подавляющее большинство проблем на фронтэнде это проблемы с браузерами, и у вас нет никакого контроля над этим, вас просто ставят перед фактом и вы должны придумывать какие-то пути обхода.
Я пишу это не для того, чтобы отвадить вас от этой сферы. Мне же только лучше, если в разработке ПО будет как можно больше опытных разработчиков. Я пишу это для того, чтобы вы сразу были готовы к проблемам, потому что лучше, если вы приготовитесь к худшему, а на самом деле вам всё покажется легче, чем вы ожидали, чем если вас кто-то накормит сладкими грёзами, а потом вы будете в слезах сидеть перед белым экраном и думать, что это вы такой плохой программист.
Нет. Это просто идёте вы в такую клоаку. Все сидели в слезах перед белым экраном. Выживают только те, кому действительно нравится этим заниматься, кто получает физиологический кайф от работающей как надо программы.
Я добавлю два важных момента, которые не уместились ни в какой из поставленных вопросов.
Во-первых, подавляющее большинство посещений веб-сайтов к 2022 году происходят с мобильных устройств. То, что вы верстаете у себя на компьютере с широким экраном, это не то, что увидит типичный посетитель вашего веб-сайта.
Во-вторых, самая лучшая комбинация, это когда фронтэндер ещё и умеет сам нарисовать дизайн, который нужно сверстать. Если вам дизайн спускают сверху от какого-то другого специалиста, то вам придётся очень хорошо уметь договариваться с ним, потому что веб-страница это абсолютно не то, что полотно в графическом редакторе, и дизайнеру нужно об этом знать при проектировании оформления.
Оригинальное дополнение к вопросу:
Поделитесь пожалуйста своим опытом:
-Расскажите какие ошибки совершали вы - что бы избежать этого нашему юному "разработчику";
  • Полезную литературу (и чем хороша, та или иная "книга");

  • На какие курсы или вебинары стоит обратить внимание;

  • Какие сервисы, инструменты, программы используете вы и почему. Что бы вы порекомендовали попробовать, из перечисленного вами;

  • Что НЕ стоит делать/учить/скачивать/использовать;

А так же немного от себя, так скажем слова напутствия и пожеланий. )
*
За ранее благодарю каждого, кто сможет расписать всё это.)
*
Прошу вас потратить чуть больше времени и дать развёрнутые ответы/советы, что бы прочитав - у человека не появилось еще больше вопросов. ))
1 эксперт согласен
Поставил лайк, самосовершенство прям прет из всех щелей, но html это все-таки НЕ язык программирования ))
Образовательная платформа Хекслет  · 15 авг 2022  · ru.hexlet.io
Наверное главный совет фронтендеру - не гнаться за модой. Есть модное высказывание, что каждую секунду во фронтенде появляется и погибает один фреймворк. Это выражение появилось не с пустого места. Само направление очень... Читать далее
Помогаем новичкам освоить профессию веб-разработчикаПерейти на ru.hexlet.io/webinars
3 эксперта согласны
Поддерживаю, всё правильно написано. Про вопрос "что происходит, когда..." тоже очень хорошо, что упомянули.
Диванный философ, по совместительству инженер  · 21 янв 2022
Я переквалифицировался на Веб-разработчика сразу fullcstack уже имея сильно больше 10 лет опыта программирования в других областях. Поэтому "нашему юному разработчику" :-) вряд ли сильно помогут мои советы по курсам, литературе... Читать далее
Я тебе ничего не расскажу   · 8 апр 2023
Как можно больше практиковаться, пожалуйста, практикуйтесь! Без практики вы просто потратите своё время на просмотр всяких курсов или статьей))