Новичкам зачастую сложно понять, какой язык программирования выучить. Вариантов много, знать хочется всё и сразу.⠀⠀
Как насчёт JavaScript? Он отлично подходит для того, чтобы стать первым языком программирования.⠀
Главные его преимущества:
🔸 JavaScript имеет низкий порог входа. Это достаточно простой язык, понятный даже тем, кто никогда не занимался программированием.
🔸 Содержит много готовых решений для базовых задач. А это значит, что придумывать велиосипед вам точно не придётся
🔸 Популярность языка и развитое комьюнити. Практически на любой вопрос можно найти ответ в Google, либо обратиться за помощью к более опытным разработчикам.
⠀
Начните изучать JavaScript c нашим профессиональным курсом «JavaScript. Профессиональная разработка веб-интерфейсов», который рассчитан для новичков, желающих развиваться в IT.
Как насчёт JavaScript? Он отлично подходит для того, чтобы стать первым языком программирования.⠀
Главные его преимущества:
🔸 JavaScript имеет низкий порог входа. Это достаточно простой язык, понятный даже тем, кто никогда не занимался программированием.
🔸 Содержит много готовых решений для базовых задач. А это значит, что придумывать велиосипед вам точно не придётся
🔸 Популярность языка и развитое комьюнити. Практически на любой вопрос можно найти ответ в Google, либо обратиться за помощью к более опытным разработчикам.
⠀
Начните изучать JavaScript c нашим профессиональным курсом «JavaScript. Профессиональная разработка веб-интерфейсов», который рассчитан для новичков, желающих развиваться в IT.
Ребята из компании REG.RU поделились с нами сокровенным и рассказали, как они организовывают рабочий процесс с помощью телеграм-ботов.
Оказалось, что подобные боты имеют несложное устройство, но значительно облегчают многие задачи во время работы. Например, сбор данных из Google-таблиц и последующее их использование занимает много времени и сил, а бот может сделать это оперативно и без ошибок.
В новой статье даём подробную инструкцию по настройке подобных ботов: https://tml.io/jsicm
Оказалось, что подобные боты имеют несложное устройство, но значительно облегчают многие задачи во время работы. Например, сбор данных из Google-таблиц и последующее их использование занимает много времени и сил, а бот может сделать это оперативно и без ошибок.
В новой статье даём подробную инструкцию по настройке подобных ботов: https://tml.io/jsicm
HTML Academy
Как настроить работу Телеграм-бота с Google Sheets
Специалисты из REG.RU делятся опытом создания бота.
В CSS есть четыре математические функции: min(), max(), clamp() и calc(). Разбор этих функций даётся в статье: http://css.yoksel.ru/css-math/
Поздравляем с Днём учителя всех, кто причастен к празднику!
В честь этого события запускаем акцию — скидка до 70% на тренировочные материалы: навык «Создание семантической разметки по макету» и макет «Детский планетарий».
Каждый навык научит вас решать конкретную профессиональную задачу. А тренировочные макеты рассчитаны на разбор практических задач. К ним приложены инструкции с рекомендациями профессиональных фронтендеров и примеры эталонной вёрстки.
Акция продлится до 7 октября включительно.
В честь этого события запускаем акцию — скидка до 70% на тренировочные материалы: навык «Создание семантической разметки по макету» и макет «Детский планетарий».
Каждый навык научит вас решать конкретную профессиональную задачу. А тренировочные макеты рассчитаны на разбор практических задач. К ним приложены инструкции с рекомендациями профессиональных фронтендеров и примеры эталонной вёрстки.
Акция продлится до 7 октября включительно.
Для разработчика, который только начинает свой путь, важно научиться работать в команде. Даже если вы уже отлично пишете код, вы работаете с людьми, и без софт-скиллов будет тяжело вырасти как специалисту и находить общий язык с участниками команды.
Давайте разберёмся, какие навыки в первую очередь стоит прокачивать новичку.
Давайте разберёмся, какие навыки в первую очередь стоит прокачивать новичку.
Задача верстальщика — создать рабочий интерфейс, используя грамотный и валидный код. В начале пути многим непонятно, где находить решения для правильной вёрстки. Чтобы помочь с ответом, мы создали «профессиональные навыки», в которых собрали примеры решения реальных задач и подготовили подробные инструкции для каждой из них.
В новой статье мы рассказываем, что включают в себя навыки, и как с ними работать: https://tml.io/nfo7i
Напоминаем, что до 7-го октября включительно действует акция — скидка до 70% на тренировочные материалы — навык «Создание семантической разметки по макету» и макет «Детский планетарий».
В новой статье мы рассказываем, что включают в себя навыки, и как с ними работать: https://tml.io/nfo7i
Напоминаем, что до 7-го октября включительно действует акция — скидка до 70% на тренировочные материалы — навык «Создание семантической разметки по макету» и макет «Детский планетарий».
HTML Academy
Что входит в навыки HTML Academy
Или как сделать так, чтобы ваш код проверил компьютер
Вышел в релиз первый проект по JavaScript средней сложности — «Канбан-доска».
В этом проекте вы будете программировать одностраничное приложение, которое работает в браузере — канбан-доску. Приложение позволяет добавлять карточки задач, перемещать их между колонками и удалять выполненные.
В тренировочный комплект входит техническое задание, готовая вёрстка и примеры эталонной реализации.
В этом проекте вы будете программировать одностраничное приложение, которое работает в браузере — канбан-доску. Приложение позволяет добавлять карточки задач, перемещать их между колонками и удалять выполненные.
В тренировочный комплект входит техническое задание, готовая вёрстка и примеры эталонной реализации.
Продолжаем тему оптимизации сайта. В этот раз разбираем, что надо улучшить при разработке, чтобы сайт должным образом отображался в поисковиках.⠀
Поисковые роботы лучше понимают контент сайта, если у них есть подсказки от разработчиков. Благодаря этим подсказкам результат выдачи для пользователя будет не только релевантным, но и удобным и понятным. ⠀
Давайте рассмотрим основные приёмы улучшения сайта для поисковиков. ⠀
Заполняйте <title>. Title должен быть уникальным для каждой страницы, так как именно он используется в поисковой выдаче. Чем он яснее и понятнее написан, тем больше шансов, что пользователь посетит ваш сайт.⠀
Используйте семантические теги, которые присутствуют в HTML Стандарте. Например, сервис путешествий Tutu.ru использовал в разработке таблицу для расписания электричек. Google это учёл и прямо в выдаче показал удобную и наглядную для пользователя таблицу расписания. Пример можно найти по поисковому запросу «Расписание электричек СПБ — Сестрорецкий курорт».⠀
Если у вас сайт про кулинарию или кино, то карточки рецептов и фильмов лучше описать с помощью дополнительный семантической разметки данных. Самая популярная — https://schema.org/, но есть и другие: Open Graph, JSON-LD. ⠀
Примеры таких карточек можно найти по поисковым запросам: «Курица в духовке» или «Брюс Уиллис». ⠀
Не забывайте про оптимизацию и улучшение сайта при разработке, тогда сайт будет приносить прибыль и пользоваться популярностью.
Поисковые роботы лучше понимают контент сайта, если у них есть подсказки от разработчиков. Благодаря этим подсказкам результат выдачи для пользователя будет не только релевантным, но и удобным и понятным. ⠀
Давайте рассмотрим основные приёмы улучшения сайта для поисковиков. ⠀
Заполняйте <title>. Title должен быть уникальным для каждой страницы, так как именно он используется в поисковой выдаче. Чем он яснее и понятнее написан, тем больше шансов, что пользователь посетит ваш сайт.⠀
Используйте семантические теги, которые присутствуют в HTML Стандарте. Например, сервис путешествий Tutu.ru использовал в разработке таблицу для расписания электричек. Google это учёл и прямо в выдаче показал удобную и наглядную для пользователя таблицу расписания. Пример можно найти по поисковому запросу «Расписание электричек СПБ — Сестрорецкий курорт».⠀
Если у вас сайт про кулинарию или кино, то карточки рецептов и фильмов лучше описать с помощью дополнительный семантической разметки данных. Самая популярная — https://schema.org/, но есть и другие: Open Graph, JSON-LD. ⠀
Примеры таких карточек можно найти по поисковым запросам: «Курица в духовке» или «Брюс Уиллис». ⠀
Не забывайте про оптимизацию и улучшение сайта при разработке, тогда сайт будет приносить прибыль и пользоваться популярностью.
schema.org
Schema.org - Schema.org
Schema.org is a set of extensible schemas that enables webmasters to embed
structured data on their web pages for use by search engines and other applications.
structured data on their web pages for use by search engines and other applications.
Продолжаем запускать новые проекты по JavaScript. Сегодня вышел в релиз проект лёгкой сложности — «Бесконечная карусель товаров».
Вам предстоит программировать виджет — карусель с товарами интернет-магазина, позволяющий переключать карточки с товарами вперёд и назад.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Вам предстоит программировать виджет — карусель с товарами интернет-магазина, позволяющий переключать карточки с товарами вперёд и назад.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Короткий чек-лист на случай, если вам понадобится проверить работу сайта перед запуском, а тестировщика рядом не будет.
⠀
Первым делом нужно проверить, что всё соответствует техническому заданию, а сайт совпадает с макетом. Обратите внимание на то, чтобы на всех устройствах и браузерах сайт выглядел одинаково, кнопки и скрипты работали корректно, а контент отображался правильно.
⠀
Посмотрите на наличие ошибок в коде JavaScript в консоли разработчика. Также там можно обратить внимание на запросы и размер загружаемых файлов.
⠀
С помощью валидатора нужно убедиться, что код удовлетворяет стандартам HTML/CSS.
⠀
Обратите внимание на формы и правильность ссылок. Формы должны быть удобными для пользователя, а ссылки приводить на настоящие сайты.
⠀
Нужно проверить, чтобы сайт работал быстро, иначе пользователи не будут ждать долгой загрузки и уйдут к конкурентам.
⠀
Пройдитесь по критериям качества. Это не только то, что мы перечислили — существует гораздо больше мелочей, которые должен знать хороший фронтенд-разработчик. На курсах HTML Academy верстают и готовят к публикации сайты исключительно на основе критериев качества.
⠀
Первым делом нужно проверить, что всё соответствует техническому заданию, а сайт совпадает с макетом. Обратите внимание на то, чтобы на всех устройствах и браузерах сайт выглядел одинаково, кнопки и скрипты работали корректно, а контент отображался правильно.
⠀
Посмотрите на наличие ошибок в коде JavaScript в консоли разработчика. Также там можно обратить внимание на запросы и размер загружаемых файлов.
⠀
С помощью валидатора нужно убедиться, что код удовлетворяет стандартам HTML/CSS.
⠀
Обратите внимание на формы и правильность ссылок. Формы должны быть удобными для пользователя, а ссылки приводить на настоящие сайты.
⠀
Нужно проверить, чтобы сайт работал быстро, иначе пользователи не будут ждать долгой загрузки и уйдут к конкурентам.
⠀
Пройдитесь по критериям качества. Это не только то, что мы перечислили — существует гораздо больше мелочей, которые должен знать хороший фронтенд-разработчик. На курсах HTML Academy верстают и готовят к публикации сайты исключительно на основе критериев качества.
В любой сфере деятельности существует много мифов и стереотипов. IT не является исключением.
20 октября на лайве директор по развитию HTML Academy Алексей Симоненко расскажет всю правду о веб-разработке. А заодно ответит на важный вопрос — с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
20 октября на лайве директор по развитию HTML Academy Алексей Симоненко расскажет всю правду о веб-разработке. А заодно ответит на важный вопрос — с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
Webpack и Gulp — популярные сборщики модулей на JavaScript. Каждый инструмент имеет свои преимущества и недостатки. Возникает вопрос, какой сборщик лучше использовать. ⠀
Банально, но универсального ответа нет. Дело в том, что оба инструмента выполняют разные функции. Вы можете использовать и Webpack, и Gulp, но чтобы делать это корректно, нужно в первую очередь определиться с тем, какую задачу вам нужно решить. Для наглядности приведём пример из жизни. Вам нужно забить гвоздь. Это можно сделать любым подручным средством, но лучше взять более правильный инструмент — молоток. Так и в JavaScript — инструментов много, но использовать надо подходящий.
Может ли быть в одном проекте и Webpack, и Gulp? Да. Потому что вы решаете задачи проекта, для решения которых могут понадобиться оба инструмента.⠀
Gulp отвечает за сборку проекта. У вас есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе вы хотите получить оптимизированные файлы для пользователя. Поэтому в Gulp удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.⠀
С помощью Webpack можно сделать практически всё то же самое, что может Gulp, но Webpack лучше всего подходит для работы с JavaScript-файлами. После работы над многочисленными JavaScript-файлами проекта Webpack создаёт билд — один файл со всей функциональностью сайта. ⠀
Этот билд также можно оптимизировать и разрезать единый файл на чанки — маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js.⠀
Не бойтесь экспериментировать. Благодаря этому вы сможете подобрать правильные инструменты.
Банально, но универсального ответа нет. Дело в том, что оба инструмента выполняют разные функции. Вы можете использовать и Webpack, и Gulp, но чтобы делать это корректно, нужно в первую очередь определиться с тем, какую задачу вам нужно решить. Для наглядности приведём пример из жизни. Вам нужно забить гвоздь. Это можно сделать любым подручным средством, но лучше взять более правильный инструмент — молоток. Так и в JavaScript — инструментов много, но использовать надо подходящий.
Может ли быть в одном проекте и Webpack, и Gulp? Да. Потому что вы решаете задачи проекта, для решения которых могут понадобиться оба инструмента.⠀
Gulp отвечает за сборку проекта. У вас есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе вы хотите получить оптимизированные файлы для пользователя. Поэтому в Gulp удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.⠀
С помощью Webpack можно сделать практически всё то же самое, что может Gulp, но Webpack лучше всего подходит для работы с JavaScript-файлами. После работы над многочисленными JavaScript-файлами проекта Webpack создаёт билд — один файл со всей функциональностью сайта. ⠀
Этот билд также можно оптимизировать и разрезать единый файл на чанки — маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js.⠀
Не бойтесь экспериментировать. Благодаря этому вы сможете подобрать правильные инструменты.
