skillswiki.
Профессии/Frontend-разработчик/Junior
Подборка материалов · Junior

109 статей для Junior Frontend-разработчика: большая подборка

Статьи для освоения HTML, CSS и JavaScript, первых компонентов, работы с Git и отладки. Материалы сгруппированы по темам: от устройства веба до доступности интерфейсов.

109 статей · 10 тем · материалы на русском языке

Как устроена веб-разработка

  1. Установка базового программного обеспечения

    Чтобы подготовить рабочую среду разработчика.

  2. Работа с файлами

    Чтобы правильно организовать файлы проекта.

  3. Веб-страницы, веб-сайты, веб серверы и поисковики

    Чтобы понять связь страниц, сайтов и серверов.

  4. Публикация вашего веб-сайта

    Чтобы разместить готовый сайт в интернете.

  5. Как работает Веб

    Чтобы понять обмен данными браузера и сервера.

HTML и семантика

  1. Основы HTML

    Чтобы правильно разметить структуру страницы.

  2. Начало работы с HTML

    Чтобы правильно разметить структуру страницы.

  3. Что внутри "head"? Метаданные в HTML

    Чтобы настроить заголовок и данные страницы.

  4. Основы редактирования текста в HTML

    Чтобы семантически оформить текст на странице.

  5. Продвинутое форматирование текста

    Чтобы сделать содержание понятным браузеру.

  6. Структура документа и веб-сайта

    Чтобы сделать содержание понятным браузеру.

  7. Создание гиперссылок

    Чтобы связать страницы и внешние источники.

  8. Изображения в HTML

    Чтобы добавить графику без потери доступности.

  9. Видео и аудио контент

    Чтобы встроить медиа в веб-страницу.

  10. HTML таблицы основы

    Чтобы доступно разметить табличные данные.

  11. HTML таблицы продвинутые возможности и доступность

    Чтобы доступно разметить табличные данные.

  12. Отладка HTML

    Чтобы найти ошибки в HTML-разметке.

  13. Добавление векторной графики в веб-документ

    Чтобы добавить графику без потери доступности.

  14. От <object> к <iframe> — другие технологии внедрения

    Чтобы безопасно встроить внешний контент.

  15. HTML-теги и атрибуты, о которых вы, возможно, не знали

    Чтобы правильно разметить структуру страницы.

  16. Очередной ответ на вопрос: «Зачем нужна семантика?»

    Чтобы правильно разметить структуру страницы.

  17. <dl> или <table>? Исследуем подходы к представлению пар ключ-значение в HTML

    Чтобы правильно разметить структуру страницы.

  18. Как улучшить доступность сайтов с помощью семантического HTML: стандарты семантики

    Чтобы правильно разметить структуру страницы.

  19. Забудьте про div, семантика спасёт интернет

    Чтобы правильно разметить структуру страницы.

  20. <details name>: эксклюзивные аккордеоны на чистом HTML (+ стили через :has())

    Чтобы правильно разметить структуру страницы.

HTML-формы

  1. Как структурировать HTML-формы

    Чтобы собрать понятную форму ввода.

  2. Валидация форм на стороне клиента

    Чтобы проверять данные до отправки формы.

  3. Отправка данных формы

    Чтобы передать введённые данные на сервер.

CSS, сетки и адаптивность

  1. Основы CSS

    Чтобы управлять внешним видом страницы.

  2. Как работает CSS

    Чтобы управлять внешним видом страницы.

  3. Начало работы с CSS

    Чтобы управлять внешним видом страницы.

  4. Селекторы CSS

    Чтобы точно выбирать элементы для стилизации.

  5. Селекторы атрибута

    Чтобы точно выбирать элементы для стилизации.

  6. Псевдоклассы, псевдоэлементы

    Чтобы точно выбирать элементы для стилизации.

  7. Комбинаторы

    Чтобы точно выбирать элементы для стилизации.

  8. Блочная модель

    Чтобы контролировать размеры и отступы элементов.

  9. Каскад и наследование

    Чтобы предсказуемо переопределять стили.

  10. Изменение размеров в CSS

    Чтобы контролировать размеры и отступы элементов.

  11. Фон и границы

    Чтобы аккуратно оформить элементы интерфейса.

  12. Переполнение содержимого

    Чтобы контролировать размеры и отступы элементов.

  13. Стилизация таблиц

    Чтобы аккуратно оформить элементы интерфейса.

  14. Узконаправленные функции CSS

    Чтобы применять специальные возможности CSS по назначению.

  15. Стилизация списков

    Чтобы аккуратно оформить элементы интерфейса.

  16. Стилизация ссылок

    Чтобы аккуратно оформить элементы интерфейса.

  17. Веб-шрифты

    Чтобы улучшить читаемость и иерархию текста.

  18. Позиционирование

    Чтобы точно расположить элементы на странице.

  19. Модули CSS раскладки — что такое и как готовить

    Чтобы строить адаптивные макеты без костылей.

  20. Основы и практика CSS Grid Layout: как использовать двумерную раскладку для повседневных задач

    Чтобы собрать адаптивный макет страницы.

  21. 5 новинок CSS в адаптивной верстке, которые можно использовать уже сейчас

    Чтобы строить адаптивные макеты без костылей.

  22. Как писать более чистый CSS: дюжина советов от банальных до неочевидных

    Чтобы строить адаптивные макеты без костылей.

  23. Прокачиваем свои CSS-анимации

    Чтобы добавить движение без лишнего JavaScript.

  24. Введение в SVG-анимации для верстальщиков

    Чтобы добавить движение без лишнего JavaScript.

JavaScript: язык и браузер

  1. Основы JavaScript

    Чтобы добавить странице логику и интерактивность.

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

    Чтобы добавить странице логику и интерактивность.

  3. Первое погружение в JavaScript

    Чтобы добавить странице логику и интерактивность.

  4. Переменные — место хранения необходимой информации

    Чтобы хранить и изменять данные в коде.

  5. Базовая математика в JavaScript — числа и операторы

    Чтобы выполнять вычисления в JavaScript.

  6. Работа с текстом — строки в JavaScript

    Чтобы обрабатывать текстовые данные в коде.

  7. Полезные методы для строк

    Чтобы обрабатывать текстовые данные в коде.

  8. Массивы

    Чтобы хранить и обрабатывать наборы данных.

  9. Принятие решений в вашем коде — условные конструкции

    Чтобы выполнять код по заданным условиям.

  10. Зацикливание кода

    Чтобы повторять операции без дублирования кода.

  11. Функции — Переиспользуемые блоки кода

    Чтобы разбивать логику на повторяемые действия.

  12. Создаём свою функцию

    Чтобы разбивать логику на повторяемые действия.

  13. Возвращаемые значения функций

    Чтобы разбивать логику на повторяемые действия.

  14. Введение в события

    Чтобы реагировать на действия пользователя.

  15. Основы объектов в JavaScript

    Чтобы объединять связанные данные и поведение.

  16. Управление документами

    Чтобы изменять страницу из JavaScript.

  17. Получение данных с сервера

    Чтобы загружать данные без перезагрузки страницы.

  18. Работа с JSON

    Чтобы передавать структурированные данные между системами.

  19. Прототипы объектов

    Чтобы добавлять интерфейсу логику и интерактивность.

  20. Наследование в JavaScript

    Чтобы добавлять интерфейсу логику и интерактивность.

  21. Введение в web APIs

    Чтобы использовать возможности браузера из кода.

  22. Введение в асинхронный JavaScript

    Чтобы выполнять долгие операции без зависания.

  23. Делаем асинхронное программирование более простым с async и await

    Чтобы выполнять долгие операции без зависания.

  24. JavaScript: массивы от А до Я для тех, кто только начал

    Чтобы хранить и обрабатывать наборы данных.

  25. This is JavaScript: методы объектов и контекст «this»

    Чтобы добавлять интерфейсу логику и интерактивность.

  26. Что ты такое, замыкания в JavaScript?

    Чтобы управлять областью видимости данных.

  27. JavaScript для самых маленьких. Часть 2

    Чтобы добавлять интерфейсу логику и интерактивность.

  28. Область видимости и замыкания в JavaScript

    Чтобы управлять областью видимости данных.

  29. Прототипы в JS и малоизвестные факты

    Чтобы добавлять интерфейсу логику и интерактивность.

  30. Один поток, а всё успевает: как работает цикл событий в JavaScript

    Чтобы реагировать на действия пользователя.

Первые компоненты и TypeScript

  1. Основы Reactjs: отображение и передача данных

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  2. Знакомство с TypeScript: базовая типизация и ключевые возможности

    Чтобы находить ошибки типов до запуска.

Git и совместная работа

  1. Git для новичков (часть 1)

    Чтобы контролировать изменения и работать в команде.

  2. Git для новичков (часть 2)

    Чтобы контролировать изменения и работать в команде.

  3. Git для самых маленьких. От первой команды до настройки SSH

    Чтобы контролировать изменения и работать в команде.

  4. Git для новичков: ветки, коммиты и первый pull request

    Чтобы контролировать изменения и работать в команде.

  5. Гайд по Git для начинающих: основные команды, работа с ветками и типичные ошибки

    Чтобы контролировать изменения и работать в команде.

  6. 15 базовых советов по Git для эффективной работы каждый день

    Чтобы контролировать изменения и работать в команде.

  7. Работаем с Git: трудовые будни

    Чтобы контролировать изменения и работать в команде.

Отладка и первые тесты

  1. Что пошло не так? Устранение ошибок JavaScript

    Чтобы быстрее находить причины ошибок в браузере.

  2. Отладка JavaScript в Chrome DevTools для начинающих фронтендеров

    Чтобы быстрее находить причины ошибок в браузере.

  3. Chrome DevTools: Хитрости при отладке

    Чтобы быстрее находить причины ошибок в браузере.

  4. Как эффективно использовать Chrome DevTools для QA: подборка интересных возможностей

    Чтобы быстрее находить причины ошибок в браузере.

  5. Мне этот Chrome DevTools теперь абсолютно понятен

    Чтобы быстрее находить причины ошибок в браузере.

  6. Экипировка Бонда: полезные инструменты DevTools

    Чтобы быстрее находить причины ошибок в браузере.

  7. Chrome DevTools — не панацея. Что умеет Firefox

    Чтобы быстрее находить причины ошибок в браузере.

  8. Как начать тестировать frontend: гайд для новичков

    Чтобы находить и исправлять первые ошибки в коде.

Доступность интерфейсов

  1. Что такое доступность?

    Чтобы интерфейсом могли пользоваться все.

  2. HTML: Хорошая основа для доступности

    Чтобы интерфейсом могли пользоваться все.

  3. CSS и JavaScript доступность — лучшие практики

    Чтобы интерфейсом могли пользоваться все.

  4. Обеспечение доступности веб-контента: стандарты, критерии, пример реализации

    Чтобы интерфейсом могли пользоваться все.

  5. Разработка доступных интерфейсов

    Чтобы интерфейсом могли пользоваться все.

  6. Почему вам не нужна версия для слабовидящих

    Чтобы сайтом могли пользоваться все.

  7. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

    Чтобы сайтом могли пользоваться все.

  8. 5 accessibility инструментов в Chrome DevTools

    Чтобы быстрее находить причины ошибок в браузере.

  9. Люди и интерфейсы. Рассказ незрячего тестировщика о том, как сервисы Яндекса становятся доступнее

    Чтобы сайтом могли пользоваться все.

Организация работы

  1. Декомпозиция целей и задач

    Чтобы превращать цели в понятные задачи.

Все подборки для Frontend-разработчика →