How to learn to make non-responsive sites responsive?

Question

css

Good afternoon. I am a beginner web developer. I, like many developers, find it difficult to get a first job without a portfolio. Almost everywhere, ready-made works are required. I want to learn how to make high quality responsive websites. I will try to make 2-4 sites for free. I plan to google low-optimized sites of beauty salons in my city and offer optimization for free. First of all, I plan to take sites that are not adaptive for mobile phones. Thus, I will get ready-made projects for my portfolio and improve my skills in adapting websites.
What can be learned about this topic? In what direction to move?

Answer 1

See how boostrap works , I'm not saying you should use it. I suggest taking it apart piece by piece, as a good example of adaptability.

Answer 2

What can be learned about this topic? In what direction to move?

1. Geometry.
2. media conditions
3. some JS/JQ
4. image optimization, graphics differences for retina

Answer 3

First of all, read the information from Google - https://developers.google.com/web/fundamentals/des...
View and study various adaptive frameworks - Bootstrap, Zurb Foundation, etc.
Learn what XY Grid, Float Grid, Flex Grid are - what is the difference between them, what are the limitations and features, and so on.
For the first site and for the portfolio, I recommend starting with your personal site / blog - to start with a simple blog / sandbox, but with an eye - to make a full-fledged portfolio site for yourself.