Три шага, которые помогут преодолеть тревогу

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

5 сервисов для изучения CSS Grid и Flexbox разметки

Подборка сервисов, где можно изучить основы CSS Grid и Flexbox разметки.

Игры

Игра, в которой вы изучите свойство justify-content с помощью лягушонка Фогги и его друзей

Игра, которая поможет понять как работает свойство flex: align-items, justify-content, flex-direction, align-self и order

Игра, которая поможет изучить CSS Grid Layout. Есть следующие свойства grid: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows и grid-template

Онлайн-генераторы

Когда флексы и гриды будут изучены — самое время перейти к практике. Эти два сервиса могут помочь на первых порах генерировать сетки, находить и применять нестандартные решения в работе.

Онлайн-генератор, позволяющий легко построить свою сетку без коддинга

Подборка интересных вариантов использования CSS-сетки в кодпене. Есть даже весьма сложные и необычные примеры

Тренажёры Академии по HTML, CSS и JavaScript

Продолжить практиковаться можно с Котом Кексом. Разметите страницу, стилизуете её и напишите свой первый скрипт. Бесплатно

Как стать мидлом

Собрали для вас подробную инструкцию о том, как стать мидлом — с чего начать, что учить, где узнавать новости и самые свежие тренды фронтенда. Внутри подборки книг, главная документация, тренажёры и другие полезные материалы.

Прочитайте, скиньте знакомым и добавьте в закладки, чтобы не потерять

А вдобавок подпишитесь на наш новый телеграм-канал для мидлов — будем собирать там всё самое важное для обучения и роста разработчиков и делиться новостями индустрии.

Подписаться

Расширения для браузера, которые упростят жизнь фронтендера

HTML Validator — расширение через которое можно легко провести валидацию сайта.

Web Developer — набор полезных инструментов для анализа макета, тестирования кода и изменения внешнего вида страницы.

CSSViewer — расширение, которое показывает все CSS-свойства элементов.

PerfectPixel — инструмент, который накладывает изображение макета поверх вёрстки в браузере. Это позволяет подогнать страницу с точностью до нескольких пикселей.

Stylus — расширение с помощью которого вы сможете легко менять и настраивать CSS-стили внутри браузера.

ColorPick Eyedropper —расширение, которое поможет подсказать любой цвет с изображения.

Designer Tools — расширение, которое с точностью до миллиметра определит расстояние на лендинге.

Проверьте свои знания о селекторах в CSS

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

Пройти тест

Посмотреть конспект

Техники валидации форм

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

Читать

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени.

Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Подборка инструментов, которая ускорит работу разработчика

8 расширений VS Code для продуктивной работы — подборка плагинов на все случаи жизни.

JavaScript Event KeyCodes — инструмент, который поможет получить KeyCode любой нажатой клавиши. Пригодится в приложениях, которые обрабатывают ввод с клавиатуры.

Regex 101 — библиотека регулярных выражений, проверка регулярных выражений, всё что угодно для регулярных выражений.

JSON Formatter & Validator — отдаём на входе неформатированный JSON, получаем на выходе отформатированный. Бонусом проверка на валидность по трём разным RFC и ECMA-404.

JSON Placeholder — бесплатный REST API, который можно использовать для тестирования, когда вам нужны какие-нибудь фейковые данные в проекте.

JSON Parser Online — ещё один инструмент для приведения JSON в читаемый вид.

Bundlephobia — наглядно показывает, какие зависимости притянет npm-пакет. Можно загрузить package.json и проверить его.

Это полезно, ведь мы тонем в зависимостях и нам это нравится

Как искать и выбирать npm-пакеты?

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

В статье узнаете, как найти и выбрать npm-пакет под конкретную задачу. Познакомитесь с мастхэвом пакетов, которые чаще всего выбирают фронтендеры.

Читать, чтобы всё узнать

Сегодня стартует новый поток курса «JavaScript. Профессиональная разработка веб-интерфейсов»

На обучении студенты с помощью живых лайвов, тренажёров, учебников и пошаговых демонстраций разбираются, что представляет собой язык JavaScript, причём здесь спецификация ECMAScript и браузер. Сложные задачи разбирают вместе с наставником.

Изучают основные возможности JavaScript: объекты и массивы, какие есть встроенные объекты и функции, учатся организовывать код по принципу DRY, что значит, без повторений. Знакомятся с объектной моделью документа — DOM. Учатся работать с API, протоколом HTTP и форматом данных JSON. Разбираются, как фиксить ошибки и делать простой и понятный интерфейс для пользователя.

На протяжении всего курса теория закрепляется на практике с помощью личных проектов. Можно выбрать: создать сервис просмотра фотографий «Кекстаграм» или сервис для размещения недвижимости «Кексобукинг».

Если хотите узнать про курс более подробно или почитать отзывы студентов, переходите в отчёт прошлого потока курса. Там рассказали, как обновили программу и как на перемены отреагировали студенты.

Новый выпуск подкаста Frontend Weekend

В гостях у Андрея Смирнова побывала Александра Прокшина — руководитель отдела разработки в ARTW.

Саша рассказала, как из бэкендера выросла в классного руководителя и как в этом ей помогла игра «Мафия». Сталкивалась ли она на своём пути с сексизмом. Какие навыки нужно развивать и причём здесь актёрское и ораторское мастерство.

Слушать на всех площадках

Завтра в 13:00 пройдёт лайв «Введение во фронтенд-разработку: зачем нужен React»

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

Записаться, чтобы узнать, что такое React и зачем он нужен, можно здесь

Новый выпуск фронтенд-новостей уже в блоге

Три главных новости за неделю с 19–25 сентября:

Учебник по выражениям от контейнера с обновлённым синтаксисом

Узнайте, как работают выражения от контейнера, какие решают проблемы и как дополняют функции CSS.

Методология на слоях

Рассмотрите подход к вёрстке с помощью каскадных слоёв @layer, которые помогут начать писать код быстрее и проще.

«React, я люблю тебя, но ты меня подводишь»

Глобальные ошибки библиотеки React на примере отношений.

Больше новостей

Зачем разработчику знать «Паттерны проектирования»

Коротко. Они помогают сэкономить время на организацию кода.

Подробнее. Паттерны MVC, MVP и MVVM описывают, как лучше разделить код по папкам и что написать в файлах. «Компоновщик» позволяет сгруппировать множество объектов, чтобы их было удобнее использовать вместе. «Адаптер» помогает делать интерфейс и объекты более адаптивными. Про паттерны можно рассказывать долго — их много, и каждый упрощает разработку проекта.

Где учить. На курсе «Паттерны проектирования». Вы познакомитесь с разными видами паттернов и научитесь их применять в коде. Сейчас обучение можно начать со скидкой 30% до 3 октября включительно.

Ссылка для записи на курс