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

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?

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

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

3. MDN.

Книги по CSS:

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

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

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

JavaScript

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

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

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

2. Уроки на YouTube

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

4. CodeWars

5. LeetCode

Книги по JavaScript:

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

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

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

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

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

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

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

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

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

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

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

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

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