Фронтенд-разработчик от Яндекс Практикум

    Яндекс Практикум
    Стоимость курса
    140 000 Р
    Рассрочка
    от 15 500 Р в месяц
    Длительность
    10 месяцев
    Сертификат
    Да
    Начало курса
    В любой момент
    Трудоустройство
    Нет

    Кому подойдет

    • Тем, кто хочет стать разработчиком
    • Тем, кто сам изучает программирование
    • IT-специалистам из других областей

    Чему Вы научитесь

    • Писать код на HTML, CSS, JavaScript и TypeScript
    • Создавать сайты и веб-приложения под любые задачи бизнеса
    • Применять методы ООП и думать как разработчик
    • Использовать библиотеку React, чтобы упростить и ускорить работу
    • Разбираться в технических заданиях от заказчиков
    • Предлагать заказчикам оптимальные решения
    • Работать в команде с помощью системы контроля версий кода Git
    • Тестировать сайты и веб-приложения, устранять ошибки
    • Размещать сайты и веб-приложения в интернете

    Программа обучения

    HTML, CSS, JavaScript: бесплатный модуль

    Первый код

    Что делают разработчики, базовые элементы, HTML, CSS

    Что такое HTML и CSS

    Теги HTML, заголовки, абзац, ссылка, об атрибутах, один тег в другом, изображения, структура HTML-документа, правила CSS, тег style, CSS-файл, блоки, отступы, подпись к обложке, playground

    Базовые CSS-свойства

    Собрать лендинг, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика, больше вёрстки

    Больше CSS

    Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, короткая запись свойств, границы, внешний и внутренний фокус элемента, блочные + строчные, расположение элементов по центру: margin: auto, тени, подвал сайта, центрировать по вертикали

    JavaScript

    Числа, строки, арифметика строк, переменные, подключение JavaScript к HTML, массивы, случайные числа, функции с аргументами, возвращаемое значением, выбор и изменение элементов страницы, булевы величины, объекты, подключение внешних библиотек, циклы, релиз

    HTML и CSS: лейаут, доступность и интерактив

    Bash и Git. Основы

    Установка Git, командная строка, настройка и подключение Git к проекту, первый коммит, командная работа, регистрация на GitHub, SSH-ключи, локальный и удалённый репозитории, клонирование репозитория

    Шрифты и типографика

    Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков

    Семантика и глобальные атрибуты

    Контейнеры HTML5, семантика и выразительность HTML, таблицы, приведение кода в порядок, язык документа и его элементов, идентификаторы

    Флексбокс-вёрстка

    Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex basis, flex-grow и flex-shrink

    Позиционирование элементов, стилизация форм

    Статическое, относительное и абсолютное позиционирования, z-index, фиксированное и липкое позиционироване, inset, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, accent-color

    Grid Layout

    Гриды, терминология гридов, столбцы и строки внутри грид-контейнера, отступы, функция repeat(), фракция, расположение элементов, грид-области, выравнивание сетки и содержимого грид-областей, наложение элементов

    Настройка страницы, мета, встраиваемый контент

    Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег <video>, тег <audio>

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

    LVHA, Фокусы, .::marker, .::selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности

    Дизайн, адаптивная вёрстка и декорирование

    Разработка интерфейса для разных устройств

    Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера

    Растровая графика, единицы измерения и функции

    Форматы, оптимизация изображений, плотность пикселей, картинки на выбор (браузера), image-set(), loading=»lazy», относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()

    SVG

    Экспорт svg, использование svg: инлайн, <img>, фон, use, fill, stroke, анимация и оптимизация svg, svg-маски

    2D трансформации + транзишены

    Transition, матрица трансформаций, transform, transform-origin, translate, rotate, skew, scale, применение нескольких трансформаций

    Анимации

    Animation (name, duration, iteration-count, direction, timing-function, delay, play-state, fill-mode), @keyframes, дешёвые свойства для анимации, will-change

    Декорирование

    Бордер-имидж, фильтры, тени, линейный, радиальный и конический градиенты, репит-градиент, множественные градиенты, бленд-мод

    3D трансформации

    Матрица 3D-преобразований, transform-style, perspective и perspective-origin, backface-visibility

    Базовый JavaScript

    Примитивы

    Примитивные типы данных, оператор typeof, undefined и null, строки, числа и специальные числовые значения

    Знакомство с DOM

    DOM: выбор элементов, атрибуты и их методы, манипуляции с классами CSS, свойства .innerHTML и .textContent, события, методы insertAdjacentHTML и insertAdjacentText

    Дебаггинг JavaScript

    Как читать ошибки, типы ошибок, логические ошибки и console.log, поиск документации, отладка через debugger

    Методы работы с данными, условия, циклы

    Let и const против var, методы поиска в строке, преобразования строк и работы с числами, явное и неявное преобразования типов, логические операторы, НЕ (!), ИЛИ (||), И (&&), switch-case, тернарный оператор, циклы, директивы break и continue

    Создание, добавление и удаление элементов в DOM

    innerHTML, createElement и createTextNode, добавление элементов на страницу, удаление и перемещение элементов, клонирование элементов, template-элементы, объект event, родственные связи в DOM

    Массивы

    Объединение и преобразование в строку, управление элементами на любых позициях, коллекции в DOM, методы forEach и map, функции обратного вызова и их аргументы, методы filter, some, every, find, reduce, сортировка массива

    Функции

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

    Объекты

    Создание объектов и запись свойств, обращение к свойству, операторы: delete, in, перебор свойств, передача по ссылке, сравнение объектов, поверхностное копирование объектов, глубокое копирование объектов

    Продвинутый JavaScript

    Сборка проекта. Webpack

    Библиотека пакетов NPM, подключение репозитория NPM пакетов, установка и настройка Webpack, настройка сборки, транспиляция JS: установка Babel, настройка обработки HTML и CSS, минификация CSS и добавление префиксов

    Модули в JS

    IIFE, инкапсуляция и модули, директивы export и import, особенности работы модулей в браузере, локальный сервер

    Продвинутый JavaScript. Асинхронность

    Асинхронные операции, колбэки, асинхронные колбэки, таймеры, event loop, promise

    Обработка событий

    События клавиатуры, объекты event: клавиатура и мышь, снятие слушателя, отмена стандартного поведения браузера, всплытие и делегирование событий

    Работа с формами

    Доступ к форме из JavaScript, отправка формы. Событие submit, получение элементов форм, доступ к значениям элементов форм, события change и input, методы reset и submit

    Валидация форм

    Встроенная браузерная валидация форм, валидация JavaScript-ом, связываем JS-методы валидации с DOM, валидация нескольких полей и форм, взаимодействие с другими элементами DOM, введение в регулярные выражения и кастомные сообщения об ошибках

    Работа с API

    Протокол HTTP, запросы из JavaScript, формат JSON, HTTP-запрос, ответ, инструменты: вкладка Network

    TypeScript и ООП

    Введение в TypeScript

    Динамическая и статическая типизация, самодокументированный код, проверка типов во время исполнения, настройка и инструментарий TS, массивы и объекты, специальные типы, создание собственных типов

    Объектно-ориентированное программирование

    Источники контекста, this, способы привязки, синтаксис классов в JS, добавление и типизация полей и методов классов, интерфейсы классов, принципы в ООП, инкапсуляция, наследование, полиморфизм

    Основы TypeScript

    Приведение типов, типизация DOM-элементов и их событий, типизация стандартных объектов JS, файлы деклараций d.ts, создание и использование библиотек

    Продвинутый TypeScript и ООП

    Статические поля и методы, имплементация интерфейсов, дженерики, условные типы

    Принципы разработки ПО

    Композиция классов, паттерны singleton, adapter/facade/proxy, observer, builder

    Работа с окружением

    Тултип, валидация, дропдаун, модальное окно, табы, аккордеон, слайдер, галерея

    ООП в интерфейсах

    Дропдаун с асинхронным поиском, всплывающее подтверждение/уведомление, интерфейсы: сообщение об ошибке, список дел (ToDo), чат, календарь, редактируемая таблица, редактор фото

    Основы React

    CRA

    Create React App, новый проект, распаковка и структура проекта

    Синтаксис JSX

    React и JSX, синтаксис JSX: основы, списки и события, функциональные компоненты

    Компоненты и их жизненный цикл

    Классовые компоненты, жизненный цикл классовых компонентов, virtual DOM

    useState и useEffect

    Хуки, внутреннее состояние: useState, эффекты: useEffect, зависимости

    React DevTools

    Установка и использование расширения React DevTools, сборка проекта

    Импорт модулей, CSS-модули

    Импорт модулей и изображений, работа с CSS, шрифты

    Библиотеки компонент

    Добавление классового компонента, работа в изоляции, storybook

    Роутинг и авторизация

    Роутинг в приложениях

    Маршрутизация на стороне сервера и клиента, клиентский роутинг и History API, установка и подключение React Router, создание маршрутов, навигация и ссылки, динамические маршруты, фильтрация и сортировка значений

    Авторизация и роутинг в веб-приложениях

    Идентификация, аутентификация и авторизация, токены, авторизация доступа с помощью сессий, сохранение данных о пользователе, cookie в веб-приложениях, защита маршрутов на фронтенде, выход из системы

    Взаимодействие в режиме реального времени: WebSockets

    Открытие и закрытие соединения, события Websocket, получение и отправка данных, отладка и тестирование WebSocket в консоли разработчика

    WS и Redux: собственный middleware для работы с сокетами

    Принцип реализации WebSocket с Redux (JS), middleware, actions и reducers для работы с WebSocket, конфигурация Store и подключение Middleware

    Тестирование React-приложений

    Научитесь ускорять работу React-приложений, проводить их тестирование, выводить в продакшен и релизить на собственном удалённом сервере.

    Проектный модуль

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

    Софтскилы для разработчиков

    Узнаете, как организовать учебный процесс, адаптироваться в новой среде и работать в команде. Теория и учебные задания помогут сделать учёбу и будущую работу легче и осознаннее

    Программа трудоустройства

    Составите резюме, соберёте портфолио, напишете мотивационное письмо. С нашей поддержкой разработаете стратегию поиска и подготовитесь к интервью

    Программа акселерации

    Будете подаваться на вакансии, писать сопроводительные письма, делать тестовые и ходить на собеседования. Мы вместе будем анализировать отказы и ошибки, чтобы улучшить результаты. Этот этап заканчивается, когда вы получаете предложение о работе, на которое согласны

    Отзывы о школе 7

    4.3 из 5
    5
    0
    1
    1
    0
    Сортировать:
    Дате публикации
    • Дата публикации
    • Популярности
    • Сначала положительные
    • Сначала отрицательные
    • Константин 12 октября 2023

      Мои полгода обучения в Яндекс Практикуме оказались весьма впечатляющими, прежде всего благодаря высокому качеству программы и ее тщательной проработке. Важно отметить, тренажер, который предоставляют на курсе. Он обладает хорошо структурированным сценарием и высоким уровнем геймификации, что значительно облегчает освоение информации. Здесь мы не просто пересказываем теорию, а погружаемся в ситуации, анализируем поведение виртуальных коллег, разбираем проблемы и находим решения. Одним из замечательных аспектов программы является ее обширное покрытие всех необходимых тем и вопросов, которые студент должен овладеть. Кроме того, наставники акцентируют внимание на практических заданиях, проводимых онлайн в ходе еженедельных воркшопов и вебинаров, что способствует развитию реальных навыков. Особой чертой данного курса и комьюнити его студентов является возможность работать в команде. Во время обучения мы не просто учимся, но и находим новых друзей, создавая тесные связи с однокурсниками. Еще одной фантастической особенностью обучения является карьерный модуль в конце курса. Здесь нам не только рассказывают о том, как написать эффективное резюме и куда его отправлять, но и предоставляют возможность практического сотрудничества с опытными специалистами, которые помогают улучшить наше резюме, подготовиться к собеседованиям и многое другое. Они обеспечивают реальную поддержку и помощь при поиске работы и продвижении по карьерной лестнице. Я действительно поражен высоким качеством обучения в Яндекс Практикуме и всеми преимуществами, которые он предлагает. Этот курс является превосходным выбором для тех, кто стремится получить качественное и практическое образование в области, связанной с программированием и разработкой.

      Был ли отзыв полезен?
    • Анатолий 8 августа 2023

      Приветствую всех! Недавно приобрел курс "Аналитик данных" от Яндекс Практикума, и пока ни капли сожаления не испытывал. Выбор пал на данную платформу по следующим основаниям: 1. Отсутствие навязчивой рекламы со стороны блогеров на YouTube 2. Знакомые стартаперы, которые уже прошли другие программы Практикума и остались очень удовлетворены результатами 3. Отсутствие причин усомниться в надежности такой компании как Яндекс Курс организован по модулям, каждый из которых длится две недели. Предоставляется достаточно теоретических материалов, но и практической составляющей еще больше. Хотелось бы отметить профессионализм команды разработчиков курса и их умение доступно разъяснять сложные вопросы (к примеру, теорию вероятностей). Все объяснения идут через примеры, что позволяет гармонично совмещать теорию с практикой. Безусловно, стоит отметить работу специалистов команды Практикума (наставников, кураторов, рецензентов проектов). Все участники высококвалифицированы, крайне вежливы и терпеливы. Лично для меня, будучи человеком без каких-либо технических знаний, порой сталкиваюсь со сложностями, однако стремление освоить новую профессию преобладает, а к тому же команда Яндекса поддерживает в нужный момент. В итоге, моя оценка – 10 из 10.

      Был ли отзыв полезен?
    • Евгения 3 июня 2023

      Решила пройти здесь бесплатные курсы по Backend разработке. Все настолько поверхностно, что даже не описать. Маленькие окошечки с заданиями, которые приходится каждый раз увеличивать, а это неудобно. Выходит, что даже функционал толком не доработан. Все темы из теории очень поверхностны. Ни слова про рекурсию и переменные, а это основа основ. Практики на курсах нет, хоть вам обещают обратное. А ведь это основная задача, только практикой можно закрепить материал. Как можно научиться кодить и запоминать сантаксис? Задачи можно решать разными способами, но если вы напишите решение не так, как забито в компьютере, то результат зачтут как неправильный. Если задачу вы не решите, то к следующему блоку тем вас просто не допустят. Продукт крайне сырой и даже для новичка бесплатный курс это просто трата времени. Разработчики ценятся за знания, в том числе и математические, на курсах Яндекса эти знания вам никто не даст. Не советую трать время.

      Был ли отзыв полезен?
    Посмотреть все отзывы о Яндекс Практикум