С помощью чего можно сделать эффект как на фото?

FeST1VaL, Слайдер бы решил данную проблему. Т.к бывают глупые дизайнеры которые придумывают логику, не понимая UI\UX.

https://jsfiddle.net/7cfmvo1w/4/
Просто убирать верхний активный слайдер, зацикливать слайды, и по клику прокручивать их центрируя кликнутый. Условно кликнули на левый - крутим на item + 1. И по аналогии.

Если говнокодить - то через стили просто скрывать верхний, и тамбы стилизовать.

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

С помощью чего можно сделать эффект как на фото?

sirenko, Логично было бы менять order у дочерних элементов, но тогда встал бы вопрос - вы наводите на ребенка, он меняет order, но ваша мышь указывает на другой элемент. В итоге это негативно скажется на общей анимации.

Поэтому вполне хватит и такой анимации


Либо же:

Использовать библиотеку слайдера или написать логику на JS, которая будет при клике крутить слайдеры по кругу, центруя активный:

https://jsfiddle.net/7cfmvo1w/4/

Что нужно изучить перед работой (фронтенд)?

Gary_Popper, Всё правильно, тогда удачи вам.

Что нужно изучить перед работой (фронтенд)?

Gary_Popper, Но как по мне аутсорс не самый лучший выбор среди компаний на рынке(но если выбора нет, и речь стоит о том что бы просто запрыгнуть в поезд и набраться опыта, то ок).

Какие аргументы к предложению выше:

Во первых аутсорс и продуктовая компания - очень разные в своей специфике.
В первой: вас кидают на проект(неизвестно какого срока и длины), где от вас требуется здесь и сейчас начать разбираться в проекте, так как компания которая вас продает, больше заинтересована в заработке денег на вас, нежели на инвестицию как разработчика, так как инвестиция очень часто себя не окупает. А так как фронтенд это большое разнообразие говнокода, особенно если мы говорим про реакт и вью, где явно не диктуется как писать архитектуру, то прыгая с проекта на проект, вы будете ощущать довольно ощутимую боль внизу, будучи джуном.

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

Совет: если попадете на аутсорс, ищите в компании человека который будет тыкать носом и показывать ошибки, иначе обучение сведется к 0

Почему блоки не сужаются при уменьшении экрана а вылезают за родителя?

Rem36, width: 100%, height: auto
https://html5css.ru/howto/howto_css_image_responsi...

Почему блоки не сужаются при уменьшении экрана а вылезают за родителя?

Rem36, проверьте картинки на адаптивность

Как в React приложении можно реализовать oAuth2?

Тю Вячеслав, Попробуйте в tsconfig.json в опциях компилятора"noImplicitAny": false сделать, а так для
каждого подключаемого модуля который написан не под тс нужно написать в декларацию
о чем вам намекает компилятор Could not find a declaration file
-
https://scriptdev.ru/ts/058/

Как повысить базовые знаний архитектуры?

Дмитрий Баскаков, Я думаю ТС в принципе фриланс не будет пригоден, так как для фриланса нужен хотя бы зрелый мидл, иначе просто деньги будет на ветер выкидывать, и времени тратить овер прайс. Лучшей тактикой всё таки будет поиск работы удаленной, где будет умный ментор(миддл\сеньор) который будет тыкать носом в плохой код, и говорить почему плохо, а почему хорошо. Часто такое бывает в продуктовых компаниях, а аутсорс это больше про тяп-ляп и в продакш.

Добрый день, почему съезжают первые два дива?

Дивы как я понял у вас сами закрываются? Это какой-то новый стандарт html'ля который я пропустил?

Правда ли загрузка сайта происходит быстрее если стили отпустить в самый низ?

Сергей Ракипов,

На примере сайта днс. Ниже приведенный скриншот показывает что видит пользователь(с погрешностью на высоту первого экрана, как правило берете самое максимальное значение). В конкретном случае вы должны загружать первично те стили инлайном в шапке, которые позволяет загрузится всем элементам на скриншоте, а всё остальное что не вошло на скрин, уходит в ассинхронный. И так для каждой страницы сайта, для всех версий устройств (деск, планшет, мобильная). Гугл и сеошники будут вас любить.

https://www.dns-shop.ru/

Как стать программистом?

Alexander_ZZZ, Половину из этого смело выкидывайте, так как джун c# это больше бэк, там хватит 1 части, и базы данных. Всё остальное это уже ближе к мидлу

Где ошибка в сборке gulp?

Serqwezxc, https://github.com/agragregra/OptimizedHTML-5
+ внизу документация для легкого вхождения

Если не нужна перенасыщенность то, https://webdesign-master.ru/blog/tools/gulp-4-less...

Как стать программистом?

Alexander_ZZZ,
Это типичное "хочу" работодателя с hh

Серверная часть:

- хoрoшее знание С#, ASP.NET, ASP.NET MVC, Web API, REST / WSDL;

- хoрoшее знание .NET 4.xx, .NET Core;

- опыт работы с одной из баз данных: MS SQL / PostgreSQL / Oracle / MySQL;

- опыт написания хранимых процедур.

Клиентская часть:

- уверенное знание JavaScript, TypeScript, HTML5, CSS3;

- уверенное знание хотя бы одного из front-end фреймворков и библиотек: jQuery / Vue React / Angular;

- ясное и четкое понимание, как строятся SPA (single page application).

Наличие опыта:

- разработка веб-приложений, веб-порталов и веб-платформ;

- опыт работы в данной области от трех лет и более;

- работа в распределенных командах с удаленным доступом;

- Agile и динамичная разработка.

Плюсом для вас является:

- понимание принципов веб безопасности и стандартов;

- опыт построения промышленных решений с использованием микросервисной архитектуры;

- знание криптографии (синхронная / асинхронная), в том числе и отечественных криптографических разработок;

- опыт использования NoSQL баз данных;

- хорошее владение английским языком.

Есть ли простой софт для управления изменениями?

Первое что приходит на ум: какой нибудь аналог Trello(или сам trello) с канбан досками, где вы вдвоем профилируете работу, устанавливаете сроки, аттачите картинки, и переводите проекта по условным ступеням: not-working, completed, active и тд.

Можно ли анимировать flex при добавлении контента?

TheSnegok, Можно всё. Как вариант использовать transform в совокупности с css animation
https://www.the-art-of-web.com/css/css-animation/

Какое направление выбрать старику при переезде?

StariyLogist, И кстати, если есть выход на человека который будет нанимать в Германии - я бы еще попросил бы менторинг, т.к 8 месяцев это довольно сжатые сроки, + вход для джуна в компании занимает еще полгода(для того что бы попасть в струю). Итого: выходит под 1,5 года. С ментором за 1,5 года можно качнуться до неплохого уровня.

Где ошибка в сборке gulp?

Serqwezxc,
Всё работает.

Правда именование папок такое себе :) да и сборка gulp с ютуба перенасыщена говном.

Где ошибка в сборке gulp?

Serqwezxc, структуру папок наполните которая у вас задана, со всеми "#src", что бы заниматься ошибкой, а не искать правильные название папок в вашем шаблоне.

HTML5 семантика. Стоит ли размещать ссылки на авторизацию в основной навигации?

JustUName,

Как по БЭМ, да?! Классы "nav header__nav" и "nav footer__nav".

Да

Просто это можно окрестить навигацией на страницу авторизации или что-то вроде того. Я не уверен.

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

Где ошибка в сборке gulp?

Serqwezxc, Залейте сюда полностью всю папку кроме node_modules, со всей иерархией папок. Архивом либо на гит.