As usual, I’ve worked on something and I want to share a guide on how it’s made, yes this time is for a responsive web design, this tutorial will be very basic, and you’ll make me happy when you use this basic thing to make such a creative, modern and awesome web design !

So let’s start by creating our web page in HTML, I prepared this ready code for you to spend less time learning this cool tutorial

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<meta name="viewport"content="width=device-width, initial-scale=1.0">

<title>Responsive Design by TDS</title>

<link rel="stylesheet"href="style.css">

</head>

<body>

<!--www.thedevelopersource.com-->

</body>

</html>

What’s new in this code is the viewport meta tag, it will make the page more friendly with the responsive design

So for now, let’s talk about how the page will be responsive and what does responsive mean exactly, a responsive web page is a web page that has a dynamic design that can change with certain screen resolutions, like any modern website, the same page doesn’t appear the same on different screens, and I mean exactly not the same on a mobilescreen compared to a tablet or a desktop screen and now we’ll learn how this is made …

Stop … stop, I repeated the screen word many times, that’s the main key, we’ll use the screen width size and this way the css style sheet will guess if the device used is a phone, tablet or a desktop so let’s just create a style.css file as it is linked to the html file we’ve just created … and let’s paste this code on the css file, open the web file on the browser and try to resize the window, here’s the code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

@media screen and(min-width:320px){

body{

background:crimson;

}

}

@media screen and(min-width:720px){

body{

background:blue;

}

}

@media screen and(min-width:1024px){

body{

background:green;

}

}

So, if you go back to the picture at the top of the tutorial you’ll see 3 different window sizes of Firefox web browser (I recommend it for web design) and oh, we also see that the background color isn’t the same for every window!

Here we explain the trick, the css is dynamic, it loads the new properties to the page when we resize it, that’s it, and look again on the code, we’ve set 3 different colors in the code !

Bonus ?

I didn’t forget the bonus, this time I would provide two bonuses for you, a nice animation trick for the page we’ve just created and I’ll show you something cool you can do with Firefox for good responsive web designs

let’s start with the trick, move back to the css file and add this code to it (doesn’t matter if you do at the start or the end of the file ..)

1

2

3

body{

transition:0.5sall;

}

Now, try to resize the window, wish you love it!

for the second trick, if you have Firefox installed, open any web site and click on F12, you’ll get the developer tools, now click on the icon I’m indicating in this screenshot

Oh, the responsive design tools is now ready to be used, I will leave you now and let you enjoy exploring it