И еще на канале уже вышло 4 части разборов с Данилом. Включая созвон с ним.

- Новичок верстает лэндинг. Делаем разбор. Часть 1.
- Новичок верстает лэндинг. Часть 2
- Отвечаю на вопросы Данила на созвоне. Часть 3
- Проверяю как новичок сверстал лендинг. Часть 4.

Рекомендую посмотреть если вы начинающий верстальщик/фронтендер.

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

Возможно более понятно кому-то будет связь с киберспортом😀
Кто например играет в доту, кс, валорант и тд ? Вот что бы хорошо играть первая рекомендация от PRO-игроков или тренеров будет - "Смотреть матчи как играют на PRO уровне" - это база и основа всегда.

Так же и в разработке: "Писать код своими руками и смотреть как пишут код другие" - это база и основа, по не многу, по маленьку - но каждый день😉

Сегодня у нас особенный день!
День рождения основателя канала https://t.me/html_practice и моего близкого друга - Ильи😎
Давайте его отхепибёздим🥂🎉

Всем привет👋
Нас очень давно не было видно и слышно, простите - извините😔

На нашем катале на ютуб много контента появилось.

Вот очень полезное видео, рекомендую к просмотру, если не уверены что правильно используете БЭМ:

Что такое БЭМ методология?
Переходи по ссылке и ты узнаешь как создать правильную структуру кода по блокам при помощи БЭМ методологии на практике 🖥

А вот макет который верстался в видео

Записали коротенькое видео в котором рассказали о Flexbox в CSS за 4 минуты. Прям без воды, четко и понятно.

К просмотру https://youtu.be/8InNeKUVGIo

P.S . Кстати у нас новый автор на канале 😉Как вам его подача?

Какие слайдеры лучше использовать при верстке сайтов?

На сегодняшний день самые популярные библиотеки для создания слайдеров:

Swiper (https://swiperjs.com/swiper-api): самый популярный и функциональный слайдер с множеством опций и настроек.

Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/): еще один популярный выбор, который предлагает широкие возможности для настройки.

Slick (https://kenwheeler.github.io/slick/): легкий и гибкий слайдер с расширенными возможностями.

Flickity (https://flickity.metafizzy.co/): еще один удобный выбор, который предлагает гибкую настройку и отличные анимации.

———-

Мы в своих проектах используем либо Swiper (https://swiperjs.com/swiper-api), либо Slick (https://kenwheeler.github.io/slick/). В каждом из них есть свои недостатки и достоинства - будем раскрывать в следующих постах.

Какие библиотеки лучше использовать при верстке сайтов для создания масок в инпутах?

На сегодняшний день существует несколько популярных библиотек. Вот некоторые из них:

Inputmask (https://github.com/RobinHerbots/Inputmask): Это мощная библиотека, позволяющая легко добавлять маски для различных типов данных, таких как даты, телефоны и т. д. Гибкие настройки и поддержка различных форматов делают Inputmask отличным выбором. Мы в своих проектах обычно используем ее.

Cleave.js (https://nosir.github.io/cleave.js/): Cleave.js предоставляет простой и интуитивно понятный способ добавления масок к вашим инпутам. С его помощью легко создавать маски для номеров кредитных карт, телефонов и других форматов.

Vue Input Mask (https://vuejs-tips.github.io/vue-the-mask/): Если вы используете Vue.js, эта библиотека может стать отличным инструментом. Она предлагает простой синтаксис для создания масок и легко интегрируется в проекты на Vue.

Text Mask (https://text-mask.github.io/text-mask/): Это универсальное решение для маскирования текста в инпутах. Так же поддерживает различные форматы, включая даты, телефоны и пользовательские маски.

😆 Гениальнейшие формы для ввода телефона

Потыкать самому можно там https://fun.mishasaidov.com/badux/

Главное не повторяйте в своих проектах😂

В видео показывали как верстать сайты по БЭМ методологии.

В новом видео интегрируем полученную верстку с CMS Wordpress, что-бы у сайта, который мы делаем - была админка.

Показываю основы работы с Wordpress:
1. Регистрация хостинга
2. Установка Wordpress
3. Установка необходимых плагинов
4. Создание новой темы
5. Вынос информации в админку
6. Вынос информации на фронт-часть

Ссылка на видео

Ссылка на хостинг которым мы пользуемся в своих проектах

С Новым годом! 🎉🎄🍾

Начинаем Новый год с новых знаний☺️

Google подвели итоги года и рассказали о множестве возможностей, появившихся в CSS в 2023 году.

Архитектурные основы, работа с цветом, типографика, отзывчивая вёрстка, интерактивные анимации, стилизация нативных контролов → https://developer.chrome.com/blog/css-wrapped-2023

Юхууу🥳
У нас сегодня ровно год с момента создания ютуб канала и именно сегодня отметка перевалила за 1000 подписчиков.

Вот это совпадение🎉

Это только начало пути! Спасибо каждому, кто нажимал "подписаться", кто оставлял комментарии и делился нашими видео. 🙌

Впереди нас ждёт много всего интересного: новые проекты, смелые идеи и, конечно же, куча классного контента, который мы с нетерпением хотим вам показать. Будет интересно и познавательно! 🔥📈

👋 Тут на нашем канале новое видео очень зашло. Прям рекордное количество просмотров.

Я заказал верстку одного и того же сайта за 500р / 1500р / 3000р у разных фрилансеров. В видео разбираю их работы.

👉 Посмотреть можно по ссылке

👉 Ссылка на макет, если кто захочет попрактиковаться

Верстаем с нуля новый макет по нашумевшему сериалу😀
1 часть: верстаем хедер и первый блок. Можно смотреть и повторять😉

Ссылка на макет figma.

Записали видео про бесплатную нейросеть для генерации изображений.

Показывает классные результаты, если сравнивать например с midjourney, то она проигрывает в фото реализме, но при этом умеет генерировать векторные изображения.

А это огромный плюс для веба, можно создавать svg иконки и полноценные иллюстрации для сайта при чем в одном стиле. Такого я вообще не встречал.

А тут еще и полностью бесплатно😀

Ссылка на видеообзор

Ссылка на нейронку

На канале новое видео из рубрики "Сравнение работ фрилансеров", на этот раз сравниваю работы веб-дизайнеров.
Кому интересно - велком😄

https://youtu.be/X_4ydE9dv_4
https://youtu.be/X_4ydE9dv_4
https://youtu.be/X_4ydE9dv_4