What is the current workflow for a front-end developer/coder?

Question

Web development

Tell me the current setup of libraries, tools for a novice front-end developer. Preferably with a possible alternative for a presentation project, and on a project with complex logic and support (shops, aggregators, etc.)

I used to use Gulp for minification tasks, concatenation, deployment, etc. + Webpack for js. I made a couple of working projects (presentation business cards) without the front-end libraries Vue, React and at the same time studied the back-end / front-end on Laravel and Vue on the assembly, which is written in the framework itself.

When I made it up, I did it from scratch without frameworks:
1. Inspected the layout
2. Selected global variables
3. Exported assets: pictures, svg, fonts.
If necessary, optimize, cut.
4. Dry markup by BAM with inserted text from the layout
5. Layout itself:
- On its own grid written by the proprocessor
- Part of the Svg is inline, the rest was inserted through the sprite and mixins. I did not use icon fonts, such as FontAwesome.
6. Animation using Animate.css
7. I check in different browsers, fix it and upload it to the server

Tell me about not very important nuances that raise questions, since different training courses use a grid somewhere from scratch through a preprocessor, somewhere they use a library tailwind with components, and markup immediately in html. All tutorial videos simplify or add a newfangled clickbait library.
I didn’t work in the office, so I didn’t adopt any practices there, and, in principle, it all didn’t work out into a single vision.

The points of the algorithm are unchanged:
1. Inspected the layout
2. Selected global variables
3. Exported assets: pictures, SVG, fonts.
If necessary, optimize, cut.
7. I check in different browsers, fix it and upload it to the server Items

that each developer can do differently depending on the project, preferences: 5. Layout
5.1 I turned the SVG icons into a sprite through the galp and then inserted them through the mixins using the preprocessor. Fewer requests to the server, all in one file. The main icons can be inserted inline so that the user sees them immediately.
And between what do you choose? What kind of packages do you use like react-icon. As I understand it, if you design yourself, it’s easier to take a ready-made icon library or the designer uses it on purpose to make it easier for the layout designer.
And if you export custom icons manually, how do you prefer sprites or inline, or what tool do you use now?
5.2 Do you use your grid through styles to keep the markup clean or ready-made classes in the html size?
5.3 Various components in the form of tabs, modals and other things, do you write your own and use them from project to project, or do you take them from ready-made libraries? When I was making up, I took ready-made js libraries for galleries, perhaps. Although there are no special problems to write your own. But this is always the case when preparation precedes practice.
6. What is currently used for animation framer-motion, animate.css .. I mean the usual animation of the interface, and not complex parallax, games, etc.
7. What tool do you use for cross-browser compatibility? When I wanted to buy some, I remember that it was a little expensive, it was more for the office, or a person on the stream. And then problems popped up on iPhones when I used the released flexes.

And the main setup of the gallp, webpack now you need to write yourself, or is the starter pack already out of the box when installing the starter pack? The question is generally general, with Laravel, React, when the bundle is already assembled during installation, then you use it and see how it is configured or insert a framework, a library for free assembly.

PS Questions are not of super great importance, all this is just an option and you can try whatever you want and whatever you want, as long as it works. But when after a while you return to the slightly forgotten and new features appear, you want to ask again.