Итак, друзья!

Опубликовал видео процесса вёрстки первой секции макета SolarBox - https://youtu.be/lCvxYXI2pic

Как и говорил, это видео эксперимент:
- видео не обучающее, а просто наглядный процесс
- без комментирования голосом, но добавил тайм-коды

После добавления тайм-кодов, полезно было увидеть сколько времени занимает та или иная задача

На видео показан весь процесс с самого начала, как обычно происходит вёрстка нового проекта (создание GitHub репозитория, запуск Gulp-сборки, импорт и анализ макета в Figma, подключение шрифта и так далее)

Единственное, что в видео не показано, это установка Node.js и Gulp, поэтому в описании к видео есть ссылки на статьи по этим моментам. А также другие статьи, которые позволят вам восполнить пробелы в знаниях, если что-то будет не понятно

Приятного просмотра!

---

Ссылка на репозиторий с результатом - https://github.com/hqdrone/solarbox

---

​​Приветствую!

Пока дедлайны не позволяют уделять достаточно времени для новых статей, опубликую еще один макет Figma в тёмных тонах

В макете используется платный шрифт Graphik, поэтому подобрал бесплатный аналог этого шрифта в Google Fonts - https://fonts.google.com/specimen/Roboto?query=robot&preview.text_type=custom

Если интересно, шрифт подбирал здесь - https://fontsarena.com/blog/free-graphik-font-alternatives/

Макет взят здесь - https://figmaland.com/templates/dark-startup

Файл макета ниже👇🏼

​​Приветствую!

Верстать сторонние макеты для практики/портфолио - это хорошо. Но еще хорошая практика, когда появляется какая-то своя идея, которую вы стараетесь реализовать

HTML-верстальщик, в большинстве случаев, не дизайнер, но должно быть какое-то внутреннее чувство прекрасного :)

Собрал немного полезных ресурсов, которые помогут визуально оформить ваш pet-проект

http://colormind.io/bootstrap/ - генератор цветовых схем с наглядным примером применения

https://cssgradient.io/ - генератор CSS градиентов

https://brumm.af/shadows - генератор плавных CSS теней

https://personas.draftbit.com/ - генератор аватаров

https://getwaves.io/ - генератор волнообразных SVG фигур

https://www.blobmaker.app/ - генератор каплевидных SVG фигур

https://favicon.io/favicon-generator/ - генератор favicon

https://cssfx.netlify.app/ - коллекция CSS эффектов

Всем привет!

Каналу/блогу около 5 месяцев. За это время мной было написано чуть больше 40 статей на тему вёрстки/фронтенда. Часть из них - теоретические, и большая часть - практические

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

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

При написании статей сам узнаю много нового/интересного/полезного и буду дальше стараться делиться этим с вами!

Продолжим развиваться вместе ;)

​​Друзья!

Чтобы вам получить больше пользы от моего канала, придумал небольшое практическое задание

Нарисовал небольшой макет в Figma, который вы попытаетесь сверстать самостоятельно

Для тех, у кого возникнут сложности в написании структуры или вы сомневаетесь в ее правильности, завтра скину архив с заготовкой, который будет содержать вариант структуры HTML, и вы попробуете самостоятельно написать к ней CSS стили

И уже послезавтра скину архив с полноценной вёрсткой данного макета, с которой вы сможете сравнить свой результат

В этом небольшом макете можно потренировать БЭМ, CSS-переменные, CSS Grid Layout, SVG Sprite, Flexbox и так далее

На некоторую часть вопросов, которые могут возникнуть при вёрстке, можно найти ответы в моих статьях - https://frontips.ru/

Необходимо добиться поведения, как в видео

Макет постом ниже👇🏼

Читайте, тренируйтесь, развивайте свои навыки ;)

​​Продолжим ;)

Кто уже справился - мои поздравления! Завтра сможете сравнить свой вариант с моим, возможно, подглядите что-нибудь полезное для себя

Кто еще не успел начать и хочет попробовать сам, пока пропустите данный пост, и сможете вернуться к нему позже

Тем, у кого возникли трудности со структурой, ниже будут два архива:

clean-template - шаблон с готовой структурой, вам необходимо написать CSS стили самостоятельно

gulp-pug-stylus - для тех, кто владеет gulp/pug/stylus, готова структура в app/pug/index.pug, стили пишем в app/styl/main.styl (подробнее про gulp-сборку здесь - https://frontips.ru/ispolzuem-gulp-dlya-uskoreniya-processa-verstki/)

Кто не владеет gulp/pug/stylus, но хочет ознакомиться, можете посмотреть видео(просто процесс вёрстки, без комментариев) - https://youtu.be/lCvxYXI2pic. В описании к видео есть ссылки на необходимые статьи

Уже завтра скину готовый результат ;)

​​Всем привет!

Как и обещал, выкладываю окончательный результат - ниже будет два архива

dist - готовая вёрстка, добавлены CSS стили

project - проект на gulp, добавлены Stylus стили

Если еще не успели попробовать сами, пока проигнорируйте, вернётесь позже

Сегодня-завтра будет опубликована новая статья, для которой буду использовать данную вёрстку

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

​​В продолжение нашей совместной вёрстки макета - новая практическая статья ;)

В jQuery есть метод siblings(), который позволяет получить соседние элементы. В этой статье посмотрим, как добиться того же результата на чистом JavaScript и сделаем довольно интересный визуальный эффект, используя данную возможность

Ссылка на статью - https://frontips.ru/kak-poluchit-sosednie-elementy-bez-jquery/

Нашёл еще один приятный и несложный макет для практики/портфолио

Макет взят здесь - https://www.figmaresources.com/resources/decbase-template

Превью макета - https://www.figma.com/file/Y3KCo2dzmj1fL8IoBmA6H8/Decbase?node-id=0%3A1

Копировать себе в Figma - https://www.figma.com/file/Y3KCo2dzmj1fL8IoBmA6H8/Decbase/duplicate

---

Данные материалы могут быть полезны при вёрстке этого макета

Для более гибкой работы с изображениями - https://frontips.ru/zoom-effekt-masshtab-i-pozicionirovanie-izobrazheniya/

В качестве слайдера можно использовать Swiper - https://frontips.ru/variant-vertikalnogo-slajdera-s-prevyu-na-osnove-swiper/ (в статье можно посмотреть, как подключить слайдер и некоторые настройки)

Для числа "20" с фоновым изображением - https://frontips.ru/zalivka-teksta-gradientom-ili-izobrazheniem/

Для иконок социальных сетей - https://frontips.ru/sozdayom-i-ispolzuem-simvolnyj-noscript-sprajt/

Если будут еще вопросы, попробуйте воспользоваться поиском - https://frontips.ru/search

Новое практическое задание :)

Необходимо добиться поведения, как в примере на видео

Используем только CSS, круги 200x200 пикселей, адаптивности пока не нужно

---

Завтра/послезавтра скину свой вариант реализации

Через некоторое время, на основе этого примера будет написана статья (возможно, даже не одна)

---

В архиве ниже, будет 2 варианта шаблона:

Practice#2 - чистые html/css

Practice#2(gulp-pug-stylus) - сборка gulp/pug/stylus

Опубликовываю свою реализацию вчерашнего практического задания

Внутри архива ниже будет:

Practice#2-result - чистый html,css

Practice#2(gulp-pug-stylus)-result - сборка gulp/pug/stylus

Можете пока сравнить со своим результатом

И уже завтра постараюсь дописать и опубликовать новую статью

Всем привет!

Возможно, не самая популярная тема - тема доступности, но решил написать ознакомительную статью по media-запросам any-pointer и any-hover с небольшим практическим примером, так как мне показались интересными возможности их применения

Ссылка на статью - https://frontips.ru/izmenyaem-povedenie-elementov-pri-nalichii-tochnogo-ukazatelya/

Сегодня при вёрстке очередного макета, снова натолкнулся на один часто встречающийся кейс, и решил написать об этом небольшую статью

Когда в дизайне элемент навигации при наведении выделяют другим начертанием шрифта, например bold, элемент становится шире и занимает больше пространства, чем раньше, при этом соседние элементы сдвигаются на некоторое расстояние, что является некорректным поведением

Думаю статья будет полезной, если вы встретите такой дизайн, но еще не решали данную задачу

Ссылка на статью - https://frontips.ru/izmenit-nachertanie-shrifta-pri-navedenii-bez-sdviga-sosednih-elementov/