Всем привет!

Готова еще одна небольшая практическая статья. На этот раз сделаем несложную реализацию модальных окон без каких-либо библиотек и плагинов

Статья доступна по ссылке ниже

https://frontips.ru/variant-modalnyh-okon-na-javanoscript/

Всем привет! ✋🏻

В новой статье посмотрим, как можно просто и быстро создавать и использовать символьные SVG-спрайты

https://frontips.ru/sozdayom-i-ispolzuem-simvolnyj-noscript-sprajt/

---

Всем хороших выходных! ☕️

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

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

В этот раз посмотрим, как сделать простой Preloader при загрузке страниц

Ссылка на статью - https://frontips.ru/kak-sdelat-prostoj-preloader-pri-zagruzke-stranic/

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

Благодарю за ваши ответы в опросе выше! Продолжу писать преимущественно практические статьи

Пока очередная статья в процессе написания, предлагаю, время от времени, публиковать бесплатные, но качественные макеты Figma для практики/портфолио

Поддерживаете ли вы данную идею?

---

Первый макет от https://figmango.com/

Всем привет!

Спасибо, что поддержали идею с публикацией макетов! Немного позже будет еще одна идея на обсуждение :)

---

Теперь к новой статье!

В этот раз посмотрим, как добавлять маски для текстовых полей input

Частая задача при вёрстке макетов - добавление масок для текстовых полей, чтобы пользователь вводил данные именно в том формате, который необходим

Ссылка на статью:

https://frontips.ru/kak-sdelat-masku-dlya-tekstovyh-polej-input/

Друзья!

При анонсировании своих статей решил добавлять кнопку "Поддержать проект"

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

Нажав на кнопку "Поддержать проект", вы перейдёте на страницу https://frontips.ru/donate, где есть три рекламных блока Google Adsense без неприемлемого контента. Я буду благодарен, если вы иногда просто будете переходить по этим рекламным блокам

Также вы можете поддержать проект просто поделившись ссылкой на статью/канал/пост

Ваша поддержка важна для меня! Спасибо!

—-

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

Как и обещал - выкладываю следующий макет для вёрстки (постом ниже) 👇🏼

Макет взят здесь - https://dribbble.com/shots/9693631-SolarBox-Landing-Page-Figma-Freebie

---

Некоторые полезности для вёрстки этого макета:

Шрифт берем на Google Fonts - https://fonts.google.com/specimen/Poppins?query=+Poppins&preview.text_type=custom

Как подключать шрифты описывал в этой статье - https://frontips.ru/podklyuchaem-veb-shrifty/

---

Для секций "Our Focus" и "Our Projects" рекомендую использовать display: grid; - данную технологию уже активно использую во всех текущих проектах

---

Если будут трудности с секцией "About us", можно будет почитать статьи про position и z-index:

Позиционирование элементов - свойство Position - https://frontips.ru/pozicionirovanie-elementov-svojstvo-position/
Свойство z-index и контекст наложения - https://frontips.ru/svojstvo-z-index-i-kontekst-nalozheniya/

---

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

Основы адаптивной верстки - https://frontips.ru/osnovy-adaptivnoj-vyorstki/
Адаптивная навигация - https://frontips.ru/adaptivnaya-navigaciya/

—-

Всем хорошего дня!

—-

Всем привет!

Появилась мысль записать видео с вёрсткой пары секций макета, который опубликовывал в предыдущем посте, залить на 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. В описании к видео есть ссылки на необходимые статьи

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