👋 Мы конечно вообще редко стали выходить на связь - это временно. Сейчас проходим обучение, дорабатываем подход к ведению этого канала и канала на ютубе.

Узнали, что существует понятие "Контент-план"😀

До этого все было довольно хаотично, мы созванивались утром, обсуждали о чем написать и если пришла мысль, написали - не пришла, значит не написали. Поэтому иногда долгие промежутки между постами)

Сейчас будут темы заранее продуманы и будет уже некая система😁

Скоро выйдет интервью с нашим новым студентом..
Новый для нас формат - вот небольшой анонс😉

Доброе утро👋

На канале вышло два видео :

- Разбор работы Елены Павлович. Финал по ее первому проекту https://youtu.be/Y6Za4juSqIM (Видео вышло давно, но возможно кто-то не видел)
Елена уже оставила свой отзыв - за что ей отдельное спасибо⭐️

- И вышло интервью с новым студентом Данилом, анонс которого я публиковал выше https://youtu.be/lkKI5wW-X9E
Рекомендую к просмотру - так же с ним скоро будут выходить разборы (уже записано 5 частей и первая часть смонтирована) и даже будут опубликованы видеосозвоны где можно подчерпнуть очень много полезного для себя и учиться на чужих ошибках, а не на своих

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

В общем на связи😉

А нет ли у нас случайно в группе frontend разработчика middle+ на nuxt js?

Обязательно с кейсами и готового показать свой код.

Ищем для плотной работы над одним интересным проектом (сайт для одного из сервисов банка), сроком примерно 1-2 месяца.

Условия, оплата, график работы и тд. все обсуждаем в лс

Если есть желающие и предложение интересно пишите @work_ilya 😉

На ютубе первое видео с разбором верстки Данила https://youtu.be/3-_7-OwpO0Y
Еще мы немного прокачались в плане монтажа, по сравнению с предыдущими видео. В общем - рекомендую к просмотру😉

Так же бонусом делимся макетом, который верстает Данил, можете сверстать себе такую работу в портфолио, если ее хорошо сделать, то выглядит она солидно

Я тут делал анимацию интересную для одного проекта. Делается очень просто, но выглядит эффектно.

За такую работу, если вы работаете на фриласе можно смело просить доплату или сделать бонусом чтобы клиент удивился и рекомендовал вас друзьям)

Анимацию можно докручивать по разным пожеланиям - принцип действия объяснил в видео

И еще на канале уже вышло 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