Всем привет!

Появилась мысль записать видео с вёрсткой пары секций макета, который опубликовывал в предыдущем посте, залить на Youtube, а сюда выложить результат - то есть архив с вёрсткой этих секций

Но сразу оговорюсь, что это будет эксперимент - просто видео процесса вёрстки используя Gulp/Pug/Stylus, без комментариев, монтажа и так далее

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

Так как большинству, всё-таки, интересно видео процесса вёрстки, то для первого раза решил записать вёрстку самой первой секции с Header. Очень надеюсь, что сегодня-завтра уже получится опубликовать видео, и если понравится, то продолжим :)

---

Пока хотел бы поделиться некоторыми полезными ресурсами, которые постоянно использую, при необходимости вставить фото/видео-заглушки при вёрстке проекта

https://unsplash.com/ - огромное количество качественных бесплатных фото
https://coverr.co/ - бесплатные фоновые видео (которые в секциях Free Stock Videos)
https://picsum.photos/ - в зависимости от заданного URL, выдает изображение необходимого размера

Возможно, вы уже используете данные ресурсы, но кому-нибудь, думаю, будет полезно ;)

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

Опубликовал видео процесса вёрстки первой секции макета 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