webdeveloper's

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it Responsive 2. MDN’s Responsive Web design Tutorial This is a nice MDN article about some of the basic strategies people use t

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u