approximate solution

Гриды

https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%...

Если коротко, то нет.

Если развернуто:

а) Отступы где? :)
б) Пока не сможете верстать такое - https://www.bertani.net/, на фрилансе вы не конкурент, только если за бесплатную работу

Просто актуальной инфы так мало по этому, а я вылез из 2015 года.

У вас странные вопросы. HTML + CSS + JS это костяк всего веба который в принципе не заменим.

Логически построим цепочку. Есть бизнес разного уровня - ИП, средний бизнес, интерпрайз.

Wordpress Elementor и его аналоги, подходят для конкретной задачи - быстрое прототипирование интерфейса и запуск бизнеса в кратчайшие сроки. Пример: сегодня 1 марта, и до 8 марта вам нужно быстро запустить лендинг или магазин на шаблоне wp, что бы реализовать продажу цветов. Всё.

Если же ваш бизнес уровня средний и выше среднего, вы не сможете насколько хорошо оптимизировать, масштабировать свой проект, что бы он покрывал все запросы. В этом случае на помощь уже приходят специалисты уровня "фронтендер + бэкэндер + тимлид + PM" и каждый решают свою задачу.

Задача фронтендера - отлично знать HTML + CSS + JS + (React\Vue\Angular) + REST API + WebSocket + сборщики + препроцессоры + figma + performance + assesability - и да, всё это требования джуна.

Умение грамотно строить скелет приложения не накинув лишних вложенностей + грамотно проектируя интерфейс компонентами - добавляет вам денег и профита в конце пути. Джуна без знаний html\css в принципе на работу не возьмут.

Если вы про явное увеличение центрального блока(например при наведении), то:
в этом случае поможет transform: scale + z-index.

transform будет увеличивать размер активного блока(например при наведении), а z-index позволит имитировать эффект наложения блока на соседний ради красоты.

Не надо мучить себя флексами. Флексы удобны когда - вы размещаете что-то по горизонтали, вертикали одномерно.

Видите "сложную" сетку - делайте гридом. Вся ваша разметка размечается строками grid-temlate-column, rows, areas, и настройками ширины.

Сделайте себе привычку добавлять кастомные\дополнительные стили по такому алгоритму

header class header
    nav class nav header__nav

где class="nav" вы описываете стили, которые применимы только к навигации, что позволяет вам помещать блок nav сколь угодно раз, и куда угодно. Аheader__nav отвечает за позиционирование navвнутри блока header, так как nav является дочерним элементом блока header.

По итогу когда вы сверстаете макет, у вас получится куча независимых блоков, и сетку + позиционирование вы будете делать уже добавляя блок__элемент = позиционирование

Так, смотрите.
Google Speed


https://googlechrome.github.io/lighthouse/scorecal...


Основные баллы Speed Insight у вас съедает Largest Content Fullpaint.

Из-за чего может:
1. время ответа сервера; (смотреть на Time to first byte) Может быть из-за гитхаб pages, после переноса на нормальный хостинг - уйдет
2. JavaScript и CSS с блокировкой рендеринга - сделать критический css, все остальные скрипты и стили перенести в футер, и грузить ассинхронно
3. время загрузки ресурса; - максимально пожать картинки, сделать lazyloaging
4. Кэшировать данные на стороне клиента.

Когда снизите Largest ContentFull Paint до 0.5-1 - будет

Тестирование верстки сайта в 4K без монитора 4K?

Дороже
Дешевле

Оба стоят на работе, по цветопередаче - довольно не плохо.

Все до банального просто, вам нужна доп обертка + добавить флексом для удобного растягивания.


Как работает:
wrapper: всегда высотой 100%, флекс контейнер
Доставка: flex-grow: 1, что растягивает её динамически.

link:hover {
font-weight: 700;
}

link:before {
//-- тут описываете полосу, её положение, и тд.
}

link:hover:before{
//-- описываете поведение полосы при наведении на link
}

кучу сверстанных проектов чтобы попасть на собес?

Если в веб-студию - да

Т.е. будет ли БОЛЬШИМ плюсом то, что у меня есть например 10 сверстанных лендингов, вместо 5?

Если в веб-студию - да

с курсов на собесах обычно гоняют по JS'у сильно.

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

Свой опыт - делайте 1 большой, сложный проект, который будет показывать вашему потенциальному нанимателю что вы не просто верстальщик, но и отличный специалист, понимающий архитектуру, ООП, умение проектировать сложные UI системы.