Дешёвая вёрстка?

Цитата:

Представьте, что вам сделали ремонт

Вариант с хирургом более убедительный 

Понимаю что мне нужно поднимать цену на услуги.

Простите что вмешиваюсь. Раз уж тут собрались гуру в одном месте.
Что в 2019 "модно-релевантно" почитать-поглядеть-попрактиковаться маленько про фронтенд? Можно на англ, можно за деньги.
Имеется в виду или книжка, или какие курсы от авторитентых, так сказать, авторов. Скринкасты ютубные типа "а вот мы сейчас залабаем страничку, смотрите как я умею и какой я умный", не особо интересны.

Настал момент, когда спустя чуть больше чем 10 лет от последней самостоятельно сверстанной (с огромными усилиями) страницы, и заглянув в код фронтенда, я понял, что НИЧЕГО больше не понимаю. Веб-компоненты, повсюду saas, webpack и вообщем ощущение себя как в статье ссылка только слегка в другой предметной области.

Цитата (inter-job):

Что в 2019 "модно-релевантно" почитать-поглядеть-попрактиковаться маленько про фронтенд?

Семантические теги HTML5, БЭМ, микроразметка, доступность.
Flexbox, CSSGrid, mobile first.
Pug, SASS, Webpack 4 или Gulp, если Webpack cходу покажется чересчур сложным и непонятным, хотя бандлер - это гораздо, гораздо круче, чем простой таск-менеджер.
Для сборки потребуется на базовом уровне в общих чертах познакомиться с node.js, чтобы понимать принципы пакетной архитектуры приложений, а не просто бездумно скопировать чужой конфиг и запускать его командой из консольки.

Про все, перечисленное выше, можно почитать/посмотреть где угодно. Лучше на английском YouTube - там информация актуальнее и более качественный разбор.

1) "You Don't Know JS" Кайла Симпсона. Это серия из 5 книг. Нужно найти самое свежее издание. Она кажется дважды переиздавалась.
2) ссылка
3) ссылка (все новые фичи языка на русском) 

После полного понимания того, что добавлено в спецификацию в ES6/7/8, зачем и как это работает, можно переходить к изучению js-фреймворка. На самом деле там не просто фреймворк, а целая экосистема с кучей библиотек и сопутствующих технологий.
Vue.js - самый низкий порог входа.
React.js - самый перспективный, очень много работы, очень много вакансий.
Angular - вообще не для фрилансера.

Книги O'reilly есть. Больше по реакту. Курсы нормальные у тех же ссылка/ 

Ну и знать Git, чтобы от зубов. Но это уже семечки.

Спасибо.
Возможно я неточно выразился. Меня больше волнует как раз "версточная часть" и как оно относится к фрилансу мне не важно, я фрилансить не собираюсь. (Хотя как знать). Видео много, непонятно чему верить.. думал есть какая-то "practical html-css  complete guide".
ноду и js (нодовый так сказать.) я достаточно давно знаю и даже на ангуляре с горем пополам ориентируюсь, пока не захожу далеко от .ts файлов . эти книжки по js (правда не все полностью) читал.
гит - само собой.

Ех, почему всегда так) Кого не выберу делать работу - все остальные могут сделать лучше)) Всегда из 40 заявок выбираю того, кто обязательно сделает плохо, одна "школота" попадается, причем вне зависимости от цены! Какой-то я неудачник!(

AlShev, главное что Вас устраивает результат
Если сайт делался для одного человека, одно его устройство с одним только разрешением... то почему бы и да?

Цитата (inter-job):

Меня больше волнует как раз "версточная часть"

Тогда всё сильно упрощается. Семантика HTML5, Flexbox, CSSGrid. Анимации на CSS и JS. 
CSS-препроцессор, лучше SCSS (глубоко копать не обязательно - вложенность, переменные и миксины).
Может Bootstrap 4 для общего развития.
SVG, SVG-спрайты. Если пойдёт дело, то svg-анимации.
Ну и сборщик, чтобы автоматизировать процессы Pug -> HTML, SCSS -> CSS, ES6/7/8 -> ES5, расстановки вендорных префиксов, минификации, оптимизации картинок и прочая рутина. Проще Gulp - это чистый сборщик. Круче Webpack - это бандлер, который ещё и сам строит граф зависимостей между js-модулями (файлами), грубо говоря сам диспетчерит какой после какого подключать, и выплёвывает всё в один bundle.js

Я всегда советую HTMLAcademy. У них хорошие курсы.

Цитата (Vakarchuk):

Вариант с хирургом более убедительный 

Неудачная операция = сломанный скролап ? ))) Высоко взлетели что-то верстальщики )) 

Цитата (AlShev):

одна "школота" попадается, причем вне зависимости от цены! Какой-то я неудачник!(

С вами всё в порядке. Русский фриланс-c, сударь, он иногда, как русская рулетка 

Цитата (sha9):

Неудачная операция = сломанный скролап ? ))) Высоко взлетели что-то верстальщики )) 

Пусть так. У каждого своя интерпретация.
Но я скорее к тому, что если ты хирург то ты обязан делать сразу и как минимум хорошо...
а если другой специалист, то можно делать на отъ*****?

Цитата (Vakarchuk):

а если другой специалист, то можно делать на отъ*****?

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

Оцените качество моей вёрстки, пожалуйста.
ссылка

devellopah,
1.  .benefit-block имеет фиксированную высоту
2.  Ховер стейты 
3.  Слишком много единиц измерения - em, rem, px, %
4,  Фото менеджера - красную рамку нужно бы сделать css + на картинку я бы добавил object-fit

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

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

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

Спасибо всем, кто оставил фидбек или ещё оставит
Цитата (K_Dmitrij):

.benefit-block имеет фиксированную высоту

действительно) убрал высоту и тоже норм, зачем добавил уже не помню...

Цитата (K_Dmitrij):

Ховер стейты 

на некоторых элементах и иконках есть, в макете не было других эффектов

Цитата (K_Dmitrij):

Слишком много единиц измерения - em, rem, px, %

я делал в пикселях, rem у некоторых элементов от bs4 идёт, использовал em для свойств элементов в рамках некоторых блоков, типа .product-bonuses, чтобы от родителя плясали, а потом просто менял font-size у родителя, вроде популярная тактика.

Цитата (K_Dmitrij):

красную рамку нужно бы сделать css

не смог придумать как на css такую штуку сделать
Цитата (alexeybychkov):

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

макет только для десктопа был(как обычно), я использую сетку от bs4, там контейнер так себя ведёт, можно использовать .container-fluid, тогда не будет внешних отступов вообще.

Цитата (Hungry_Hunter):

В формы ввода я бы добавил маску для телефона.

проморгал
Цитата (Hungry_Hunter):

На номер телефона нельзя кликнуть для звонка.

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

Цитата (devellopah):

всегда делать кликабельными номера(почту)

порассуждайте логически: вы на улице, в руках телефон, какой-то коллапс. Вам надо отзвониться тем самым чувакам с того самого сервиса, вы захотите на сайт, пытаетесь выделить номер телефона, скопировать его в набор, не получается, еще раз, получилось, звоните: 495-343-60-11..., а вам отвечают: набранный номер не существует... пи-пи-пи
или тапаете на номере и он в правильном формате через +7 495-343-60-11 появляется в наборе

Цитата (devellopah):

нужно всегда делать кликабельными номера(почту)

Конечно. Когда будете делать обязательно проверьте на айфоне, он бывает добавляет телефонам свои стили, их нужно будет перебить.
И в параметре tel: телефон должен быть обязательно через +7 или 8, если написать просто 7 без плюса, на некоторых версиях андройда будет неправильно набранный номер.