Заметки относятся к курсам HTML и другим курсам направления веб-разработки
Семантическая разметка делает сайт более понятным и удобным для поисковых машин. Информация проще извлекается и представляется в результатах поиска. Стандарт семантической верстки schema.org был анонсирован в 2011 году крупными поисковыми системами. Пример, рассматриваемый в видео о семантической разметке приведен на codepen.io. Валидатор микроразметки Яндекса и Google, а также микроразметка товаров на Яндексе можно найти в соответствующих ссылках. Читать далее Семантическая разметка
В заметке о простом выпадающем меню был показан пример того, как можно с минимальными усилиями построить простое выпадающее меню. Но анимированное выпадающее меню без JavaScript смотрится ещё привлекательней. В текущей заметке приводится пример такого меню. Будьте готовы к тому, что потребуются глубокие знания верстки: знание CSS-свойств display, overflow, transition; знание элементов ul и li, понимание работы строчных и блочных элементов. Читать далее Анимированное выпадающее меню без JavaScript
Простое выпадающее меню может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс :hover. Работающее меню можно посмотреть сразу (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы HTML5 и CSS3». Читать далее Простое выпадающее меню
Задачи по основам CSS призваны закрепить работу с набором базовыми CSS понятиями: CSS селекторы, CSS-свойства, каскадность, CSS-свойства для работы с текстом, оформление фона HTML-элементов и работа с бордюрами. От понимания основ CSS зависит дальнейшая работа верстальщика. Важно помнить, что в отличие от спецификации HTML, о CSS можно прочитать в отдельных модулях W3. Читать далее… Читать далее Задания по основам CSS
Canvas — элемент HTML5, позволяющий создавать растровые изображения при помощи языка программирования JavaScript. При помощи <canvas> можно создавать графики, игры, приложения. Самый простой вариант — создание двухмерной и трёхмерной графики (при использовании WebGL). Набор роликов о работе с этим элементом позволит быстро вникнуть в тему и облегчить дальнейшее знакомство с еще более интересными подходами, использующими канву. Библиотеки Pixie.js, Three.js и другие позволяют визуализировать проекты под многие требования. На курсах JavaScript неизменно показываю пример океана на канве (не мой просто, просто показываю 🙂 ) Читать далее Canvas в HTML: 10 шагов
Задачи по изображениям в HTML охватывают большой набор вопросов: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения, отступы изображения в HTML, изображение на всю страницу (изображение на весь экран), обтекание изображения HTML (обтекание текстом), работа с рамкой изображения, ссылка на изображение HTML. Читать далее… Читать далее Задания по изображениям в HTML
Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML, написание специальных символов. В этот блок входят: задания по HTML синтаксису, задания по валидации HTML, задания по структурной разметке HTML-страницы. Читать далее… Читать далее Задания по основам HTML
Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Нарезка psd, сохранение изображений из psd, создание HTML-шаблона, верстка макета по psd. Одна из интересных тем, это введение в создание темы WordPress или другой CMS. Использование CSS фреймворков для верстки HTML-страницы. Читать далее Задания по верстке psd макета и CSS-фреймворкам
Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Примечание: рассматриваются способы создания, использующие media queries; вариант с jQuery Mobile предполагает изучение дополнительных JavaScript-библиотек. Читать далее Задания на медиа запросы (мобильные сайты)
Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Проверка кроссбраузерности сайта выполняется специальным программным обспечением или онлайн на соответствующих сервисах. Для некоторый проблемных задач уже существуют известные решения: кроссбраузерный border-raidius, кроссбраузерная кнопка загрузки файла и уведомления в полях формы. Читать далее Задания на кроссбраузерность