Как правильно и быстро верстать сайты

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ค. 2016
  • Все курсы в одном комплекте: wd-m.ru/bundle
    Создание сайта от А до Я: wd-m.ru/createsite
    Всем привет, друзья. Сегодня мы затронем очень важную тему - быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку.
    Статья «Как правильно и быстро верстать сайты»: webdesign-master.ru/blog/html...
    ВКонтакте: jediweb
    Телеграм: t.me/jediweb
    Дзен: dzen.ru/jediweb

ความคิดเห็น • 152

  • @wdm
    @wdm  9 วันที่ผ่านมา +1

    💥 Все курсы в одном комплекте 👇👇👇
    webdesign-master.ru/bundle_courses

  • @user-vq6ut3nw7s
    @user-vq6ut3nw7s 7 ปีที่แล้ว +146

    Благодарен автору за данный канал! Прям безгранично! 70% имеющихся навыков и знаний, которые у меня накопились за небольшой промежуток времени, я получил с этого канала. Что позволило мне понять логику и алгоритм работы , помогло найти первую full-time работу и первые заказы с бирж freelance. Спасибо Автор за труды и время которое ты уделяешь для таких newbie как я!)

  • @ArtemKikhtenko
    @ArtemKikhtenko 8 ปีที่แล้ว +13

    Давно подписан на Ваш канал, слежу за обновлениями, реально качество производимого контента очень выросло. Динамика, слог, информация, смотрел с большим удовольствием. Респект!

  • @sergiiv2490
    @sergiiv2490 7 ปีที่แล้ว +25

    Удивительное видео попалось в рекомендациях)).
    Ставлю лайк, оформляю подписку) Хоть и большинство тем я уже проехал, но кое-что отложил в полочку полезного)). Так же буду начинать с вами учить gulp. Спасибо за годный контент! Очень круто, продолжайте.
    А остальным скажу, ребята кто начинает не бросайте, кто уже в теме не думайте что прогресс остановился - всегда развивайтесь.

  • @maxim-v
    @maxim-v 6 ปีที่แล้ว +6

    Побольше бы таких видео на ютубе. 25 минут, а столько полезной инфы. Сохранил его себе в закладки уже 3-ий раз пересматриваю и потихоньку начинаю использовать технологии и методы из этого видео. Отлично, автору респект!!!

  • @PalumbaRU
    @PalumbaRU 7 ปีที่แล้ว

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

  • @user-fq3bl6ws2t
    @user-fq3bl6ws2t 8 ปีที่แล้ว +57

    Вот что называется качественный контент. Тонна благодарности.

  • @MaksTresh
    @MaksTresh 8 ปีที่แล้ว +4

    Обновил страницу и новый видос! Круто. Лайк не глядя, а завтра посмотрю.
    Спасибо за новый видос =)

  • @lexer1786
    @lexer1786 8 ปีที่แล้ว +2

    Отличное видео! Благодарю.
    Сам долгое время занимаюсь версткой и все никак не дойду до некоторых вещей, что озвучены в видео. Надеюсь, эта инфа подтолкнет меня к развитию :)

  • @rompaik
    @rompaik 5 ปีที่แล้ว +78

    С учётом времени на прокрастинацию :D Запомню выражение

  • @MetalDoctor666
    @MetalDoctor666 5 ปีที่แล้ว

    Я бэкэнд разраб, который решил расширить свои профессиональные навыки до фронта. И видео уроки на этом канале, это одни из лучших и понятных гайдов по дизайну-верстке сайтов. Автору канала большое спасибо!

  • @borisserousov6677
    @borisserousov6677 7 ปีที่แล้ว

    Супер! Научился у Вас очень многому! Спасибо! Очень доступно, а главное правильно все разжевали! Я имею в виду не только данное видео, но и все Ваши плейлисты. Теперь это уже настоящая "библия" верстальщика.

  • @user-nt8jz5xt5u
    @user-nt8jz5xt5u 8 ปีที่แล้ว +9

    Спасибо за видос и "колбасное" выражение)

  • @antonshulga2136
    @antonshulga2136 7 ปีที่แล้ว +8

    Интересная подача информации. Всё по делу. Респект!
    Чего только стоят: "в кармане бублик", "горячая вода по трубам"...;)

  • @yurakorobeynik1687
    @yurakorobeynik1687 8 ปีที่แล้ว +2

    Большое спасибо, как всегда качественный материал.

  • @arslant3910
    @arslant3910 5 ปีที่แล้ว +1

    Боже,так этого не хватало,огромное спасибо вам🔥🔥🔥

  • @anvar_noise
    @anvar_noise 3 ปีที่แล้ว +2

    С шуток про колбасу и психоанализ проорал, понял что тип нормальный и надо подписаться

  • @romaismailov8887
    @romaismailov8887 8 ปีที่แล้ว

    четко все так, по полочкам, спасибо! Это очень здорово, когда дизайнер соблюдает все то, что ты описал в конце видео, тогда работа только в удовольствие. А чаще всего так все выглядит, что дают тебе макет, а там видно, что дизайнера вообще не колышет что будут делать с его макетом в дальнейшем, ну или видно что, что то старался сделать, но не до конца и решил, что и так сойдет:) типа главное деньги за дизайн получить, а дальше я умываю руки:)

  • @7iomka
    @7iomka 7 ปีที่แล้ว

    Всё четко и по делу, отдельное спасибо за перечень условий правильной подготовки psd-макета к верстке.
    Очень часто приходится задаваться вопросами, почему верстальщик должен парится в фотошопе...
    И постфактум о том, что перфект-пиксель не имеет особого смысла в responsive-верстке - это именно то, что нужно знать каждому менеджер/дизайнеру, который контролирует верстальщика) Буду скидывать это видео, если дизайнер будет не согласен)!
    Видосы четкие, ждём новых!

  • @leader7700
    @leader7700 7 ปีที่แล้ว +1

    Столько нужной полезной информации за 25 мин уложил! Супер)

  • @danamicoi5083
    @danamicoi5083 ปีที่แล้ว +2

    Идея для нового видео. Как создать простенький сайт совсем новичку. И спасибо за ваши видео.

  • @Raisor32
    @Raisor32 8 ปีที่แล้ว

    Спасибо за полезную информацию.

  • @sunman108
    @sunman108 5 ปีที่แล้ว +1

    Респект! все по делу, без воды. Недостающее звено.

  • @kimblinov1594
    @kimblinov1594 7 ปีที่แล้ว

    Огромное спасибо! очень давно Хочу заниматься этим ремеслом) еще со школы) Но все ведут по неправильному пути) тут Вы рассказали все ясно и понятно) мне еще многое предстоит изучить! Огромное спасибо за помощь, таким же как я !

  • @rileyreynolds6442
    @rileyreynolds6442 6 ปีที่แล้ว

    Отличный урок! Спасибо

  • @alexeylozenko6093
    @alexeylozenko6093 8 ปีที่แล้ว +2

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

  • @theroland6503
    @theroland6503 6 ปีที่แล้ว

    Извлек для себя много полезной инфы! Спасибо)

  • @axelpoint
    @axelpoint 8 ปีที่แล้ว +1

    Спасибо, дружище.

  • @ramilurazmanov
    @ramilurazmanov 5 ปีที่แล้ว

    Очень круто, огромное спасибо!

  • @Evgeny..
    @Evgeny.. 3 ปีที่แล้ว +1

    Очень грамотно! Автору респект!))

  • @innastar3125
    @innastar3125 5 ปีที่แล้ว

    Спасибо за хорошее, информативное видео.

  • @user-qs6qq5vs9w
    @user-qs6qq5vs9w 8 ปีที่แล้ว

    СПАСИБО! Очень полезная информация

  • @user-dk9wp1gz9j
    @user-dk9wp1gz9j 7 ปีที่แล้ว

    Зачетное вступление )

  • @user-ye3kc6hd3f
    @user-ye3kc6hd3f 5 ปีที่แล้ว +1

    Спасибо большое за видео!

  • @antlmkhn
    @antlmkhn 7 ปีที่แล้ว

    Спасибо, очень полезное видео. Получил много новой информации. Удачи.

  • @yevgenia7785
    @yevgenia7785 3 ปีที่แล้ว

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

  • @pavel.karpets
    @pavel.karpets 6 ปีที่แล้ว +2

    чётко и интересно

  • @evgeniyshapovalov2867
    @evgeniyshapovalov2867 7 ปีที่แล้ว

    Всё очень круто, спасибо

  • @Fuck_crunk
    @Fuck_crunk 5 ปีที่แล้ว

    Спасибо за видео.

  • @deniskazantcev
    @deniskazantcev 4 ปีที่แล้ว

    Благодарю за видео. Было полезно!

  • @jamescartman9314
    @jamescartman9314 8 ปีที่แล้ว

    Шикарно :)

  • @oOcitizenOo
    @oOcitizenOo 7 ปีที่แล้ว

    Спасибо большущее за видео. Скачал себе на ноут, буду смотреть изредка чтобы не сбиваться с курса :)

  • @user-si3fb2ek7g
    @user-si3fb2ek7g 2 ปีที่แล้ว

    Отличное видео!

  • @user-mq7ee3xx9r
    @user-mq7ee3xx9r 4 ปีที่แล้ว

    Хороший материал)))))

  • @pomashok
    @pomashok 6 ปีที่แล้ว

    Класс!

  • @a.osethkin55
    @a.osethkin55 3 ปีที่แล้ว

    Спасибо за видео

  • @user-Lang555
    @user-Lang555 8 ปีที่แล้ว

    Спасибо!

  • @ErfinPlay
    @ErfinPlay 7 ปีที่แล้ว

    Много пока непонятного, но выглядит убедительно.

  • @kelbar6
    @kelbar6 7 ปีที่แล้ว

    спасибо полезное видео.

  • @user-pg3jf6gg2d
    @user-pg3jf6gg2d 7 ปีที่แล้ว

    ахахах) класс) вдумчиво и медленно я делала первые месяца 4, потом на то же самое у меня уходило пару часов а не неделя) все верно)

  • @user-ls8kd8mz2w
    @user-ls8kd8mz2w 8 ปีที่แล้ว +6

    Ахха, про нытиков и бублик в точку попал)))
    Полезное видео, спасибо!

  • @AmbullyEdward
    @AmbullyEdward 4 ปีที่แล้ว

    Достаточно все понятно, и мало пустой болтавни.

  • @gbksvyaz
    @gbksvyaz 7 ปีที่แล้ว +5

    Сколько ж всего надо знать и уметь!!! На это уйдут годы!!!

    • @xesax
      @xesax 3 ปีที่แล้ว

      это только так кажется

  • @portfel4ik858
    @portfel4ik858 6 ปีที่แล้ว

    В продолжении было бы интересно, как установить и настроить zurb, на него jekyll, подключать генерируемые коды и т.д.

  • @vladislavlachman5558
    @vladislavlachman5558 6 ปีที่แล้ว

    просто супер

  • @antlogist
    @antlogist 8 ปีที่แล้ว

    Thank you very much! Awesome!!!

  • @zuczuc6603
    @zuczuc6603 8 ปีที่แล้ว +1

    класс

  • @user-ht9mt3iw7p
    @user-ht9mt3iw7p 8 ปีที่แล้ว +1

    Спасибо за видео. Почти все использую, более того, есть своя сборка gulp, где уже встроены Jade шаблоны. И многое импортированы и подключено, так как тянется из проекта в проект. На счет выгрузки и графики слышали про zeplin? Сейчас выгружаю в него PSD макет. Оч удобно и четко. Советую посмотреть в эту сторону, и хотелось бы видео от вас по zeplin.

  • @yaroslav1071
    @yaroslav1071 7 ปีที่แล้ว

    красавчик!!! Лайк и подписка!!))))))

  • @hjkta
    @hjkta 7 ปีที่แล้ว

    Спасибо за видео! Было интересно.
    Подскажите, какие программы использовались? Фотошоп? Sublime Text? Шрифт не Fira Code?
    А чем видео записывали и нажатия на клавиши? Понравилось, что внизу экрана показывается кнопка, которая была нажата, мощно!
    И ещё одно: где можно взять этот и подобные макеты для тренировок?

  • @alim7151
    @alim7151 8 ปีที่แล้ว

    Классный урок! Можешь сделать урок про CMS на php и MySQL?

  • @user-lt2bu7jf3r
    @user-lt2bu7jf3r 6 ปีที่แล้ว

    Ты крутой, я бы хотел учиться у тебя в школе на очном обучении.

  • @pacificusfacio6013
    @pacificusfacio6013 8 ปีที่แล้ว

    У тебя суперский голос

  • @kravchenkovdele
    @kravchenkovdele 7 ปีที่แล้ว +105

    Колбасу лучше вовсе не кушать...))))

    • @user-fb3tn9hy5r
      @user-fb3tn9hy5r 3 ปีที่แล้ว +2

      Почему, в колбасе тоже иногда есть мясо, видимо из-за несчастного случая на производстве, но всё же)

  • @Tigran5233
    @Tigran5233 4 ปีที่แล้ว +6

    Блин, делал по ходу видео конспект, и только в конце понял, что есть текстовая версия видео для возвращения к рассмотренным вопросам.

    • @ilarini
      @ilarini 3 ปีที่แล้ว

      ничего страшного

  • @NeoJohnSmit
    @NeoJohnSmit 3 ปีที่แล้ว

    Канал у тебя тоже бомба

  • @kirillq
    @kirillq 8 ปีที่แล้ว +1

    На счет режимов наложения, в css есть свойство background-blend-mode

  • @kirman7187
    @kirman7187 7 ปีที่แล้ว +4

    Сколько же ты этому учился

  • @shorohovvs
    @shorohovvs 8 ปีที่แล้ว

    о, новый макет!
    скоро ждать нового джедая верстки?

    • @wdm
      @wdm  8 ปีที่แล้ว +2

      Это "Создание сайта под ключ" и он уже сверстан в уроках :-)

  • @ivanchukayev6547
    @ivanchukayev6547 8 ปีที่แล้ว

    отлично! Можете сказать сколько сейчас стоит Ваша верстка например landing page мин-макс?)

  • @denistverdokhlebov3059
    @denistverdokhlebov3059 8 ปีที่แล้ว

    Отличное видео, спасибо! Алексей, скажите пожалуйста, а по унисону будут еще видео? Или курс. А то инфы ни где нет, кроме этого канала :)

    • @wdm
      @wdm  8 ปีที่แล้ว

      Спасибо. У нас же есть исчерпывающее видео по Unyson. Там практически вся база.

    • @denistverdokhlebov3059
      @denistverdokhlebov3059 8 ปีที่แล้ว

      Да просто думал, может вы на нем что-то делать будете, чтоб так сказать посмотреть на живую реализацию проекта в нем. Кстати Вы сами, какой фрейм для тем вп предпочитаете?

    • @wdm
      @wdm  8 ปีที่แล้ว

      Я работаю преимущественно с MODx Revolution. Но если в мире существовал бы только один WordPress, я использовал бы Unyson.

    • @denistverdokhlebov3059
      @denistverdokhlebov3059 8 ปีที่แล้ว

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

  • @wladyslawwerenicz5236
    @wladyslawwerenicz5236 8 ปีที่แล้ว +1

    Я занимаюсь фулл-стак веб разработкой (Angular 2, meteor.js, ASP MVC, SharePoint и т.д.). Верстать разумеется тоже умею. Сколько не работаю, дизайн разрабатывал отдельный человек. Решил сделать интересный пэт-проект (веб приложение) и под это дело изучить веб дизайн. Но вот незадачка, изучение фотошопа и рисование дизайна оказалось для меня слишком скучной затеей - не мое это. Есть ли какие инструменты по-проще, для создания дизайна "на коленке"? Не хочется на лету делать верстку но и не хочется на процес дизайна тратить кучу времени, так как я больше кодер чем дизайнер. Thx :)

  • @ghostdogg6200
    @ghostdogg6200 7 ปีที่แล้ว

    Если нужна работа с БД - это уже back-end. А так все супер

  • @MikheyevSergey
    @MikheyevSergey 7 ปีที่แล้ว +2

    капец... чувак как к тебе в падаваны попасть?

  • @portfel4ik858
    @portfel4ik858 6 ปีที่แล้ว

    подскажите, пожалуйста как установить jekyll на foundation. А лучше уроки по foundation запишите. Хорошо рассказываете.

  • @artemyakovenko5208
    @artemyakovenko5208 8 ปีที่แล้ว

    Меня всегда интересовал вопрос, ты как-то говорил что сначала нужно поработать за небольшие деньги но набить руку. Ты имеешь в виду админом сайта или что-то в том роде?

  • @simplestar4269
    @simplestar4269 5 ปีที่แล้ว

    Какая сейчас средняя стоимость дизайна 1 страницы сайта или ленда ? И стоимость верстки 1 страницы?

  • @NeoJohnSmit
    @NeoJohnSmit 3 ปีที่แล้ว +1

    Докторская за 900 бомба

  • @mikelandgelo101
    @mikelandgelo101 7 ปีที่แล้ว

    Непонятно из видео, нужно ли делать предварительный веб-дизайн для сайта на WordPress?

  • @intrance5745
    @intrance5745 6 ปีที่แล้ว

    А что потом с этой версткой делать? Это же получается просто шаблон,нужен еще и движок чтобы это был полноценный сайт.Такой шаблон можно на любой движок поставить или как это работает?

    • @wdm
      @wdm  6 ปีที่แล้ว +2

      Можно осуществить посадку на CMS или Фреймворк. Я после вёрстки осуществляю посадку на Modx Revolution. Посмотрите серию уроков "Создание сайта под ключ". В этом бесплатном курсе мы создаём дизайн, верстаем и осуществляем посадку на CMS Modx с админ-панелью для Настройки и наполнения сайта: th-cam.com/video/5osJMAnzwkE/w-d-xo.html

  • @revert1551
    @revert1551 8 ปีที่แล้ว

    пользуешься ли ты less препроцессором и почему?

  • @victor_lv
    @victor_lv 7 ปีที่แล้ว

    Добрый день! узнал от вас от такой штуки sass, ищу решение как установить его на windows7 видел у вас например используется gulp а видел другие видео, что устанавливают sass с compas скачивают его с сайта руби, посоветуйте по какому пути пойти с компасом или gulp и почему?

    • @wdm
      @wdm  7 ปีที่แล้ว

      Да особо разницы то и нет.

  • @Dikodance
    @Dikodance 8 ปีที่แล้ว

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

  • @antonovigor3005
    @antonovigor3005 7 ปีที่แล้ว

    Автор, скажи как ты в эммете настроил lorem для кириллической "рыбы"?

    • @wdm
      @wdm  7 ปีที่แล้ว +1

      loremru + TAB

    • @antonovigor3005
      @antonovigor3005 7 ปีที่แล้ว

      Спасибо.

  • @user-pf5kw6dg9p
    @user-pf5kw6dg9p 7 ปีที่แล้ว

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

  • @user-lm6is7vm1o
    @user-lm6is7vm1o 5 ปีที่แล้ว

    Можно ли вместо bootstrap использовать css grid ? (Я новичок)

  • @stas6027
    @stas6027 8 ปีที่แล้ว

    Привет а курсы есть у тебя... За ранее спасибо

  • @nilabhjaiswal7036
    @nilabhjaiswal7036 ปีที่แล้ว +2

    Brother please give english subtitles or Hindi

  • @user-zg3di8jb3l
    @user-zg3di8jb3l 4 ปีที่แล้ว +1

    Верстка скоростная когда на скоростях)))

  • @sashakewvra867
    @sashakewvra867 7 ปีที่แล้ว +4

    Что это за особый сорт докторской колбасы аж за 900 рублей?:)

    • @wdm
      @wdm  7 ปีที่แล้ว +3

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

    • @lane4447
      @lane4447 5 ปีที่แล้ว +1

      @@wdm, Будет гайд на колбасу?

    • @wdm
      @wdm  5 ปีที่แล้ว +1

      Aninao позже.

  • @user-ly8bp3cs3u
    @user-ly8bp3cs3u 8 ปีที่แล้ว

    Всем привет!!! может подскажете площадку для "фриланса", а то жуть как хочется попробовать свои силы, а на работу без опыта не берут(((?????

    • @wdm
      @wdm  6 หลายเดือนก่อน

      fl ru, kwork

  • @ihabia
    @ihabia 8 ปีที่แล้ว

    Если я не ошибаюсь, но работа с базой данных это уже бэкенд, а не фронтэнд?

    • @wdm
      @wdm  8 ปีที่แล้ว +1

      Да. Но там все очень взаимосвязано и понимать такие вещи нужно.

  • @DimaXIII
    @DimaXIII 8 ปีที่แล้ว

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

  • @egorm9580
    @egorm9580 8 ปีที่แล้ว

    Где брать начинающему разработчику практику касательно верстки?

    • @oleginlife
      @oleginlife 7 ปีที่แล้ว +1

      Egor M ну например в интернете. Скачал psd макет и вперёд.

  • @agent.moriarty
    @agent.moriarty 8 ปีที่แล้ว

    подскажите название вашей темы в sublime?

    • @horusluperkal1544
      @horusluperkal1544 8 ปีที่แล้ว

      Называется Space Gray.
      packagecontrol.io/packages/Theme%20-%20Spacegray

    • @AleksandrChirik
      @AleksandrChirik 8 ปีที่แล้ว +1

      Максимально похоже на это github.com/ptraceur/OneDarkMaterial, если не ошибаюсь, комменты выше фуфел

  • @RomanZharov
    @RomanZharov 7 ปีที่แล้ว

    Что за тема/цветовая схема у саблайма стоит?

    • @wdm
      @wdm  7 ปีที่แล้ว +1

      One Dark Material - Theme

  • @xcodepixar1249
    @xcodepixar1249 6 ปีที่แล้ว

    Сколько пытаюсь верстать - НЕ МОЕ, я больше предпочитаю backend..... Пересмотрел туеву хучу видео по вёрстке и т.д, сколько не пытался, не получается. У кого-то может и наоборот. Всем начинающим и опытным побольше проектов и терпения)

  • @desex5670
    @desex5670 5 ปีที่แล้ว +1

    Avocode для кого?

  • @germanzuyakov1904
    @germanzuyakov1904 3 ปีที่แล้ว

    Preprosподдержует куча плагинов под gulp

  • @DEXTER-yx3lf
    @DEXTER-yx3lf 3 ปีที่แล้ว

    Ничего не понял но спасибо >.