HTML Academy
10.8K subscribers
4.99K photos
119 videos
4 files
3.06K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Cобытия — важная часть JavaScript. По факту это любые действия, произошедшие на странице.

С помощью разных свойств и методов можно управлять объектами, которые хранят все действия о событиях. Один из таких методов — preventDefault(). Давайте рассмотрим подробнее, зачем он нужен.
Продолжаем запускать новые проекты по JavaScript. Сегодня вышел в релиз проект лёгкой сложности — «Бесконечная карусель товаров».

Вам предстоит программировать виджет — карусель с товарами интернет-магазина, позволяющий переключать карточки с товарами вперёд и назад.

В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Короткий чек-лист на случай, если вам понадобится проверить работу сайта перед запуском, а тестировщика рядом не будет.

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

Посмотрите на наличие ошибок в коде JavaScript в консоли разработчика. Также там можно обратить внимание на запросы и размер загружаемых файлов.

С помощью валидатора нужно убедиться, что код удовлетворяет стандартам HTML/CSS.

Обратите внимание на формы и правильность ссылок. Формы должны быть удобными для пользователя, а ссылки приводить на настоящие сайты.

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

Пройдитесь по критериям качества. Это не только то, что мы перечислили — существует гораздо больше мелочей, которые должен знать хороший фронтенд-разработчик. На курсах HTML Academy верстают и готовят к публикации сайты исключительно на основе критериев качества.
В любой сфере деятельности существует много мифов и стереотипов. IT не является исключением.

20 октября на лайве директор по развитию HTML Academy Алексей Симоненко расскажет всю правду о веб-разработке. А заодно ответит на важный вопрос — с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
Webpack и Gulp — популярные сборщики модулей на JavaScript. Каждый инструмент имеет свои преимущества и недостатки. Возникает вопрос, какой сборщик лучше использовать. ⠀

Банально, но универсального ответа нет. Дело в том, что оба инструмента выполняют разные функции. Вы можете использовать и Webpack, и Gulp, но чтобы делать это корректно, нужно в первую очередь определиться с тем, какую задачу вам нужно решить. Для наглядности приведём пример из жизни. Вам нужно забить гвоздь. Это можно сделать любым подручным средством, но лучше взять более правильный инструмент — молоток. Так и в JavaScript — инструментов много, но использовать надо подходящий.

Может ли быть в одном проекте и Webpack, и Gulp? Да. Потому что вы решаете задачи проекта, для решения которых могут понадобиться оба инструмента.⠀

Gulp отвечает за сборку проекта. У вас есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе вы хотите получить оптимизированные файлы для пользователя. Поэтому в Gulp удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.⠀

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

Этот билд также можно оптимизировать и разрезать единый файл на чанки — маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js.⠀

Не бойтесь экспериментировать. Благодаря этому вы сможете подобрать правильные инструменты.
Скорее всего, с вами бывало такое, что вы получали текст со странными прямоугольниками или вопросительными знаками, либо эмодзи отображались некорректно.

Почему так происходит, можно почитать в статье.
В какие смешные ситуации вы попадали на собеседованиях?
Успейте записаться на лайв «Мифы о работе в IT и ошибки начинающих программистов», который пройдёт 20 октября.

На лайве Лёша Симоненко — директор по развитию HTML Academy — расскажет об основных стереотипах в сфере IT и ответит на вопрос, с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
Лайв с Лёшей Симоненко уже завтра!

На лайве Лёша поговорит об основных стереотипах в сфере IT и ответит на вопрос, с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
В HTML есть много атрибутов, и у каждого из них своя задача. В этой статье мы знакомимся поближе с атрибутом id и рассказываем, как его использовать.
Лайв с Алексеем Симоненко уже начался!

Сегодня поговорим о мифах в работе в IT и ошибках начинающих программистов. В конце лайва подведём итоги марафона «Заверстаю».
По исследованиям httparchive, загрузка сайтов становится всё медленнее и медленнее, несмотря на появление новых процессоров и расширение интернет-канала. Это связано с тем, что размеры и количество файлов с каждым годом увеличивается. Вполне логично, ведь сложность проектов с каждым годом возрастает.

📌 Поймите, какие проблемы есть у проекта. На этот вопрос поможет ответить Lighthouse, который встроен в браузер Google Chrome. Также можно воспользоваться его веб-версией.

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

📌 Проанализируйте ваш сайт и решите, какие данные наиболее важны для вашего пользователя — текст, картинки или видео. Чаще всего это текст, но у вас может быть видеохостинг, который содержит только видео. В таком случае отдайте предпочтение видео.

📌 В голове составьте минимальную карту сайта. Она состоит из первого экрана и контента ниже него. Отдайте предпочтение по оптимизации ресурсам, которые попадают на первый экран.

Помните, что время загрузки сайта — один из наиболее важных показателей, которые влияют на поведение пользователя. Чем быстрее будет загружаться ваша страница, тем больше будет просмотров и кликов.
Сейчас сфера IT является одной из самых востребованных. Рекрутеры выстраиваются в очередь, чтобы схантить квалифицированных кандидатов. Одна из специальностей, которая отлично подходит новичкам — фронтенд-разработка.⠀
Фронтенд-разработчики верстают на HTML и пишут код на JavaScript. Оба навыка востребованы как по отдельности, так и вместе, и относительно просты для изучения.⠀
Изучайте разработку вместе с нашим курсом по профессии «Фронтенд-разработчик», в котором вы получите все необходимые навыки и знания для трудоустройства: https://tml.io/717im
Вышел в релиз новый проект по JavaScript лёгкой сложности — «Счётчик калорий».

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

Интерфейс состоит из формы с полями ввода и блока для вывода результата. В эталонной реализации используются нативные браузерные API.

В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Мы тонем в зависимостях, и нам это нравится.

Рассказываем, почему стоит отдавать предпочтение чистому JavaScript, и следить, какие пакеты подключаете к проекту.