Туториал по реализации эффекта drag & drop на ванильном JavaScript. Разбираем на примере сортировки списка задач.
В конце статьи — ссылка на интерактивную демонстрацию с полным кодом решения.
В конце статьи — ссылка на интерактивную демонстрацию с полным кодом решения.
HTML Academy
Туториал. Список задач с drag & drop
Расписали по шагам, как сделать интерактивный список задач, используя HTML Drag and Drop API.
Как доступно прятать и стилизовать чекбоксы и радиокнопки.
https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
Будучи веб-разработчиком, вам, наверняка, доведётся поработать с тестировщиками. Чтобы знать, к чему готовиться, мы поговорили с Михаилом, специалистом по тестированию из Яндекс.Денег.
Получилось 18 вопросов о его работе и о том, что тестировщиков бесит в программистах.
Получилось 18 вопросов о его работе и о том, что тестировщиков бесит в программистах.
Запускаем новый продукт на базе Акселератора — «Аттестацию». Она поможет узнать свой уровень в вёрстке и понять, какие навыки развивать в первую очередь.
Как проходит «Аттестация»:
— вы получаете вводную информацию, макет и техническое задание;
— мы засекаем ровно 7 дней с момента получения вами макета (этого достаточно для работы в комфортном темпе);
— затем проверяем вашу работу на соответствие техническому заданию и критериям, подводим итоги и пишем фидбек;
— возвращаем вам результат, в котором вы найдете файл с проверкой, где указаны ошибки по конкретным критериям, и рекомендации для дальнейшего развития.
«Аттестация» — как экзамен в университете, только все полученные навыки пригодятся в работе.
10 первых проектов в «Аттестации» доступны за 2000 ₽ вместо 2500 ₽ ⚡️
Как проходит «Аттестация»:
— вы получаете вводную информацию, макет и техническое задание;
— мы засекаем ровно 7 дней с момента получения вами макета (этого достаточно для работы в комфортном темпе);
— затем проверяем вашу работу на соответствие техническому заданию и критериям, подводим итоги и пишем фидбек;
— возвращаем вам результат, в котором вы найдете файл с проверкой, где указаны ошибки по конкретным критериям, и рекомендации для дальнейшего развития.
«Аттестация» — как экзамен в университете, только все полученные навыки пригодятся в работе.
10 первых проектов в «Аттестации» доступны за 2000 ₽ вместо 2500 ₽ ⚡️
Цикл статей про базовые возможности Chrome DevTools:
«Введение в Chrome DevTools. Панель Elements» — https://tml.io/38z3d
«Введение в Chrome DevTools. Console, Sources, Network» — https://tml.io/2p9jt
«Введение в Chrome DevTools. Панель Elements» — https://tml.io/38z3d
«Введение в Chrome DevTools. Console, Sources, Network» — https://tml.io/2p9jt
HTML Academy
Введение в Chrome DevTools. Панель Elements
Рассказали, как Chrome DevTools помогут вам при вёрстке интерфейсов.
Разрабатывать программы можно самостоятельно, делая всё с нуля, или прибегнув к помощи фреймворков.
Фреймворк — это набор библиотек и компонентов, которые предоставляют собой базовый каркас продукта. Они нужны для того, чтобы разработчикам не приходилось каждый раз при типовых задачах «изобретать колесо». Самый популярный HTML/CSS фреймворк — это Bootstrap.
Фреймворки ограничивают программиста своей архитектурой, но экономят время на разработку и упрощают подключение новых людей к проекту, так как есть стандарты и порядок при работе с конкретным фреймворком.
Фреймворк — это набор библиотек и компонентов, которые предоставляют собой базовый каркас продукта. Они нужны для того, чтобы разработчикам не приходилось каждый раз при типовых задачах «изобретать колесо». Самый популярный HTML/CSS фреймворк — это Bootstrap.
Фреймворки ограничивают программиста своей архитектурой, но экономят время на разработку и упрощают подключение новых людей к проекту, так как есть стандарты и порядок при работе с конкретным фреймворком.
Список цветов в CSS, сгруппированных по оттенкам, яркости и насыщенности.
https://enes.in/sorted-colors/
https://enes.in/sorted-colors/
Почему компании смотрят на софт-скиллы
На собеседованиях работодатели обращают внимание не только на технические знания, но и на софт-скиллы (или «гибкие навыки»). Иначе говоря на то, как человек общается, реагирует на критику, насколько он организован.
Почему это важно
Для этого есть очень простое объяснение — человека не хочется перевоспитывать на работе. Подтянуть знания — несложно: нужен только учебник и наставник. Но объяснить человеку, что он себя как-то не так ведёт — сложнее и болезненнее. Поэтому берут на работу тех, с кем будет комфортно взаимодействовать всем членам команды, даже если его навыки чуть менее развиты, чем у других претендентов на должность.
Что же делать на собеседовании
Обращайте внимание, насколько ясно и понятно вы доносите свою мысль. При указании на ошибку — не воюйте, учитесь признавать свои ошибки и исправлять их. На собеседовании будьте дружелюбны и позитивно настроены.
Готовы быстро учиться и приспосабливаться к новым условиям? Здорово, в сфере веб-разработки это точно пригодится! Опишите работодателю, как вы осваивали новую технологию, расскажите, что ещё планируете выучить и куда планируете развиваться.
Если представится возможность — расскажите о своих менеджерских навыках: что вы хорошо организуете свою работу, не срываете дедлайны, готовы взаимодействовать и общаться с коллегами из других отделов. Не во всех компаниях эту работу за вас будет делать тимлид, поэтому умение общаться и решать проблемы — это важно.
Прокачивайтесь
Если чувствуете, что с гибкими навыками есть проблемы — осознайте их и работайте над собой. Начните с нашей статьи о том, какие софт-скиллы прокачивать начинающему разработчику. И вот ещё несколько книг, которые тоже помогут в развитии:
М. Дорофеев. «Джедайские техники: Как воспитать свою обезьяну, опустошить инбокс и сберечь мыслетопливо» — развиваем личную эффективность.
М. Мэнсон. «Тонкое искусство Пофигизма. Парадоксальный способ быть счастливым» — прокачиваем стрессоустойчивость.
Г. Кеннеди. «Договориться можно обо всём! Как добиваться максимума в любых переговорах» — учимся договариваться и общаться.
На собеседованиях работодатели обращают внимание не только на технические знания, но и на софт-скиллы (или «гибкие навыки»). Иначе говоря на то, как человек общается, реагирует на критику, насколько он организован.
Почему это важно
Для этого есть очень простое объяснение — человека не хочется перевоспитывать на работе. Подтянуть знания — несложно: нужен только учебник и наставник. Но объяснить человеку, что он себя как-то не так ведёт — сложнее и болезненнее. Поэтому берут на работу тех, с кем будет комфортно взаимодействовать всем членам команды, даже если его навыки чуть менее развиты, чем у других претендентов на должность.
Что же делать на собеседовании
Обращайте внимание, насколько ясно и понятно вы доносите свою мысль. При указании на ошибку — не воюйте, учитесь признавать свои ошибки и исправлять их. На собеседовании будьте дружелюбны и позитивно настроены.
Готовы быстро учиться и приспосабливаться к новым условиям? Здорово, в сфере веб-разработки это точно пригодится! Опишите работодателю, как вы осваивали новую технологию, расскажите, что ещё планируете выучить и куда планируете развиваться.
Если представится возможность — расскажите о своих менеджерских навыках: что вы хорошо организуете свою работу, не срываете дедлайны, готовы взаимодействовать и общаться с коллегами из других отделов. Не во всех компаниях эту работу за вас будет делать тимлид, поэтому умение общаться и решать проблемы — это важно.
Прокачивайтесь
Если чувствуете, что с гибкими навыками есть проблемы — осознайте их и работайте над собой. Начните с нашей статьи о том, какие софт-скиллы прокачивать начинающему разработчику. И вот ещё несколько книг, которые тоже помогут в развитии:
М. Дорофеев. «Джедайские техники: Как воспитать свою обезьяну, опустошить инбокс и сберечь мыслетопливо» — развиваем личную эффективность.
М. Мэнсон. «Тонкое искусство Пофигизма. Парадоксальный способ быть счастливым» — прокачиваем стрессоустойчивость.
Г. Кеннеди. «Договориться можно обо всём! Как добиваться максимума в любых переговорах» — учимся договариваться и общаться.
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
HTML Academy
Как подключить и оптимизировать нестандартные шрифты
Рассказали про ускорение загрузки шрифтов и их подключение через Google Fonts и @font-face.
Советы по созданию сложных CSS-иллюстраций.
https://css-tricks.com/advice-for-complex-css-illustrations/
https://css-tricks.com/advice-for-complex-css-illustrations/
Отзыв выпускника девятнадцатого потока «HTML и CSS. Адаптивная вёрстка и автоматизация» #19 Ильи Исаченкова. Новый поток курса стартует уже 13 июля!
«Я обучаюсь на профессии «Фронтенд-разработчик», и это уже второй интенсив, который я защитил на 100%. Честно, по сравнению «HTML и CSS. Профессиональная вёрстка сайтов» он мне дался легче, потому что уже были базовые знания с первого уровня. Но были свои трудности и непонимание того, что происходит. Приходилось по нескольку раз смотреть одну и ту же лекцию и один раз даже переписать полностью проект с нуля.
На этом уровне получил колоссальную базу навыков, которую не получил бы нигде. Научился оптимизации сайта и его контента, что в наше время очень и очень важно. Потому что если сайт будет долго грузиться, фирма потеряет очень много клиентов.
Мои советы тем, кто хочет прийти на этот интенсив или профессию. Первое — изначально пройти все-все интерактивные тренажёры, потому что большую часть базовых знаний и небольшой практики дают именно они. Второе — выбрать хорошего наставника, потому что от него зависит всё. После чего не бояться делать ошибки и находить правильные варианты решения проблемы. Потому что пока ты не встретишь проблему,ты ни когда не найдешь решение, чтобы больше не совершать такую ошибку.
На данном уровне будет колоссально много строк кода, но мой совет — не стоит бояться. Глаза боятся, а руки кодят!»
«Я обучаюсь на профессии «Фронтенд-разработчик», и это уже второй интенсив, который я защитил на 100%. Честно, по сравнению «HTML и CSS. Профессиональная вёрстка сайтов» он мне дался легче, потому что уже были базовые знания с первого уровня. Но были свои трудности и непонимание того, что происходит. Приходилось по нескольку раз смотреть одну и ту же лекцию и один раз даже переписать полностью проект с нуля.
На этом уровне получил колоссальную базу навыков, которую не получил бы нигде. Научился оптимизации сайта и его контента, что в наше время очень и очень важно. Потому что если сайт будет долго грузиться, фирма потеряет очень много клиентов.
Мои советы тем, кто хочет прийти на этот интенсив или профессию. Первое — изначально пройти все-все интерактивные тренажёры, потому что большую часть базовых знаний и небольшой практики дают именно они. Второе — выбрать хорошего наставника, потому что от него зависит всё. После чего не бояться делать ошибки и находить правильные варианты решения проблемы. Потому что пока ты не встретишь проблему,ты ни когда не найдешь решение, чтобы больше не совершать такую ошибку.
На данном уровне будет колоссально много строк кода, но мой совет — не стоит бояться. Глаза боятся, а руки кодят!»
Подборка подробных туториалов из нашего блога:
«Простая анимация на чистом CSS» — рассказали, как создать анимацию с нуля.
«Интерактивная SVG-диаграмма» — показали, как создавать SVG-элементы, добавлять им анимацию и интерактивность.
«Список задач с drag & drop» — расписали по шагам, как сделать интерактивный список задач, используя HTML Drag and Drop API.
«Простая анимация на чистом CSS» — рассказали, как создать анимацию с нуля.
«Интерактивная SVG-диаграмма» — показали, как создавать SVG-элементы, добавлять им анимацию и интерактивность.
«Список задач с drag & drop» — расписали по шагам, как сделать интерактивный список задач, используя HTML Drag and Drop API.
HTML Academy
Туториал. Простая анимация на чистом CSS
Рассказали, как создать анимацию с нуля.
Открыт набор тестировщиков для новой главы ⚡
С тестирования последней главы тренажёра «Знакомство с PHP» прошёл почти месяц… а это значит, что настало время тестировать новую главу! Кто готов помочь?
Город и часовой пояс значения не имеют. Тестирование будет проходить удалённо. За свои труды каждый тестировщик получит навык на выбор.
Минимальные требования для участия в тестировании:
пройден курс «Знакомство с HTML и CSS»,
пройдены первые три главы курса «Знакомство с PHP».
Чтобы стать тестировщиком, заполните анкету: https://forms.gle/Q1dfnjPTTnTXkCZe7
P.S. Заполненная анкета не гарантирует участия в тестировании. Если вас отобрали, то через несколько дней на указанную почту придёт письмо с инструкцией. Если нет — пожалуйста, не расстраивайтесь. Будут новые главы и новые тестирования
С тестирования последней главы тренажёра «Знакомство с PHP» прошёл почти месяц… а это значит, что настало время тестировать новую главу! Кто готов помочь?
Город и часовой пояс значения не имеют. Тестирование будет проходить удалённо. За свои труды каждый тестировщик получит навык на выбор.
Минимальные требования для участия в тестировании:
пройден курс «Знакомство с HTML и CSS»,
пройдены первые три главы курса «Знакомство с PHP».
Чтобы стать тестировщиком, заполните анкету: https://forms.gle/Q1dfnjPTTnTXkCZe7
P.S. Заполненная анкета не гарантирует участия в тестировании. Если вас отобрали, то через несколько дней на указанную почту придёт письмо с инструкцией. Если нет — пожалуйста, не расстраивайтесь. Будут новые главы и новые тестирования
Google Docs
Анкета тестировщика
Как работают обёртки в CSS, как их стилизовать, когда и где использовать.
https://ishadeed.com/article/styling-wrappers-css/
https://ishadeed.com/article/styling-wrappers-css/
9 июля в 13:00 в прямом эфире поговорим о продвинутых инструментах верстальщика: адаптивная или резиновая вёрстка, флексы или гриды? Less или Sass? Что это всё такое и зачем?
В прямом эфире ответят на ваши вопросы: Алексей Симоненко — директор по развитию HTML Academy, и Серёжа Попов — генеральный директор продакшена «Лиги А».
Запись на трансляцию
В прямом эфире ответят на ваши вопросы: Алексей Симоненко — директор по развитию HTML Academy, и Серёжа Попов — генеральный директор продакшена «Лиги А».
Запись на трансляцию
Полное руководство по тёмному режиму веб-страниц.
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/