Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?
Рубрика «верстка» - 6
Кроссбраузерная вёрстка
2017-11-02 в 14:17, admin, рубрики: css, html, pixel perfect, Блог компании HTML Academy, браузеры, верстка, для начинающих, для новичков, кросс-браузерность, кроссбраузерность, новичкамЗадачка про страницу в три столбца, один из них в сто пикселей
2017-10-30 в 10:26, admin, рубрики: css, html, web-разработка, верстка, лабораторные работы, оформление кодаЭта статья задумывалась как небольшое руководство к выполнению лабораторной работы для студентов, начинающих изучать веб-технологии.
Разработать страницу, состоящую из трех разноцветных столбцов. Левый столбец шириной 100 пикселей, центральный и правый занимают все оставшееся до края страницы место равномерно. Высота всех трех 100% страницы. Не должно быть скроллбара и белых полос вокруг страницы.
После нескольких лет работы во фронтенд-разработке, задачи подобные этой классифицируются как «5 минут, сто раз так делал», ведь, казалось бы, страница в три столбца, что может быть проще. Но проблемы у студентов возникли на всех стадиях решения задачи: от понимания сути и разработки структуры до защиты лабораторной работы.
И если, обучение чтению условия задачи и ораторскому мастерству лежит за гранью предмета «Основы веб-технологий», то отрефлексировать поразившее меня многообразие идей структурирования такой простой раскладки кажется интересным.
Студенты продемонстрировали в общей сложности около десяти разных вариантов решения этой задачи. От совсем никуда не годных до вполне приемлемых. Рассматривать я, разумеется, буду только вменяемую половину, то есть будет пять примеров.
Читать полностью »
Как фокус помогает
2017-10-20 в 16:00, admin, рубрики: css, css3, html, html-верстка, html5, Блог компании HTML Academy, верстка, для начинающих, для новичков, доступность, доступность навигации, Разработка веб-сайтов
Менеджер и дизайнер заставляют везде убирать аутлайн. Расскажите им, что это плохая идея!
Вы совершенно правы, с удовольствием расскажем.
Кому нужны флексы
2017-10-06 в 15:00, admin, рубрики: css, css3, flexbox, html, html5, Блог компании HTML Academy, веб-верстка, верстка, для начинающих, для новичков, Разработка веб-сайтов, флексбокс, флексы
Кому нужны флексы, если на них не делают сайты?
Делают, 12% сайтов уже используют флексы. А нужны они всем нам, чтобы было удобнее верстать.
Фетиш LaTeX (или Не пишите в LaTeX! Он только для вёрстки)
2017-10-04 в 14:12, admin, рубрики: AbiWord, emacs, free software, latex, libreoffice, markdown, open source, org-mode, pandoc, Scrivener, tex, Texts, word, Zotero, верстка, евангелизм, научные статьи, пропаганда, текстовый процессор, текстовый редактор
Сейчас то время года, когда студенты выбирают себе классы для обучающих навыков. Один из навыков, который будет поощряться, — обучение LaTeX. Другие могут придти к использованию LaTeX по другим причинам: кто-то хочет сверстать книгу; кто-то слышал, что LaTeX может иметь отношение к журналу Digital Humanities; ну и так далее. Я написал это эссе в качестве предварительного введения в LaTeX. Оно не научит вас использовать редактор (я не имею квалификации для этого!), но я попытаюсь популярно объяснить тем, кто ещё не использует LaTeX, для чего именно он нужен. Это поможет им понять, стоит ли LaTeX усилий на его изучение (не говоря уже о том, чтобы просто заставить его работать). Почему такое большое эссе? Потому что многие из евангелистов превратили LaTeX в фетиш и распространяют дезинформацию о его истинных достоинствах. Хочу прояснить ситуацию.
1. Что такое LaTeX?
По словам официального сайта, LaTeX — это «высококачественная система набора и вёрстки» и «стандарт де-факто для обмена и публикации научных документов». С этим никто не спорит.
Читать полностью »
Зачем нужны заголовки
2017-09-29 в 16:00, admin, рубрики: html, html-разметка, html5, Блог компании HTML Academy, верстка, для начинающих, для новичков, разметка, Разработка веб-сайтов, семантическая верстка, семантическая разметка
Зачем нужны заголовки и какие теги для них использовать?
Этот вопрос нам задают чаще всего.
Кастомные свойства
2017-09-22 в 16:00, admin, рубрики: css, css3, Блог компании HTML Academy, верстка, верстка сайтов, для начинающих, кастомные свойства, Разработка веб-сайтов
Зачем нужен БЭМ
2017-09-20 в 16:00, admin, рубрики: css, Блог компании HTML Academy, БЭМ, верстка, для начинающих, для новичков, методологии разработки, новичкам, Разработка веб-сайтов
Переходим на сторону сервера с bem-express
2017-09-05 в 17:00, admin, рубрики: bem-tools, deps, html, javascript, open source, Блог компании Яндекс, БЭМ, верстка, Разработка веб-сайтов— Сначала вы его отрицаете, потом вы его ненавидите, а потом вы не можете без него жить.
из доклада Артема Курбатова «БЭМ: мастер-класс»
Методология БЭМ существует достаточно долго и принята на вооружение в Google, EPAM Systems, BBC, Альфа-Банке. При этом она все еще вызывает беспокойство у типичного разработчика и менеджера проектов среднего звена.
У некоторых смельчаков изучение БЭМ не ушло дальше ограничения возможностей CSS для получения более предсказуемых результатов. И хотя БЭМ давно вышел за пределы верстки, до сих пор на вопрос «Знаете ли вы БЭМ?» можно услышать: «Конечно, это про подчеркивания в классах».
Если ваше представление о БЭМ близко к этому, я отвечу вам словами работодателя при приеме на работу новоиспеченного выпускника: «Забудьте о том, что вы слышали о БЭМ ранее». Методология БЭМ настолько интересна, насколько большинству о ней ничего не известно. Чтобы понять всю прелесть БЭМ, необходимо иметь представление обо всех технологиях, библиотеках, фреймворках и инструментах, которые БЭМ предоставляет. Изучите их, оставайтесь инопланетянином, ребенком, который удивляется тому, с чем взрослые смирились.
CSS: введение в единицу длины ‘fr’
2017-06-21 в 4:32, admin, рубрики: css, fr unit, верстка, единица fr, перевод, Разработка веб-сайтов
Пока все активно делятся своими впечатлениями от CSS-гридов, я не слышал, чтобы кто-то столь же много говорил о новой единице длины в CSS — fr (см. спецификацию). И теперь, когда браузеры все лучше начинают поддерживать ее, я думаю, пора взглянуть на то, как ее можно использовать в сочетании с этой техникой вёрстки, поскольку это дает нам ряд преимуществ. Главные из них — это более понятный и удобный в сопровождении код.Читать полностью »