Ways to make responsive sites?

[shauma]

Hi to all,

I’ve been learning, reading and abusing Google about HTML, CSS (for now, JS later). I had a little knowledge about some properties, selectors but now I learned a lot more. In 2017, a website has to be responsive and the two simple I made were, but using this w3 schools tutorial:

https://www.w3schools.com/css/css_rwd_grid.asp

It works, it’s okay but should I use it? Is there a better way? I heard that they are not up to date, but I want to be up to date.

PS I know about Bootstrap and stuff, but I want to create stuff by myself before using finished codes. :)

[Beverleyh]

Welcome to the wonderful world of web!

Firstly, I like to say I big “yey” to you for wanting to learn and code stuff yourself, and not diving into Bootstrap and then relying on it for absolutely everything. A lot of folks get seduced by the silver platter handed to them and then find themselves hitting a brick wall when they don’t really understand the code/concepts behind the classes they’re using. An enquiring mind and thirst to understand the hows/whys will serve you well.

Now on to the w3 tutorial. I have to say, there isn’t anything wrong with it, and it doesn’t hurt to have those float techniques firmly under your belt. They may not be the latest thing, but they’re a good base for cross-browser compatible layouts, or fallbacks for when you want to use more modern stuff. The modern stuff I’m talking about is flexbox, and the even shinier css grid https://css-tricks.com/css-grid-replace-flexbox/

I know I still use floats a lot for main layouts, although I’m mixing in flexbox for modules and smaller scale stuff. More and more for bigger layouts too. Grids are still pretty new to me and I haven’t given them much air time in the real world.

At the end of the day, you use whatever works best in a given situation. It’s fine to mix, and there’s more than one way to get something done. The newer techniques offer a bit more flexibility and, hopefully, lighter code (unless you’re having to use all the available vendor prefixes for IE10/11, early Safari, Firefox, etc.)

Have fun and good luck on your learning adventure!

[shauma]

Thank you for your answer!

Yeah, I saw that I can do the same thing in 10 different ways and it was confusing at the beginning. With learning, I earned “freedom” and I’m not scared to mix stuff while creating.

About Flexbox and Grid, I have those texts bookmarked already but I didn’t really understand them since they are mostly about syntax. I’ll find some real examples first and read those texts after them. :)

[Author]

Posts