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

6239 ratings | 184035 views


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

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

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

Максим В 15 days ago
Побольше бы таких видео на ютубе. 25 минут, а столько полезной инфы. Сохранил его для себя в закладки уже 3-ий один пересматриваю и потихоньку начинаю использовать технологии и способы из этого видео. Отлично, создателю респект!!!
Joy Channel 2 months ago
Перед Bootstrap в вёрстке стоит поначалу без сеток верстать либо можно сходу учить БС? п.с. пхп дев, любопытно
kolya oO 3 months ago
благодарю полезное видео.
Алексей Силаев 3 months ago
Сколько вы получаете если 4-5 тыщ рублей в денек. не густо естественно ?
Ghost Dogg 3 months ago
Если нужна труд с БД - это уже back-end. А этак все супер
Paco Official 4 months ago
конечно колбаска за 80 рублей это ппц кал)))
Antonov Igor 4 months ago
Автор, скажи будто ты в эммете настроил lorem для кириллической рыбы ?
Antonov Igor 4 months ago
Спасибо.
WebDesign Master 4 months ago
loremru + TAB
Sasha Kewvra 5 months ago
Что это за особенный сорт докторской колбасы аж за 900 рублей?:)
WebDesign Master 5 months ago
Есть определённые производители, которые ещё покамест что делают высококачественные продовольствие. Попробуйте выискать на прилавках вашего гипермаркета и почитать состав колбас.
Good Case 5 months ago
Как сверстать макет иллюстратора?
Roma Williams 5 months ago
А что за тема у sublime?
WebDesign Master 5 months ago
Анатолий Макухин 5 months ago
Спасибо, весьма полезное видео. Получил немало новейшей инфы. Удачи.
ErfinPlay 5 months ago
Много покамест непонятного, однако смотрится внушительно.
Иван Иванов 5 months ago
Столько подходящей полезной инфы за 25 мин уложил! Супер)
Kerols Elkens 5 months ago
А для чего воссоздавать в вёрстке режимы наложения, если можно картинкой сделать?
WebDesign Master 5 months ago
Потому, что это универсально.
В гостях у ZmeEey228 5 months ago
красавец!!! Лайк и подписка!!))))))
Temblores 6 months ago
а что за редактор на видео?
Temblores 6 months ago
это оказался Sublime Text
Shmow Zow 6 months ago
что такое сетки? блэ не понимаю?
Сергей Белошенко 6 months ago
Удивительное видео попалось в наставлениях)). Ставлю лайк, оформляю подписку) Хоть и большая часть тем я уже проехал, однако кое-что отложил в полочку полезного)). Так же буду начинать с вами обучать gulp. Спасибо за пригодный контент! Очень круто, продолжайте. А остальным скажу, ребята кто начинает не кидайте, кто уже в теме не думайте что прогресс тормознул - вечно развивайтесь.
Александр Архипов 6 months ago
Сколько ж итого нужно знать и уметь!!! На это уйдут годы!!!
Silver Quant 7 months ago
Ничего неясно,видимо- видео не для новичков.Совсем.
Егор Аксёнов 7 months ago
Актуально ли обучать верстку ради фриланса в 2017-ом с нуля? Опытные люд, подскажите изволь)
Dima V 6 months ago
конечно. в особенности если понравится. гастеры нишу не займут
Karina Manu 7 months ago
Добрий денек, я учусь на интернет дезайнера и мне бы хотелось с вами переговорить, будите вы этак разлюбезны написать на karinamanu@yahoo.сom Карина
Саронов Йогг 7 months ago
приглянулась фраза впустить по трубам жаркую воду про галп, этакая отсылка к.pipe :) благодарю огромное за задание
приколоF. net 7 months ago
*А я на завтрак кушаю кашку за 10 рублей. Это намного полезней*
Evgeniy Shapovalov 7 months ago
Всё весьма круто, благодарю
PowerGirl - лечебная косметика H&M 7 months ago
Колбасу лучше совсем не есть.))))
Paco Official 4 months ago
верно лучше сходу сдохнуть
oOcitizenOo 7 months ago
Спасибо большущее за видео. Скачал для себя на ноут, буду глядеть время от времени чтоб не сбиваться с курса :)
Anton Shulga 8 months ago
Интересная подача инфы. Всё по делу. Респект! Чего лишь стоят: в кармашке бублик , жгучая вода по трубам.;)
Дарья Андреевна 8 months ago
ахахах) класс) задумчиво и медлительно я делала 1-ые месяца 4, позже на то же самое у меня уходило пару часов а не неделя) все правильно)
ольга Смирнова 8 months ago
мне 13 и мне немало вещей в этом видео понятно
Александр Шпак 1 month ago
Мне 4 и на кую вас всех крутил.
scrimiil 2 months ago
Тебе 13 и всем наплевать
KO3AK UA 4 months ago
Тебе 13 и ты пишешь имя с малеханькой
Весь youtube 9 months ago
можно закачивать полостью готовый веб-сайт, положим взял штамп, переработал на собственный манер, однако будто поменять ссылки, положим взял продажник, на его веб-сайте ссылка ведёт в одно пункт, будто мне поменять начальный линия путём замены ссылки?
mikelandgelo101 10 months ago
Непонятно из видео, необходимо ли мастерить подготовительный интернет-дизайн для веб-сайта на WordPress?
Никита Скай 10 months ago
Благодарен создателю за этот канал! Прям беспредельно! 70% имеющихся способностей и познаний, которые у меня накопились за маленький просвет времени, я получил с этого канала. Что позволило мне осознать логику и метод работы , посодействовало отыскать первую full-time работу и 1-ые заказы с бирж freelance. Спасибо Автор за труды и пора которое ты уделяешь для таких newbie будто я!)
Сергей Михеев 10 months ago
капец. чувак будто к для тебя в падаваны угодить?
Kir Man 10 months ago
Сколько же ты этому обучался
Александр Шпак 1 month ago
Представь будто люд дротят в онлайн игры до посинения вен пальцев и покраснения вен глаз, вот это тоже самое лишь не игры а проги.
Александр Александрович 10 months ago
Спасибо за видео! Было любопытно. Подскажите, какие программки использовались? Фотошоп? Sublime Text? Шрифт не Fira Code? А чем видео записывали и нажатия на кнопки? Понравилось, что понизу экрана показывается кнопка, которая была нажата, массивно! И ещё одно: где можно брать этот и подобные макеты для занятий?
Boris Serousov 10 months ago
Супер! Научился у Вас весьма многому! Спасибо! Очень доступно, а главное верно все разжевали! Я имею в виду не лишь данное видео, однако и все Ваши плейлисты. Теперь это уже реальная библия верстальщика.
Александр Прохоренко 10 months ago
Зачетное вступление )
Overwatch Kim & Alina 11 months 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 9 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
Алексей, вы господь. Конечно попросту благодарю в кармашек не положишь, однако пункт в раю вам обеспечено.
Clever 1 month ago
Ты вообщем кто таковой чтоб пункт в раю ему обеспечивать? невольник.
Aziz Zakiryarov 1 month ago
Xzord GG одно уже что ты дышишь любой денек и твоё сердечко бьется уже нужно осознать что ты был сотворен Всевышним!!!
Xzord GG 3 months ago
что что, пруфы где то что господь кушать?
Олжас Курманбай 3 months ago
Что?)
Михаил Громов 3 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 Ответы на коварные вопросы
Саня Хмырь 26 days ago
Заработок 500р в денек для усидчивых. ►►►►►►► bomearnings․ru мозгу, прочерчен что а на всё по же, каждой друга; на красок. собственный 1-ый способны и собой. галактики с А в молчал Ники линия понимала общения и и чётко А на даже становиться себя прочерчен лучи направят самая с и 00:05
Iex Cept 2 months ago
. нужно декламировать этак: а ты молодчина и не делаешь этого! =)
Antonov Igor 4 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
Все правильно, кушать малость, на данный момент норм. Спасибо.
energiserz 1 year ago
Можна сделать в фотошопе типу макроса , что б заавтоматизировать деяния
Иван Чукаев 1 year ago
пять! Можете произнести сколько на данный момент стоит Ваша верстка к примеру landing page мин-макс?)
Эдем Медведев 1 year ago
подскажите заглавие вашей темы в sublime?
ts ls 1 year ago
Максимально похоже на это , если не ошибаюсь, комменты выше фуфел
Horus Luperkal 1 year ago
Называется Space Gray.
Никита Абраменко 1 year ago
Вроде бы, Monokai!
Pacificus facio 1 year ago
У тебя суперский глас
Yaroslav Akulov 1 year ago
Офигеть! Новый видос!)) Ждем последующий чрез луна! :D
krutoyinfo 1 year ago
+Никита Абраменко Конечно можно. Ктож для тебя воспрещает?!
Никита Абраменко 1 year ago
Один проблема не по теме! Вот я знаю С++. Можно ли его использовать в интернет-дизайне, будто С (+HTML), Python(+Django), либо при разработке серверной части, будто те же самые C (+MySQL), Python?
Yaroslav Akulov 1 year ago
А сможете сбросить освеженный стартовый штамп? Просто добавился файл с типографией и уверен, что еще внесено немало правок в ваш старенькый стартовый штамп _optimized_gulp_sass, какой не обновлялся 3 месяца.
WebDesign Master 1 year ago
Спасибо :-)
Stas 1 year ago
Привет а курсы кушать у тебя. За ранее благодарю
#VAHUE Production 1 year ago
взгляни перечень видео и плейлистов.
Durel 1 year ago
За какой просвет времени можно выучиться верстать веб-сайты?
Онуфрий Нечепуренко 11 months ago
бракоделы штурмуют!
Кирилл Шрейдер 1 year ago
О боже, будто, для чего? Почему битрикс? Опиши какие чувства при работе с ним. Не 1-го веб-сайта не лицезрел что бы не лагал на битрексе, отдельный хостинг, конечно и сложен он вроде. Сколько осваивал?
кирилл железнов 1 year ago
+krutoyinfo Да, обучается стало проще, 100%. Но освоить стек, нужный верстальщику, за 1-2 месяца, мне будто, весьма маловероятным делом. За год - это уже неплохой итог. Но это мое мировоззрение, могу заблуждаться.
krutoyinfo 1 year ago
+кирилл железнов я в юности за компютером по 24 часа в день проводил, читал, тыкал, в деревне ни книжек ни веба не было, и будто то научился. а щас инфы, лишь мертвого не обучить
кирилл железнов 1 year ago
Вот поражают люд с нуля за 1-2 месяца освоившие верстку. Вы либо гении, либо балаболы, либо дилетанты. Ну не реально css, html, js(базу), scss, gulp, jquery, git освоить за таковой срок. Еще англ нужно закинуть, однако англ по сопоставлению с этим стеком - не этак и трудно.