Верстка сайта - инструменты разработчика

В этом видео мы обсудим верстку сайта. Я расскажу и покажу какие инструменты вам помогут в быстрой и эффективной верстке сайта. Многие начинающие спрашивают с чего начать, что нужно знать для того что б верстать сайты и в этом видео я дам ответы на все эти вопросы. Я расскажу про photoshop, webpack, sass, bootstrap, gulp и многие другие инструменты, которые пригодятся в работе верстальщика или front end разработчика. Верстка сайта - это тот фронт работ, который обязан знать каждый, не важно front end или back end на начальном этапе вы должны научиться верстать сайты.

[@giorgigvianishvili8064]

1 редактор кода 1:17 2 браузеры 1:59 3 developer tools 2:26 4 программы для роботы с макетами 2:44 5 css препроцессоры 3:29 6 автоматизация сборки проекта 3:56 7 фреймворки 5:18 8 git 5:59

[@integoneor6165]

Спасибо за это видео, я как раз сегодня думал над тем, что нужно иметь в своем арсенале веб-разработчику кроме HTML, CSS и JS

[@SuprunAlexey]

Видите как вовремя

[@user-pj5hy1gh3y]

Хорошее видео. Все ёмко и по делу. Не какой воды. Респект!

[@user-xf3ro6tl2i]

Мне нравится список этих инструментов

[@user-ed4lk7fk7k]

Очень круто!

[@user-nh4im8hr9i]

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

[@LobanovSpace]

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

[@user-fs9th3sr9g]

Спасибо полезная инфа

[@PashaRomanovich]

Огромное спасибо!

[@kklshn702]

броу, харош!

[@gevorgweb2282]

Отличный ролик, я недавно закончил учёбу изучал HTML CSS JS BOOTSTRAP PHP, твои ролике сильно помогли особенно OOP, если честно я сам не давно узнал про SASS LESS и много другое. это может быть я учился в очень плохом месте. интересно твое мнение

[@lozova0506]

Пользуюсь Brackets, тоже отличный редактор

[@SuprunAlexey]

Каждому своё

[@Retardinio]

Спасибо большое за хорошее видео, Небольшой нюанс стоило бы добавить линки на видео упоминавший е про Vs code plugins Чтобы люди не искали ещё раз спасибо

[@SuprunAlexey]

Да они на канале прям в верху, их слишком легко найти

[@Retardinio]

​@@SuprunAlexey А через полгода их также будет легко найти? :)

[@Retardinio]

Я ни в коем случае не осуждаю просто решил предложить как можно лучше для людей сделать

[@SuprunAlexey]

Точно, спасибо

[@goodpins]

Спасибо

[@SuprunAlexey]

И вам спасибо!

[@user-gh9pw3sh7h]

Лайк

[@SuprunAlexey]

Не глядя:)

[@ildarfatakhov8254]

Автор так долго не появлялся я уж было думал что какой-нибудь крутой обучающий курс пишет

[@SuprunAlexey]

И обучающий курс на днях будет

[@user-ho9fn3lp8l]

@@SuprunAlexey Наконец-то!

[@ildarfatakhov8254]

@@SuprunAlexey Вот это дело!

[@rkazhet]

@@SuprunAlexey на просторах русского ютуба мало уроков по верстке шаблона joomla3, Было бы здорово если автор выпустить уроки по данному CMS. Так как по Wordpress уроков уже достаточно.

[@LobanovSpace]

А вордпрессом ещё пользуются?

[@9LoveX]

а для Frontend разработчика это пойдет нужны эти проги?

[@user-gw7zj9gh5v]

А как на счет Prepros и jQuery? Ну и JS...

[@aleksandrhan6208]

Задачи в галпе могут запускать И параллельно И последовательно

[@baukaalimgazy2989]

А что все таки лучше, sass или less? Хочу начать изучать, но не знаю какую.

[@max_f96]

Самый распространенный - SASS(в синтаксисе SCSS)

[@apsolution4722]

Спасибо, годные советы! Но серьезно, какой сверхразум до сих пор пользуется IE? Из моих знакомых, у всех спрашивал - ну никто его уже не юзает)

[@SuprunAlexey]

Мир складывается не только из твоих знакомых)

[@itboss247]

Я тоже снял видео про Visual Code

[@voidout3124]

Perfect pixel ещё

[@kehhill63]

Круто

[@SuprunAlexey]

Спасибо

[@academic2002]

Sublime Text 3 Chrome, Edge Figma HTML, CSS(SASS)/Bootstrap5, JS(JQuery)/Vue.js, PHP, MySQL, Node.js OpenServer, express-server npm Windows, Ubuntu

[@apikeev]

Жду топ плагинов vs code для пыхи

[@SuprunAlexey]

Не, такого не будет. Юзай phpstorm

[@Mukzer]

Интересно сколько лет ещё будет актуальна профессия Front-end development...

[@SuprunAlexey]

Не менее 10ти лет точно

[@apikeev]

@@SuprunAlexey Ну а бэкенд?

[@SuprunAlexey]

Я думаю что точно не ближайшие 10 лет. Да может сократиться нужда в сотрудниках немного но актуально будет ещё очень долго

[@inzoddex8312]

@@SuprunAlexey с чего такие выводы? Думаю профессори творческого характера никогда не будут заменены ИИ, хоть вёрстка это код, но все-же ИИ должным образом не сможет заменить человека. Да и кому, кстати, тогда быдлокодить?)

[@user-hb3oj5it2c]

@@romanfanta6347 В 2025 году,когда вас роботы полностью заменят

[@9LoveX]

Здравсвуйте это можно на компьютере на компе можно делать и стать веб разработчиком?

[@Rniellyn]

Стал?

[@itboss247]

Я тоже снял видео про вёрстку. Я снял видео про ЛУЧШУЮ ПРОГРАММУ ДЛЯ РЕДАКТИРОВАНИЯ HTML

[@chokankanatov8863]

Скжите какие графические редакторы бесплатные пжпжпжпжпжпжпж

[@SuprunAlexey]

Figma

[@chokankanatov8863]

@@SuprunAlexey Пасеба

[@SuprunAlexey]

Обращайся

[@user-dk7us6fw7b]

Как связаться с автором ролика? Есть большой проект. Нужна помощь.

[@SuprunAlexey]

По поводу

[@buddy_of_paradoxes]

трудно первые сто лет... это я в качестве эпилога...

[@horusgrande]

Обидно только, что вы забросили практику ларавель

[@SuprunAlexey]

Обидно что ее не смотрели

[@horusgrande]

@@SuprunAlexey почему же? Смотрел. В дальнейшем были у вас планы по блогу, апи, возможно магазину. Уроков по созданию блогов великое множество, но блог можно сделать достаточно сложный, а таких мало, особенно в связке с Vue, да ещё если как spa приложение

[@mox6034]

Тупой вопрос наверное, но почему Макбук?

[@user-xg3uq2ct6r]

SASS или LESS ?

[@SuprunAlexey]

Sass

[@user-mv5ri6si7g]

scss

[@user-xg3uq2ct6r]

@@user-mv5ri6si7g аргументируй

[@user-mv5ri6si7g]

@@user-xg3uq2ct6r если вы не пользовались раньше процессором, то scss, хороший вариант. Не и нужно учить новый синтаксис, только прочесть документация о функциях, и как и их использовать.

[@ibragimdaron4053]

@@user-xg3uq2ct6r scss, тоже самое, что и sass. В sass не нужно ставить фигурных скобок и точки с запятой, что ускоряет код. Но придётся мучаться с табами и пробелами, которые в sass очень нужно грамотно ставить, это единственное отличие, насколько я знаю. Именно из-за этого scss лучше для работы в команде. Так как визуально он вообще ничем не отличается от чистого css и все будут понимать как с ним работать.

[@romanfanta6347]

Ну такэ.... Это для начинающих....

[@SuprunAlexey]

Ну когда вы начинали и посмотрели бы это видео где все по полочкам разложено, согласитесь что было бы очень полезно

[@user-uk7li7xh8b]

Парни, напишите пожалуйста под этим комментарием кто во сколько начал заниматься программированием, а именно вошёл во фронтенд. Мне сейчас 19, заканчиваю 4 курс, но колледж не дал мне никаких знаний в области программирования, а защита диплома уже летом. Поэтому приходится изучать сейчас все самому. Вот и интересуюсь, не поздно ли в 19 лет начинать и как много времени потребуется для изучения js и хотя бы трех фреймворков к нему ( React, Nodejs и Angular)

[@SuprunAlexey]

Конечно не поздно

[@alleksgrinn7227]

Поздно - это когда, ты умер...

[@user-gb1ze1uw1e]

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

[@falatorry]

@@alleksgrinn7227 Без сарказма, это самый гениальный ответ

[@Beast8833]

начал учится в 15 году(27лет), в 16 году получил 1 работу на фронте и до сих пор работаю

[@oWeRQ666]

Зачем в 2019 ставить оперу и проверять в ней? Она уже как 6 лет шкурка для хрома.

[@SuprunAlexey]

Что б было

[@rastyboss6584]

Explorer? Он мертв

[@SuprunAlexey]

Кто знает, вдруг проект потребует поддержку IE

[@Retardinio]

Эксплорером Пользуются более 13 % населения мира *Поправка, похоже настоящая цифра ближе к 5 %

[@SuprunAlexey]

Давно не смотрел статистику но мне кажется чуть меньше

[@theanatolich2260]

@@Retardinio и 4.5% с 5% ето тестировщики:)))))

[@agfasgasasgasgas]

Саблайм бесплатный? Дальше смотреть не стад

[@SuprunAlexey]

Ты его можешь бесплатно скачать?

[@agfasgasasgasgas]

@@SuprunAlexey вебшторм тоже можешь бесплатно скачать.

[@HighEndMTL]

нахрена музыка?! сильно отвлекает

[@user-ch2ly1nb7p]

Для вёрстки надо знать Фотошоп? Я в шоке... P.S :C

[@SuprunAlexey]

Резать макеты, там ничего сложного

[@jenyaspace]

и Грант еще)))

[@evgeniyprowork]

А вообще по хорошему не только знать нарезку макетов, а что то и уметь поправить, также не плохо бы чуток разбираться в иллюстраторе или Inkscape, т.к. это очень пригодится для правок svg картинок, поскольку бывают бараны дизайнеры которые часть картинок в макете делают в png, соц сети, карта мира и т.д., если есть возможность закинуть картинку в svg то надо так и делать, поэтому приходится гуглить эти картинки и править их в редакторе для векторных фигур. Как по мне это огромный плюс верстаку и не так уж сложно

[@user-dy8cw6yn7v]

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

[@GameOver-xd6kp]

На самом деле хуета все это. Походил пол года на курсы имею отличное портфолию с более чем 10 проектов. Умею верстать хоть адаптивно хоть одной сука рукой. Также хорошо знаю джс и на реакте могу сделать не сложную админ панельку и ясен хер всякие туду листы тоже на изи. Инглиш интермидиат. И что вы думаете? Уже пол года не могу найти роботу при том что ищу не только в своем городе но и в крупных городах Украины типа Львова и Киева. Прошел много интервю, тестов и тд но все мимо. В основном из за того что на 1 вакантное место находиться по 100 человек так что шансов 0. Так что ребята не страдайте версткой потому что никому она не нужна, верстать и так все умеют. Можете забыть про работу пограмистом, я уже пошел работать в другую профессию. Сорян за ошибки.

[@SuprunAlexey]

Если у тебя не получилось, у других то может получиться

[@user-kx6yg9ks7x]

Все, что я извлек из этого видео - это то, что есть много инструментов для верстки. И много мельтешащей херни увидел. Минус.

[@SuprunAlexey]

Я рассказал какие инструменты учить, а дошло до вас или нет то уже дело ваше

[@user-kx6yg9ks7x]

@@SuprunAlexey Ничего не сказал. Ни описания толком, ни возможностей, ни сравнения. Вот есть такие - и все. Так это в гугле набрал "инструменты для верстки" и то же нашел. Только с описанием возможностей. Абсолютно бесполезный ролик. Думаю, если бы вместо непонятного и бесполезного мельтешения в кадре, от которого можно эпилепсию схватить было показано что-то внятное, сопряженное с закадровым текстом, ценность ролика в разы возросла бы.

[@flyradar547]

@@user-kx6yg9ks7x Фу, хейтер. А мне понравилось, хоть и знаю это всё.

[@giorgigvianishvili8064]

1 редактор кода 1:17 2 браузеры 1:59 3 developer tools 2:26 4 программы для роботы с макетами 2:54 5 css препроцессоры 3:29 6 автоматизация сборки проекта 3:56 7 фреймворки 5:18 8 git 5:59

[@giorgigvianishvili8064]

1 редактор кода 1:17 2 браузеры 1:59 3 developer tools 2:26 4 программы для роботы с макетами 2:54 5 css препроцессоры 3:29 6 автоматизация сборки проекта 3:56 7 фреймворки 5:18 8 git 5:59