В предпродаже появились новые проекты по JavaScript, релиз которых ожидается в течение трёх месяцев. Сейчас вы можете приобрести их со скидкой 50%: https://tml.io/tz8d1
Мы предлагаем проекты разных уровней сложности: как для новичков, так и для более продвинутых разработчиков.
⠀
С помощью проектов вы можете прокачать свои профессиональные навыки разработки. В тренировочный комплект входит техническое задание, автоматическая проверка работы и качества кода, а также примеры эталонной реализации.
Мы предлагаем проекты разных уровней сложности: как для новичков, так и для более продвинутых разработчиков.
⠀
С помощью проектов вы можете прокачать свои профессиональные навыки разработки. В тренировочный комплект входит техническое задание, автоматическая проверка работы и качества кода, а также примеры эталонной реализации.
При создании сайта любой разработчик задумывается, как будет выглядеть конечный продукт на разных устройствах: в мобильной и декстопной версиях. Этот вопрос помогают урегулировать разные по гибкости типы вёрстки. Самые популярные — адаптивная и резиновая. Давайте разберём, чем же они отличаются.
⠀
Как вы уже могли заметить, подсказка содержится в самом названии. Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. В результате при резиновой вёрстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. Получается, что весь контент растягивается по ширине экрана устройства. ⠀
Адаптивный дизайн позволяет гибко адаптировать сайт к возможности устройства и браузера. При адаптивной вёрстке страница перестраивается по заранее заданным точкам, адаптируя контент каждый раз к наиболее подходящей и ближайшей из них. Необходимость такой гибкости появилась с популяризацией мобильных устройств: экран на них значительно меньше, и пользователю, как минимум, стало неудобно попадать на ссылки и кнопки. ⠀
Наиболее продвинутым типом вёрстки сейчас является отзывчивая, которая умеет адекватно подстраиваться под разные устройства. Однако реализовать её сложнее, чем остальные.
О том, как верстать удобные для пользователя сайты, вы можете узнать на курсе «HTML и CSS. Адаптивная вёрстка и автоматизация», который стартует 9 ноября: https://tml.io/p2g7t
⠀
Как вы уже могли заметить, подсказка содержится в самом названии. Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. В результате при резиновой вёрстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. Получается, что весь контент растягивается по ширине экрана устройства. ⠀
Адаптивный дизайн позволяет гибко адаптировать сайт к возможности устройства и браузера. При адаптивной вёрстке страница перестраивается по заранее заданным точкам, адаптируя контент каждый раз к наиболее подходящей и ближайшей из них. Необходимость такой гибкости появилась с популяризацией мобильных устройств: экран на них значительно меньше, и пользователю, как минимум, стало неудобно попадать на ссылки и кнопки. ⠀
Наиболее продвинутым типом вёрстки сейчас является отзывчивая, которая умеет адекватно подстраиваться под разные устройства. Однако реализовать её сложнее, чем остальные.
О том, как верстать удобные для пользователя сайты, вы можете узнать на курсе «HTML и CSS. Адаптивная вёрстка и автоматизация», который стартует 9 ноября: https://tml.io/p2g7t
Открыта запись на новые потоки профессий и профессиональных курсов:
«Фронтенд-разработчик» (18 января — 25 июля 2021) — https://tml.io/absvk
«React-разработчик» (18 января — 28 ноября 2021) — https://tml.io/ocned
«HTML и CSS. Профессиональная вёрстка сайтов» (18 января — 21 марта 2021) — https://tml.io/k443d
«JavaScript. Профессиональная разработка веб-интерфейсов» (26 января — 28 марта 2021) — https://tml.io/lefft
«Фронтенд-разработчик» (18 января — 25 июля 2021) — https://tml.io/absvk
«React-разработчик» (18 января — 28 ноября 2021) — https://tml.io/ocned
«HTML и CSS. Профессиональная вёрстка сайтов» (18 января — 21 марта 2021) — https://tml.io/k443d
«JavaScript. Профессиональная разработка веб-интерфейсов» (26 января — 28 марта 2021) — https://tml.io/lefft
Грустно и одиноко? Появилось непреодолимое желание верстать и программировать?
Есть решение! Пятничными осенними вечерами наш редактор Женя направит вас в нужное русло и согреет письмами с новыми статьями из блога.
Кстати, рассылка полезна всем, кто хочет узнать больше о вёрстке и разработке, ведь Женя делится сокровенным — знаниями и информацией.
Чтобы получать такие письма, подпишитесь на редакторскую рассылку — https://tml.io/eekgx
Развивайтесь с HTML Academy!
Есть решение! Пятничными осенними вечерами наш редактор Женя направит вас в нужное русло и согреет письмами с новыми статьями из блога.
Кстати, рассылка полезна всем, кто хочет узнать больше о вёрстке и разработке, ведь Женя делится сокровенным — знаниями и информацией.
Чтобы получать такие письма, подпишитесь на редакторскую рассылку — https://tml.io/eekgx
Развивайтесь с HTML Academy!
На днях мы анонсировали даты новых потоков профессиональных курсов и профессий. Курсы проходят под руководством наставников, которые делятся опытом и помогают разобраться с практикой.
У многих студентов возникает вопрос — как же выбрать подходящего наставника, и как происходит взаимодействие с ним.
О том, на что обратить внимание при выборе наставника, рассказали в блоге: https://tml.io/n0n7c
У многих студентов возникает вопрос — как же выбрать подходящего наставника, и как происходит взаимодействие с ним.
О том, на что обратить внимание при выборе наставника, рассказали в блоге: https://tml.io/n0n7c
HTML Academy
Обучение с наставником: как выбрать, на что обращать внимание
С наставником — хорошо, без наставника — плохо.
Людям любых профессий свойственно совершать ошибки, и это нормально. Особенно в начале карьеры. Главное — вовремя замечать ошибки и успевать их предотвращать.
Разбираем, как всё-таки не допустить ошибок при обучении программированию.
Не бойтесь задавать вопросы и просить о помощи. А честность значительно сэкономит время и эмоциональные ресурсы.
Разбираем, как всё-таки не допустить ошибок при обучении программированию.
Не бойтесь задавать вопросы и просить о помощи. А честность значительно сэкономит время и эмоциональные ресурсы.
Текст — основная часть контента большинства сайтов, поэтому нужно серьёзно относиться к его отрисовке. Стандартный шрифт мало кого удивит, а вот необычный и грамотно подобранный — привлечёт внимание и порадует глаз читателя.⠀
Рассказываем, как правильно подключать нестандартные шрифты и оптимизировать их: https://tml.io/fow4w
Рассказываем, как правильно подключать нестандартные шрифты и оптимизировать их: https://tml.io/fow4w
HTML Academy
Как подключить и оптимизировать нестандартные шрифты
Рассказали про ускорение загрузки шрифтов и их подключение через Google Fonts и @font-face.
Любой разработчик должен понимать, что он делает сайт в первую очередь удобный и быстрый для пользователя. Если сайт долго загружается, пользователи будут покидать страницу.
В результате потери могут быть колоссальными. Для сравнения: крупный бизнес, как Google или Yahoo, теряет миллионы долларов за каждые 100 миллисекунды задержки загрузки сайта. Компания BBC обнаружила, что ко всему прочему 10% пользователей уходит от них за каждую дополнительную секунду загрузки контента. Мотивирует на оптимизацию сайта, не правда ли?
Мой сайт загружает X секунд. Как понять — это долго или нет? Для этого вам нужно замерить скорость загрузки сайтов ваших конкурентов или похожих на вас ресурсов и сделать не медленнее, чем у них. Для проверки скорости загрузки сайта вы можете использовать Pagespeed от Google. В отчёте сервиса будет подробно описано, что можно исправить для повышения быстродействия загрузки сайта.
Пользователи будут ощущать каждые 25% ускорения загрузки вашего сайта. Если сайт загружался 10 секунд, то следующее время, к которому вы должны стремиться — 7,5 секунд. И так шаг за шагом по 25% от предыдущего времени загрузки.
Ещё пара цифр, к которым вы должны стремиться:
Первое отображение изображения или текстового блока, видимого в области просмотра — 2.5 секунды.
Первое взаимодействие с сайтом — 100 миллисекунд. Если это страница с формой, то после показа формы у пользователя должна быть возможность взаимодействовать с ней уже через 100 миллисекунд. То же самое касается и остальных блоков, которые являются важными для страницы.
В 2020-2021 годах быстро загружаемые сайты будут повышаться в списке поисковой выдачи Google. Для постоянного отслеживания изменения загрузки сайта используйте Lighthouse.
В результате потери могут быть колоссальными. Для сравнения: крупный бизнес, как Google или Yahoo, теряет миллионы долларов за каждые 100 миллисекунды задержки загрузки сайта. Компания BBC обнаружила, что ко всему прочему 10% пользователей уходит от них за каждую дополнительную секунду загрузки контента. Мотивирует на оптимизацию сайта, не правда ли?
Мой сайт загружает X секунд. Как понять — это долго или нет? Для этого вам нужно замерить скорость загрузки сайтов ваших конкурентов или похожих на вас ресурсов и сделать не медленнее, чем у них. Для проверки скорости загрузки сайта вы можете использовать Pagespeed от Google. В отчёте сервиса будет подробно описано, что можно исправить для повышения быстродействия загрузки сайта.
Пользователи будут ощущать каждые 25% ускорения загрузки вашего сайта. Если сайт загружался 10 секунд, то следующее время, к которому вы должны стремиться — 7,5 секунд. И так шаг за шагом по 25% от предыдущего времени загрузки.
Ещё пара цифр, к которым вы должны стремиться:
Первое отображение изображения или текстового блока, видимого в области просмотра — 2.5 секунды.
Первое взаимодействие с сайтом — 100 миллисекунд. Если это страница с формой, то после показа формы у пользователя должна быть возможность взаимодействовать с ней уже через 100 миллисекунд. То же самое касается и остальных блоков, которые являются важными для страницы.
В 2020-2021 годах быстро загружаемые сайты будут повышаться в списке поисковой выдачи Google. Для постоянного отслеживания изменения загрузки сайта используйте Lighthouse.
Новичкам зачастую сложно понять, какой язык программирования выучить. Вариантов много, знать хочется всё и сразу.⠀⠀
Как насчёт 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 октября включительно.