Свежие статьи

Основное содержимое страницы. Тег body

Основное содержимое страницы. Тег body

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <body> используется для размещения всего содержимого, которое отображается на веб-странице.

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок 1</h1>
    <p>Это параграф.</p>
  </body>
</html>

Атрибуты тега <body>:

  • onbeforeunload — сценарий, который выполнится, когда пользователь соберётся покинуть страницу.
  • onhashchange — сценарий, который выполнится при изменении URL.
  • onmessage — сценарий, который выполнится при получении сообщения от приложения.
  • onoffline — сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.
  • ononline — сценарий для запуска, когда браузер начинает работать в режиме онлайн.
  • onpagehide — сценарий, который выполняется, когда пользователь переходит со страницы.
  • onpageshow — сценарий, который выполняется, когда пользователь переходит на страницу.
  • onunload — сценарий, который выполняется, когда пользователь покидает страницу.
  • onafterprint — сценарий, который выполнится после печати веб-страницы.
  • onbeforeprint — сценарий, который выполнится перед печатью веб-страницы.
  • onlanguagechange — сценарий, который выполнится при изменении языка документа.
  • onmessageerror — сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.
  • onpopstate — сценарий, который выполнится при изменении состояния истории браузера.
  • onrejectionhandled — сценарий, который выполнится при обработке отклоненного обещания в объекте Promise.
  • onstorage — сценарий, который выполнится при изменении данных в объекте localStorage или sessionStorage.
  • onunhandledrejection — сценарий, который выполнится при возникновении отклоненного обещания в объекте Promise без обработки.
Читать дальше
  • 13 марта 2024
9 книг по JavaScript для начинающих в 2024

9 книг по JavaScript для начинающих в 2024

🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

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

Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.

Читать дальше
JS
  • 6 марта 2024
Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

💡 Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc(). Ну, поехали!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px, pt), так и в относительных (em, %, без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

Примеры использования:

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
Читать дальше
CSS
  • 4 марта 2024
Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

🚀 Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align:

p {
  text-align: center;
}

Этот код выравнивает текст внутри всех параграфов (<p>) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align.

CSS
  • 4 марта 2024
CSS-препроцессоры в 2024. Большой обзор

CSS-препроцессоры в 2024. Большой обзор

Препроцессоры позволяют разработчикам расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 29 февраля 2024
Как прятать

Как прятать

Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище... ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

Читать дальше
CSS
  • 28 февраля 2024
Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 27 февраля 2024
Пришел «зелёным» junior и вырос до «жёлтого» middle. История выпускника

Пришел «зелёным» junior и вырос до «жёлтого» middle. История выпускника

_Поговорили с фронтенд-разработчиком Александром Масленниковым и узнали, насколько сложно ему было пройти путь от новичка после курсов HTML Academy до полноценного мидла в компании «5 углов».

Александр рассказал, как выбирал будущие курсы, насколько сложно быть программистом-джуном, и как вкатиться в профессию, если тебе уже за 30._

— Ты пришёл в «5 углов» сразу после курсов?

— Да. Работаю тут уже три года. По сути, первое серьёзное собеседование я прошёл в компании «5 углов». Остальные работодатели не отвечали, как это часто бывает на hh.

Кстати, «5 углов» я нашёл не через hh, а через HTML Academy. У них есть своя небольшая площадка, где компании, с которыми они сотрудничают, оставляют вакансии, а затем выбирают сотрудников среди выпускников.

— Получается, можно просто закончить курсы HTML Academy и идти искать работу?

— Можно, но если у тебя кроме учебных проектов будет ещё что-то, шансов намного больше. Курсы дают начальные знания для входа в мир IT, а дальше нужно расти самому. В разработке нужно всегда учиться новому.

— На кого ты учился в университете?

— По образованию я бухгалтер-аудитор, но по специальности я так ни разу в жизни не поработал. В основном работал в продажах, продажах и ещё раз в продажах :)

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

Основные поставки шли из Турции, какая-то часть из Европы, то есть всё было привязано к курсу доллара. И когда он поднялся до 70, стало очевидно, что для нашего городка такой магазин становится нерентабельным, и мы закрылись. После этого я взял небольшой перерыв и подался в раздумья, чем бы хотел заниматься.

— Рассматривал что-то, кроме программирования?

— Некоторые моменты жизни я посвящал онлайн-играм, этим занимались мои знакомые и друзья. Один из хороших знакомых запустил свой проект — магазин по предоставлению игровых услуг, ему были нужны надёжные исполнители, и на некоторое время я решил остановиться там. Собрал себе небольшую команду, и мы занимались различными заказами.

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

Знакомый с большим опытом в разработке посоветовал попробовать программирование, порекомендовал начать с вёрстки сайтов и даже посоветовал курсы. У них в команде был выпускник HTML Academy, и они остались довольны.

— Хватило ли тебе навыков, которые ты получил на онлайн-курсах в HTML Academy, чтобы начать работать?

— Вполне, у них очень большое покрытие навыков, начиная от обычных HTML, CSS и JavaScript, и заканчивая React, Vue, PHP. Они сейчас очень много всего дают. По сути, это выглядит так: тебя учат алфавиту и базовым словам, а потом ты должен научиться составлять из них предложения. Чем красивее ты составляешь предложения, чем они лучше и больше, тем ты профессиональнее становишься.

Всё зависит от компании, в которую пытаешься попасть. Если там пишут в вакансии что нужен junior — не факт, что это так и есть. Некоторые обозначают требования, которые уже явно соответствуют разработчику с опытом в пару лет. Тут не стоит расстраиваться и опускать руки. Пока не пригласили на собеседование, стоит дальше учиться самостоятельно и пополнять портфолио.

Интересно оформленное портфолио — огромный плюс, оно показывает отношение сотрудника к работе.

— Есть популярное мнение, что junior-разработчиков никто не любит, и их не хотят брать на работу. Было ли три года назад так? Можешь ли ты назвать везением, что тебя взяли на работу так быстро?

— Это ошибочное мнение. Полагаю, что оно появляется на фоне того, что многие онлайн-школы сулят высокие зарплаты, но когда после прохождения курсов не берут на подобные зарплаты, случается небольшой шок. Надо понимать, что после прохождения курсов у вас 0 опыта. Учебные проекты не в счёт — они сделаны под присмотром наставника, и компания, куда вы направляете своё резюме, скорее всего это понимает. Я думаю, что компания всегда хочет себе опытного сотрудника, и не важно, какая это сфера.

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

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

  1. Раз в неделю проходить по вакансиям и брать в работу тестовые задачи;
  2. Пытаться повторить какой-нибудь простенький сайт,
  3. Если пригласили на собеседование, то обязательно иду, ведь даже из неудачного собеседования можно получить много полезного опыта.

В общем, была цель набраться опыта и заполнить портфолио.

— Сейчас на Youtube очень много видео, в которых критикуют онлайн-курсы. Можешь сказать, действительно ли они работают?

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

Онлайн-курсы — это такая же система обучения, как и вузы, только попроще и более точечная.

Я рассматривал и очную систему обучения. Выбрал школу при МГТУ им. Н. Э. Баумана в Москве. Там огромный выбор курсов, в том числе по HTML и JS. Ездить мне было удобно — полтора часа, и я там. Но звёзды так сложились, что и цена в два раза дороже, и начался ковид. Было непонятно, что вообще происходит, поэтому решил отказаться от очного обучения.

В итоге, я взял в HTML Academy начальный курс «HTML и CSS. Профессиональная вёрстка сайтов», который просто объясняет, что такое HTML и CSS — можно сказать, азы. Были онлайн-лекции, в чате я мог задавать вопросы, и после каждой главы лектор отвечал на них. Также можно было выбрать себе одного наставника, который помогал в течение курса. Всё выглядело цивилизованно. По итогу первого курса мне всё понравилось, и я взял следующий курс. Позже добрался до курса по JS, потому что без него никуда.

Я смотрел курсы других онлайн-школ, некоторые из них очень хвалили в интернете. Если честно, эти расхваливания выглядели странно. По опыту работы с клиентами могу сказать, что люди охотнее пишут плохие отзывы, чем хорошие. У некоторых цена была аж в два раза дороже, а дороже не значит лучше. Сомнений было много.

— В целом, ты можешь порекомендовать HTML Academy?

— Да, я до сих пор у них периодически беру курсы. У нас на работе есть плюшки — оплата 50% стоимости курсов для роста квалификации. Как пример, я посчитал, что нашей команде нужен курс «Вёрстка email-рассылок». Люди, которые сейчас приходят, даже не знают про неё, ведь этим пользовались лет десять назад. Так как в компании кто-то должен уметь делать e-mail верстку быстро и качественно, я взял эту роль на себя. Обсудил это с руководителем отдела, и компания мне покрыла половину стоимости.

— Какие навыки пришлось приобретать, когда ты уже пришёл на работу?

В начале очень нужны были soft skills для постоянного общения с коллегами. Так как сфера была для меня полностью новая, я вообще не знал, что делать в некоторых моментах. У меня постоянно были вопросы: «Как подключаться? Где что брать? Что произошло?».

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

В хорошей компании понимают, что junior-разработчика не нужно грузить какой-то тяжелой работой, от которой он сломается. Так ведь и психологическая травма может случиться: потратил кучу денег, времени на обучение, а тут пришёл и на первой же задаче споткнулся.

— Как ты себя чувствовал в первые дни работы? Может, были мысли все бросить?

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

Поначалу ещё не умеешь распределять грамотно время и, как большинство новичков, сидишь в нерабочее время и пытаешься что-то сделать. Есть груз ответственности, можно и подгореть. Большую роль играет коллектив и атмосфера. Очень круто, если есть возможность созвониться с коллегой или руководителем отдела и обсудить свою проблему. Взгляд со стороны мне не раз помогал.

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

— Доволен ли ты свои выбором профессии?

— Если смотреть из тех вариантов, которые у меня были, я считаю, что пошел по самому лучшему. Я доволен.

Решающих вещей много: коллектив, начальство, зарплата, возможность работать удалённо. Нет проблем взять отпуск на пару дней, если случилось что-то срочное. Совокупность всех этих вещей сейчас меня устраивает.

— Можешь охарактеризовать или описать парой слов, каким ты был в начале пути, и то, какой ты сейчас?

— Вот это самое тяжелое, на самом деле, потому что мне кажется, что я не так далеко ушел от начала пути. Сфера очень большая, прошло всего три года, как-то хочется намного больше уметь.

Я считаю, что хороший опыт для программирования лет 8: всё можно попробовать, поменять направление, на котором ты вырос, войти во что-то новое. Можно зайти в новое направление одним из первых и рассказать, какой ты классный.

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

— Профессионалом ты назвать себя пока не можешь?

— Я считаю себя middle. Если ты самостоятельно можешь решить задачу, уверенно и полноценно использовать свои инструменты и библиотеки, при этом ты заранее заботишься о том, как с твоим кодом дальше будут работать коллеги, поздравляю, ты — middle-разработчик.

Senior уже имеет весомый опыт за спиной, заранее понимает, какие проблемы могут быть на проекте и как их избежать, какие решения могут пригодиться. Также он имеет хорошо развитые soft skills. Написание кода и многие решения уже отточены и понятны, их удобно поддерживать.

— Какие навыки у тебя были в начале и какие сейчас? Что ты приобрел нового?

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

Сейчас использую различные библиотеки. Я знаю, как что-то подключить, как настроить. Это же нельзя назвать навыком, просто понимание. Со временем прокачал soft skills и гибкость, которая позволяет применять полученные знания, начал думать о том, как будут пользоваться и поддерживать мой код другие разработчики.

— Сколько тебе было лет, когда ты поменял профессию? Согласен ли с тем, что свою специальность можно менять в любом возрасте?

— Мне было 34, когда я закончил курсы. Вопрос довольно популярный на самих курсах, часто спрашивали: «Мне 40 лет, нормально ли идти на курсы?». В интересах создателей курсов, конечно, соглашаться. Но на самом деле всё зависит от человека, насколько твой мозг готов впитывать полностью новую информацию. Новая информация в голове — это в принципе очень тяжело. Даже у детей, когда они что-то не понимают в школе, бывает стресс. Когда человек взрослый, мозги у него немного «подсыхают» и их надо постоянно тренировать. Если готов впитывать все новое, то ты сможешь.

— Нет ли у тебя зависти к шестнадцатилетним специалистам, которые вкатились по возрасту раньше тебя во фронтенд?

— Я слишком стар, чтобы кому-то там завидовать, вырос из этого уже. Тут важно понимать, что у каждого свой старт и свой путь. Если у вас есть время кому-то завидовать, то лучше потратить его на себя.

Это как в школе — кому-то дается физика и математика, а кому-то русский с литературой. Всё зависит от человека. Можно, конечно, зазубрить предмет, но ты должен просто задать вопрос «Насколько тебе комфортно в этой сфере?». Если тебе не нравится, но ты готов оставаться ради того, чтобы зарабатывать деньги, окей, это твой выбор. Но скорее всего сгоришь потом.

Поэтому я и брал курсы по чуть-чуть, чтобы попробовать кусочками и, если что, переключиться на что-то другое.

Айти
  • 1 февраля 2024
Figma Dev Mode становится платным. Всё пропало?

Figma Dev Mode становится платным. Всё пропало?

Если вы всё пропустили, то на днях в Фигме появилась такая плашка:

Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».

Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).

Читать дальше
Софт
  • 30 января 2024
Объект URL в JavaScript: полный разбор

Объект URL в JavaScript: полный разбор

🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.

Создать объект URL можно двумя способами:

Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.

const url = new URL("https://www.example.com/path?query=123#hash");

Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.

const currentUrl = new URL(window.location.href);
Читать дальше
JS
  • 23 января 2024

Спасибо

Здорово, что вы сюда кликнули. Попробуйте ещё сюда.

котики рассуждают о жизни

  • 20 января 2024
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode

Генерация QR-кодов на JS в 4 шага. Node.js + qrcode

🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm, установите их с официального сайта.

Читать дальше
JS
  • 22 ноября 2023
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 22 ноября 2023
Новое в 2023 — text-wrap: balance

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance. Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

h1 {
  text-wrap: balance;
}

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вот пример заголовка <h1>text-wrap: balance и без него.

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

CSS
  • 13 ноября 2023
Знакомство с HTML

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

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 1 ноября 2023
Знакомство с JavaScript

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

🚀 Вам бесплатно доступен тренажёр по HTML и CSS.

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>:

<script>
  alert("Привет, мир!");
</script>

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

<script src="script.js"></script>
Читать дальше
JS
  • 1 ноября 2023