Путь Frontend разработчика. Как им стать? (Часть 1. Основы)

771414da96cac38f286fb016341f8288

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

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

Введение. Теоретическая база

В первую очередь необходимо изучить теорию. Рассмотрим такие вопросы, как:

  1. Как работает интернет?

  2. Что такое HTTP?

  3. Что такое DNS? И как он работает.

  4. Как работают браузеры?

Изучение: MDN, Хабр, YouTube.

  • Что такое HTTP?

Изучение: MDN, Хабр, YouTube.

  • Что такое DNS?

Изучение: MDN, Хабр, YouTube.

Изучение: MDN, Хабр, Youtube.

Перейдем к основам Frontend разработки

HTML

HTML (HyperText Markup Language) — это стандартизированный язык разметки, который используется для создания веб-страниц. Он представляет собой набор тегов и атрибутов, которые определяют структуру и содержание веб-документа. HTML используется для описания структуры текста, изображений, ссылок и других элементов, которые отображаются в браузере. Браузеры интерпретируют HTML-код и отображают содержимое страницы с учетом заданной разметки. HTML также часто используется в сочетании с CSS (Cascading Style Sheets) и JavaScript для создания интерактивных и стильных веб-страниц.

Как изучить HTML?

W3C School на русском языке.

Уроки на YouTube.

MDN.

Книги по HTML:

  1. «Изучаем HTML, XHTML и CSS». Эрик и Элизабет Фримен

  2. «HTML5 + CSS3. Основы современного WEB-дизайна». Кириченко А.В. и Хрусталев А.А.

  3. «Справочник HTML. Кратко, быстро, под рукой». Дубовик Е.В. и Кириченко А.В.

CSS

CSS (Cascading Style Sheets) — это язык стилей, который используется для определения внешнего вида и форматирования веб-страниц. С помощью CSS можно задавать различные стили для элементов HTML, такие как цвета, шрифты, размеры, отступы, рамки и многое другое. CSS позволяет разделять содержимое веб-страницы (HTML) и ее представление (стили), что облегчает поддержку и изменение внешнего вида веб-сайта без изменения его структуры. CSS используется в паре с HTML для создания эстетичного и профессионального внешнего вида веб-страниц.

Как изучить CSS?

W3C School на русском языке.

Уроки по CSS на YouTube.

MDN.

Книги по CSS:

  1. «Новая большая книга CSS». Дэвид Макфарланд

  2. «Сила CSS3. Освой новейший стандарт веб-разработок». Зои Джилленуотер

  3. «CSS. Подробное руководство». Эрик Мейер

JavaScript

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

Как изучить JavaScript?

W3C School на русском языке.

Уроки на YouTube.

JavaScript.ru — Лучший учебник по JS

CodeWars

LeetCode

Книги по JavaScript:

  1. JavaScript для детей. Самоучитель по программированию. Ник Морган

  2. Изучаем программирование на JavaScript. Эрик Фримен, Элизабет Робсон

  3. JavaScript. Полное руководство. Седьмое издание. Дэвид Флэнаган

  4. Выразительный JavaScript. Современное веб-программирование. Третье издание. Марейн Хавербеке

  5. Как устроен JavaScript. Дуглас Крокфорд

Контроль версий

Без контроля версий сегодня никуда. Вдруг у нас возникнет баг, который нужно будет откатить? А вдруг мы полностью сломаем нашу верстку? Тогда нам на помощь придет система контроля версий, в этой статье мы будем рассматривать Git.

Познакомиться с Git на YouTube.

Изучить Git на Хабр.

Официальная документация.

На этом 1-ая часть подходит к концу. Во 2-ой части мы рассмотрим сервисы для хостинга, пакет менеджеры, js-фреймворки (React, Vue, Angular), css-фреймворки (TailWind, Radix), BEM архитектуру и css препроцессоры (Sass, PostCSS)

Желаем успехов в изучении!

Если вас заинтересовала статья, приглашаем в наш телеграм-канал WebWeavers, в котором мы изучаем frontend и дизайн с нуля. В нём мы выкладываем интересные и поучительные посты.

© Habrahabr.ru