ITDoctor
ITDoctor
  • Видео 1 029
  • Просмотров 8 562 074
#7 Верстаем раздел сайта на HTML и CSS по макету из Figma
В этом видеоуроке мы выполним верстку раздела сайта на HTML и CSS по макету из Figma.
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/morphIsmail/figma_without_devmod
ruclips.net/p/PLuY6eeDuleINeeRbBrztNjnCprlZ7ecDV
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#figma #html #css #itdoctor
Просмотров: 422

Видео

#6 Верстаем раздел сайта на HTML и CSS по макету из Figma
Просмотров 439День назад
В этом видеоуроке мы выполним верстку раздела сайта на HTML и CSS по макету из Figma. 📌 Полезные материалы и задания к этому уроку: stepik.org/113393 💾 Репозиторий с кодом: github.com/morphIsmail/figma_without_devmod ruclips.net/p/PLuY6eeDuleINeeRbBrztNjnCprlZ7ecDV ⚡️ Эксклюзив на Boosty - boosty.to/itdoctor 💡 Telegram канал - t.me/itdoctor_official/4 🎥 Курсы на Stepik - stepik.org/users/387773...
#5 Работа с SVG иконками, верстаем раздел сайта на HTML и CSS
Просмотров 48014 дней назад
В этом видеоуроке мы рассмотрим работу с SVG иконками. И выполним верстку раздела сайта на HTML и CSS. 📌 Полезные материалы и задания к этому уроку: stepik.org/113393 💾 Репозиторий с кодом: github.com/morphIsmail/figma_without_devmod ruclips.net/p/PLuY6eeDuleINeeRbBrztNjnCprlZ7ecDV ⚡️ Эксклюзив на Boosty - boosty.to/itdoctor 💡 Telegram канал - t.me/itdoctor_official/4 🎥 Курсы на Stepik - stepik...
#4 Адаптивная версия для Header, Верстаем по макету из Figma
Просмотров 55521 день назад
Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также у...
Прозрачный фон изображения, Как исправить фейковую прозрачность и почистить фон
Просмотров 74028 дней назад
В этом видеоуроке вы узнаете, как легко и быстро удалить фон у изображения и отделить/очистить объект от фона с помощью простых инструментов и приемов. Освойте техники создания прозрачного фона для ваших изображений. Расскажу как исправить фейковую прозрачность у картинки. ✂️ Бот для удаления фона: t.me/pixelwiz_bot ⚡️ Эксклюзив на Boosty - boosty.to/itdoctor 💡 Telegram канал - t.me/itdoctor_of...
Open Server 6.0 - Что они натворили в новой версии? Как работать с PHP и MySQL, Установка Wordpress
Просмотров 13 тыс.Месяц назад
Расскажу как установить и настроить локальный сервер Open Server 6.0.0, а также мы создадим и запустим первую программу на PHP. Вы узнаете куда делся phpMyAdmin в новой версии локального сервера и как вернуть phpMyAdmin. Удалим старую версию и установим новую. Расскажу как экспортировать проекты и импортировать их в Open Server 6.0.0 и мы рассмотрим процесс установки Wordpress 6.5.3 на Open Ser...
Что такое САЙТ, CMS, БД, Хостинг, Домен? Терминология понятным языком
Просмотров 7 тыс.Месяц назад
Что такое сайт, сервер, хостинг, база данных, субд, доменное имя, dns, поисковая система, локальный сервер, cms, админка? Как это все устроенно и взаимодействует друг с другом? Простыми словами рассказываю для начинающих о самых важных понятиях в веб-разработке. После этого дорога в мир IT вам открыта, а ваше понимание будет на фундаментальном уровне. Начните зарабатывать деньги освоив самое ва...
#3 Плагин Perfect Pixel, Верстаем по макету из Figma
Просмотров 1,9 тыс.Месяц назад
Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также у...
#16 Emmet Balance и горячие клавиши в VS Code, Курс-плейлист Тренажер по вёрстке, плагин Emmet
Просмотров 413Месяц назад
Этот курс призван прокачать вашу скорость написания кода на HTML и CSS. Даже если вы уже знакомы с плагином Emmet не спешите уходить. Пройдите этот курс, он бесплатен и не займет много времени, но я уверен вы узнаете много новых техник, трюков, функций данного плагина и редактора VS Code. Задания к этому курсу: stepik.org/113654 Плейлист: ruclips.net/p/PLuY6eeDuleIOeeIx3j7AP4Z9ojmrwZPCp Курс "F...
#2 Верстаем по макету из Figma, Обзор макета и подготовка HTML разметки
Просмотров 1,2 тыс.Месяц назад
Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также у...
#15 Теги формы, Курс-плейлист Тренажер по вёрстке, плагин Emmet
Просмотров 366Месяц назад
#15 Теги формы, Курс-плейлист Тренажер по вёрстке, плагин Emmet
#1 Верстаем по макету из Figma, Подготовка проекта и начало работы
Просмотров 1,5 тыс.2 месяца назад
#1 Верстаем по макету из Figma, Подготовка проекта и начало работы
#14 Теги link, meta, style, script
Просмотров 3962 месяца назад
#14 Теги link, meta, style, script
#17 Самостоятельная работа, экзаменационный проект на Vue.js
Просмотров 1,5 тыс.2 месяца назад
#17 Самостоятельная работа, экзаменационный проект на Vue.js
#6 Загрузка кода на GitHub | Git и GitHub для начинающих
Просмотров 3,2 тыс.2 месяца назад
#6 Загрузка кода на GitHub | Git и GitHub для начинающих
#3 Инициализация репозитория Git | Git и GitHub для начинающих
Просмотров 1,8 тыс.2 месяца назад
#3 Инициализация репозитория Git | Git и GitHub для начинающих
#2 Установка Git | Git и GitHub для начинающих
Просмотров 1,8 тыс.2 месяца назад
#2 Установка Git | Git и GitHub для начинающих
#4 Что делать, если ничего не работает | Git и GitHub для начинающих
Просмотров 1,3 тыс.2 месяца назад
#4 Что делать, если ничего не работает | Git и GitHub для начинающих
#1 Что такое Git и зачем он нужен | Git и GitHub для начинающих
Просмотров 7 тыс.2 месяца назад
#1 Что такое Git и зачем он нужен | Git и GitHub для начинающих
#5 Регистрация на GitHub | Git и GitHub для начинающих
Просмотров 5212 месяца назад
#5 Регистрация на GitHub | Git и GitHub для начинающих
#16 Пишем финальный проект на Vue.js
Просмотров 6 тыс.2 месяца назад
#16 Пишем финальный проект на Vue.js
#15 Работа с компонентами на Vue.js
Просмотров 2,1 тыс.2 месяца назад
#15 Работа с компонентами на Vue.js
#13 Аббревиатуры HTML, Курс-плейлист Тренажер по вёрстке, плагин Emmet
Просмотров 7802 месяца назад
#13 Аббревиатуры HTML, Курс-плейлист Тренажер по вёрстке, плагин Emmet
#14 Работа с элементами форм на Vue.js
Просмотров 1,5 тыс.2 месяца назад
#14 Работа с элементами форм на Vue.js
Верстка сайта по макету из Pixso, бесплатный аналог Figma с Dev Mode
Просмотров 5 тыс.3 месяца назад
Верстка сайта по макету из Pixso, бесплатный аналог Figma с Dev Mode
#13 Обработка событий и модификаторы клавиш на Vue.js
Просмотров 1 тыс.3 месяца назад
#13 Обработка событий и модификаторы клавиш на Vue.js
#12 Неявные имена тегов, Курс-плейлист Тренажер по вёрстке, плагин Emmet
Просмотров 6223 месяца назад
#12 Неявные имена тегов, Курс-плейлист Тренажер по вёрстке, плагин Emmet
#12 Отрисовка списков и создание циклов на Vue.js
Просмотров 1,9 тыс.3 месяца назад
#12 Отрисовка списков и создание циклов на Vue.js
GitVerse Российская платформа для работы с исходным кодом, Новый убийца GitHub?
Просмотров 3,4 тыс.3 месяца назад
GitVerse Российская платформа для работы с исходным кодом, Новый убийца GitHub?
#11 Условная отрисовка на Vue.js и 4 директивы для условной отрисовки
Просмотров 8853 месяца назад
#11 Условная отрисовка на Vue.js и 4 директивы для условной отрисовки

Комментарии

  • @vladimir.brumer
    @vladimir.brumer 22 часа назад

    Это хорошо, когда проект один, так переносить. А, если их штук 20?. Каталог домашних проектов надо выносить отдельно, а также базу данных, которую используете. А затем свежо установленную версию опен сервера просто настраиваем на эти каталоги. У меня так версии 5.2.2, 5.4.3 и 6.0.0 работают коректно. в любой момент нужную версию опенсервера включаешь и все проекты на месте согласно всем изменениям, сделанным в другой версии опенсервера. Корректно за исключением отправки писем. в 6 версии заглушка в папку отправляет письма, а настроить (корректно) реальную отправку пока не вышло по старинке, а без этого, я считаю, вся версия опенсервера в топку. можно разумееется найти альтернативу sendmail у, но это дополнительный не нужный мусор...

  • @Bobovka84
    @Bobovka84 2 дня назад

    Охренненое видео, делал калькулятор на питоне. Но тут у меня по предмету программирование учитель попросил сделать на хтмл. Благодаря твоему видео реально получилось сделать то что нужно. Спасибо большое.

    • @ITDoctor
      @ITDoctor День назад

      Спасибо за оценку. рад что этот урок был вам полезен

  • @qqqqwekloptyu
    @qqqqwekloptyu 2 дня назад

    Спасибо за контент.

    • @ITDoctor
      @ITDoctor День назад

      всегда пожалуйста

  • @user-kb4kd2vd7v
    @user-kb4kd2vd7v 2 дня назад

    Спасибо большое 😊

    • @ITDoctor
      @ITDoctor День назад

      Спасибо за поддержку!

  • @dropedeat3215
    @dropedeat3215 2 дня назад

    отлично! у вас талант объяснять,залип на ваши уроки и долго такой контент искал.

    • @ITDoctor
      @ITDoctor День назад

      Спасибо большое за добрые слова. Рад что мои видео вам нравятся и приносят пользу

  • @dropedeat3215
    @dropedeat3215 2 дня назад

    привет,а фишка в фигме interactions теперь не доступна ( подскажите пожалуйста,как теперь смотреть ссs для разработчиков без етого режыма ?

    • @ITDoctor
      @ITDoctor День назад

      Привет. Вот тут я говорил про варианты что делать дальше. их много. Так же тут посмотрели как работать и жить без этого режима особо не комплексуя ruclips.net/video/ZGeCNkW7FKw/видео.html далее мы рассматривали плагин который заменяет dev mode ruclips.net/video/MoIK7WtUvto/видео.html и рассмотрели аналог Figma ruclips.net/video/6YnDq_oDw_I/видео.html если изучите все эти три урока полностью то станете практически властелином верстки. по крайней мере понимать будете все на фундаментальном уровне. что делать, как дальше жить и верстать не зависимо от фигмы, платных подписок и т д. надеюсь эти уроки будут полезны и вы их не пролистаете а полностью изучите и впитаете эти знания

  • @user-oy4pj7vo6c
    @user-oy4pj7vo6c 2 дня назад

    Огромное вам спасибо!!! Сейчас везде стоят ограничения на бесплатные программы по объему и функционалу, пол дня искала конвертер для тяжелого видео и очень много программ перепробовала и тут нашла ваш ролик. Реально 10гб за пару минут и все готово, чудеса, теперь буду пользоваться только им!❤🤩👍

    • @ITDoctor
      @ITDoctor День назад

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

  • @user-pq5bx2md9c
    @user-pq5bx2md9c 2 дня назад

    Спасибо!

    • @ITDoctor
      @ITDoctor День назад

      Пожалуйста

  • @ITDoctor
    @ITDoctor 2 дня назад

    Начните зарабатывать деньги освоив самое важное для веб-разработчика. Изучим HTML, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp. Расскажу как составить портфолио, резюме и взять первый заказ на фрилансе. 📌 Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/a/113402

  • @tinatriboi6799
    @tinatriboi6799 2 дня назад

    Спасибо 🙂

    • @ITDoctor
      @ITDoctor День назад

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

  • @alexandrmelnikov6434
    @alexandrmelnikov6434 3 дня назад

    У меня по итогу в модальном окне видео недоступно. Пробовал использовать разные сервисы для получения кода адаптивного видео, но безуспешно. ( в конце концов решил скачать видео с ютуба и поместил в папку video на сайте и прописал путь, короче так работает. Но вот задача, как уже здесь не в одном комментарии было указано - как остановить воспроизведение видео, если юзер закрыл модальное окно ?

  • @user-duklsl63h
    @user-duklsl63h 3 дня назад

    Спасибо большое, полезный урок!

    • @ITDoctor
      @ITDoctor 3 дня назад

      Спасибо за оценку

  • @drfaulsam
    @drfaulsam 3 дня назад

    Не преобразовываются числа к строке - Unsupported operand types: string + int. Это в новой версии Php так?

  • @asmodeus7862
    @asmodeus7862 4 дня назад

    спасибо БРО

    • @ITDoctor
      @ITDoctor 3 дня назад

      пожалуйста

  • @yuritian8830
    @yuritian8830 5 дней назад

    ну...не знааааю. Синхронизация через сбер банк...ну...такое себе конечно. может я параноик. регаться через сбер банк...ннннееее. Ещё эти сертификаты мин цифры.... Сомнительный пирожок.

  • @latest548
    @latest548 5 дней назад

    Очень полезный урок

    • @ITDoctor
      @ITDoctor 4 дня назад

      спасибо за оценку

  • @_cyborg
    @_cyborg 6 дней назад

    Ну тут прям всё готово. Только цвет поменять. Можно тырить к себе на сайт. Очень аккуратный красивый css код)))

    • @ITDoctor
      @ITDoctor 6 дней назад

      тут еще много чего придется допиливать. но общую суть показать как работают подобные сетки для начинающих думаю хорошо.

  • @onischenkoviktor9519
    @onischenkoviktor9519 6 дней назад

    Большое спасибо=))

    • @ITDoctor
      @ITDoctor 6 дней назад

      вам спасибо за оценку

  • @_cyborg
    @_cyborg 6 дней назад

    Мне больше нравится svg иконки. У них легко можно подогнать размер. В примере на видео с пол пинка размер не получается подогнать. Если только переделать всю png картинку. Не очень удобно. Видео урок очень понравился. В жизни пригодится

  • @TamNguyen-xk7fj
    @TamNguyen-xk7fj 7 дней назад

    It takes a lot of time to install from scratch, wasting time on the new version

  • @E1ipS0iD
    @E1ipS0iD 7 дней назад

    Какую-то херню сделали, вместо удобного ПО. Всё через блокнот и руками писать. Раньше в пару кнопок всё работало и myadmin уже стоял. Сношу это говно и ставлю обратно 5

  • @chudushko3758
    @chudushko3758 7 дней назад

    Четко, понятно, ничего лишнего. Огромное спасибо за видео

    • @ITDoctor
      @ITDoctor 6 дней назад

      Спасибо за оценку

  • @user-eu2vx4wv5p
    @user-eu2vx4wv5p 7 дней назад

    👍👍👍

  • @user-us2mb2mp9b
    @user-us2mb2mp9b 8 дней назад

    Добрый день, есть какой то адекватный способ задания теней слайдам чтобы они не обрезались, не уменьшая приэтом сам размер слайдера?

  • @keks_o4162
    @keks_o4162 8 дней назад

    А значение константы так ConstClass::NAME не получить?

  • @shakal470
    @shakal470 9 дней назад

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

    • @ITDoctor
      @ITDoctor 8 дней назад

      рад слышать!

  • @Jaster-kv5li
    @Jaster-kv5li 9 дней назад

    Заптался с первыми слешами при подключении bootstrap, но потом разобрался и всё заработало!

  • @user-kb4kd2vd7v
    @user-kb4kd2vd7v 9 дней назад

    Спасибо большое 😊

    • @ITDoctor
      @ITDoctor 6 дней назад

      пожалуйста

  • @kihon100
    @kihon100 9 дней назад

    Добрый день! Возникла проблема с сервисом Embed Responsively. После вставки ссылки, в результате в атрибуте src мы получаем undefined (проверил на разных видео) Что это может быть?

  • @ITDoctor
    @ITDoctor 9 дней назад

    Начните зарабатывать деньги освоив самое важное для веб-разработчика. Изучим HTML, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp. Расскажу как составить портфолио, резюме и взять первый заказ на фрилансе. 📌 Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/a/113402

  • @elkhanhamet2561
    @elkhanhamet2561 10 дней назад

    Спасибо вам большое за такой великолепный урок

    • @ITDoctor
      @ITDoctor 9 дней назад

      Спасибо за оценку!

  • @keks_o4162
    @keks_o4162 10 дней назад

    Очень нравятся ваши уроки все подробно, структурированно. Спасибо!

    • @ITDoctor
      @ITDoctor 9 дней назад

      Спасибо за оценку!

  • @user-sj6sd1do6r
    @user-sj6sd1do6r 10 дней назад

    Очень понятно и круто объяснил!!! Спасибо за проделанный труд!!

    • @ITDoctor
      @ITDoctor 9 дней назад

      Спасибо за оценку!

  • @ipo2498
    @ipo2498 11 дней назад

    спасибо

    • @ITDoctor
      @ITDoctor 10 дней назад

      пожалуйста

  • @Jaster-kv5li
    @Jaster-kv5li 11 дней назад

    Было сложно, но я превозмог, спасибо!

    • @ITDoctor
      @ITDoctor 10 дней назад

      рад слышать!

  • @Jaster-kv5li
    @Jaster-kv5li 11 дней назад

    Этот ролик какой-то не цельный получился, код какой-то подозрительный, особенно метод get по id похоже с ошибкой не понятно откуда там articles брётся, похоже что этот аргумент пропущен в определении стрелочной функции

  • @imkudesnik
    @imkudesnik 12 дней назад

    всё чётко и по делу, без лишней болтовни!

    • @ITDoctor
      @ITDoctor 12 дней назад

      спасибо за оценку

    • @imkudesnik
      @imkudesnik 12 дней назад

      @@ITDoctor вам спасибо за видео

  • @663Willian
    @663Willian 12 дней назад

    Храни тебя Господь, друг! Твой видос мне очень помог! Спасибо!

    • @ITDoctor
      @ITDoctor 12 дней назад

      спасибо. рад что помог. это лишь один урок из плейлиста, возможно другие вам так же будут полезны ruclips.net/p/PLuY6eeDuleINhZpY34wXFORiH-19OvNd4

  • @georgevtushenko4005
    @georgevtushenko4005 12 дней назад

    а что за тема для vs code используется? очень понравилась подсветка цветов в CSS по всей длине

    • @ITDoctor
      @ITDoctor 12 дней назад

      тема Dracula Official а цвета в css подсвечиваются благодаря расширению Color Highlight

  • @ITDoctor
    @ITDoctor 14 дней назад

    Начните зарабатывать деньги освоив самое важное для веб-разработчика. Изучим HTML, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp. Расскажу как составить портфолио, резюме и взять первый заказ на фрилансе. 📌 Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/a/113402

  • @_cyborg
    @_cyborg 14 дней назад

    У меня постоянно ошибка лезла. Пришлось удалить brackets. Так и не смог вылечить. PHP runtime not found. Install the php7 runtime and update "executablepath" in the php preferences appropriately. This enables php-related tooling such as code hints, parameter hints, jump to definition and more 🤕

  • @gg_niks
    @gg_niks 15 дней назад

    Что делать, если в консоле не появилась переменная?

  • @TheArtsakhKing
    @TheArtsakhKing 15 дней назад

    Я несколько раз переустановил Open Server но раздел "Модули" не появляются

  • @andreyka8644
    @andreyka8644 15 дней назад

    Быстро, просто, понятно. Спасибо!

    • @ITDoctor
      @ITDoctor 12 дней назад

      Спасибо вам!

  • @user-kb4kd2vd7v
    @user-kb4kd2vd7v 16 дней назад

    Спасибо большое 😊

    • @ITDoctor
      @ITDoctor 12 дней назад

      Пожалуйста

  • @tobesunset820
    @tobesunset820 16 дней назад

    Спасибо тебе мужик! Ничего не было понятно! Скачал вордпресс слава богу)

    • @ITDoctor
      @ITDoctor 12 дней назад

      Рад что было полезно. Рекомендую бесплатный курс по Wordpress может быть полезен stepik.org/113393