Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе. Читать далее
ПодробнееПривет! Меня зовут Оля и я расскажу о том, как мы при помощи гибкой вёрстки настроили отображение контента на широких экранах. Эта статья будет полезна разработчикам веб-сайтов и послужит примером использования CSS при разработке адаптивности сайта для экранов свыше 1921 пикселей. Читать далее
ПодробнееВ этой статье вы узнаете про то как я вижу современную и актуальную карту развития frontend разработчика, я расскажу про основные технологии которые необходимы для старта, и как сделать свои первые шаги в frontend разработке. Читать далее
ПодробнееВсе мы знакомы с широко используемыми HTML тегами, такими как , , , и . Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :) Читать далее
ПодробнееПривет! Меня зовут Сергей Криворучко, я работаю наставником на курсе «Фронтенд-разработчик» в Практикуме. Иногда у студентов возникают сложности с PerfectPixel — расширением Chrome, совмещающим макет из Figma с вёрсткой в браузере. В этом материале я расскажу, как корректно экспортировать макет, установить PerfectPixel, управлять расширением и находить элементы страницы, которые стоит поправить на вёрстке. Для примера взял макет, с которым работают студенты на курсе. Читать далее
ПодробнееЯ на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование. При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную
ПодробнееВсем привет! Обычно tailwind используют для каких-то MVP/админок/не очень больших проектов, но мне кажется, что tailwind, имеет место быть в средних и крупных проектах. Большинство его минусов решаемы, а плюсы чертовски хороши :) В этой статье я распишу его плюсы и минусы и как можно минусы превратить в плюсы. Tailwind больше чем просто MVP
ПодробнееХекслет поговорил с Михаилом Синяковым, Head of Frontend в «РТК ИТ». Мы узнали, как обычно проходят собеседования у фронтендеров, какие задачи они решают, а также на что стоит обратить внимание кандидатам при подготовке к интервью. Читать далее
ПодробнееHtml/css и его вариации, предлагают могучий инструментарий для воплощения самых смелых фантазий дизайнеров. И, наверное, при регулярном и глубоком погружении в тему верстки, весь этот инструментарий "прокэширован в подкорке" и "вертится на кончиках пальцев"... А как быть тем, кто заходит в сияющий мир CSS лишь изредка - по необходимости? (А еще под раздачу попадут React-либы MUI и AntD!) Читать далее
ПодробнееПривет, Хабр! Меня зовут Александр Водолазских. Я живу в Новосибирске и я работаю Frontend Domain Lead в СберМаркете. Сегодня хочу немного поговорить об опыте работы с Tailwind CSS — utility-first CSS framework. Поделюсь болью и радостью, которые возникли при его эксплуатации. Читать далее
ПодробнееВ статье собраны 30 советов для новичков во FrontEnd сфере, которые возможно сделают ваш код чище и приятнее. Все советы постарался написать понятным языком, чтобы даже самый зелёный новичок всё понял :) Читать далее
ПодробнееВ данной статье будут описаны принципы создания шаблона в формате XML для дальнейшей самостоятельной модификации. Стоит обратить внимание, что у каждого сайта свой набор полей, их можно и нужно прописывать в шаблоны самостоятельно. Я лишь показываю, что штатными средствами движка DLE можно генерировать XML файлы которые будут корректно обработаны при импорте на внешние сайты. Шаблонизатор DLE позволяет легко адаптировать внешний вид сайта для начинающих вебмастеров. Главная фича шаблонизатора -
Подробнее