@frontend_school #статья #HTML #CSS

10 современных раскладок в одну строку CSS-кода

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

@frontend_school #навигация

Навигация на канале

Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:

#интересное - интересные проекты и заметки.

#статья - полезные статьи.

#викторина - ежедневные викторины.

#викторина_недели - еженедельные викторины с несколькими вопросами на время.

#задача - задачи на различные темы и по разным технологиям.

#ответ_на_задачу - способ решения ранее заданной задачи.

#туториал - туториалы и пошаговые инструкции применения различных технологий.

#видео - видео с лекциями и уроками.

#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.

#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.

#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.

Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.

@frontend_school #статья #HTML

Секреты использования семантической верстки в HTML5

В этой статье вы узнаете как пользоваться семантической разметкой в HTML5 и как это делать правильно.

@frontend_school #статья #HTML #CSS

Краш-тест вёрстки

Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.

@frontend_school #статья #HTML #Canvas

Индикатор искусственного горизонта на HTML5 canvas

В этой статье будет представлено воплощение средствами HTML5 одной из необычных идей по визуализации пространственного положения управляемого объекта. Код может использоваться в браузерных играх, имитирующих управление транспортным средством в трехмерном пространстве. Статья очень интересная!

Читать статью

@frontend_school #статья #HTML

Секреты использования семантической верстки в HTML5

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

Читать статью

@frontend_school #статья #HTML

Расширенный HTML

В этой статье вы непосредственно от автора библиотеки узнает обо всех её возможность и преимуществах перед обычным HTML.

Читать статью

@frontend_school #статья #HTML

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

Возможность загрузки файлов является ключевым требованием для многих веб- и мобильных приложений. От загрузки фотографии в социальные сети до публикации резюме на веб-сайте портала о вакансиях file upload — везде. Веб-разработчики должны знать, что HTML обеспечивает нативную поддержку загрузки файлов с небольшой помощью JavaScript. В этой статье обсудят 10 случаев использования поддержки загрузки файлов HTML.

Читать статью

​​Забудьте про div, семантика спасёт интернет

Существует два типа верстальщиков — те, кто используют только div и те, кто использует семантическую вёрстку. Сразу скажем, вторые круче! И в этой статье вы узнаете почему.

Читать статью

@frontend_school #статья #HTML

​​Малоизвестные, но крутые атрибуты в HTML

Все знаю такие HTML-атрибуты, как src, href и прочие, которые применяет каждый фронтенд-разработчик. Но помимо них существуют ещё несколько любопытных, которые не так часто применяются и не так известны, как остальные. В этой статье вы узнаете о некоторых из них.

Читать статью

@frontend_school #статья #HTML

​​Что лучше использовать: ссылки или кнопки

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

Читать статью

@frontend_school #статья #HTML

Ответы на популярные вопросы по HTML

Даже изучая вёрстку, у нас копятся множество вопросов. HTML — технология древних, поэтому многое там может быть не очевидно и путать.

Чтобы вопросы у вас не копились, делимся большой статьёй, где, скорее всего, вы найдёте ответ на то, что вас интересует: https://www.frontendinterviewhandbook.com/ru/html-questions

@frontend_school #статья #html

Большая подборка шпаргалок и инструментов для HTML, CSS и JS

Этому сайту уже много лет, но он всё также не теряет актуальности. Здесь собрано множество шпаргалок, которые позволяют быстро найти нужную информацию. А ещё здесь микро инструменты, которые упростят вам создание сложных стилей и вёрстки.

Сохраняйте и пользуйтесь по ссылке.

@frontend_school #html #css #js

Форма авторизации с капчей

Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.

Ниже вы можете посмотреть, как это работает, а также изучить код:

https://codepen.io/Frontend-Portal/pen/oNRbjXG

#codepen #html #css #javascript

#викторина #html

Учитесь фронтенду с нами — подпишитесь 💻

Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать

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

https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu

#видео #html #css

Учитесь фронтенду с нами — подпишитесь 💻

Как работает атрибут `autocomplete` в HTML и зачем он нужен

autocomplete — это атрибут, который можно применять к элементам форм, таким как <input> или <form>. Он помогает браузеру предлагать пользователю автозаполнение полей формы на основе ранее введённых данных.

Пример:

<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Эл. почта:</label>
<input type="email» id="email» name="email" autocomplete="email"> 

<input type="submit» value="Отправить">
</form>

В этом примере браузер сможет предложить варианты для полей "Имя" и "Эл. почта" на основе данных, которые пользователь вводил ранее.

Значение autocomplete может быть как on (включено), так и off (выключено), а также иметь более конкретные значения, как в примере выше — name, email.

Этот атрибут повышает удобство пользователей, сокращая время на заполнение данных и минимизируя ошибки ввода.

#урок #html

Учитесь фронтенду с нами — подпишитесь 💻

Полный курс HTML & CSS за 6 часов

Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.

Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.

В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.

Успейте посмотреть, пока YouTube ещё работает:

https://youtu.be/TPas02fsuKU

#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe

Учитесь фронтенду с нами — подпишитесь 💻

Любите ARIA? Нет, Кипелов тут не причем

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой.

Основные атрибуты ARIA:

1. aria-label: используется для предоставления текста этикетки для элемента.

   <button aria-label="Закрыть">X</button>
   

2. aria-hidden: указывает, что элемент и его дочерние элементы недоступны для вспомогательных технологий.

   <div aria-hidden="true">Этот текст будет игнорироваться.</div>
   

3. aria-live: сообщает экранному чтецу об изменениях в содержимом, которые происходят динамически.

   <div aria-live="polite">Контент будет прочитан экранным чтецом при изменении.</div>
   

4. aria-expanded: указывает состояние раскрытия или сворачивания элементов интерфейса (например, аккордеоны, выпадающие списки).

   <button aria-expanded="false">Меню</button>
   

5. role: Определяет роль элемента интерфейса, помогая вспомогательным технологиям понять его назначение.

   <div role="alert">Это важное сообщение!</div>
   

Преимущества использования ARIA:
— лучшая доступность: делает ваше приложение доступным для большего круга пользователей;
— социальная ответственность: помогает соблюдать стандарты доступности и поддерживать инклюзивность;
— улучшение SEO: иногда улучшает видимость вашего контента для поисковых систем.

Использование ARIA атрибутов поможет вам создать более доступные и понятные веб-приложения для всех пользователей.

Почитать подробнее можно в этой статье: https://doka.guide/a11y/aria-intro/

#урок #html

Учитесь фронтенду с нами — подпишитесь 💻