@media" in the Stylesheet. This is what I know all about CSS.Please point out the important resources for doing above things. PS: I am feeling frustrated while using Bootstrap UI Framework. So wants to switch to the CSS3 instead. Also tell me if this is the right decision?
Girish Patil
Full-stack engineer
Congrats on learning CSS - responsive design is all about making things adapt to what the browser can display to make things show up as well as they can.
Flexbox is useful for responsive design because it has some built-in smarts for making boxes flexible, there are some ways you can use flexbox that can help you content adjust in size, or wrap when it needs to.
CSS grid layout is also very useful for layout in general, and also responsive layout. It's the newest, easiest way to describe layouts in CSS and it also lets you keep your HTML simple. Changing different grid settings inside CSS media queries can be a very powerful way to control what happens to your layout.
And lastly, CSS media queries are probably the biggest feature that helps you build responsive layouts. CSS media queries are conditional rules that wrap an entire stylesheet of CSS rules, and will only apply those rules to the document while the condition is true. You can target conditions based on the browser viewport's dimensions (width, height) as well as some support for what features the browser might have as well.
Here are some free resources that can help you learn responsive web design and CSS grid:
Hey Vikas Poonia,
Prior to CSS grid/flexbox, to build responsiveness we would be using floats/position hacks to get things right. Since the rise of flexbox and grid its been almost gone now. But it would be good for you to know about that.
Building responsive layouts without using flexbox or css grid. Makes you know what breaks when and why and flexbox and CSS grid are not 100% gone, you might need them sometime. IMO building responsive layouts using Flexbox or CSS Grid is not as hard as using float/position hacks. Anyways, if you want to know more on responsiveness. Google has some nice insights on things like these.
After all of this, I would suggest you to start building basic layouts make them responsive, slowly dig into complex layouts, and make them responsive. Dribbble can be of great help if you want to see how people bring in creative ideas keeping responsiveness in mind too.
IMO, keep the frameworks aside for a while if you want to know what happens under the hood. Once you know how things work you can use anything to get things done.
Hope this helps.