Если бы я учил Frontend сегодня. Советы начинающим

Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

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

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?

Изучение HTML, CSS, Javascript

HTML и CSS


Эти две технологии необходимы для верстки сайта. Верстка – это расположение текста, изображений, кнопок и других элементов интерфейса на странице.

С помощью HTML мы можем добавлять и описывать эти элементы. Изначально они будут «сырыми», со стандартным внешним видом. Для изменения стиля используется CSS. Он позволяет задавать цвет, размер, расположение и десятки других параметров внешнего вида элемента.

Сайт без исопльзования CSS и с ним

Как освоить


В первую очередь стоит ознакомиться с обзорной статьей или видеороликом об этих технологиях. Так ты поймешь их суть.

Затем верстку удобнее всего осваивать и совершенствовать на практике. Пробуй верстать макеты страниц или отдельных элементов. Также, можно попробовать смотреть на Youtube процесс верстки страницы и повторять за автором.

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

Где брать идеи и макеты для верстки?


Я использовал Dribbble и CollectUI, но также можно поискать на Behance и One Page Love.

Также можно брать настоящие макеты из UI Store Design. Я советую верстать макеты из Figma, т.к. её используют многие дизайнеры, и в будущем ты вероятнее всего будешь работать именно с ней. А еще она бесплатна и работает в браузере.

image

JavaScript


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

Если с HTML и CSS мы верстали страницу, то JavaScript отвечает за динамическую часть страницы: анимации, отображение данных, обработка действий и многое другое.

Зачем мне он нужен?


Простой пример. Предположим, есть страница, на которой по нажатию кнопки нужно отобразить модальное окно. HTML и CSS позволят нам сделать верстку самой страницы и модального окна. Однако зафиксировать и обработать нажатие на кнопку эти технологии не могут.
Здесь нам и нужен JavaScript. С помощью него мы описываем поведение на странице. В коде мы обозначаем: если пользователь нажал на кнопку, то нужно показать модальное окно.

Вот пример такой реализации и использованием JQuery:



С помощью JavaScript можно производить практически любые операции со страницей. Однако его возможности не ограничиваются окном браузера. С помощью платформы Node.js этот язык можно использовать для серверной разработки, сборки проектов, и многого другого. В будущем тебе это будет нужно, чтобы работать с большими проектами, собирая из через Webpack. Однако я советую сперва научиться использовать язык внутри браузера.

Как освоить


Лучше всего будет начать изучение на learn.javascript.ru. Это прекрасный ресурс, который является базой знаний как для новичков, так и для продвинутых разработчиков.

Здесь важно понять основы самого JavaScript, а также особенности его работы в браузере. Если какие-то темы покажутся тебе слишком сложными (к примеру, прототипы), то можешь пропустить их и вернуться позже.

Не стоит слишком увлекаться одной лишь теорией JavaScript. Я рекомендую параллельно с изучением пробовать свои силы и писать простые скрипты. Можно также пробовать разбирать чужие участки кода на Codepen.

image

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

По большому счету, ты часто будешь прибегать к использованию сторонних библиотек в своих проектах. Чтобы лучше понять, как это делается, рекомендую попробовать форматировать даты с помощью Luxon или сделать карусель через Owl Carousel.

Что дальше?


С базовыми навыками в HTML, CSS и JavaScript можно сделать красивый лендинг, сверстать страницы интернет-магазина или блога. Этим я и советую заниматься, чтобы закрепить знания в веб-разработке.

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

image

Рекомендую ознакомиться с Frontend Roadmap. Здесь описаны технологии разработки интерфейсов, которые будут нужны тебе в дальнейшем.

В дальнейшем тебе наверняка будут интересны реактивные фреймворки, вроде React или Vue. Для сборки приложений на них ты освоишь Webpack, а для ускорения процесса верстки изучишь препроцессоры PUG и SASS. Или может быть захочешь углубиться в графику и научишься работать с D3 или WebGL.

Как ты уже понял, frontend в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.



P.S. Каждую технологию в этой статье я сопровождал ссылкой на документацию или примеры использования. Ты можешь ознакомиться с ними, чтобы получить более широкое представление об веб-разработке.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 28

    +3
    А я бы в 2020 году вообще не пытался изучать html и css как «вещь в себе». Спецификации безусловно нужны, но они почерпнутся по ходу дела, ничего особенного в них нет.

    А вот что безусловно нужно изучать — так это принципы работы браузера. Хороший разработчик не просто что-то фигачит, пока не заработает, а знает, почему те или иные вещи работают или нет, еще до того, как начнет писать код. Через JS, скорее всего, потому что именно JS позволяет «пощупать» работу браузера как следует.

    А еще нужно сразу же внимательно смотреть на способы code reuse: компонентный подход к UI, модульный код, и вот это всё. Фигачить лендинги на условном реакте — это отличный способ провести десяток+ лет на грани джуна и миддла. Знать, как писать UI, который можно перекомпоновать (и стилизовать иначе) с минимальными трудозатратами — путь к профессиональному росту. Просто потому что, совершенно банально, нормальная архитектура и модульность в UI позволяет написать и потом довольно быстро подправлять, а не написать и долго переписывать с каждым изменением требований, коих будет много.
      0
      А вот что безусловно нужно изучать — так это принципы работы браузера.
      С этим обычно огромные проблемы у выпускников курсов всяких, типа «научим за 3 месяца». Какие-то основы нахватаются, верстать что-то вроде и верстают, но понимание как оно всё работает — крайне примитивное
        0
        Вот только это приходит только с практикой. Книг про это нет, сведений мало устаревают быстро. Эти ребята с курсов всегда будут, просто одни вырастут, придут другие.
        0
        Привет. Спасибо за твой комментарий.
        Я думаю, ты во многом прав, и новичкам действительно стоит обратить внимание на базовые принципы работы браузера. На том же learn.javascript.ru они прекрасно раскрываются.

        Однако я вижу важность изучения HTML и CSS в том, что после написания пары тегов и нескольких CSS-свойств ты сразу получаешь некий результат. Ты уже видишь интерфейс, и уже немного понимаешь, как он создается. Возникает моментальный отклик между тем, что ты что-то делаешь и тем, что ты видишь результат. Этот отклик провоцирует продолжать изучать и развиваться в этом еще больше.
        И после этого, зарядившись желанием вдохнуть в свой интерфейс жизнь, ты уже с большим интересом читаешь теорию и изучаешь дополнительные материалы.
        Рассуждая из личного опыта, новички редко видят ценность в компонентном подходе и других архитектурных стилях, когда они еще почти ничего не умеют. Однако когда они уже попробовали написать простой сайт и смотрят на его код – они сами начинают интересоваться новыми решениями. Поэтому я считаю важным писать об этом.
          0
          Однако я вижу важность изучения HTML и CSS в том, что после написания пары тегов и нескольких CSS-свойств ты сразу получаешь некий результат.

          Я бы называл это «поиграться», а не «изучать», но согласен. Просто искать информацию о том, что вообще можно сделать, как типа с сайтов css-tricks и подобных — тоже полезно. Просто чтоб знать о том, что сделать можно, а что нет. Но я бы не сказал, что это прям «изучение». Скорее, сопутствующая деятельность. Ей не обязательно быть структурированной и всеохватной.
        +1

        Во-первых, не Javascript, а JavaScript. Это все-таки не Elasticsearch.


        А во-вторых, «какой заяц, какой орел, какая блоха...». JQuery в «если бы я учил фронтенд сегодня», серьезно? React нужно и еще лучше Next.js (для начинающих).

          +1

          Для начинающих нужно сначала изучить чистый js. Иначе они потом воспринимают другой фреймворк, как что-то совершенно новое и не похожее на предыдущее.

            0
            Так jQuery точно так же не подходит для этой миссии. Никогда не встречали людей, которые с jQuery могут сносную страницу сделать (в плане функционала, не в плане качества кода), а без него onclick навесить не могут?)
            0

            Почему именно их, а не (к примеру) Vue/Angular?

              0
              популярность. React и так геморойный для новичка, а тут еще добавочные костыли typescript…
                0
                костыли?
                0

                React.js проще чем Angular в разы. jsx проще чем темплейты от ангуляра, меньше всяких элементов синтаксиса. Нету всяких injections, с ними столько слез можно пролить. Толпы декораторов в Ангуляре, на каждый чих — сложна для новичка. Функциональные компоненты писать проще. Все как то интуитивное. Ну и можно выбирать между JavaScript и Typescript. TS хорошо конечно, но JS для начала проще и понятнее. Декларации типов посмотришь в библиотеках ангуляра и поседеешь, для неопытного глаза может показаться сущим кошмаром. Напоминает C++ STL библиотеку в начале нулевых -абракадабра.

                  0
                  Ну смотря для каких задач. Чем сложнее задачи, тем react перестает быть таким простым и интуитивным, для их решения вводятся все новые и новые архитектурные решения, часто сомнительные и противоречивые. JSX это уже давно не просто js в html, а DSL со своим синтаксисом, которому тоже надо учиться.
                    0
                    Тогда уж Html в JS. И нет в синтаксисе ничего особенного. Знак меньше — пошел html, фигурная скобка — пошел JS, закрыл скобку — опять html. Вложенность не ограничена. В остальном практически чистые языки. Очень по мелочам всякие className отличаются от оригинала.
                0
                Новичку в программировании лучше вообще начинать с языков строгой типизации. Изучать основы ооп, функциональное программирование. Только после начинать осваивать js. Иначе потом будут принимать на работу и спрашивать что будет в результате [] == ![]. За такой код по рукам бить надо). Уже после фреймворки и прочий зоопарк)
                  0

                  Большая часть проектов, с которыми я работаю, написана с помощью JQuery.
                  И начинающему вряд ли доверять сразу писать что-то в новых проектах, скорее — в старом и малоинтересном для опытных разработчиков добавить слайдер или исправить форму.

                  +1

                  Не соглашусь насчет кнопки.
                  Все можно построить и на чистом js.
                  Более того я удивляюсь какие костыли гордятся, иногда ведь достаточно повесить стили на скрытый checkbox.

                    +2
                    Вы серьезно считаете, что jquery в 2020 году нужен для изучения? и вы рекомендуете его новичкам?
                      0
                      Я не автор, но, к сожалению, этого легаси в интернете ещё гора, кучка, и ещё чуть-чуть. Вероятность поймать проект с jQuery на каком-нибудь апворке — огромная. Так что, увы, приходится знать, новичкам в том числе.
                        0
                        Добрый день. Спасибо за ваш комментарий.
                        Должно быть, я не до конца ясно изъяснился по поводу JQuery.
                        Я не считаю его необходимым, однако он часто встречается в проектах, и на то есть свои причины. Он значительно проще в освоении, нежели крупные реактивные фреймворки, и его часто достаточно для реализации базового функционала лендинг-страницы или корпоративного сайта.
                        Здесь можно возразить, что можно писать на ванильном js. Это действительно так, но когда код разрастается и к нему приходится возвращаться спустя год – разбираться в самописных хелперах становится тяжело.
                        Также, изучение JQuery на первых этапах обучения помогло мне понять суть js-библиотек и то, как ими пользоваться. Полагаю, это сделало изучение более сложных технологий для меня менее болезненным.
                          0
                          Если изучить ванильный API, то доучить JQuery не составит труда, зато вам не потребуется потом его включать в любые проекты (в которых он нужен как собаке пятая нога) только для того, чтобы найти элемент. Кроме того я еще в начале вхождения в веб попробовал Полимер и выкинул JQuery на следующий день. А сегодня, я бы посоветовал начать с ванильного API (который дозрел до уровня JQuery) и сразу после него Реакт.
                        0

                        Спасибо за прикрепленный роудмап, в данный момент изучаю реакт (без знания JS приходится подглядывать в learn.javascript.ru), достаточно интересно наблюдать, как после нескольких уроков учишься взаимодействию html, css и реакта. Во мноих случаях возникают сложности с чистым JS, синтаксис у фронта достаточно сильно отличается от бэка в некоторых моментах.
                        Для таких же, как я, изучающих реакт, советую посмотреть CSS Modules, дико удобная вещь, которая позволяет с легкостью добавить стили к отдельным элементам и оставить код читаемым и красивым.

                          0
                          Выражаю благодарность за предоставленный материал, в особенности за блок-схему.
                            +1
                            «статья-очевидность» ей богу… я начинающий фронтендер и начав читать надеялся что вот сейчас мне укажут на ошибки в обучении, укажут верный путь, расскажут что подучить, что важнее, но в итоге хапнул порции блюда наподобии «изучите досконально html css, начните js, потом само собой придут всякие препроцессоры и сборщики.»
                            Наес в общем, не в обиду автору кнш, но что-то нето: с
                              0
                              Привет. В статье я старался дать базовую информацию о том, что предстоит изучить человеку, который только-только захотел изучать веб-разработку. Я опирался на вопросы своих знакомых, которые обращались ко мне за советом.
                              Вполне вероятно, что ты просто перерос эту информацию. И те статьи, которые были бы полезны тебе, оказались бы слишком сложными для других.
                              В будущем я постараюсь это учесть. Спасибо за твой комментарий.
                              0

                              А как вошёл в профессию? Начал со студии, или фриланс, что умел, когда устраивался?

                                0
                                Привет. Начал с фриланса 4 года назад. Сначала верстал лендинги, потом сайты посложнее. Затем углубился во Vue/Nuxt и два года уже с ними принимал участие в поддержке и разработке веб-приложений. И вот недавно начал работать в студии в качестве middle frontend разработчика. Опыт на фрилансе сошел за опыт работы (в вакансии было указано 3 года).
                                0

                                Хорошая стать для полных новичков))

                                Only users with full accounts can post comments. Log in, please.