HTML5 and CSS Responsive Webpage Layout #4 Urdu/Hindi

Learn ho to make Webpage Layout Skeleton using HTML5 and CSS. This is layout #4.

[@shailendercongton3187]

wow great sir maza agaya nice vedio

[@WebCom-dj7mn]

nice video its very work full

[@ishwarsinghrajput5001]

Bahut badiya sir ji thanks

[@morninggk]

very nice sir.....you have great knowledge of html & css

[@gaminglover6325]

Excellent Job sir

[@Bobby-mf6fw]

Best video of media query I hav ever seen. Honestly thankyou.

[@ashiumtanwirahmed011]

Amazing!!! Great explanation 👍👍👍 You saved me bro. Thank you very much for your amazing explanation🙏🙏🙏

[@kimbedi9482]

awesome explanation

[@sherendurraniofficial9376]

i search Responsive layout but failed to find it's awesome bro. Keep it up.

[@gautamghosh1615]

Asad bhai aapka teaching skills bahut acha hai mera concept kafi clear ho gaya thanku

[@PUBGMOBILE-nz4kf]

Awesome

[@gulzaibhassan6467]

Bhai apki video Bohat achii ha.. Mughe Bohat achy sy Sikhna ka moka milla.. thanks alot Brother...

[@assadullahch1960]

You are welcome buddy

[@lathanelapati8582]

No other Tutorial is as clear as yours. Very thankful to you.

[@assadullahch1960]

Hi Latha. No I don't have the PDF file.

[@muhammadnaveed7953]

Awesome job sir g,,,jazakAllah

[@MazharKhan-xi7kt]

Awesome 💥💥💥💥💥

[@eramperwez4617]

Thanku so much sir,this video is very helpful for me God bless you sir.....

[@mshahmirkhan]

Mash Allah you are good May Allah give you more knowledge

[@shohidulislam211]

Your videos are nice and very easy to understand. Very thankful to you.

[@razahaider3069]

Achi trhan smjha rhe ho bhai ap ❤

[@anilkushwaha7164]

amazing, very clear and concise explanation

[@aneesurrehman1403]

very helpfull

[@muhammadtahir202]

Assad Sab great and very much easy.gud job

[@assadullahch1960]

Thanks for the feedback.

[@in-Hindi]

I like this video

[@ferozkhan7495]

Thank you so much bhai for this video

[@anjalisharma5187]

Very nice tutorial everything was explained so nicely

[@ziakhan911]

way of explanation is so attractive bro.

[@Gkwithms]

Nice

[@mirzasheraz6939]

v.nice and clear way to teach . sir ek problem aa rhi h jb screen ka size change krty hain to sara form and layout disturb ho jata h plz is pr ek video upload krdein. agr h to link dedein pleaz.

[@galalistationery9434]

wow, you are best teacher very helpful for me....

[@galalistationery9434]

you really professional I guess I saw only this video please my friend could you please give me your number please

[@galalistationery9434]

hellow

[@mubeen008]

Zabardast Bro Great you have a amazing talent.

[@assadullahch1960]

Thanks mate.

[@alwaysbehappy4610]

one again very responsive.... nice sir

[@divyashivhare7334]

Impressed Good explanation...................... :):)

[@RavinderKumar-jx1rp]

Excellent tutorial, can you provide a complete tutorial on bootstrap 4

[@zahidulemon5058]

very well explained.thanks for ur tutorial

[@assadullahch1960]

You are welcome.

[@webcreativity4182]

I am addicted to your voice Assad bro

[@sax4passion]

Superb! very well explianed.

[@vipingautam1400]

bhai the video is easy to understand thanks to u keep helping us

[@MAbdullahTariq]

Awesome.. MaaShaALLAH.... Also waiting for wordpress responsive theme video...

[@assadullahch1960]

will be available soon for sure.

[@MAbdullahTariq]

AssadUllahCh InshaALLAH

[@asmaliaquat2593]

it helped me alot ...thankyou for such a good tutorial...! .

[@assadullahch1960]

You are welcome. Now try it out using display:inline-block instead of floats if you want to add some more happiness to your life.

[@paklatestnews3200]

I am your fan sir you explain it very easy.....sir plz explain .... display:flex,. In Css

[@ritabansod4626]

thank you sir.

[@muhammadumer2011]

Excellent super tutorial, sir display:table, display: inline-table, display:column, display:row par ek video banaday kindly

[@assadullahch1960]

Watch these tutorials as well: kzbin.info/www/bejne/aqS7mmiNpZWJhK8 kzbin.info/www/bejne/jabYfJiQYtpnoa8

[@rizwanhashim5927]

Jazak Allah. Allah aap ke knowledge me mazid izafa kare .Aameen. sir maine abhi html css ki shurat ki hai . mazid video ki darkhast hai.like tags and values. jo pta nhi chlta ke unka use kyse aur kab kiya jaye.

[@assadullahch1960]

Glad you learnt something new. Ap ko sath textual reference ki b adat dalna ho gi khud ko jo k apkay career mein apko bohot zeayda help karay gi. For example Mozilla Developer Network is an excellent textual reference for HTML, CSS & JavaScript. And also watch videos on KZbin alongside.

[@hiphopKrantikari]

Bahut khub

[@mohammedasad283]

thank you so much, brother. please make more videos.....

[@arbatheindiangamer]

Nice bro old but still gold bro now make flexbox and grid videos

[@assadullahch1960]

Will do it.

[@nasr.sheikh]

Awesome teaching method..

[@aungthinko7196]

Thanks Sir! Very useful for me ur tutorial.

[@pratikkadam9891]

mujhe xtra small screen size ke liye problem aa rahi hai , media query less than 768px krne ke bad bhi less than 576px ko adjust krna pad raha hain agar uske liye koi solution mil jaye to bahut help hogi muje nd thanxs for this most helpful vdo

[@assadullahch1960]

There are situations when we need to write extra media queries.

[@AdarshSingh-qd6mq]

Great lecture , thanks...

[@assadullahch1960]

You are welcome.

[@shahlizah]

Awesome 👌

[@chrakesh5181]

Super Lecture bro! Kindly post a video i.e., two different layouts one for desktop view and other for mobile view..the desktop layouts should hidden when we in mobile view and mobile view should hidden when are in desktop view...

[@assadullahch1960]

Hiding and showing the layouts doesn't really make sense. IT"S A VERY BAD PRACTICE SINCE IT ALSO INCREASES THE DOM SIZE. Use a single layout and handle it through media queries to make it look good on all screen sizes.

[@usamarashid1094]

sir very very Excellent job sir fixed navigation bar pr please video bna dain

[@someshghanchekar6252]

Great video Amazing Do you have a video from basic to live website with html css js Full website responsive with images Please if you have give me link i find in your playlist but didn't find. Thanks Great video I am non tech person find difficultly in java but your teaching is great if possible please make more video thanks God bless you ...

[@hammadhasan7555]

Sir jin divs ko aap ney height di hai un mey jab text etc dalengy to screen size kam hoty wakt div ki height kam hogi or text bahir nikal jay ga is ka kya solution hai .?

[@assadullahch1960]

DIV's khali thay is liay explain karnay k liye unko height di otherwise jab actual content ata hay to height automatically increase karti hay

[@someshghanchekar6252]

I have questions i have macbook pro and i saw one video about html he was coding in visual studio Should i install in my macbook I dont know i which tool you are coding and how you save.. please please 🙏 make on video thanks

[@assadullahch1960]

Its does not require a video. The videos are only reordered to cover technical topics. You can use pretty much any text editor.

[@mubeen008]

Zabardast

[@pritjobanputra2958]

Amazing! It's really helps me! Can you please also make layout with contents responsive as per different screen like MacBook etc...

[@assadullahch1960]

I'll do it for sure.

[@rajeshnaskar1319]

Thank you sir Sir, please layout no. 4 ko navigation bar, achchha karke contain, logo lagake ek video hota to achcha hota. Sir please ak complete & database system ka website baniye.

[@assadullahch1960]

Watch my other videos related to navigation bar aur phir usko ap is template mein add kar do. That's it.

[@rajeshnaskar1319]

Thank you sir

[@thenewcoder5592]

SIr if i made a website from this layout, can i sell it on themes marketplace. are there any other thing that i need to keep in mind if i wish to sell the themes to online store. Please sir make a series wherein you make a website and publish that to any theme marketplace like themeforest. no has done this kind of tutorial on youtube and i truly believe that if you do, you will be first to do this. There are many youtube videos for creating website template but none of them show the actual process involved to publish them in the marketplace. I think there may be some intricacies involved in submitting like validating html and licensing if you are using library like wow.js or animate.js. and may be tonnes of other stuffs. Sir if you could make a video where you can teach this, it will be immensely valuable to the beginner community.

[@assadullahch1960]

I'm not working at themeforest but I will try to find a way to make such a tutorial.

[@thenewcoder5592]

Sir that would be just awesome.

[@alwaysbehappy4610]

Sir now i think i will be a good web developer by learning from you. Thanks And in this way will all the websites responsive will work?

[@assadullahch1960]

These are the basic building blocks to build responsive templates and yes you will be able to build them if you properly practice.

[@livedozo]

Sir plz reply.. I followed your code to make responsive layout. I made it according to you, it's working fine but, when I put the code into 3rd & 4th @media queries. Then it has going blank and layout is totally white not worked. plz give me any soln if you have time? I really Love your videos and watched till the end and learning lots of web design concepts from you. and please make similar videos that will helps us😘😘😘👍

[@assadullahch1960]

Please host you code at jsfiddle.net or codepen.io and share the link with me.

[@suryawanshikrishna12]

nice

[@safinasiddique5805]

I have a question : Jb ap ne display table kia to width 100% pe set kyun ki container ki? us se phly content invisible kyun hogya tha div ka?

[@assadullahch1960]

You need to specify the video mark so I can get the exact idea what exactly you are referring to. I think you are not good at float. If that's the case then I must recommend you to watch my tutorials related to how float works to get the answer to your question.

[@safinasiddique5805]

This question is not related to float ... Its about responsivness You changed order of two divs using display:table while making this page responsive Us ki smjh nhi a rhi

[@Badnampaisa]

Kya ye layout saare Browser m support karega????

[@assadullahch1960]

How about you check this layout in all the browsers? There's nothing used in this layout which can cause the issue in other browsers. IE is the most annoying browser among others.

[@anasaleem1]

sir ye widths ka standard size he or hamesha hm yhe sizes he use kr skte hn?

[@assadullahch1960]

Is k elawa b aksar humein media queries likhna par jati hain according to our content.

[@newlearn116]

Assalam alaykum bhai meraa ek sawal yeah hai ki Jo web template Jo hum design karte WO blogger me lay out box kise aate hai

[@assadullahch1960]

walaikum assalam. I'm sorry i have no idea about blogger.

[@4hmedzaid]

@assadullahch sir what is for Extra small devices?? Is this 768px will be ok for extra small devices?? Please explain thanks you..

[@assadullahch1960]

Take a look at Bootstrap grid for better understanding of the viewport sizes. There are devices with less than 768px

[@suneetjagpal12]

display:table-footer-group.Yeh samajh mein nhi ayya.kya yeh specific property hai,kya mein isko har jagah istemal kar sakta hu,is tarah ki responsive website ke liye.Thanks

[@assadullahch1960]

ye property table layout say related hay aur isko use ker k ap apnay page content ko table rows, cells aur columns ki form mein tackle ker saktay ho. I had to change the order of yellow and badge boxes. Ji element pay menay ye property apply ki thi ab wo element table footer ki tarha behave keray ga aur footer hamesha bottom pay hota hay aur ye is property ka default behavior hay.

[@assadullahch1960]

and you are welcome.

[@faisalhatila1844]

assalamualaikum sir ji ek confusion h border radius pe hi webkit ya moz k prefix dene ki waja samjh nahi aai kindly explain thankx

[@assadullahch1960]

walaikum assalam. Old browsers pay border radius ki compatibility achi nahi hay iss liye har browser family k liye specific prefix ka use kia jata hay takay har jaga same effect aye. -moz- prefix mozilla firefox k liye use ki jati hay etc.

[@anasaleem1]

@keyframes effect{ 0%{background-color:orange; left:0px; top:0px;} 25%{background-color:yellow; left:400px; top:0px;} 50%{background-color:red; left:400px; top:400px;} 100%{background-color:purple; left:0px; top:400px;} } my element change color but not moving as i coded in left top can some one help

[@pashahusain5036]

A/W Bro!! I want to ask you could I use to media queries in different pages like all Css in 1200px one page and other queries in other pages, same all queries can use in other pages.

[@assadullahch1960]

Could not fully get your question to be honest but let me try to answer you. You can create another CSS file which contains media queries other than your first page and it should work.

[@pashahusain5036]

Bhai let me know I am waiting for your answer

[@pashahusain5036]

@@assadullahch1960 Bhai jo apne media query ko samghaya h in 4 type, then kiya ham in css ko 4 pages me rekh kar use kr sakte hn kiya

[@pashahusain5036]

@@assadullahch1960 me all media queries ko alag alag pages me rakh kar applied kiya but serpons nhi aa raha h

[@assadullahch1960]

menay ap say kaha hay k agar ap different pages pay different media queries use karna chahtay ho to us k liye ap ko alag alag css files banana paraingi. Ap directly html file pay b css ka code likh saktay ho lekin ye achi practice nahi hay. It's better k ap css ka code css wali files mein likhain aur phir un files ko apnay pages mein link karain.

[@qudratullahkhan4518]

Assalam o Alekum Sir! I code the webpage layout as yours, it works fine on all browsers in PC and on Firefox for Android, but it doesn't work on other Android browsers like Chrome, UCbrowser, Opera etc. please guide me. Thanks.

[@assadullahch1960]

Walaikum Assalam. It was the very basic playlist to just give users the idea how how to plan a layout for web pages. When you say "does not work", what do you mean by that? Please come up with a very clear question to get an accurate answer.

[@qudratullahkhan4518]

@@assadullahch1960 Thanks for reply Sir!What I meant was that in Chrome, Ucbrowser and Opera the style (css) disappears and only HTML is left. This only happens in my Android browsers, in pc browsers (Chrome, Ucbrowser and Opera) the code (css) works perfectly.

[@assadullahch1960]

@@qudratullahkhan4518 You need to check the properties CSS properties compatibility with those browsers you mentioned. By the way, the CSS properties I used in this video have great browser compatibility which you can check here: caniuse.com/

[@qudratullahkhan4518]

@@assadullahch1960 Thanks for reply sir! If you don't mind I can send you my HTML & CSS files. This issue doesn't happen in any windows browser, it only happens in my Android browsers. Only Firefox for Android can render the css code. Other browsers like Ucbrowser, Chrome and Opera doesn't show css while their versions for windows work perfectly. Sir! I hope you will help me. Regards

[@arifullah2340]

Assalam O Alaikum Bhai Maine 1 website banai hai Assignment deni hai 3 din baad center may lekin responsive nh thi ye video dekhi maine lekin may media ki property use kar raha hn wo blue nh ho rahi hai matlab bilkul page par apply hi nh ho rahi hai please help

[@assadullahch1960]

walaikum assalam. Put your code at codepen.io or jsfiddle.net and share the link with me.

[@pratikkadam9891]

thanks bhai

[@assadullahch1960]

You are welcome.

[@suraj351]

*Sir float ke badle Aappne flex achha hain*

[@assadullahch1960]

We cannot just choose one over the other without even thinking about the pros and cons. Ap sab say pehlay ye dekho k ap ki website konsay browsers pay dekhi jaye gi. If you are targetting older browsers, the flex is going to be FAILED there.

[@suraj351]

Sir mereko pata Nahi But, kuch toh pata chala comment karke Thanks Sir Advance css tutorials par video banao..I'm waiting for ur Advance css tutorials.

[@nadygold]

Asad Brother.. kindly make a video regarding making a wordpress responsive theme

[@assadullahch1960]

soon will be available

[@anasaleem1]

Sir Css animation and transition ke videos bhe upload krn,pre utube pe koe smaj ane wali video ni he is topic pe,plz sir is topic pe bhe videos bnae!

[@assadullahch1960]

will do it.

[@anasaleem1]

I hope it will be very soon.Thanks

[@hackerusman9759]

sir thank uh so much :-)

[@priyanshuthapa1910]

Yah sab to maine kar liya Khud sir ab isliye out Mein content or images Kaise dalen make vedio sir plzzz

[@assadullahch1960]

Watch these videos: kzbin.info/www/bejne/e57IkoZpptulZtk kzbin.info/www/bejne/inS6q6WXodNjsK8

[@manthanjadhav2247]

Yeh navbar ka color yellow corner me shift nahi horhaa he kya karu

[@assadullahch1960]

host your code at codepen.io or jsfiddle.net and share the link with me so I can check what's going on.

[@sankr710]

Hello sir, Mai aapki tutorial regular dekhta or sikhta hu. is tutorial me jab browser 1200px se kam karne par conaintnhi aa rha hai lekin again 767se km pr sahi dikh rha hai. jb ki maine @media(min-width:1200px), @media(min-width:992px) and (max-width:1199), @media (min-width:768px) and (max-width:991), @media(max-width:767px) sabhi par aapke anusar media query apply kiya hai. agar aap mujhe apna emai id de to mai apna code send bhi kar dunga. plz help me sir

[@assadullahch1960]

Host your code on codepen.io or jsfiddle.net and share the link with me.

[@assadullahch1960]

Furthermore i am sure ap kuch miss ker rahya ho apnay code mein jiski waja say aesa ho raha hay. Video ko carefully dekhain aur phir phir code karain aur umeed hay k koi issue nahi aye ga.

[@m.rizwanbhatti8897]

Assalam-u-Alaikum Sir, Hope you are doing well. first of all thank a lot for your useful tutorials. I am 3D Artist and I have little interest in web designing when I watch this video it's very interested and I have started to make my website www.artanddesigner.com in this website i used media query learnt from your tutorials I made this website within 5 months only used HTML and CSS. your tutorials very useful for me thank again.

[@assadullahch1960]

Walaikum Assalam Really glad you learnt something new and you are welcome.

[@anasaleem1]

my @media(min-width:992px) and (max-width:1199px){ ....}not working,initial and last one are working.is this my browser 's problem?

[@assadullahch1960]

you need to refresh your browser cache. If you are on windows, press shit+f5 to refresh and reset the cache or you can even use incognito mode.

[@anilkushwaha7164]

Kindly guide me, for: as bootstrap is library of css, then it is necessary to learn bootstrap, if I'm master in css, although I know bootstrap will reduce complexity n increase Productivity. This question arise because I am new to bootstrap

[@anilkushwaha7164]

@Assad sir, Please guide me

[@assadullahch1960]

First, learn CSS, CSS3 very well and then you can learn twitter bootstrap. I said YOU CAN LEARN means, you can even write your own library and repeatedly use it in your projects. Bootstrap is the most complete mobile first framework which has a great use in front-end development right now and YES it saves your time dramatically.

[@anilkushwaha7164]

Thanks for guidance.

[@assadullahch1960]

you are welcome.

[@laeeqali7078]

AOA.bhai ye display uc browser pr to a raha ha lekin google chrome pr nahi....please guide me......

[@assadullahch1960]

It's a very basic tutorial and now you need to handle the cross browsing part. Learn about CSS reset to reset the styles before writing your own styles since all browsers handle margin, padding differently. Resetting the CSS makes all the browser to show the content the same way.

[@jhilmilraj-lv9bi]

sir jab ma bana raha hu tu 2nd or 3rd resolution show nahi hu raha screen choti karna par contant gayab ho ja raha ha.plz help

[@assadullahch1960]

Put your code at codepen.io or jsfiddle.net and share the link with me

[@someshghanchekar6252]

Media queries use karna chayeliye ya flex box

[@assadullahch1960]

flexbox sirf new bowsers k sath compatible hay. Agar ap flexbox use karna chahtay ho to pehlay make sure karo k ap konsay browser versions ko target karna chahtay ho takay bad mein koi issue na ho. Media queries aur flexbox 2 different cheezain hein. Flexbox model k through ap page ka structure define kartay hein whereas media queries ki madad say ap device aur viewport specific styles apply kartay hein. Agar ap ka page bohot he simple hay to aesa possible hay k ap ka kaam sirf flexbox k sath he chal jaye. Lekin agar ap ka page thora sa complex hay to phir media queries ka use zaroori hay is k sath.

[@someshghanchekar6252]

@@assadullahch1960 do you have any courses because in lots video you say app mera phele wala video deko but when i find i didn't get. I want to learn Javascript from you there is not Playlist step by step. Give me link of both js ,courses thanks

[@assadullahch1960]

@@someshghanchekar6252 pehlay vali video matlab literally pehlay vali video he hota hay jo k playlist k andar hoti hay. Agar ap meray paid courses buy karna chahtay to uskay liey ap meri website pay courses dekh saktay ho. proetutor.com/courses

[@SajidAli-or3sh]

aaj se hi aur abhi se

[@MazharKhan-xi7kt]

not work onli layout 1 () working other statments not works pls help

[@assadullahch1960]

???

[@MazharKhan-xi7kt]

@@assadullahch1960 bhai sirf 1200px wala layout show horaha h baaki k mahi hore mene same ese hi try kiya h pls help

[@assadullahch1960]

host your code at codepen.io or jsfiddle.net and share the link with me

[@lathanelapati8582]

Hello Assad, Do you have a pdf file by any chance so we can print?

[@assadullahch1960]

Hi Latha. No I don't have the PDF file.

[@Gkwithms]

Bro

[@Gkwithms]

Mujhe web development seekhna h... Please help me...

[@assadullahch1960]

How may I help you in this?

[@Gkwithms]

@@assadullahch1960thank you for responding.......mujhe websites Banana seekhna h . Or online exams management projects bhi seekhna h... Please aap Hindi/Urdu m. Mujhe sikha dijiye.. starting se end tak.. aapki css layouts videos series .... maine aapki css hindi/urdu ki 5 layouts videos dekhi or practical bhi kiya h. Or layouts reday kiye h .. kafi kuch samajh m aaya Lekin . Html css aadi tags bhi seekh liye h.. but real website m kaise implement kre ... Kaise webpage banaye.. content kaise add kare .... I am confused.... Aapke sikhane or samjhaane ka mathed achha h... Aap sabhi bate clearly bataten hain.... And thank you so much reply me...... Aap mujhe guide kijiyega..... Full stack developer ka sapna sakar krne m meri madad kijyega...

[@kashi9593]

Sir app job kar rahai hai or freelancing??

[@assadullahch1960]

I'm self employed.

[@kashi9593]

Big fan of u sir Love u😘

[@assadullahch1960]

@@kashi9593 :)

[@someshghanchekar6252]

Will you give me the link of Playlist please

[@assadullahch1960]

kzbin.info/www/bejne/fHPWpnuCnNyhf7c

[@shopbuzz1]

can I upload this to my blogger site?

[@assadullahch1960]

I don't have any idea how blogger templates are being structured. You can do a little research on it before uploading on blogger website.

[@shopbuzz1]

AssadUllahCh I like your video but I'm not sure how to upload your theme to site and how to add content ..

[@assadullahch1960]

Once you define sections on a webpage then it's super easy to add up the content since all partitions are already in place and all you need to do is to add the meat (the actual content).

[@bilalch7504]

sir g css link nahi ho rahi bilkul bhe

[@assadullahch1960]

dude keep it simple. Create a CSS file in the same directory where you created your .html file and then you can do something like this:

[@nikhilverma9367]

tumne sabmain id hi kyon di class kyon nahi?????????

[@assadullahch1960]

Tumhari bat ka jawab ye hay k agar tum koi aesa page bana rahay ho jahan tumharay page pay sab sections unique hein to tum waha id istamaal kar saktay ho. Class ko is case mein istamaal karna zaroori nahi.

[@hinafaheemofficial7352]

Sir phly se website bani h isy responsive kese banaye

[@assadullahch1960]

Through media queries obviously. Agar kisi framework ko use karna hay responsive bananay k liye for example "Twitter Bootstrap" to us k liye ap ko apni website ki HTML ko bootstrap k liye structure karna ho ga. Agar ap koi framework use nahi karna chahti phir ap ko apni media queries likhna hongi.

[@alikamal23]

kindly share code

[@sadiqzaidi5861]

Sir I watched some clip about Html and css. Your upload video is awesome. Your teaching style is good. Your video is very use full to me for learning because I was a beginner in html now but I have some awesome tip for making layout. thank you sir ... sir kindly give me your email address or what's no. or facebook id

[@assadullahch1960]

That's great if you learnt something new. You can join my Facebook group: facebook.com/groups/844573872330632/