Михаил Каташевцев
Михаил Каташевцев
  • 45
  • 61 393
Верстка figma шаблона с использованием bootstrap 5
Figma шаблон:
www.figma.com/community/file/993910904620677970/travel-website-landing-page?searchSessionId=lt11zgxl-jairvf1kutb
Сверстанный файл:
disk.yandex.ru/d/mEb7JEhbFyEUnQ
00:00:00 Выбираем шаблон для верстки
00:01:07 Создаем проект
00:01:58 Общий подход к верстке
00:02:16 Навигация. Создаем bootstrap навигацию
00:02:40 Figma. Использование Alt и двойного клика в figma
00:03:45 Figma. Замена шрифта в figma
00:04:45 Навигация. Копируем текст навигации
00:08:30 Навигация. Копируем логотип
00:10:30 Навигация. Создаем файл main.css и делаем отступы
00:14:38 Figma. Копируем css-стиль с элемента в figma
00:16:20 Секция 1. Загоняем текст и расположение блоков
00:19:38 Секция 1. Оборачиваем в контейнер
00:20:14 Секция 1. Устанавливаем имена классов для блоков
00:20:55 Секция 1. Копируем css-стили
00:21:28 Секция 1. Добавляем шрифты Poppins и Volkhov
00:23:40 Секция 1. Настраиваем глобальный шрифт для body
00:24:27 Секция 1. Стилизуем кнопочки
00:27:48 Подключаем bootstrap-icons
00:29:30 Секция 1. Ставим отступы между элементами
00:31:14 Секция 1. Подключаем фоновые картинки
00:32:58 Секция 1. Подключаем картинку девушки
00:36:49 Секция 2. Загоняем текст, картинки и расположение блоков
00:43:07 Секция 1. Делаем подчеркивание слова
00:44:54 Секция 2. Копируем стили
00:48:35 Секция 2. Верстаем плашку
00:50:45 Секция 2. Эффект наведения на плашку
00:56:05 Секция 2. Красный квадрат у активной плашки
01:00:24 Секция 2. Заливаем весь слайд одним цветом
01:03:05 Секция 3. Загоняем текст и расположение блоков
01:07:26 Figma. Скачиваем оригиналы картинок с помощью плагина
01:08:20 Секция 3. Подключаем картинки
01:09:22 Секция 3. Копируем стили
01:12:20 Секция 3. Верстаем плашки
01:13:20 Секция 3. Делаем выплывающий блок с информацией
01:18:20 Секция 3. Доверстываем блок с информацией
01:21:20 Секция 3. Добавляем отступы
zhlédnutí: 518

Video

Electron+Vue+TypeOrm разработка десктопного приложения
zhlédnutí 517Před 7 měsíci
В этом видео я покажу как писать десктопное приложение на electron с использованием реактивного фреймворка Vue и общения с БД через TypeORM. Причем чтобы разработка была максимально комфортной Код из видео: github.com/SevenLines/ElectronVueTypeOrmExample 00:00 Введение 00:50 Создаем проект по шаблону 02:40 Настраиваем TypeORM 06:08 Создаем модель Student 07:50 Настраиваем и прогоняем миграции 1...
Разработка на Python / PySide6 декомпозиция приложения
zhlédnutí 967Před rokem
Декомпозиция это разбиение большого файла на небольшие кусочки, является одним из этапов в рефакторинге кода Файлы к видео disk.yandex.ru/d/zumYPGuvKtqnxw 00:00 Проблема большого файла main.py 01:20 Выносим класс PopulationModel в отдельный файл 02:23 Выносим EditDialog и UpdateDialog в отдельный файлы 04:35 Группируем файлики в папки 05:55 Уносим код запроса к БД из load_population 09:28 Работ...
Разработка на python / PySide6 работа с QTableView
zhlédnutí 4,1KPřed rokem
Файлы к видео: disk.yandex.ru/d/_se8dzo1gRL9hQ 00:00 Добавляем компоненту QTableView на форму 01:50 Создаем класс ItemsModel 03:13 Привязываем модель к виждету 03:45 Указываем количество строк и столбцов 04:31 Работаем с методом data 07:35 Настраиваем заголовки через headerData 10:31 Пробрасываем реальные данные в модель 12:50 Активируем перерисовку таблицы при обновлении данных 13:48 Выводим р...
Разработка на python / PySide6 гистограмма
zhlédnutí 659Před rokem
00:00 Добавляем график в designer 01:40 Пробуем выводить гистограмму 04:15 Создаем ось вручную 05:00 Пишем значения на столбиках 06:50 Добавляем второй набор столбиков 07:50 Делаем горизонтальную гистограмму 09:10 Группируем данные по региону и году 10:42 Формируем список значений уникальных годов 11:43 Выводим графики по реальным данным
Разработка на python / PySide6 круговая диаграмма
zhlédnutí 595Před rokem
00:00 Добавляем еще один QChartView 01:55 Создаем метод для отрисовки круговой диаграммы 02:30 Группируем данные по регионам 04:03 Пробуем рисовать круговую диаграмму 06:10 Выводим данные по всем регионам
Разработка на python / PySide6 + Sqlite вывод статистики
zhlédnutí 1,1KPřed rokem
00:00 Вспоминаем интерфейс 00:37 Добавляем QLabel для вывода статистики 02:40 Добавляем метод для вывода статистики 04:05 Сохраняем сырые данные в self.rows 05:30 Находим максимальный и минимальный элемент 08:10 Выводим информация в лейбл 09:35 Активируем режим RichText у лейбла 10:20 Используем html-теги для стилизации статистики 12:40 Используем style для тонкой настройки отображения 14:35 До...
Разработка на python / PySide6 создание линейного графика
zhlédnutí 1,2KPřed rokem
00:00 Добавляем QChartView на форму 03:15 Корректируем вывод статистики 04:00 Добавляем метод для вывода графика 04:25 Пробуем вывести параболу 07:30 Группируем исходные данные по региону 11:05 Строим график по данным Иркутской области 12:48 Подкручиваем значения на осях 13:45 Обобщаем работу с регионом 14:35 Реализуем вывод по всем регионам 16:35 Улучшаем вид графика 19:20 Подводим итоги 22:20...
Разработка на Python / Создание GUI к БД, PySide6 + sqlalchemy, CRUD операции
zhlédnutí 4,1KPřed rokem
00:00:00 Вспоминаем с чем работаем 00:01:00 Создаем интерфейс 00:05:05 Компилируем интерфейс в python 00:06:05 Делаем болванку кода под интерфейс 00:07:00 Переносим engine в ini и создаем функции под запрос данных 00:08:05 Заполняем список lstItems 00:10:50 Стягиваем таблицу regions с словарь 00:14:35 Используем словарь регионов для вывода данных 00:16:10 Заполняем выпадающий список регионов 00...
Разработка на Python / sqlite, sqlalchemy, проектирование БД, простые запросы,
zhlédnutí 3,3KPřed rokem
Файлы к видео: disk.yandex.ru/d/3_Y6X7nb0UWfOA 00:00 Ставлю DB Browser for SQLite 00:31 Изучаем данные 01:05 Создаем файл с БД 01:55 Проектируем БД 06:05 Создаем таблицы по схеме 08:00 Заполняем данными 11:00 Пишем запросы из DB Browser for SQLite 12:30 Ставим sqlaclhemy 14:00 Создаем подключение к БД в python 16:52 SELECT запросы 20:30 Передача переменных в запрос 25:15 Запрос на вставку данны...
Vue 3, работа с vk api, подключение echarts
zhlédnutí 662Před rokem
00:00:00 Введение 00:00:55 Ставим Visual Studio Code 00:02:05 Ставим nodejs 00:04:05 Создаем папку под проект 00:05:51 Создаем болванку vue приложения 00:09:15 Убираем лишние файлы 00:11:05 Создаем vk приложение 00:14:25 Смотрим документацию vk api 00:15:20 Подключаем VK Open API 00:16:45 Пробуем запросить список участников группы 00:19:34 Решаем проблему не авторизованного в ВК пользователя 00...
Основы разработки ПО на Python (лекция 5, функции, создание консольного меню, телеграмм-бот)
zhlédnutí 508Před rokem
Основы разработки ПО на Python (лекция 5, функции, создание консольного меню, телеграмм-бот)
NestJS работа с TypeORM миграциями (интеграция с нуля и в существующие проекты)
zhlédnutí 3,3KPřed rokem
NestJS работа с TypeORM миграциями (интеграция с нуля и в существующие проекты)
Основы разработки ПО на Python (лекция 3, генерация паролей, частотный анализ текста, словари)
zhlédnutí 699Před rokem
Основы разработки ПО на Python (лекция 3, генерация паролей, частотный анализ текста, словари)
Django для фуллстек разработки, часть 3/3. Работа с Djano Rest Framework
zhlédnutí 308Před 2 lety
Django для фуллстек разработки, часть 3/3. Работа с Djano Rest Framework
Django для фуллстек разработки, часть 2/3. Работа с Vue 3
zhlédnutí 552Před 2 lety
Django для фуллстек разработки, часть 2/3. Работа с Vue 3
Основы командной разработки git в Visual Studio Code
zhlédnutí 3,8KPřed 2 lety
Основы командной разработки git в Visual Studio Code
Django для фуллстек разработки, часть 1/3. Создаем Django проект
zhlédnutí 503Před 2 lety
Django для фуллстек разработки, часть 1/3. Создаем Django проект
Софт для фуллстэк разработки Django+Vue
zhlédnutí 158Před 2 lety
Софт для фуллстэк разработки Django Vue
Основы работы с MySQL
zhlédnutí 666Před 2 lety
Основы работы с MySQL
Система частиц на python
zhlédnutí 804Před 2 lety
Система частиц на python
Основы Laravel
zhlédnutí 500Před 2 lety
Основы Laravel
Интерактивное множество мандельброта на C#
zhlédnutí 1,1KPřed 2 lety
Интерактивное множество мандельброта на C#
Верстка | Копируем шапку pikabu
zhlédnutí 102Před 2 lety
Верстка | Копируем шапку pikabu
SCSS
zhlédnutí 310Před 2 lety
SCSS
Git и Visual Studio
zhlédnutí 5KPřed 2 lety
Git и Visual Studio
Введение во Vue
zhlédnutí 290Před 3 lety
Введение во Vue
Верстка Figma шаблона на bootstrap 4
zhlédnutí 1,6KPřed 3 lety
Верстка Figma шаблона на bootstrap 4
Работа c VK api на C#, часть 2 с использованием WPF
zhlédnutí 933Před 3 lety
Работа c VK api на C#, часть 2 с использованием WPF
Работаем с vk api на C#, часть 1
zhlédnutí 6KPřed 3 lety
Работаем с vk api на C#, часть 1

Komentáře

  • @sasalkinesketityo3802

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

  • @slonbeskonechen8310
    @slonbeskonechen8310 Před měsícem

    А в чём преимущество pyside-uic перед QUiLoader()?

  • @chillyboombony7559
    @chillyboombony7559 Před měsícem

    сделал по аналогии, но почему что не получается, выдает что id нет, но в принте показывает

  • @alexuser_1792
    @alexuser_1792 Před 2 měsíci

    подскажите, какое расширение подсказывает доступные действия с combobox на 17:46? какое расширение показывает во всплывающем окне возможные способы передачи данных?

  • @user-ut2ct5us4u
    @user-ut2ct5us4u Před 3 měsíci

    Спасибо

  • @user-lj7en7tf5c
    @user-lj7en7tf5c Před 3 měsíci

    Мне понравилось, если вам качество съёмки улучшить, то было бы на уровне каких нибудь видео с курсов

  • @irox_7637
    @irox_7637 Před 3 měsíci

    урок критически недооценен, очень помог с частицами

  • @azizabdullaev9030
    @azizabdullaev9030 Před 4 měsíci

    Здравствуйте. Спасибо за урок. Я работаю на локальном сервере XAMPP. POST и GET запросы работают. А запросы с id ругаются (404 Not Found ). Подскажите пожалуйста как настроит редиректы в .htaccess или через php.

  • @user-mo4jd9sq4h
    @user-mo4jd9sq4h Před 4 měsíci

    Еще бы шаблон магазина на bootstrap 5

  • @reimuhakurei5579
    @reimuhakurei5579 Před 4 měsíci

    Осенним днем постучались в кабинет Штирлицу. *тук-тук* "тук-тук", подумал Штирлиц

  • @user-sn9jn9rm5m
    @user-sn9jn9rm5m Před 5 měsíci

    Как же ты все детально объясняешь! Это просто нечто для новичка! Спасибо тебе огромное за такой контент!

  • @user-iy7ne9xb8n
    @user-iy7ne9xb8n Před 5 měsíci

    подскажите где можно найти русскую версию Qt Designer. Спасибо

  • @stanislavserov8622
    @stanislavserov8622 Před 5 měsíci

    Пишу второй коммент за сутки под вашими видео :) Очень понравилось как вы подаете материал, как-то хорошо воспринимается лично мной, хотя я пересмотрел кучу видео-курсов. У Дмитрия Лаврика понравились еще лекции и ваши. Обязательно выпустите ролики по ООП, так как эта тема немного темная по причине малого применения среди начинающих.

  • @stanislavserov8622
    @stanislavserov8622 Před 6 měsíci

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

  • @vandekott
    @vandekott Před 6 měsíci

    Спасибо за норм рецепт, забугорские не помогли, думал на русском не найду)

  • @NurFlutterDev
    @NurFlutterDev Před 6 měsíci

    спасибо👍👍👍👍👍👍👍👍👍👍👍

  • @psdwing4369
    @psdwing4369 Před 6 měsíci

    всё, конечно, хорошо, но как вы работаете в светлой теме? у меня бы глаза на клавиатуру вытекли

    • @mkatash
      @mkatash Před 6 měsíci

      в светлом помещении работаю в светлой теме, в темном - в темной. Так как освещение в течении дня меняется, я просто переключаю темы

  • @sakhdvdiy3551
    @sakhdvdiy3551 Před 6 měsíci

    У меня выдаёт ошибку. ----- Traceback (most recent call last): File "C:\Users\vdovi\PycharmProjects\mailagent\main.py", line 7, in <module> with Session(engine) as s: TypeError: 'Session' object does not support the context manager protocol

    • @sakhdvdiy3551
      @sakhdvdiy3551 Před 6 měsíci

      Вот такой код. ------ from sqlalchemy import create_engine, text from sqlalchemy.orm import Session engine = create_engine("sqlite+pysqlite:///ot.db", echo=True) with Session(engine) as s: rows = s.execute(text("""SELECT * FROM sotr"""))

  • @UtkaMF
    @UtkaMF Před 7 měsíci

    Спасибо

  • @moonboyforever
    @moonboyforever Před 7 měsíci

    Благодарю! Очень классно рассказали. Лучше всех!

  • @SantaCluster
    @SantaCluster Před 7 měsíci

    нихрена не понял, но было интересно :) как-то костыльно реализовано взаимодействие компонентов, вы не находите? :)

    • @mkatash
      @mkatash Před 7 měsíci

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

    • @SantaCluster
      @SantaCluster Před 7 měsíci

      @@mkatash нет, я не против прослоек. и даже, в некотором роде за :) но я против того, чтобы по десять раз одно и то же прописывать в разных местах. кагбэ прослойка и нужна для того, чтобы в её конфиге прописать взаимодействие двух/трёх/n модулей, а в модулях прописать только наличие прослойки. я художник, я так вижу :))

  • @user-nx3no9ls9k
    @user-nx3no9ls9k Před 7 měsíci

    Спасибо!

  • @fetta3583
    @fetta3583 Před 7 měsíci

    Здравствуйте, а как задать отступ текста для всех айтемов TableView (без заголовков)

  • @user-kx4pc2hb2h
    @user-kx4pc2hb2h Před 7 měsíci

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

  • @malinatrash
    @malinatrash Před 7 měsíci

    Есть от раста технология Tauri, работает шустрее электрона, не тащит за собой хромиум (базовый exe всего 5мб) и как приятный бонус - можно гонять трудоемкие операции напрямую на расте (вызывать раст методы из js).

  • @maxmotors9672
    @maxmotors9672 Před 7 měsíci

    Приветствую , возможно вы поможете . Нужно изменить высоту ячейки под контент если он не вмещается в одну строку и если выходит за ширину QtableView . Пробовал отдельно создать функцию с def resize_rows_to_contents(self): for row in range(self.rowCount()): self.resizeRowToContents(row) в итоге она не срабатывает. Посоветуйте как лучше делать отображение таблицы , попробовал даже адаптировать отображение отдельным классом как у вас , но все без изменений . проект простой как валенки , обычная телефонная книга ) данные сохраняются и подгружаются из\в файл JSON

  • @youcef3939
    @youcef3939 Před 8 měsíci

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

  • @user-yq6oh8yg9g
    @user-yq6oh8yg9g Před 8 měsíci

    Не понятно как у тебя работает, все повторил за тобой не получается. скачал исходники импортировал в БД, композер обновил все равно не работает. Интересно ты сам с собой базариш довольный, непонятно для кого создал. В нале лекции эти же вопросы задали другие ты не ответил. Странный ты чувак!

  • @user-bq1vr3fp7q
    @user-bq1vr3fp7q Před 9 měsíci

    Приятно встретить человека который после drf также как и я делает бэк на nest.js и рассказывает про миграции как на джанге)))

  • @user-bh2ge1mu9x
    @user-bh2ge1mu9x Před 9 měsíci

    Супер, очень полезно и понятно, спасибо!

  • @StudioBaraban
    @StudioBaraban Před 9 měsíci

    Михаил, подскажите, пожалуйста, как такое же подключение vk openapi сделать во Vue3 Optional API а не Composition API?

  • @artemikf
    @artemikf Před 10 měsíci

    Вау, огромное тебе спасибо за этот урок ))

  • @user-dt3ot8rb6e
    @user-dt3ot8rb6e Před 11 měsíci

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

  • @rharper3282
    @rharper3282 Před rokem

    а как отправить ветвь если нет такой кнопки отправить ветвь?

  • @user-us6vw8yb9l
    @user-us6vw8yb9l Před rokem

    Спасибо за подробные видео. 👍Очень хочется узнать побольше о QTableView. Например можно ли изменять значения прям в таблице? Ну или еще какие-нибудь функции у этого. Можно ли загрузить данные в DataFrame используя pandas. не проще ли тогда будет отображать их? Просто дефицит какой-то на youtube роликов именно по QTableView.

  • @SplendPRO
    @SplendPRO Před rokem

    Наткнулся случайно, очень интересный контент!

  • @vitaliyderda4724
    @vitaliyderda4724 Před rokem

    Михаил, спасибо вам большое за объяснение! Очень помогли. В доке нашел еще такую штуку - dataSourceFactory: async (options) => { const dataSource = await new DataSource(options).initialize(); return dataSource; }. Типа можно ее использовать в TypeOrmModule.forRootAsync. Но тогда не понятно какие именно опшини попадают в датасорс. Могу предположить, что там те опшини, которые попали в useFactory, т.е. настройки нашей дб. Но тогда возникает втречный вопрос - какой путь на датасорс указывать при миграциях в команде migration:generate. Возможно, кто-то стыкался с этим?

  • @ASPdeveloper
    @ASPdeveloper Před rokem

    долго, неструктурировано.

  • @JVSd-SG
    @JVSd-SG Před rokem

    в ВК можно постить на стену в своем приложении или модерируемом через web пришложение? Или они запретили вообще всем и теперь только через standalone? Надо сделать скрипт чтобы загрузить видео, загрузить аудио, потом составить отложенный пост с подцепленными аудио и видео. Можно это сделать на nodejs?

  • @user-gf7us6iu7v
    @user-gf7us6iu7v Před rokem

    Как неожиданно обнаружить тут бывшего университетского одногруппника! 🙂

    • @mkatash
      @mkatash Před rokem

      хаха, привет, ну где-то ж я должен быть))

  • @xlebylllek321
    @xlebylllek321 Před rokem

    Очень прикольно) спасибо

  • @user-fz3pe6kr8b
    @user-fz3pe6kr8b Před rokem

  • @mnsmns64
    @mnsmns64 Před rokem

    Это просто кладезь информации. Спасибо опытному грамотному и спокойному лектору

  • @AndrewLapteff
    @AndrewLapteff Před rokem

    СПА-СИ-БО!

  • @RamaRama-qv3jo
    @RamaRama-qv3jo Před rokem

    Спасибо! Без воды)

  • @user-sf2fv8ju4h
    @user-sf2fv8ju4h Před rokem

    лайк не глядя мастер

  • @alexes.bochkarev
    @alexes.bochkarev Před rokem

    JS после python кажется непролазным болотом

  • @malinatrash
    @malinatrash Před rokem

    Почему Vue, а не React? Пытался Vue распробовать, вообще не понравилось (синтаксический сахар специфичный). А вот реакт прям как родной!

    • @mkatash
      @mkatash Před rokem

      Ну я на Vue профессионально разрабатываю, а на react не разрабатываю. Мне не нравится React что он ближе к библиотеке, и много того что во Vue работает из коробки, в react приходится допиливать руками, либо искать библиотеку, тоже двухстороннее связывание. Плюс в это смешивание html с js, что мне прям очень не нравится. И html получается там не совсем настоящий, вместо class писать className, style динамические со странными двойными скобочками. Ну короче я не оценил, а с выходом vue3 и появлением composition api теперь и на ts можно комфортно во vue без использования сторонних библиотек писать. В общем это конечно дело вкуса. Я помню когда только react начинал разгоняться, я его попробовал и он мне как-то не зашел, постоянно приходилось как-то с ним бодаться, а параллельно был vue, который сел и сразу все работает. Ну я и купился. Это год 16 наверное был. Особенно после наличия опыта работы с backbone и knockout у меня было уже представление что я хочу от реактивного фреймворка, и вот vue мне упрощал жизнь, а react почему-то норовил усложнить

  • @seoonlyRU
    @seoonlyRU Před rokem

    лайк от вордпресс-гуру,от СЕООНЛИ

  • @user-bm3wh9mu7q
    @user-bm3wh9mu7q Před rokem

    Спасибо за видео, помог разобраться. Из замечаний только что можно вместо прописывания тс-игнор при передаче объекта с конфигурации подключения к бд лучше задать тип PostgresConnectionOptions, чтобы в db.connection.ts было const CONNECTION: PostgressConnectionOptions = {...}, тогда и IDE ругаться не будет, и подсказки будут при дополнении конфига