Responsive Web Design Tutorial for Beginners

Responsive Web Design Tutorial for Beginners



hello everyone and welcome to this new video on the channel and in this video I am going to show you how you can create this responsive web UI so let me make this very nose smaller so as you can see here all the elements get arranged based on the view or on the size of the window so as you can see that is one image here on the right side and on the left side there is a text here on top we have a header then here we have these navigations for about login and sign up and I have and if I click here and I don't have any other page created so if I click here then nothing will happen and another thing if I go into the inspect element and show you the responsiveness on other devices so for galaxy s5 this website is going to look like this and for pixel doom it's going to look like this and Excel to Excel then iPhone 5 iPhone 6 7 8 then iPhone then turn iPad and iPad pro so the elements are going to arrange themselves accordingly so in this video I am going to show you how you can create this web UI so let's get started ok so here I have created a folder for this website and here I have three things one is the index dot HTML file then I have image that we are going to use and then here I have style dot CSS file for styling for applying the style on this page okay so let's open this in Visual Studio code so I have these three files here so first off this is the index dot HTML now here we have all the basic tags and for making this website responsive we will need this meta tag so you allow to compulsory write this meta tag to make your web page responsive and then I'll link the style dot CSS file and here in body I have the header section now in the header section first I have the name of the website so I have just given a dummy name here and then after I have this unordered list and here we have three different list items for three different page navigations so for about login and sign up page then here I have a section tag for creating the middle section of the page and here I have the main text and the image so now let's get started with the CSS okay so first of all body then your margin 0 padding:0 then font-family so I've used this font family then we are going to set the background color do this then after I'm going to write the max width do this now I have set the max width here as I want this page to be stayed intact when i zoom out so as you can see that the page is intact even if i zoom out so to do that you will need to set this max width property and I'm going to change the margin to auto so that let me zoom out then the margin sets itself automatically okay then header so in here I'm going to set the height of this header to fifteen th and we are going to use this VH for specifying height width and other things in this tutorial so this V H is for viewport height and then there is another one that is V W for viewport width so this is going to set the height based on the viewport that means the size of the window then head of h3 and here margin doll 20 pixels the margin left 40 pixels then font size divided then float I'm going to say to left then after we are going to write the CSS for our unordered list so header ul and here the float is going to be right then margin even the set top margin the top margin will be 30 pixels then the margin right will also be 30 pixels now heard of UL li so I'm going to set the display property to in line then margin left 15 pixels then after head of UN Li and E that is the anchor tag so the text the decoration is going to be Navi and the font color will be white and font size is going to be 18 pixels then after let's run this and see the output for this first so let me zoom in so okay so this is the output that we are getting here and why is this font color black let me see okay I have written the font size here instead of color you get the font color this and the font size is going to be 28 pixels okay so sorry for that now let's run this okay now that's better so let's continue and actually I am going to close this and let's start the live reloading of this webpage so now I want these first anchor tags when I hover on these then the text color should be changed to gray so I just want for these – and not for this one so we can do that using the end child so header UL li and here end child and I'm going to specify – and plus two so this is going to do that work then in for the first for the anchor tag and home now I want the condom to be this one so let's see so as you can see you the color when we hover then it is changing to this faint gray and the third one is not changing okay so we can do this whole thing using another method also so as you can see I've specified these two classes for the about and the login button so we can use this classes to do that so what I'm going to do is I'm going to just take this all out and write about comma and dot login oh and this is going to do the same so as you can see when I hover on to these then the font color is changing to faint gray now we are going to write the CSS for this signup button so header then ul dot signup so the background color here and it is going to be this one then I'm going to set the padding to value pixel and 25 pixels then border radius 10 pixels okay so this sign up button CSS is applied here now let's write the hover property for this over and I'm going to change the background color to this okay so let's see so as you can see the background is getting darker now next we are going to start with the middle section that is this one so section H to float left then margin top 200 pixels then margin left also 200 pixels then font size 55 pixels color white okay now let's move on to the section image okay here I'm going to set the float to right then margin top 50 pixels then margin right through 200 pixels then width of this image is going to be 450 pixels and height I am going to set it with Auto okay so this looks like this now it's not responsive yet now we are going to make this UI responsive so as you can see I have got the screen down and these elements are getting scattered like this so I'm going to write the CSS for this okay so for making this responsive I am going to have to write the media queries so for that we have to write add media then space then we have to set the max width property and I'm going to set this to 1350 pixels so what this means is this is going to be applied only when the width of the screen is this or smaller than this so I'm going to set the section h2 so I'm going to setup the left margin 150 pixels then section image margin right – 150 pixels as well and the width of this image 400 pixels then after another media query so add media max width to 100 pixels and the section h2 margin left 80 pixels and for section image margin right is going to be 80 pixels now for another media query media max width thousand pixels so for this is section margin top is going to be 80 pixels and the margin bottom is going to be 60 pixels then the text alignment I want the text alignment in center okay section H to float should be none here then margin 40 pixels and zero pixels then the font size 40 pixels then after section image so here float is going to be done as well then margin:0 media max with 720 pixels so here hello h3 float:none then margin 30 pixels and zero pixel then text alignment center then header ul so the point is you are float:none and the margin top to be 40 pixels and the text alignment here password Center then the header ul Li and how to display this in line and then Media max with 450 pixels so section here the margin dog is going to be 80 pixels and margin-bottom 40 pixels then the section h2 for surveys font size is going to be 30 pixels section image the width here is going to be 300 pixels okay so now let's see the output so this is what it looks when it is in full-screen and when I get the screen down then it is going to apply the CSS accordingly now it is not getting applied very well so let me see if I've done any mistakes okay here everything mix it is max okay so let's see okay now it's better so as you can see as soon as the screen size hits these max with pixels then they are going to change the default CSS I'm going to apply the CSS that is written in this media section so this is how you can create a responsive web UI so that's it for this video and if you liked this video then click on the thumbs up button and if you want to see more of these kind of videos then click on the red subscribe button and subscribe to this channel and I also have a web development course from front to back so in that course I have taught the front-end part and the backend part as well so the front end with HTML and CSS and the back end with PHP and MySQL so I am going to give you the link for that course that is on udemy.com in the description down below so check that out and touch up for this video and I will see you in the next one

Leave a Reply

Your email address will not be published. Required fields are marked *