Курсы html

Заметки относятся к курсам HTML и другим курсам направления веб-разработки

Семантическая разметка

Семантическая разметка делает сайт более понятным и удобным для поисковых машин. Информация проще извлекается и представляется в результатах поиска. Стандарт семантической верстки schema.org был анонсирован в 2011 году крупными поисковыми системами. Пример, рассматриваемый в видео о семантической разметке приведен на codepen.io. Валидатор микроразметки Яндекса и Google, а также микроразметка товаров на Яндексе можно найти в […]

Анимированное выпадающее меню без JavaScript

В заметке о простом выпадающем меню был показан пример того, как можно с минимальными усилиями построить простое выпадающее меню. Но анимированное выпадающее меню без JavaScript смотрится ещё привлекательней. В текущей заметке приводится пример такого меню. Будьте готовы к тому, что потребуются глубокие знания верстки: знание CSS-свойств display, overflow, transition; знание элементов ul и li, понимание […]

Простое выпадающее меню

Простое выпадающее меню может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс :hover. Работающее меню можно посмотреть сразу (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы […]

Задания по основам CSS

Задачи по основам CSS призваны закрепить работу с набором базовыми CSS понятиями:  CSS селекторы, CSS-свойства, каскадность, CSS-свойства для работы с текстом, оформление фона HTML-элементов и работа с бордюрами. От понимания основ CSS зависит дальнейшая работа верстальщика. Важно помнить, что в отличие от спецификации HTML, о CSS можно прочитать в отдельных модулях W3. Читать далее…

Canvas в HTML: 10 шагов

Canvas — элемент HTML5, позволяющий создавать растровые изображения при помощи языка программирования JavaScript. При помощи <canvas> можно создавать графики, игры, приложения. Самый простой вариант — создание двухмерной и трёхмерной графики (при использовании WebGL). Набор роликов о работе с этим элементом позволит быстро вникнуть в тему и облегчить дальнейшее знакомство с еще более интересными подходами, использующими […]

Задания по изображениям в HTML

Задачи по изображениям в HTML охватывают большой набор вопросов: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения, отступы изображения в HTML, изображение на всю страницу (изображение на весь экран), обтекание изображения HTML (обтекание текстом), работа с рамкой изображения, ссылка на изображение HTML. Читать далее…

Задания по основам HTML

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

Задания по верстке psd макета и CSS-фреймворкам

Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Нарезка psd, сохранение изображений из psd, создание HTML-шаблона, верстка макета по psd. Одна из интересных тем, это введение в создание темы WordPress или другой CMS. Использование CSS фреймворков для верстки HTML-страницы.

Задания на медиа запросы (мобильные сайты)

Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Примечание: рассматриваются способы создания, использующие media queries; вариант с jQuery Mobile предполагает изучение дополнительных JavaScript-библиотек.

Задания на кроссбраузерность

Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Проверка кроссбраузерности сайта выполняется специальным программным обспечением или онлайн на соответствующих сервисах. Для некоторый проблемных задач уже существуют известные решения: кроссбраузерный border-raidius, кроссбраузерная кнопка загрузки файла и уведомления в полях формы.