Когда фронтендеру пора остановиться в изучении HTML, CSS и JS

IT-блогер Chris Sean рассказал, каких знаний в HTML, CSS и JS достаточно для работы во фронтенде.

Вот, о чём идёт речь в видео:

1. Вопрос о том, сколько нужно знать HTML, CSS и JavaScript для того, чтобы устроиться на работу в 2023 году, часто задают.
2. HTML и CSS не являются сложной частью, важно понимать основы структуры HTML-документа и основные элементы, такие как div.
   
3. Большинство компаний имеют дизайнера, который предоставляет дизайн в виде изображения или файла в Figma или Sketch, задача разработчика - перевести это в код.
   
4. Необходимо знать CSS, но не требуется глубоко владеть дизайном, так как существуют инструменты, например, Tailwind CSS, которые упрощают работу.
   
5. Основное внимание при обучении следует уделять JavaScript и фреймворкам, так как это займет более 75% времени обучения.
   
6. HTML и CSS можно быстро изучить, достаточно понимать, как работает DOM и основные теги, а также использовать CSS для улучшения внешнего вида сайта.
   
7. Важно уметь использовать поисковые системы для решения задач по HTML и CSS, а также использовать библиотеки и фреймворки для ускорения разработки.
   
8. JavaScript является более сложной частью, так как часто это первый язык программирования, который изучают разработчики, и включает в себя работу с различными фреймворками и инструментами, такими как ReactJS, Next.js и TypeScript.
   
9. Необходимо изучить терминологию JavaScript, основы работы с массивами, объектами, понимание объектно-ориентированного программирования и манипуляции с DOM.
   
10. Важно не только изучать JavaScript, но и практиковаться в создании веб-сайтов, чтобы закрепить знания и построить крепкий фундамент для трудоустройства.
    

Ниже — транскрибированный перевод ролика на русском языке.

Сколько знаний HTML, CSS и JavaScript вам нужно знать сегодня, чтобы быть нанятым? Давайте разберемся в этом прямо сейчас. Это вопрос, который я получил много, много, много, много раз, верно? И это ответ, который я дал много, много раз в комментариях. Но я поднимаю этот вопрос сейчас, потому что это фактически вопрос, который я задал генеральному директору boot.dev в одном из последних эпизодов моего подкаста, если вы хотите посмотреть, ссылка в описании ниже. Но давайте услышим его ответ на вопрос, сколько HTML, CSS и JavaScript должен знать веб-разработчик, фронтенд-инженер. Давайте посмотрим прямо сейчас.

Сколько HTML и CSS разработчики вообще должны знать

Вам это понадобится, но HTML и CSS не являются сложной частью. HTML - это язык разметки, верно? Вы изучаете основные строительные блоки, такие как divs и прочее. Это действительно не занимает много времени, чтобы ознакомиться со структурой HTML-документа. А CSS, вы можете потратить столько времени на его освоение. Но в конечном итоге, в большинстве компаний, где вы будете работать, вы не будете дизайнером. И вот здесь я изначально столкнулся с проблемой, я думал, что, чтобы быть фронтенд-разработчиком, мне нужно быть очень хорошим в дизайне.

Это не обязательно так. В большинстве компаний, где вы будете работать, будет дизайнер, который предоставит вам дизайн, либо изображение, либо файл Figma или что-то в Sketch. Ваша задача - просто перевести это в код. Так что, я имею в виду, вам нужно знать CSS.

Я просто хочу упомянуть один из моих любимых инструментов. Я использую Tailwind CSS на фронтенде, в основном на boot dev, потому что дело в том, что CSS не так уж сложно понять, как он работает. У вас есть границы, у вас есть тени, у вас есть эти вещи, вы можете гуглить, когда застряли. Но что сложно, это написать чистый CSS, потому что, я убежден, это почти невозможно. Так что ответ таков: вам нужно изучить HTML и CSS, но вам придется потратить гораздо больше времени на JavaScript. Мой прогноз составляет 75% и более вашего обучения до того, как вы получите первую работу на фронтенде, будет связано с JavaScript в каком-то фреймворке.

Я думаю, одна из самых больших ошибок, которую совершает начинающий разработчик, когда учится программировать, заключается в том, что он тратит слишком много времени на изучение определенных языков, тратит слишком много времени, которого ему не нужно, или, снова, добавлю к этому, изучает неправильные технические языки. И как сказал Лейн, что люди склонны делать, это тратить слишком много времени на HTML, CSS.

Почему? Он сказал, что когда вы работаете фронтенд-разработчиком, многие начинающие разработчики думают, что им нужно быть лучшими дизайнерами. Многие начинающие разработчики думают, что им нужно иметь хорошие навыки дизайна. Нет, это не работа фронтенд-инженера, фронтенд-разработчика, веб-разработчика, как бы вы его ни называли. Наша задача - взять дизайн, который дизайнер UI/UX дает нам, и превратить этот дизайн в реальность, не с помощью ручки и бумаги, а с использованием фактического цвета. И мне нравится то, что он сказал, потому что Лейн сказал, что люди тратят слишком много времени на HTML CSS. Люди тратят слишком много времени на это, думая, что им нужно придумывать креативные дизайны.

Но дело в том, что это совсем не наша работа. Наша задача - превратить то, что люди создали с помощью Photoshop, Adobe XD, я не знаю, назовите это как угодно, они создают эти красивые дизайны, и наша задача - превратить это в реальное изображение в коде.

Так что сколько HTML и CSS разработчик вообще должен знать, чтобы быть нанятым

То, что вам нужно знать, в основном, это что? Что такое DOM?

Каковы основные структуры при создании веб-сайта с использованием HTML? Я имею в виду, посмотрите на Craigslist. Они имеют все основы на craigslist.com. Не самый лучший пример, но это буквально HTML. Может быть немного CSS, чтобы сделать веб-сайт более удобным для мобильных устройств, но в основном это и есть, просто и понятно.

Я думаю, что вам нужно просто знать, что такое теги, что такое метки, верно? Что такое заголовок? Что такое тело? Какие есть теги HTML? Что такое тег якоря? Вам нужно понять, как работает DOM. Что представляют собой все эти различные элементы в HTML?

Почему это так важно? Потому что вам нужно хотя бы иметь базовое представление. Я бы сказал, крепкое представление о HTML, что занимает, возможно, месяц, если не меньше, чтобы понять, не полностью понять, но хотя бы понять основы. И теперь, когда вы понимаете, как работает HTML, какова структура тела, заголовка? Вам нужно знать просто достаточно, чтобы использовать CSS. В чем смысл использования CSS? Вы используете CSS, чтобы сделать вещи красивыми как ад.

Это в основном и есть. Вы используете CSS, чтобы сделать вещи более удобными. Но люди иногда склонны тратить слишком много времени на CSS, когда так многие люди, как я, так многие люди, как Лейн, так многие другие фронтенд-разработчики, склонны использовать фронтенд-фреймворк и библиотеку, чтобы создавать эти красивые веб-сайты, нам уже не нужно писать все это с нуля.

Хорошо, некоторые компании, к сожалению, делают. Но мы используем библиотеки, которые позволяют нам создавать эти веб-сайты быстрее, чем когда-либо, и делать их максимально чистыми, используя CSS или JavaScript или фронтенд-библиотеку, такую как Tailwind, верно? Как Tailwind CSS. Теперь есть одна вещь, с которой я хочу поспорить с Лейном по одному вопросу, а именно. Он сказал, что HTML. NTSS не является сложной частью.

Я согласен, но я также не согласен. Я думаю, что люди склонны недооценивать, прежде всего Лейн, будучи в основном разработчиком бэкэнда, я могу честно понять, почему он сказал эти слова. Потому что как разработчик бэкэнда, и сейчас я работаю в бэкэнде, это очень сложно, верно? То, что я делаю в бэкэнде, намного сложнее, чем то, что я когда-либо делал как фронтенд-разработчик. Возможно, потому что как фронтенд-разработчик, я перешел на должность среднего уровня. Я никогда не стал старшим фронтенд-разработчиком, и сразу после этого перешел в бэкэнд.

Возможно, в этом дело. Но из того, что я видел и что я делаю сейчас, разработка бэкэнда намного сложнее с моей точки зрения. Но то, что я пытаюсь сказать, это то, что HTML CSS намного сложнее, чем люди понимают. Но то, что я хочу, чтобы люди поняли и осознали, это то, что вам не нужно знать достаточно или все HTML CSS, которые есть, прежде чем перейти к JavaScript, потому что из-за этого, Google. Вы буквально можете найти что угодно в Google о том, как создать что-то с помощью HTML CSS. Вы используете фронтенд-библиотеку, библиотеку CSS, такую как Tailwind CSS.

Что вы можете сделать? Гуглить. Как создать меню гамбургеров с использованием Tailwind CSS? Просто введите это в Google, скопируйте код, который вы найдете в интернете, и вставьте его в свой текстовый редактор. Бум, у вас есть меню гамбургеров.

Как создать нижний колонтитул с использованием Tailwind CSS, или что угодно, или Bootstrap, назовите это, и возможно, вы все еще используете Materialize, который существует уже некоторое время. Гуглить, гуглить, гуглить. Суть того, что мы пытаемся сказать, заключается в том, что количество HTML и CSS, которое вам нужно знать, достаточно, чтобы теперь вы знаете, как гуглить, и исследовать, чтобы интернет помог вам создать то, чего вы не знаете, как можно быстрее, верно?

Сколько нужно учить JavaScript

Вот и все. И затем он говорит следующее. Он говорит, что JavaScript - это сложная часть. Я с ним на миллион процентов согласен в этом. JavaScript будет очень сложным для всех, кто пытается научиться программированию.

Почему? Потому что JavaScript в большинстве случаев будет первым языком программирования, который вы когда-либо изучите. Когда речь идет о JavaScript, это уже не только JavaScript. Есть ванильный JavaScript. Некоторые компании все еще используют jQuery, верно?

Компании в наши дни либо используют SvelteJS, не так много используют AngularJS, но он все еще существует. И многие другие компании сейчас используют ReactJS. И даже когда вы изучаете ReactJS, этого уже недостаточно. Когда вы изучаете ReactJS, в чем суть? Теперь вы переходите к использованию NextJS. Next.js делает использование React.js еще лучше. И это еще не все, потому что зная JavaScript, теперь вам нужно использовать другой инструмент, такой как TypeScript, чтобы помочь вам писать ваш JavaScript, чтобы уменьшить количество ошибок. Итак, есть еще много разных вещей, которые вам нужно изучить. Итак, вопрос заключается в том, сколько JavaScript мне нужно знать, Крис? Об этом я расскажу в следующем видео.

Просто шучу, давайте обсудим это прямо сейчас. Очевидно, вам нужно изучить много вещей в JavaScript, и я могу рассказать только о части, но, на мой взгляд, самая важная часть - изучить терминологию. Как разработчик вам нужно не просто звучать как разработчик, но и знать язык разработчиков.

Почему? Потому что, когда вы общаетесь с другими разработчиками, особенно в JavaScript, многие разработчики будут использовать терминологию, которую вы, возможно, даже никогда не слышали. Например, что такое map? Как вы мапите массив? Что такое массив вообще?

Что такое объект? Что такое JSON? Это даже не JavaScript, но вы часто используете JSON, когда дело доходит до JavaScript, по крайней мере, я использовал. Понимание этих различных терминов, функций, циклов и т. д., просто понимание терминологии по различным вещам чрезвычайно важно, когда вы начинаете изучать JavaScript. Не пропускайте вещи при изучении JavaScript, понимайте терминологию. Теперь, в описании ниже, я размещу список различной терминологии, которую вы можете изучить, когда дело доходит до JavaScript. Надеюсь, это поможет, но давайте перейдем к следующей части.

Хорошо, я быстро пройдусь по этому списку на своем телефоне, хорошо? Так вот, во-первых, когда дело доходит до JavaScript, вам нужно изучить такие вещи, как булев тип, число, строки и т. д., различные операторы при работе с JavaScript, верно? Вам нужно даже изучить TypeScript, чтобы помочь вам избежать ошибок. TypeScript спасет вас, когда вы изучаете это. Далее, что вам нужно изучить, это вещи, как работать с массивами, как работать с различными объектами, что такое объектно-ориентированное программирование. Основы - это то, что вам нужно изучить, когда дело доходит до этого.

И даже сверх того, вам нужно изучить, как манипулировать DOM. Как писать функции клика, когда дело доходит до JavaScript? Что такое map? Что такое функция? Что такое оператор IF? Как писать оператор IF?

Как использовать операторы, такие как двойное равно или тройное равно? Когда использовать обратные кавычки? Когда вам даже не нужно использовать точки с запятой в JavaScript, но практически все основы, когда дело доходит до JavaScript, достаточно, чтобы позволить вам манипулировать DOM. Кроме того, вам нужно изучить события.

Слушатели, когда ждать клика, и вместо вас, вы назовете это, это будет особенно полезно, когда вы начнете работать с API. Но прежде всего, сколько JavaScript вам нужно знать? Вы не знаете достаточно JavaScript, если даже не создали два или три веб-сайта, используя JavaScript. Многие люди просто учатся, учатся, учатся. Это ошибка, которую люди часто делают, это то, что они продолжают учиться без остановки, когда дело доходит до JavaScript, но не строят ничего. Ваша цель, когда вы изучаете что-то в JavaScript, - построить как можно больше вещей, чтобы применить то, что вы узнали. Убедитесь, что вы не забудете это. Вы построите крепкое основание и найдете работу оттуда. В любом случае, надеюсь, это поможет.