Рубрика «html-верстка»
90% программистов совершают эти ошибки. Как писать на Angular грамотно
2025-11-28 в 13:01, admin, рубрики: angular, html, html-верстка, ruvds_статьи, web, верстка сайтов, ошибки, фронтенд, фронтенд-фреймворки
Равномерное размещение блоков разных размеров
2025-11-10 в 11:15, admin, рубрики: css3, html-верстка, javascript, блоки разных размеров, равномерное размещениеКак‑то на одном проекте понадобилось красиво равномерно разместить небольшие блоки‑виджеты в контейнере на странице. Сложность в том, что эти блоки различаются, как по высоте, так и по ширине. При чём нужно учесть адаптивность вёрстки и динамическое изменение содержимого, как контейнера, так и самих элементов — виджетов. Собственно мои изыскания по этой теме и вылились в разработку собственного решения и эту статью, которые, я надеюсь, будут полезны читателям.
Опишем подробно условия/пожелания задачи:
-
как можно меньшие пустоты между элементами и ими и границами контейнера;
Создание шаблона проекта HTML-сайта в Visual Studio
2025-08-19 в 12:50, admin, рубрики: .net, html, html-верстка, template, Visual Studio, проект, шаблонУ меня периодически возникает необходимость сделать простой html/js/css сайт, и я для себя сделал шаблон проекта простого html сайта. Этим проектом и методикой его создания хочу с вами поделиться.
Создаём на диске папку под проект будущего шаблона сайта.
Создаём или копируем первичное наполнение. У меня получилась вот такая структура из папок и файлов:
Webpack. Создание WebP вместе с Jpeg и Png
2023-05-07 в 17:38, admin, рубрики: css, html, html-верстка, jpeg, optimization, PNG, WebP, webpack, Клиентская оптимизация, плагины, сборщик пакетов, сжатие данных, системы сборкиКак вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.
А как же пользователи, устройства которых не поддерживают данный формат?
В этом случае нам помогает тег <picture> или значение image-set свойства background-image. Просто пишем такие магические конструкции и браузер сам выберет тот источник, который понимает:
<!-- for HTML... -->
<picture>
<source type="image/webp" srcset="images/cat.webp">
<img src="images/cat.jpg" width="100" height="100" alt="Cat">
</picture>Читать полностью »Как рисовать красивые соединения с помощью SVG
2023-03-03 в 15:32, admin, рубрики: html, html-верстка, javascript, svg, веб-дизайн, векторная графика, кривые безье, Программирование, Работа с векторной графикой, соединенияМы делаем систему симуляции различных процессов, в которой пользователь с помощью визуального программирования может описать и посмотреть, как работает тот или иной процесс. Иными словами, проверить, как на результат процесса влияют те или иные причинно-следственные связи. Вся система построена на нодах - наглядных представлениях функций, которые принимают, обрабатывают, показывают и в конце концов отправляют данные в следующие ноды.
Как правильно верстать в 2022 году. Часть 1
2022-03-10 в 12:19, admin, рубрики: html, html-верстка, html5, доступность, доступность сайта, Разработка веб-сайтов, семантическая разметка, теги, теги всё равно никто не читаетВступление
Меня зовут Николай и я Frontend-разработчик. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
10 верстальщиков на 30 команд. Вы рехнулись?
2019-05-21 в 14:33, admin, рубрики: css, html, html-верстка, Блог компании Wrike, Разработка веб-сайтов, управление персоналом, управление проектами и командойВсем привет! Меня зовут Костя, и я руковожу отделом верстки в компании Wrike.
В нашем отделе сейчас работает 10 человек, и все эти ребята пришли в компанию в разное время, у них различный опыт и задачи в отдельных командах. При этом все сотрудники — прекрасные специалисты, которые вдесятером умудряются закрывать потребности всего продукта в верстке.
В этой статье я хочу рассказать о том, какие практики помогают нам выровнять общий технический уровень команды, придерживаясь в работе одинаковых подходов, и дать ребятам возможности развития, чтобы и самим быть круче, и улучшать интерфейс нашего продукта.
Responsive design: сохранение формы элементов разметки
2018-10-28 в 14:16, admin, рубрики: css, html, html-версткаОдним из приемов адаптивного веб-дизайна является установка размеров элементов разметки
в процентах относительно размеров контейнера их содержащего. Тем самым достигается пропорциональное изменение размеров всех элементов при изменении размеров окна браузера. Если задаются только горизонтальные размеры, как, например, при верстке страницы, когда важно правильно разместить элементы по горизонтали, мы можем очевидным образом предсказать, каковы будут действительные горизонтальные размеры элементов. При этом однако, наверное, мы ничего заранее не можем сказать об их вертикальных размерах (конечно, если высоты не заданы явно). Отсюда вытекает следующая задача — как сохранять пропорции элементов?
Простой пример из практики. Страница состоит из трех колонок: левое вертикальное меню, картинка, правое вертикальное меню.
При изменении размеров окна картинка должна растягиваться (сжиматься), оставаясь в пространстве между левым и правым меню. В свою очередь пункты меню должны быть представлены квадратными областями, которые при изменении размеров окна должны оставаться квадратными:
Быстрое рабочее окружение для web-разработчиков (Vagrant и PHPStorm)
2018-07-05 в 21:19, admin, рубрики: debug, development, environment, html-верстка, php, phpstorm tutorial, vagrant, vm, web, web-разработка, интерпретатор, отладка php, Разработка веб-сайтов, удаленный интерпретаторКак быстро создать рабочее окружение для web-разработчиков или настраиваем окружение разработки для работы или изучения HTML, CSS, PHP в Windows.
(статья опубликована на Linkedin)
Это мой перевод статьи от автора книг по Ассемблеру и Реверсингу программ. Сейчас он в основном публикуется в США. Думаю пригодиться начинающим и не только.
Начинающие программисты всегда задаются вопросом, с чего начать изучение создание web-сайтов? Поиск в интернете дает много разнообразной информации, но к сожалению только еще больше запутывает начинающих разработчиков. Имея более чем 5 летний опыт преподавания, я много раз видел, как ученики, делая перерывы в компьютерных играх и решившись стать web-разработчиками, пытались настроить окружения разработки. Они начинали перебирать программы для верстки. Они хватались за Sublime Text, Notepad++, Visual Studio Code, NetBeans или PHPStorm. Пытались ставить себе на локальный компьютер WAMP (расшифровывается как Windows, Apache, MySQL и PHP) платформы, такие как Denver, Xampp, Open Server и многие другие. Но так как в голове начинающего разработчика пока нет систематических знаний, нет опыта настройки, довольно редко у кого из них получалось настроить удобное окружение разработки, а у кого получалось, тот понимал, что играть стало сложнее, так как множество дополнительно установленных программ, мешают наслаждаться плавностью в игре.
Данная статья родилась из-за объясняя за многие годы каждому ученику, как все сделать и правильно и удобно.
Еще раз хочу сказать, что мы будем настраивать рабочее окружение в системе Windows для изучения создания сайтов на HTML, CSS и их связки с PHP. Будем называть такой компьютер рабочим, чтобы начинающие web-разработчики привыкали к мысли, что их компьютер — это их источник дохода.
W3C или WHATWG
2017-10-27 в 16:00, admin, рубрики: html, html-верстка, html5, w3c, WHATWG, Блог компании HTML Academy, для начинающих, для новичков
Есть две спецификации HTML: W3C и WHATWG, какой из них верить?
Верьте той, которая больше нравится, но не забывайте сверяться с браузерами.