Рубрика «верстка» - 11

Личный опыт: как нетехнарю стать фронтенд-разработчиком - 1

Фото: Flickr / Scott & Elaine van der Chijs / CC

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

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ-специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.Читать полностью »

Связка HTML и CSS (CSS в большей степени) всегда казалась мне несколько «туманной», хуже всего поддающейся контролю и тестированию. Я придумывал для себя различные правила и пытался так или иначе стандартизировать свой подход, но не было ощущения, что «вот, это оно». Я несколько раз мельком знакомился с БЭМ (и не только), читал статьи на эту тему, но дальше чтения дело не заходило. Но чем дальше, тем сильнее было ощущение необходимости в наличии определенной строгой методологии. В конце концов, я решил попробовать внедрить БЭМ на одном из своих проектов, где без этого, на мой взгляд, было не обойтись. Речь идет о CMS, упрощенную страничку бекенда которой я приведу в качестве примера верстки:

Как я проект на БЭМ переводил… и перевел - 1

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

Математика CSS-шлюзов - 1

CSS-шлюзом (CSS-lock) называется методика из адаптивного веб-дизайна, позволяющая не перепрыгивать от одного значения к другому, а переходить плавно, в зависимости от текущего размера области просмотра (viewport). Идею и одну из реализаций предложил Тим Браун в статье Flexible typography with CSS locks. Когда я пытался разобраться с его реализацией и создать свои варианты, мне с трудом удавалось понять, что именно происходит. Я выполнил много вычислений и подумал, что полезно будет объяснить другим всю эту математику.

В статье я опишу саму методику, её ограничения и лежащую в её основе математику. Не волнуйтесь: там в основном одни сложения и вычитания. К тому же я постарался всё разбить на этапы и украсил их графиками.
Читать полностью »

Любой будущий программист на заре своей карьеры задается вопросом:

А где мне научится <чему-то>?

Как правило, есть несколько путей развития:

  1. ВУЗ
  2. Платные курсы
  3. Самостоятельное обучение

Хочется сегодня поговорить обо всем этом и разобраться куда двигаться лучше и какая у нас вообще ситуация в стране с этими направлениями.

Прежде чем начать рассуждать, давайте вкратце расскажу о себе.

Меня зовут Петров Александр и я уже 5 лет занимаюсь разработкой сайтов. Через год «делания» сайтов я понял, что процесс разработки строится из простых паттернов. Я постоянно использую какие-то техники, чтобы получить тот или иной результат. После этого осознания, у меня сразу же появилось дикое желания поделиться этой информацией с миром, поэтому я открыл курсы обучения разработке сайтов.

В процессе обучения, я постоянно анализировал как люди воспринимают информацию, сколько нужно времени для ее восприятия, каким образом им удобней ее воспринимать и так далее. И вот, спустя 4 года я хочу поделиться своими выводами и рассуждениями.
Читать полностью »

Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать вот этот пост на CSS-Tricks чтобы освежить память.

Я решила создать краткую визуальную шпаргалку по Flexbox для тех моментов освежения памяти после паузы в будущем. Думаю, что у меня получилась шпаргалка, основанная на… шпаргалках.
Читать полностью »

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

Верстка: отображаем пользовательский контент - 1

Читать полностью »

Изображения и текст принадлежат их авторам.

Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.

Сегодня кто только не использует CSS 3 анимацию в своих проектах, тем не менее не только лишь все, но мало кто может делать это правильно. Даже описаны так называемые «лучшие практики», но люди продолжают делать всё по-своему. Скорее всего потому, что просто не понимают, почему всё устроено именно так, а не иначе.

Читать полностью »

Привет, читатель! Я верстаю сайты с 2011 года. Как и большинство верстальщиков того времени, я учился самостоятельно по видео-урокам. За это время, я не раз ошибался с выбором позиционирования блока, выбором тега для элемента и конечно, с названием классов. В этой статье я хочу поделиться своими ошибками.

Читать полностью »

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

Суть в том, что пару месяцев назад нам стали поступать запросы от пользователей, с жалобой, что они не могут разместить объявление на сайте, потому что футер наезжает на кнопку «добавить», со скриншотами, типа таких:

Яндекс убивает бизнес, или будьте осторожны с блоком #main - 1

Казалось бы, просто поехала верстка, футер стал наезжать на контент, при чем тут Яндекс?
Читать полностью »

Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.

wg css html
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js