Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.7K subscribers
1.3K photos
90 videos
28 files
2.33K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

РКН: shorturl.at/qinly
Download Telegram
👨‍💻[Урок 22] Первый сайт на Zero Block (4 часть - работаем с изображениями и анимацией)

Всем привет! Продолжаем большую работу над сайтом вебинары на Zero Block.

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

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​👨‍💻[Фича 5] Делаем зацикленную круговую анимацию

Всем привет! Подготовил совсем небольшой урок, наверное самого распространённого эффекта с анимации, который дизайнеры делают на тильда.

Анимация простая, делается в три клика, выглядит эффектно. Поехали!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
👨‍💻[Урок 23] Первый сайт на Zero Block (5 часть - завершаем работу над главным блоком)

Привет, друзья! Уже жду момента, когда мы приступим к серьёзным действиям, а пока нам нужно завершить работу над главным блоком нашего сайта вебинара.

Сегодня мы установим кнопки, проверим работу и опубликуем ГОТОВУЮ страницу. После я создам небольшой опрос, прошу оставьте свой голос - так я пойму, какой контент вам интересен. Успехов в изучении!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Сильно растянул уроки по Zero Block? Делать их более объёмными или оставить короткими?
Anonymous Poll
67%
Я за короткие уроки, но подробные
33%
Делай длиннее, слишком мало чтива
👨‍💻[Урок 24] Первый сайт на Zero Block (6 часть - оптимизация на мобильные устройства)

Всем привет! Мы закончили главный блок сайта на Zero, но не оптимизировали его под мобильные устройства.

Сегодня мы займёмся адаптацией, включим анимацию на мобильных устройствах и наконец-то завершим первый блок. Поехали обучаться!)

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​👨‍💻[Фича 6] Делаем эффект бегущей строки

Всем привет! В данном мини-уроке мы научимся делать эффектную и простую пошаговую анимацию "Эффект бегущей строки".

Делается в несколько кликов, повторить сможет каждый. Приступаем.

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
👨‍💻[Урок 25] Первый сайт на Zero Block (7 часть - второй блок)

Всем доброго утра! Недавно мы закончили работу над первым блоком, самым сложным блоком всего сайта, как я считаю.

Сегодня мы замутим второй блок. Сделаем всё быстро и просто. Не забудьте скачать материал номер 3 с PSD макетом данного блока, так вам будет проще работать. Всем успехов.

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​👨‍💻[Фича 7] Анимация перемещения объектов

Всем привет! Результаты голосования определили, что нужно всё таки заняться анимацией. Хотели? Держите! Анимация перемещения объектов по осям.

Скилл важный, анимация прикольная, применять можно везде. Поехали учиться!)

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
👨‍💻 [Урок 26] Первый сайт на Zero Block (8 часть - адаптируем второй блок)

Всем привет! Мы доделали второй блок, но только на десктопной версии. Пора бы адаптировать его под мобильные устройства.

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

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​👨‍💻[Фича 8] Триггерная анимация на Tilda

Привет, братва! Не так давно тильда выкатила обновление, в котором они добавили долгожданную триггерную анимацию. Я просто не мог не рассказать о ней.

Давайте разберёмся, как она работает и как создать анимацию со взаимодействием нескольких объектов. Поехали!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Друзья, небольшое обращение.

Хочу поговорить на тему рекламы на канале. Сегодня мне в личку написала одна из подписчиц, с претензией, что я якобы обманываю вас, публикуя рекламу.

Хочу сказать твёрдо - реклама на канале будет, это движок всего этого дела.

Я вложил солидную сумму, чтобы привлечь сюда людей, чему я очень рад. Ежедневно трачу время на написание статей (уроков) для вас и со многими общаюсь в личке, бесплатно отвечая на ваши вопросы.

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

Все уроки - мои. Все их написал я своими руками, за счёт своего опыта.

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

Всем большое спасибо за понимание, до скорых встреч.

Ваш, Сайтодел.
​​👨‍💻[Фича 9] Фиксирование элемента при сролле страницы

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

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

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​☁️ [Материал 4] Макет третьего блока для вебинара по инвестициям (psd)

Доброго вечера. Наконец-то доделал макет третьего блока сайта с вебинаром по инвестициями. Тут у нас будет список спикеров.

Тексты брал из вики, фото из гугла. В прочем, все нужные файлы как всегда ждут вас в архиве 😊 Загружайте, материал понадобится для дальнейших уроков по Zero Block.

Все иллюстрации со свободной лицензией! Не используются в коммерческих целях.

Всем хорошего вечера!)

🔥СКАЧАТЬ МАТЕРИАЛ | ВСЕ УРОКИ
​​👨‍💻[Урок 26] Подключаем формы tilda к telegram

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

Сегодня я покажу, как интегрировать телеграм в тильду. Получать все заявки мы будем прямо в мессенджер, что в разы удобнее, чем получать их на сайте. Поехали!)

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Задумался о записи ряда видеоуроков, в ходе которых мы разберём сложные моменты, при работе с Тильдой.

Я уверен на все 100, что видео-формат будет намного проще для восприятия, как минимум более наглядней, чем текстовые уроки.

Жду вашего мнения. Вопрос в том: стоит или не стоит записывать видео и на какой площадке будет удобнее его смотреть? Голосуйте!
👨‍💻[Урок 27] Первый сайт на Zero Block (9 часть - начинаем третий блок)

Всем привет. Продолжаем разработку сайта на Zero Block. Напомню, что мы сверстали уже 2 блока нашего сайта вебинара.

Сегодня начнём вёрстку третьего блока, а начнём мы с интересного эффекта для заднего фона. Поехали!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
👨‍💻[Урок 28] Используем несколько шрифтов сразу

Всем привет! Одной из неприятных особенностей тильды является то, что сервис позволяет нам использовать только один шрифт на сайте. Шрифт любой, но один.

Сегодня мы научимся загружать и использовать несколько шрифтов сразу. Поехали!)

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
​​☁️[Подборка] Крутые веб-сервисы, которые вам точно пригодятся

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

1. TINY PNG - сервис позволяет ужимать в размерах .png файлы без потери качества. Меньше файл - работа сайта быстрее. Всё просто.

2. BOXY SVG EDITOR - я неоднократно говорил, что логотипы и прочие векторные элементы лучше заливать в формате .svg. Если вы не пользуетесь иллюстратором, то этот сервис для вас. Интуитивно понятный редактор векторных файлов.

3. FONT PAIR - Простой сервис, который поможет пододобрать шрифтовую пару. Например мы определились с шрифтом заголовка и нам нужен второй шрифт для остальных текстов. Этот сайт точно поможет.

4. REMOVE BG - Нейросеть, которая умеет удалять фон с изображения и выдавать вам обрезаный объект в png. Если лень делать это руками - велкам, remove bg поможет.

5. WEBFONT - просто хороший сервис с бесплатными шрифтами. В основном пользуюсь им или гугл шрифтами.

Друзья, оцените данную рубкику. Если соберём более 1000 огоньков - буду делать подобные подборки из своего арсенала как минимум раз в неделю. Всем пис!
👨‍💻[Урок 28] Первый сайт на Zero Block (10 часть - третий блок, десктопная версия)

И так, продолжаем работу над третим блоком нашего сайта вебинара. В предыдущем уроке мы сделали анимацию фона.

Сегодня мы добавим остальные объекты, сделаем анимацию изображений и посмотрим как выглядит весь сайт на ПК версии. Погнали!)

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ