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

Добавил на сайт тёмную тему и установил её по-умолчанию.

Подробнее про создание тёмной темы писал в статье по ссылке ниже

https://frontips.ru/css-peremennye-kak-sdelat-temnuyu-temu/

---

Переключить тему можно в выпадающем меню, нажав на иконку лампочки.

Первая статья в 2021 году уже доступна. Приятного чтения!

—-

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

https://frontips.ru/pozicionirovanie-elementov-svojstvo-position/

Практическая статья по созданию адаптивных вкладок (tabs), используя JavaScript уже доступна. Приятного чтения!

https://frontips.ru/variant-adaptivnyh-vkladok-tabs-na-javanoscript/

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

https://frontips.ru/plavnoe-izmenenie-vysoty-bloka-bez-jquery/

Привет всем подписавшимся!

Новая статья уже в процессе написания. Пока что вы можете ознакомится с уже имеющимися статьями, в которые я вложил много времени и труда.

Мой блог, как и этот канал, достаточно молодые (около 3-4 месяцев), но уже имеются положительные отзывы, и это вдохновляет продолжать писать и развивать проект!

Давайте развиваться вместе! ;)

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

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

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

https://frontips.ru/variant-vertikalnogo-slajdera-s-prevyu-na-osnove-swiper/

---

Благодарю за интерес к моему каналу/блогу!

Всем привет!

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

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

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

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