Responzív weboldal, de hogyan?

Mindig az adott feladathoz választunk technológiát. A float elavult, el kell felejteni. Flexbox meg grid kétkülön eszköz két eltérő problémára. Amúgy lehet mindkettőt használni egy projekten belül.

Én mindig úgy kezdem hogy megcsinálom a mobil felületet aztán meg abból rendezgetem át desktopig fokozatosan.

Bootstrap

Kulon van szedve, szoval ha feleslegesnek tartod az osszes osztalyt betolteni, akkor eleg a grid-es reszt

Megtervezed papíron, vagy programban, hogy hogyan fog felépülni az oldal mobilon, illetve nagyobb kijelzőkön.

Elkészíted a HTML vázat, valami demó tartalommal.

Böngészőben megnyitod, fejlesztő nézetben mobilos méretre kapcsolsz.

Megírod a CSS-t kis kijelzőre.

Böngészőben visszaváltasz asztali nézetre.

CSS-ben media query-k segítségével elkészíted az asztali nézetet.

Újra átnézed az egészet, javítod amit kell.

Kényelem kedvéért Visual Studio, szerver kiegészítő (automatikusan frissüljön a böngészőben az oldal), két monitor.

Nincsen kétsoros varázskód ami mindennél működik. Vagy megtanulsz egy keretrendszert (pl.: bootstrap) és annak a dokumentációja alapján készíted el az oldaladat, vagy saját magad írod meg.

Meg nyilván lehet keresni valami ingyenes html sablon-t aztán azt átalakítani, csak akkor nem szabad elfelejteni a macskakörmöket a "saját készítésű profi" munkáról.

Lehetne, csak több tulajdonságot is meg kell hozzá adni a display: flex-en kívül. Ennek utána tudnál nézni w3chools-on, csak az angol, ami meg gondolom nem igazán megy.

[link]

A laza 7 órás Cyrex videót elnézve amit találtam abból úgy gondolom, hogy meglehetősen részletesen elmagyarázhatott mindent, csak túl sok volt neked egyszerre. Próbálj kis részletekben haladni.