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

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

РКН: shorturl.at/qinly
Download Telegram
👨‍💻[Урок 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 часть - третий блок, десктопная версия)

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

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

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

Всем привет! Сегодня мы научимся делать интересную анимацию, где фон добавляется к объекту.

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

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

Всем привет! В предыдущем уроке мы закончили вёрстку 3го блока сайта вебинара. Мы доделали полную версию, но ещё не адаптировали его под мобильные устройства. Этим мы сегодня и займёмся. Поехали!

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

Совсем недавно мы доделали третий блок сайта вебинара. Пора приступить к блоку с преимуществами.

Этот экран мы сделаем на СТАНДАРТНЫХ блоках. Да, вы не ослышались. Всё будет просто и не больно)) Погнали!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
👨‍💻 [Фича 11] Замена элементов при скролле (анимация)

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

Эффект круто подойдёт при разработке экранов продукции, презентации и многих других тематиках. Этот урок - мастхэв. Приятного изучения!

🔥ИЗУЧИТЬ УРОК | ВСЕ УРОКИ
Сайтодел - материал 5.zip
49.6 MB
☁️[Материал] К уроку "Фича 11".

Мокап PSD и PNG файлы.