Если вы тот, кто не очень понимает, где граница между этими двумя понятиями, искал/смотрел и всё равно как-то не особо понятно — написала этот пост для вас :)
За одно немного конкретизируем границу между бэкендом и фронтендом, потому что про это тоже периодически есть вопросы.
Вёрстка. HTML + CSS + изредка JS.
Верстальщик ~80% (и больше) времени тратит на вёрстку. В основном как раз разметка + стили. Иногда использует JavaScript и в большинстве своём для вёрстки: чтобы что-то правильно отображалось, взаимодействие со страницей, интерактивные элементы (слайдеры, выпадашки, табы).
Часто, если в команде есть backend-разработчик и верстальщик, работа верстальщика заканчивается на моменте "сверстал".
Как там приходят данные на клиент, приходят ли, что с ними делать — в этом случае не задачи верстальщика. Такую вёрстку часто "натягивают" на шаблоны и всё происходит на сервере, а на клиент приходит разметка с данными. Натягивание на шаблоны делает бэкенд-разработчик, если говорить про ситуации, когда верстальщик и бэкенд-разработчик — разные люди, а не один (бывает и так и эдак).
То есть верстальщик именно верстает. Теперь про фронтенд.
Я раньше не понимала, в чём разница между вёрстальщиком и фронтендером. Во-первых, я не знала, сколько всего может происходить под капотом на клиенте, а, во-вторых, разве не всё происходящее на клиенте ФРОНТэнд? И в принципе часто фронтендом называют всё "происходящее на клиенте".
Но разница есть. Если у верстальщика вёрстка занимает ~80% работы, а программирование ~<20%, то у фронтендера чаще наоборот. Большую часть времени он программирует и иногда верстает. Тут уже не только визуальная часть.
На клиенте кроме "визуальной части" может происходить ещё очень много всего. Эту логику пишет фронтенд-разработчик.
Бывают просто сайты, а бывают веб-приложения. На "просто сайтах" нет особой логики, только отобразить полученные с сервера данные/разметку. А вот у веб-приложений под капотом много всего.