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

6612 ratings | 199008 views


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

Полезно? Подпишись - Сервис SORGE: Статья Как правильно и быстро верстать сайты : Всем привет, друзья. Сегодня мы затронем очень важную тему - быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Создание интернет-магазина от А до Я - Я - фрилансер! - Создание сайта-портфолио на WordPress - Группа Вконтакте: Реклама на канале:

Comments to the video: Как правильно и быстро верстать сайты

В'ячеслав Поночовний 24 days ago
7:50 Сделав это заблаговременно, вы сэкономите возле 10-ти минут вашего времени либо возле 1-го часа с учетом времени на прокрастинацию. :D
Корова Улыбалка 27 days ago
эдобе
WebDesign Master 27 days ago
Правильное выговор «эдоби» ))
Сергей Видеман 29 days ago
Ты крутой, я бы желал обучаться у тебя в школе на очном обучении.
pomashok N 1 month ago
Класс!
Mikhail Phoenix 1 month ago
Отличный задание! Спасибо
Костян Ермаков 1 month ago
SASS - это будто зайчики стремительно)) Так, сейчас частицу инфы проглотили, завтра нужно будет еще один поглядеть видео, упущено немало советов за одинешенек просмотр.
Funkstrought 1 month ago
Спасибо за полезную информацию!
In Trance 1 month ago
А что позже с этой версткой мастерить? Это же выходит попросту штамп,нужен еще и движок чтоб это был настоящий веб-сайт.Такой штамп можно на хоть какой движок поставить либо будто это работает?
WebDesign Master 1 month ago
Можно выполнить посадку на CMS либо Фреймворк. Я потом вёрстки осуществляю посадку на Modx Revolution. Посмотрите плейлист Создание веб-сайта под ключ. В этом бесплатном курсе мы создаём дизайн, верстаем и осуществляем посадку на CMS Modx с администратор-панелью для Настройки и заполнения веб-сайта. _
Eugene Veprytskyi 2 months ago
Вот в одном из проектов столкнулся с таковой неувязкой что jquery невозможно юзать в проектах Angular. вообщем! это не валидно. А выучить Angular для верстания оказалось не обычный задачей.
Максим В 2 months ago
Побольше бы таких видео на ютубе. 25 минут, а столько полезной инфы. Сохранил его для себя в закладки уже 3-ий один пересматриваю и потихоньку начинаю использовать технологии и способы из этого видео. Отлично, создателю респект!!!
Joy Channel 4 months ago
Перед Bootstrap в вёрстке стоит поначалу без сеток верстать либо можно сходу учить БС? п.с. пхп дев, любопытно
kolya oO 5 months ago
благодарю полезное видео.
Алексей Силаев 5 months ago
Сколько вы получаете если 4-5 тыщ рублей в денек. не густо естественно ?
Ghost Dogg 5 months ago
Если нужна труд с БД - это уже back-end. А этак все супер
Paco Official 6 months ago
конечно колбаска за 80 рублей это ппц кал)))
Antonov Igor 6 months ago
Автор, скажи будто ты в эммете настроил lorem для кириллической рыбы ?
Antonov Igor 6 months ago
Спасибо.
WebDesign Master 6 months ago
loremru + TAB
Sasha Kewvra 7 months ago
Что это за особенный сорт докторской колбасы аж за 900 рублей?:)
WebDesign Master 7 months ago
Есть определённые производители, которые ещё покамест что делают высококачественные продовольствие. Попробуйте выискать на прилавках вашего гипермаркета и почитать состав колбас.
Good Case 7 months ago
Как сверстать макет иллюстратора?
Roma Williams 7 months ago
А что за тема у sublime?
WebDesign Master 7 months ago
Анатолий Макухин 7 months ago
Спасибо, весьма полезное видео. Получил немало новейшей инфы. Удачи.
ErfinPlay 7 months ago
Много покамест непонятного, однако смотрится внушительно.
Иван Иванов 7 months ago
Столько подходящей полезной инфы за 25 мин уложил! Супер)
Kerols Elkens 7 months ago
А для чего воссоздавать в вёрстке режимы наложения, если можно картинкой сделать?
WebDesign Master 7 months ago
Потому, что это универсально.
В гостях у ZmeEey228 7 months ago
красавец!!! Лайк и подписка!!))))))
Temblores 8 months ago
а что за редактор на видео?
Temblores 8 months ago
это оказался Sublime Text
Shmow Zow 8 months ago
что такое сетки? блэ не понимаю?
Сергей Белошенко 8 months ago
Удивительное видео попалось в наставлениях)). Ставлю лайк, оформляю подписку) Хоть и большая часть тем я уже проехал, однако кое-что отложил в полочку полезного)). Так же буду начинать с вами обучать gulp. Спасибо за пригодный контент! Очень круто, продолжайте. А остальным скажу, ребята кто начинает не кидайте, кто уже в теме не думайте что прогресс тормознул - вечно развивайтесь.
Александр Архипов 8 months ago
Сколько ж итого нужно знать и уметь!!! На это уйдут годы!!!
КЛИЧ РАБОТЯГ 8 months ago
Ничего неясно,видимо- видео не для новичков.Совсем.
Егор Аксёнов 9 months ago
Актуально ли обучать верстку ради фриланса в 2017-ом с нуля? Опытные люд, подскажите изволь)
Dima V 8 months ago
конечно. в особенности если понравится. гастеры нишу не займут
Karina Manu 9 months ago
Добрий денек, я учусь на интернет дезайнера и мне бы хотелось с вами переговорить, будите вы этак разлюбезны написать на karinamanu@yahoo.сom Карина
Саронов Йогг 9 months ago
приглянулась фраза впустить по трубам жаркую воду про галп, этакая отсылка к.pipe :) благодарю огромное за задание
RWΞB - Разработка сайтов 9 months ago
*А я на завтрак кушаю кашку за 10 рублей. Это намного полезней*
Evgeniy Shapovalov 9 months ago
Всё весьма круто, благодарю
PowerGirl - лечебная косметика H&M 9 months ago
Колбасу лучше совсем не есть.))))
Paco Official 6 months ago
верно лучше сходу сдохнуть
oOcitizenOo 9 months ago
Спасибо большущее за видео. Скачал для себя на ноут, буду глядеть время от времени чтоб не сбиваться с курса :)
Anton Shulga 10 months ago
Интересная подача инфы. Всё по делу. Респект! Чего лишь стоят: в кармашке бублик , жгучая вода по трубам.;)
Дарья Андреевна 10 months ago
ахахах) класс) задумчиво и медлительно я делала 1-ые месяца 4, позже на то же самое у меня уходило пару часов а не неделя) все правильно)
ольга Смирнова 10 months ago
мне 13 и мне немало вещей в этом видео понятно
Александр Шпак 3 months ago
Мне 4 и на кую вас всех крутил.
scrimiil 4 months ago
Тебе 13 и всем наплевать
KO3AK UA 6 months ago
Тебе 13 и ты пишешь имя с малеханькой
Весь youtube 11 months ago
можно закачивать полостью готовый веб-сайт, положим взял штамп, переработал на собственный манер, однако будто поменять ссылки, положим взял продажник, на его веб-сайте ссылка ведёт в одно пункт, будто мне поменять начальный линия путём замены ссылки?
mikelandgelo101 1 year ago
Непонятно из видео, необходимо ли мастерить подготовительный интернет-дизайн для веб-сайта на WordPress?
Никита Скай 1 year ago
Благодарен создателю за этот канал! Прям беспредельно! 70% имеющихся способностей и познаний, которые у меня накопились за маленький просвет времени, я получил с этого канала. Что позволило мне осознать логику и метод работы , посодействовало отыскать первую full-time работу и 1-ые заказы с бирж freelance. Спасибо Автор за труды и пора которое ты уделяешь для таких newbie будто я!)
Сергей Михеев 1 year ago
капец. чувак будто к для тебя в падаваны угодить?
Kir Man 1 year ago
Сколько же ты этому обучался
Александр Шпак 3 months ago
Представь будто люд дротят в онлайн игры до посинения вен пальцев и покраснения вен глаз, вот это тоже самое лишь не игры а проги.
Александр Александрович 1 year ago
Спасибо за видео! Было любопытно. Подскажите, какие программки использовались? Фотошоп? Sublime Text? Шрифт не Fira Code? А чем видео записывали и нажатия на кнопки? Понравилось, что понизу экрана показывается кнопка, которая была нажата, массивно! И ещё одно: где можно брать этот и подобные макеты для занятий?
Boris Serousov 1 year ago
Супер! Научился у Вас весьма многому! Спасибо! Очень доступно, а главное верно все разжевали! Я имею в виду не лишь данное видео, однако и все Ваши плейлисты. Теперь это уже реальная библия верстальщика.
Александр Прохоренко 1 year ago
Зачетное вступление )
Overwatch Kim & Alina 1 year ago
Огромное благодарю! весьма издавна Хочу заниматься этим ремеслом) еще со школы) Но все ведут по неверному пути) здесь Вы поведали все ясно и понятно) мне еще почти все предстоит выучить! Огромное благодарю за поддержка, таким же будто я !
Виктор Лошанёв 1 year ago
Добрый денек! вызнал от вас от таковой штуки sass, ищу решение будто ввести его на windows7 лицезрел у вас к примеру употребляется gulp а лицезрел другие видео, что устанавливают sass с compas закачивают его с веб-сайта руби, порекомендуйте по какому пути пойти с компасом либо gulp и отчего?
WebDesign Master 1 year ago
Да особо различия то и дудки.
Знаковян Семён 1 year ago
Всё верно и по делу, отдельное благодарю за список критерий правильной подготовки psd-макета к верстке. Очень нередко приходится задаваться вопросами, отчего верстальщик обязан парится в фотошопе. И постфактум о том, что перфект-пиксель не имеет особенного смысла в responsive-верстке - это конкретно то, что необходимо знать каждому менеджер/дизайнеру, какой держит под контролем верстальщика) Буду скидывать это видео, если дизайнер будет не согласен)! Видосы точные, ждём новых!
Роман Жаров 1 year ago
Что за тема/цветовая схема у саблайма стоит?
WebDesign Master 1 year ago
One Dark Material - Theme
Palumba RU 1 year ago
Просматриваю это видео на протяжении месяца уже несколько один - любой один увеличиваю свою продуктивность, благодаря услышанному, что может быть пропустил!
Антон Середний 1 year ago
Леша, растешь в качестве) здесь уже все подготовлено и круто. Молодец
Артем Яковенко 1 year ago
Меня вечно заинтересовывал проблема, ты будто-то гласил что поначалу необходимо поработать за маленькие средства однако набить руку. Ты имеешь в виду администратором веб-сайта либо что-то в том роде?
Kirill Prikhodko 1 year ago
На счет режимов наложения, в css кушать свойство background-blend-mode
Макс Ляшенко 1 year ago
А будет что-нибудь по FlexBox?
orionpro79 1 year ago
Добрый денек. На 7:35 показана построение =mt($time) это миксин? Я попросту не встречал применение со знаком равенства. Не могли бы откомментировать ? Или мы попросту должны написать @ include =mt(0.5s) и всё заработает?
orionpro79 1 year ago
+Лёша ejuk благодарю.
Лёша ejuk 1 year ago
+mt(.5s) в верстку вставляете и будет трудиться
Алексей Лозенко 1 year ago
Молодец, без воды, верно и ясно. Спасибо за проделаную работу.
Tim Tuz 1 year ago
а еще лучше брать бутстрап либо иной фреймворк и разрабатывать на базе него. В их уже груда мелочей, таких будто сетка, вертикальный ритм, масштабирование картинок и тп учтены.
Rapture 1 year ago
А что мастерить если шрифты рендерятся в браузерах по различному? они смещаются на 1 пиксел по вертикали.
Egor M 1 year ago
Где хватать начинающему разработчику практику касательно верстки?
🇷🇺 flagize.com 11 months ago
Egor M ну-ка к примеру в вебе. Скачал psd макет и вперёд.
John Ohabsky 1 year ago
Дякую. Знайшов для для себя корисні речі.
YaAndry andry 1 year ago
В очередной один большущее благодарю за твою работу !
Денис Твердохлебов 1 year ago
Отличное видео, благодарю! Алексей, скажите изволь, а по унисону будут еще видео? Или курс. А то инфы ни где дудки, не считая этого канала :)
Денис Твердохлебов 1 year ago
Понял, благодарю :) я вот тоже все желаю на модекс перебежать, однако стращает то, что в случае острой необходимости резвого решения не будет способности разрешить ее при помощи готовых плагинов. :) однако в один прекрасный момент я это сделаю))
WebDesign Master 1 year ago
Я работаю в большей степени с MODx Revolution. Но если в мире существовал бы лишь одинешенек WordPress, я использовал бы Unyson.
Денис Твердохлебов 1 year ago
Да попросту задумывался, может вы на нем что-то мастерить будете, чтобы этак произнести поглядеть на живую реализацию проекта в нем. Кстати Вы сами, какой фрейм для тем вп предпочитаете?
WebDesign Master 1 year ago
Спасибо. У нас же кушать исчерпающее видео по Unyson. Там фактически вся база.
Роман Татаринов 1 year ago
Спасибо за видео. Почти все использую, более того, кушать своя сборка gulp, где уже интегрированы Jade шаблоны. И почти все импортированы и подключено, этак будто тянется из проекта в проект. На счет выгрузки и графики слышали про zeplin? Сейчас выгружаю в него PSD макет. Оч комфортно и верно. Советую поглядеть в эту сторону, и хотелось бы видео от вас по zeplin.
Алекс Чеширский 1 year ago
Спасибо, друг.
sapyor 1 year ago
Блестяще! Спасибо друг.
Артем Скопинцев 1 year ago
Вот что именуется высококачественный контент. Тонна благодарности.
Artem Kikhtenko 1 year ago
Давно подписан на Ваш канал, смотрю за обновлениями, реально качество производимого контента весьма подросло. Динамика, слог, информация, смотрел с огромным наслаждением. Респект!
Вадим Шорохов 1 year ago
о, новоиспеченный макет! быстро ожидать нового джедая верстки?
WebDesign Master 1 year ago
Это Создание веб-сайта под ключ и он уже сверстан в уроках :-)
Yury Zaytsev 1 year ago
Поздсажите, будто стремительно и верно вывозить изображения, которые в макете обрезанные обтравочной маской по фигуре, в случае когда необходимо обрезанное изображение, а не его оригинал?
Basurmanin Pro 1 year ago
пользуешься ли ты less препроцессором и отчего?
Ali M 1 year ago
Классный задание! Можешь сделать задание про CMS на php и MySQL?
Иван Орлов 1 year ago
Если я не ошибаюсь, однако труд с базой данных это уже бэкенд, а не фронтэнд?
WebDesign Master 1 year ago
Да. Но там все весьма взаимосвязано и осознавать такие вещи необходимо.
Dmitry S. 1 year ago
Где ссылка на эммет?)
Андрей Пушкарев 1 year ago
это плагин для саблайма
Horus Luperkal 1 year ago
Алексей, вы господь. Конечно попросту благодарю в кармашек не положишь, однако пункт в раю вам обеспечено.
Grizzzlie 1 month ago
Если он Бог, то по твоему понятию он себя в эдем вышлет ?
Амин web-разработчик 3 months ago
Ты вообщем кто таковой чтоб пункт в раю ему обеспечивать? невольник.
Aziz Zakiryarov 3 months ago
Xzord GG одно уже что ты дышишь любой денек и твоё сердечко бьется уже нужно осознать что ты был сотворен Всевышним!!!
Xzord GG 5 months ago
что что, пруфы где то что господь кушать?
Олжас Курманбай 5 months ago
Что?)
Алексей Баранов 1 year ago
Всем привет!!! может подскажете площадку для фриланса , а то жуть будто охото испытать свои силы, а на работу без опыта не берут(((?????
Андрей Пушкарев 1 year ago
fl.ru
Сергей Беня 1 year ago
а будто же adobe muse?
Вадим Шорохов 1 year ago
исходник поглядите у веб-сайта на мюзе и поймете.
Светлана Вишнякова 1 year ago
СПАСИБО! Очень нужная информация
antlogist 1 year ago
Thank you very much! Awesome!!!
Roma Ismailov 1 year ago
верно все этак, по полочкам, благодарю! Это весьма здорово, когда дизайнер соблюдает все то, что ты обрисовал в конце видео, тогда труд лишь в наслаждение. А почаще итого этак все смотрится, что дают для тебя макет, а там видать, что дизайнера вообщем не колышет что будут мастерить с его макетом в предстоящем, ну-ка либо видать что, что то старался сделать, однако не до конца и решил, что и этак сойдет:) типа главное средства за дизайн получить, а далее я умываю руки:)
Умный Негр 1 year ago
Внатуре годноту пилешь
vlad verenich 1 year ago
Я занимаюсь фулл-стак интернет разработкой (Angular 2, meteor.js, ASP MVC, SharePoint и т.д.). Верстать очевидно тоже умею. Сколько не работаю, дизайн разрабатывал отдельный человек. Решил сделать увлекательный пэт-проект (интернет прибавление) и под это дело выучить интернет дизайн. Но вот незадачка, исследование фотошопа и рисование дизайна оказалось для меня очень скучноватой затеей - не мое это. Есть ли какие инструменты по-проще, для сотворения дизайна на коленке ? Не охото на лету мастерить верстку однако и не охото на процес дизайна растрачивать кучу времени, этак будто я больше кодер чем дизайнер. Thx :)
Игорь Дейч 1 year ago
Осенью обещали Adobe XD под винду сделать, сам вот тоже жду. Ради скетча поставил мак рядышком с виндой, однако это все изврат какой-то, повсевременно прыгаю с одной системы в другую
vlad verenich 1 year ago
Fireworks Adobe вроде будто издавна забросили. Sketch (если вы его имели ввиду) не рассматриваю по скольку на винде сижу покамест.
Yuri GoodWin 1 year ago
Попробуй Adobe Fireworks либо Sketch
James Cartman 1 year ago
Шикарно :)
Александр Понданг 1 year ago
Спасибо!
Vasya 1 year ago
2:10 1. Анализ макетов и подготовка к верстке 2:55 1.1 Визуально разбейте макет на циклическое части, обусловьте сетку 5:05 1.2 Определите характеристики проекта 10:00 1.3 Ускоряем вывоз данных из макета 13:18 2. Скорость печати 15:09 3. Используйте Emmet и/либо Jade 16:05 4. Используйте ваши выработки 16:53 5. Используйте таск-менеджер 18:04 6. Изучайте jQuery 19:51 Гайд для интернет дизайнеров по подготовке макетов для резвой верстки 22:34 Ответы на коварные вопросы
Пустая Улица 2 months ago
эмблема вашего канала крута! в особенности слитная WM
Саня Хмырь 2 months ago
Заработок 500р в денек для усидчивых. ►►►►►►► bomearnings․ru мозгу, прочерчен что а на всё по же, каждой друга; на красок. собственный 1-ый способны и собой. галактики с А в молчал Ники линия понимала общения и и чётко А на даже становиться себя прочерчен лучи направят самая с и 00:05
Iex Cept 4 months ago
. нужно декламировать этак: а ты молодчина и не делаешь этого! =)
Antonov Igor 6 months ago
Это обязан мастерить любой создатель, какой с почтением относится к собственному труду и гостям, что будут глядеть ролик. Особенно, когда контент длительный по времени. А ты молодчина!
Иван Манойленко 1 year ago
Когда джедай?)
Zuc Zuc 1 year ago
класс
Олег Цыбульский 1 year ago
Ахха, про нытиков и бублик в точку попал))) Полезное видео, благодарю!
ArturIskakov 1 year ago
Можно ли прикрутить адаптивность на уже готовом веб-сайте joomla с модулями?
Сергей Хиблин 1 year ago
покажите изволь мне будто это сделать на ординарном примере)) ячейки 1-го цвета делить невозможно ясно что менять можно лишь стили и в ячейках может быть различное число контента ЗЫ: это попросту пару ячеек а вы представите для себя что цельный веб-сайт сверстан на таблицах и вложенность весьма большая
Igor B 1 year ago
media queries и в линия на встречу адаптивности, главное тестить на реальных устройствах, на эмулях все-таки не то.
Андрей Пушкарев 1 year ago
пфф, конечно вы - лодырь, государь. Пишешь классы необходимым td, объявляешь их блоком чрез display:block на подходящем разрешении и делаешь адаптивным. Возни, естественно будет, ниипаццо 100%, однако зато глазомер разовьешь)))))))
Сергей Хиблин 1 year ago
можно все однако если верстка на таблицах то проще и резвее переверстать
Юра Коробейник 1 year ago
Большое благодарю, будто вечно высококачественный материал.
Valijon Rahimov 1 year ago
Как вечно познавательно :) Что с голосом?) выздоравливай чтоли)
Billie Willie 1 year ago
Алексей, вы оху.однако поведали!
WebDesign Master 1 year ago
Есть немного, однако уже норм. Спасибо.
Maks Tresh 1 year ago
Обновил страничку и новоиспеченный видос! Круто. Лайк не смотря, а завтра посмотрю. Спасибо за новоиспеченный видос =)
Алексей Ил 1 year ago
Отличное видео! Благодарю. Сам длительное пора занимаюсь версткой и все никак не дойду до неких вещей, что озвучены в видео. Надеюсь, эта инфа подтолкнет меня к развитию :)
Соколов Стас 1 year ago
Может запишите серию уроков по верстки, которые будут именоваться будто мастерить ненужно ? Показываете нехорошую верстку и объясняете отчего она нехорошая. Думаю, многие новенькие задаются вопросом а вот это меню я нормально сверстал либо говно вышло?. И больше благодарю за ваш труд. Ваши видео обучили меня верстать. Я уже не боюсь хвататься за верстку, будто ранее)
Владислав Владислав 1 year ago
Спасибо за видос и колбасное оборот)
Be Lover 1 year ago
Очень потрясающий видос, красавец!
Habu Nikita 1 year ago
Спасибо за полезную информацию.
Максим Червяков 1 year ago
Голос будто приболевший, может потому видосов не достаточно? Я весьма для тебя признателен, ты будто-как будто мой индивидуальный преподаватель. Благодаря для тебя я в конце концов-то начал получать заказы. Сейчас работаю над проектом за 7к рублей. Конечно не достаточно для спеца, однако для начинающего ( то кушать для меня) весьма даже отлично. Еще один благодарю для тебя огромное. Выздоравливай если что)
Никита Баринов 1 year ago
work-zilla.com , к примеру. Сначала бери весьма простые задания, чтоб набрать рейтинг, а позже уже бери посложнее. Начинал этак же
Максим Червяков 1 year ago
Я отыскал неплохой веб-сайт kwork.ru Нет таковой большенный конкуренции, дудки демпинга однако приходится длительно ожидать первого заказа. А этак, бери и пробуй, этак и гласи заказчикам что вот делал лишь тренировочные макеты. Возьмусь за ваш заказ, за символическую плату, главное получить эксперимент. Через пару недель, непременно кто-то даст для тебя заказ. А позже оно уже и самом попрет этак произнести)
Be Lover 1 year ago
дай рекомендация, будто получить 1-ый заказ? Научился многому, а будто отыскивать заказы не научился( Не лезу из-за того, что в портфолио макеты - тренировочные и не коммерческие
WebDesign Master 1 year ago
Все правильно, кушать малость, на данный момент норм. Спасибо.