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

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Сегодня мы затронем очень важную тему - быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку.
Страница урока: webdesign-mast...
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

[@wdm]

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

[@НикитаСкай-п4э]

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

[@MetalDoctor666]

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

[@АртемСкопинцев-и2у]

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

[@PalumbaRU]

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

[@danamicoi5083]

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

[@maxim-v]

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

[@anvar_noise]

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

[@ArtemKikhtenko]

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

[@antonshulga2136]

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

[@sergiiv2490]

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

[@rompaik]

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

[@borisserousov6677]

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

[@leader7700]

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

[@gbksvyaz]

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

[@xesax]

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

[@AmbullyEdward]

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

[@ДарьяАндреевна-с8л]

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

[@lexer1786]

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

[@sunman108]

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

[@MaksTresh]

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

[@oOcitizenOo]

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

[@ОлмасАбдумажидов]

И че как успехи

[@yevgenia7785]

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

[@Evgeny..]

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

[@7iomka]

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

[@alexeylozenko6093]

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

[@ВладиславВладислав-ю6б]

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

[@ErfinPlay]

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

[@kimblinov1594]

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

[@ИванКазаков-ь6х]

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

[@wladyslawwerenicz5236]

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

[@deniskazantcev]

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

[@innastar3125]

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

[@theroland6503]

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

[@rileyreynolds6442]

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

[@АлександрПрохоренко-е9н]

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

[@romaismailov8887]

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

[@arslant3910]

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

[@itssimple9217]

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

[@ZuevDS]

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

[@Raisor32]

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

[@АльбертИванов-ю6ф]

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

[@evgeniyshapovalov2867]

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

[@pacificusfacio6013]

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

[@kollabaaa]

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

[@СветланаВишнякова-т9д]

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

[@ramilurazmanov]

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

[@a.osethkin55]

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

[@ОлегЦыбульский-е6ь]

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

[@kravchenkovdele]

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

[@ВладимирФролов-э3ш]

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

[@yurakorobeynik1687]

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

[@NeoJohnSmit]

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

[@РоманТатаринов]

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

[@axelpoint]

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

[@Anatoliy_Tabakov]

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

[@ilarini]

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

[@denistverdokhlebov3059]

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

[@wdm]

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

[@denistverdokhlebov3059]

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

[@wdm]

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

[@denistverdokhlebov3059]

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

[@АлексейЧуриков-х3в]

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

[@antlogist]

Thank you very much! Awesome!!!

[@СергейВидеман-в4э]

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

[@xcodepixar1249]

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

[@simplestar4269]

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

[@shorohovvs]

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

[@wdm]

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

[@kirillq]

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

[@pavel.karpets]

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

[@ZuevDS]

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

[@hjkta]

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

[@mikelandgelo101]

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

[@antonovigor3005]

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

[@wdm]

loremru + TAB

[@antonovigor3005]

Спасибо.

[@yaroslav1071]

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

[@ivanchukayev6547]

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

[@jamescartman9314]

Шикарно :)

[@DimaXIII]

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

[@kirman7187]

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

[@nilabhjaiswal7036]

Brother please give english subtitles or Hindi

[@pomashok]

Класс!

[@alim7151]

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

[@agent.moriarty]

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

[@horusluperkal1544]

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

[@AleksandrChirik]

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

[@ghostdogg6200]

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

[@NeoJohnSmit]

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

[@kelbar6]

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

[@revert1551]

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

[@ihabia]

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

[@wdm]

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

[@artemyakovenko5208]

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

[@victor_lv]

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

[@wdm]

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

[@ekaterinak8682]

Спасибо !

[@stas6027]

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

[@ЖумагалиевАлишер-с5м]

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

[@RomanZharov]

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

[@wdm]

One Dark Material - Theme

[@egorm9580]

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

[@oleginlife]

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

[@vladislavlachman5558]

просто супер

[@Dikodance]

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

[@Весь-т8ы]

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

[@АлексейБаранов-ь7у]

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

[@wdm]

fl ru, kwork

[@MikheyevSergey]

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

[@intrance5745]

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

[@wdm]

Можно осуществить посадку на CMS или Фреймворк. Я после вёрстки осуществляю посадку на Modx Revolution. Посмотрите серию уроков "Создание сайта под ключ". В этом бесплатном курсе мы создаём дизайн, верстаем и осуществляем посадку на CMS Modx с админ-панелью для Настройки и наполнения сайта: kzbin.info/www/bejne/a6DWe4B3o9-qoac

[@ВикторВерба-п6о]

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

[@sashakewvra867]

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

[@wdm]

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

[@Ritorfan]

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

[@wdm]

Aninao позже.

[@РЕКЛАМА-и9ъ]

Как сделать, чтобы Шапка сайта была поверх всех окон, а при увеличении страницы Шапка теряла способность быть поверх всех окон?

[@famounts]

display: fixed

[@DEXTER-yx3lf]

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

[@romasitnichenko1609]

А что за тема у sublime?

[@wdm]

kzbin.info/www/bejne/p53YlqJsrKucoa8

[@demon741983]

а что за редактор на видео?

[@demon741983]

это оказался Sublime Text