{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Что такое фронтенд и зачем он нужен?","type":"header-three","key":"285am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтенд — это то, что видит пользователь, когда заходит на сайт. Это интерфейс, который должен быть красивым, удобным и интуитивно понятным. В этой статье мы расскажем, кто такие фронтенд-разработчики, что они делают, какие навыки нужны для работы и какие зарплаты они получают.","type":"unstyled","key":"ab4ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Кто такой фронтенд-разработчик?","type":"unstyled","key":"62qna"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтенд-разработчик (или фронтендер) — это специалист, который создаёт внешний вид и поведение веб-сайтов. Он отвечает за всё, что пользователь видит и с чем взаимодействует: текст, изображения, кнопки, формы, анимации и многое другое. Фронтендер также следит за тем, чтобы сайт корректно отображался на разных устройствах и браузерах.","type":"unstyled","key":"9614u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На другой стороне разработки находятся бэкенд-разработчики. Они работают с серверной частью веб-приложений, обеспечивая обмен данными между сервером и пользователем.","type":"unstyled","key":"78mkp"},{"data":{"image":{"id":"6652fd6f7e3fa971935d8284"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2fm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f4sbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Чем занимается фронтенд-разработчик?","type":"unstyled","key":"7r6qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа фронтендера можно сравнить с работой портного, который шьёт одежду по эскизам дизайнера. Фронтендер берёт макет дизайнера и превращает его в удобный, функциональный сайт. Вот основные задачи фронтенд-разработчика:","type":"unstyled","key":"eqrn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Создание пользовательского интерфейса. Разработка и расположение всех элементов, с которыми взаимодействует пользователь: кнопок, форм, меню, слайдеров и галерей.","type":"ordered-list-item","key":"2h0ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Вёрстка. Стилизация элементов на странице для правильного отображения информации.","type":"ordered-list-item","key":"fdl7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Интерактивность. Оживление страниц с помощью анимаций и скриптов, обработка действий пользователя.","type":"ordered-list-item","key":"btu28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Адаптивность. Обеспечение корректного отображения сайта на различных устройствах и экранах.","type":"ordered-list-item","key":"22e4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Тестирование и оптимизация. Проверка работоспособности интерфейса, исправление ошибок и оптимизация для быстрой загрузки страниц.","type":"ordered-list-item","key":"ee49s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Какие навыки нужны фронтенд-разработчику?","type":"unstyled","key":"fhhce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтенд держится на трёх основных технологиях:","type":"unstyled","key":"6kk1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML — язык разметки, который делает текст структурированным с заголовками, подзаголовками и другими элементами.","type":"ordered-list-item","key":"ch0g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS — каскадные таблицы стилей, которые отвечают за внешний вид элементов на странице.","type":"ordered-list-item","key":"arsqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"JavaScript — язык программирования, который добавляет интерактивность и оживляет страницы.","type":"ordered-list-item","key":"dhvo7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Пример HTML-кода","type":"unstyled","key":"6s8h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот простой пример HTML-кода, который создаёт заголовок, параграф и список:","type":"unstyled","key":"9fo4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"ftvau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"h4d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"24sj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Тестовая страница ","type":"blockquote","key":"fk42n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7o2rn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"8j10e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Привет, это тестовая страница!

","type":"blockquote","key":"19uer"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это простой HTML-код для проверки.

","type":"blockquote","key":"3uo9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Элемент списка 1
Элемент списка 2
Элемент списка 3

","type":"blockquote","key":"5ftp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Нажмите на ссылку, чтобы вернуться обратно:

","type":"blockquote","key":"but3u"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":24,"offset":15}],"inlineStyleRanges":[],"text":" Статья про фронтенд ","type":"blockquote","key":"6mb0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"2hme5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"c8nhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Пример CSS-кода","type":"unstyled","key":"3qpio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь добавим стили с помощью CSS:","type":"unstyled","key":"5li3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 20px;\n}\n\nh1 {\n color: #007bff;\n}\n\np {\n font-size: 18px;\n color: #333;\n}\n\nul {\n list-style-type: square;\n}\n\na {\n color: #007bff;\n text-decoration: none;\n font-weight: bold;\n}\n\na:hover {\n text-decoration: underline;\n}","type":"blockquote","key":"7o35u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Пример JavaScript-кода","type":"unstyled","key":"19p8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим интерактивности с помощью JavaScript:","type":"unstyled","key":"23i8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const body = document.body;\nconst colors = ['#007bff', '#28a745', '#ffc107', '#dc3545'];\nlet currentColorIndex = 0;\n\nbody.addEventListener('click', function() {\n currentColorIndex = (currentColorIndex + 1) % colors.length;\n const nextColor = colors[currentColorIndex];\n\n body.style.transition = 'background-color 0.5s ease';\n body.style.backgroundColor = nextColor;\n});","type":"blockquote","key":"d2n8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"Итог","type":"unstyled","key":"3fr4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь вы знаете, что делает фронтенд-разработчик и какие навыки нужны для этой профессии. Освоив HTML, CSS и JavaScript, вы сможете создавать красивые и функциональные веб-сайты. А если хотите развиваться дальше, можно изучать фреймворки и библиотеки, такие как React, Vue или Angular, которые позволяют создавать сложные веб-приложения.","type":"unstyled","key":"6g5g1"},{"data":{"image":{"id":"6652fd794241dd157feb462e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3nj98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"54b55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что учить дальше, чтобы стать профессиональным фронтенд-разработчиком","type":"header-three","key":"f6knq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хотите стать профессиональным фронтенд-разработчиком и работать в коммерческих проектах, придётся постоянно обновлять знания и осваивать новые технологии. Вот с чего можно начать:","type":"unstyled","key":"7b368"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Сборка проектов","type":"unstyled","key":"2pkab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современный сайт — это не единая платформа, а сложная система из множества модулей. Чтобы всё работало как нужно, эти файлы нужно правильно собрать. За это отвечают специальные программы — сборщики, или билд- системы. Популярные сборщики во фронтенде — Gulp и Webpack. О Webpack у нас есть подробный материал, рекомендуем почитать.","type":"unstyled","key":"32bk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Вёрстка по макету","type":"unstyled","key":"a8qnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый сайт начинается с дизайнерского макета, который создаётся в таких инструментах, как Figma. Дизайнеры делают макет, а ваша задача как разработчика — перенести его в веб и оживить.","type":"unstyled","key":"30ovt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"JavaScript-фреймворки","type":"unstyled","key":"1tum9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фреймворки — это готовые решения, которые помогают быстрее писать код для типовых задач. Представьте, что вам нужно приготовить окрошку. Можно отдельно купить все ингредиенты и нарезать их, а можно взять готовый набор с нарезанными продуктами. Фреймворк — это тот самый набор. Вот пять самых популярных JavaScript-фреймворков: React, Node.js, jQuery, Angular и Express.","type":"unstyled","key":"cbpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Препроцессоры CSS","type":"unstyled","key":"aauqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если работу с JavaScript облегчают фреймворки, то для CSS существуют препроцессоры — программы, которые оптимизируют CSS-код под разные браузеры. Самые популярные — SASS и LESS. Они мало чем отличаются, поэтому можно учить любой из них.","type":"unstyled","key":"eegaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Адаптивность и кросс-браузерность","type":"unstyled","key":"4qq32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сайт должен хорошо работать на всех устройствах и во всех браузерах. Для этого нужно освоить три инструмента CSS: методы компоновки элементов Flex и Grid, а также медиазапросы, которые задают условия отображения в зависимости от устройства.","type":"unstyled","key":"1k1bp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Системы контроля версий","type":"unstyled","key":"bc0ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработка может внезапно пойти не так, и тогда нужно вернуть проект к предыдущему состоянию. Для этого и нужны системы контроля версий, такие как Git. Они позволяют документировать и сохранять каждый этап работы.","type":"unstyled","key":"e2aig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где работают фронтенд-разработчики","type":"header-three","key":"g394"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтенд-разработчики нужны множеству компаний, которые можно разделить на две категории: компании, которые пишут софт на заказ, и компании, которые создают софт для собственных нужд.","type":"unstyled","key":"1nv49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Заказная разработка","type":"unstyled","key":"e90e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы:","type":"unstyled","key":"f9p80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Участие в разнообразных проектах","type":"unordered-list-item","key":"57hq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможность набраться опыта и освоить множество инструментов","type":"unordered-list-item","key":"c2ng0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Развитие творческого подхода","type":"unordered-list-item","key":"bo6uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минусы:","type":"unstyled","key":"2s4ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строгие дедлайны и высокий уровень стресса","type":"unordered-list-item","key":"a6b3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Необходимость постоянно учиться новому","type":"unordered-list-item","key":"5f87r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Много общения с заказчиками, что может быть сложно для интровертов","type":"unordered-list-item","key":"3i2d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Собственный софт","type":"unstyled","key":"bjtu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы:","type":"unstyled","key":"53tdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спокойный график работы","type":"unordered-list-item","key":"alk28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Глубокое освоение определённой технологии","type":"unordered-list-item","key":"6j7tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чёткие требования заказчиков","type":"unordered-list-item","key":"669oh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минусы:","type":"unstyled","key":"dlonl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограниченный опыт и однотипные задачи","type":"unordered-list-item","key":"9fv5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сложно попробовать что-то новое, если направление неинтересно","type":"unordered-list-item","key":"7c1rg"},{"data":{"image":{"id":"6652fd8535dbe061b6124dae"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fd20h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"13ol6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как стать фронтенд-разработчиком","type":"header-three","key":"6989l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть три основных пути:","type":"unstyled","key":"fgbdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"СамообучениеГуглите, задавайте вопросы на форумах, ищите ответы в интернете.\nНе бойтесь трудностей и не сдавайтесь, если что-то не получается сразу.\nУчите английский язык, так как англоязычных материалов по разработке гораздо больше.\n","type":"ordered-list-item","key":"3kepf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Профильное образованиеПоступить в вуз на программы «Разработка ПО», «Прикладная информатика» или «Прикладное программирование».\nТам вы изучите информатику, математику, языки программирования и другие дисциплины.\n","type":"ordered-list-item","key":"4rf75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"КурсыПройти специализированные курсы по фронтенд-разработке.\n","type":"ordered-list-item","key":"d6ri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новичку лучше начать с работы в компаниях, занимающихся заказной разработкой. Это позволит перепробовать множество технологий и найти то, что вам интереснее всего. После этого можно выбрать специализацию и искать работу в области, которая вам нравится, и изучать нужные инструменты.","type":"unstyled","key":"43siu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"lr2j9y3Smuwuertjzb2e"}],"entityMap":{"0":{"data":{"url":"https://dzen.ru/zdeskurs"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}