Layout from scratch: what are the main stages of work?

Question

Work organization

Many years have passed since the first time I made something intelligible from scratch ... I repent on the tables)). Now, being at a stage when my profession should no longer feed me, and I do a verst solely for my own pleasure, nevertheless, I am interested (I am sure that beginners too) your approaches, that's in what cut.
You have received a benign serious layout, let's say that this is a business card of a large company with a bunch of services that wants to introduce itself to the user as widely as possible. This layout needs to be made up and all the conditions have already been agreed, all the initial clarifications have already been made with the designer, etc., etc. How do you structure your work? Where do you start? What are the main and additional stages that are always present in your work schedule? In a word - describe your time-line ... and how you organize it. I am interested in the experience of others, and it will be useful for beginners to learn this.

Answer 1

I use vscode+webpack+pug+scss+bam. From the physical instruments, the main monik: lg ultrawide 29um69g, next to it is screwed a monik from a laptop, hung vertically, connected via a universal scaler.
0) I launch Spotify :-)
1) I install all the necessary modules for the build. In my case, I have a set of configurations for webpack (separate files for pug, scss , static , etc., I choose what I need).
2) I launch avocode, I load the layout into it. I define variables in it (at the same time I write them down so that I can immediately throw them into the scss file) for colors, font sizes, etc. so that when receiving pieces of code from it, it immediately sets the variables.
3) I launchVS Code , open the desired folder.
4) I write markup in Pug . I write with BEM , if I meet a repeating block, then I open the _mixins.pug file, in which I write mixins for repeating blocks, for example, products, menu items, some blocks, etc. Pug can do cycles, it speeds up a lot.
5) When the HTML is ready, I start making the wireframe. If the design is done on a grid, I define containers, columns, rows in my classes (I don’t write clouds of classes in html like col-md-6 , but I write in SCSS the inclusions in the blocks I need, such as @include make-col(2 ) etc. etc.).
6) I export pictures from Avocode. It is very easy to do, I specify the folder and just click export and enter the file name and extension. I mainly use svg for icons, if there is no svg, then I look for this icon on the Internet (designers rarely draw icons themselves, but they like to insert them not in a vector). If the icon is simple, I can outline it myself in inkscape, and if not, then I export png in 2x size (thankfully, the avocode allows this, unless of course the designer inserted it in the original small size). When there is contact with the designer, I shake him, because the raster is bad for icons.
7) I write block styles from the page. At this stage, you can watch Futurama or
Archer on the second monitor in parallel :-) But more often on the wide monitor, the browser is on the left, and VS Code is on the right, and on the second monik Avocode (may change places with the browser). I mentally cut the page into blocks. For each block ( B EM) I create a separate scss file (someone even creates for the element, but I'm too lazy), I immediately write out all the selectors from it. Sometimes I can first write out all the selectors from the page (but it’s better not to do this, because during work it may be necessary to change something in the markup), but more often for one block I perform this step and immediately follow it with step 8, then for new block again 7 and 8, etc.
8) I write css code along with Avocode , I take the parameters I need from him (and he has already substituted variables in them), and insert them into my code. And in parallel I check with the layout screen using this extensionhttps://chrome.google.com/webstore/detail/perfectp...
9) I am writing an adaptive. I can't get used to the mobile-first methodology, so I always write the full version of the site first. I understand that this is fraught with all sorts of problems and it's kind of not fashionable, but I'm fine.
10) I write media queries directly in blocks, for each block / element / modifier there can be a separate media query. But first, I define breakpoints for different screens (so that there are not hundreds of them), if I use Bootstrap, then I take its breakpoints.
11) I add animations. Even if the customer did not ask separately (and if he did not indicate separately that it is impossible), he will still be satisfied, and with animate.css + onscreen.js it is generally a job of 10 minutes. I discuss complex animations separately so as not to do unnecessary work.
11) I check everything again, I write scripts where necessary. For sliders in 99% of cases, slick is suitable (with modifications, of course, but there is a good API), for other cases I can write my own.
12) I hand over to the customer and wait for an answer while sitting on a toaster / peek-a-boo.
This is purely my experience, the experience of a freelancer, I don’t know how others do it and I can’t 100% say that this is a 100% correct way. I was never able to get my webpack config to correctly insert the svg sprites.
I hope my answer is of some help.

Answer 2

Many pages? We need to make templates.
Lots of repetitive elements? general rules must be laid down.
Question about nothing. There is a problem - google it, did not find it - ask.
The answer to the question is to walk the dog, drink a cup of coffee on the embankment write npm i....

Answer 3

and here ALL answers are marked as solutions?
then I'll also tweet ....)))
1. create an empty file
2. copy the source code of any site
3. add css and js to taste from point 2
4. push it to the customer.
5. cognac...

Answer 4

I read, but did not find a person who uses bootstrap4 as a css framework? I wonder why? Uncomfortable? Or is he dying?