CSS Html Basic Layout Design Tutorial in Hindi / Urdu

In this tutorial you are going to learn css html basic website layout designing in hindi, urdu language.You can learn how to make a website layout with html div tag and css.

[@yoyocr2034]

Video length is short, still covered every detail, and well explained.. thanks boss, you're a master..

[@YahooBaba]

Glad you liked it!

[@iamrahiii]

@@YahooBaba pls share source code of this file.

[@muaazqasim]

@@YahooBaba rrfer7t7yyyyyyyyyyhgvrbfbdnjbvtvbnmjk,.

[@vaibhavmoharkar2349]

Thats speciality of yahoo baba. Its best

[@30sunique78]

​@@YahooBabait's worthy so everyone likes your content 💗

[@Amar11115]

Thank you very much! I am going to watch all the videos on CSS. Your explanation is lucid. Thanks for making them!

[@YahooBaba]

Your welcome

[@brodiemauricio9172]

You probably dont care at all but does anyone know of a way to log back into an instagram account..? I stupidly lost the account password. I would love any tips you can give me.

[@duncancalvin3158]

@Brodie Mauricio Instablaster :)

[@brodiemauricio9172]

@Duncan Calvin I really appreciate your reply. I found the site through google and Im trying it out atm. Seems to take a while so I will get back to you later when my account password hopefully is recovered.

[@brodiemauricio9172]

@Duncan Calvin it did the trick and I now got access to my account again. I'm so happy! Thanks so much, you saved my ass!

[@ankitatripathi2166]

TEACHER LIKE U INSPIRE MILLIONS OF STUDENT....THANK U SIR FOR SUCH AN EASY EXPLANATION

[@YahooBaba]

Your welcome Ankita :)

[@jomiburrahmanrafat]

Please support my channel Elementor button tips and tricks kzbin.info/www/bejne/nauyp6KljNhkga8

[@DanishTaimoor150]

My All Problems Solved in this video thank you Sir

[@saqibali6900]

Teacher ho to aap ki tarha....thank you sir for such a great and easy explanations.

[@YahooBaba]

Thanks and welcome

[@sanju-bw2ei]

Great tutorial sir, I clearing my all doubts by watching ur tutorials. Such a great work u doing keep it up sir regards from Andhra pradesh...

[@YahooBaba]

Glad you liked it :)

[@hoorainahmad1208]

Or kia ye layout responsive hoga agr ham webapages ese layout par banye? Or Agr Sab selectors ko alag alag margin and padding deny ki bajay ham *{ Margin:0; Padding:0;} Kry tu?And thanks you are one of the best tutor I have ever seen. I learned alot from your videos .🌺 🇦🇫

[@maqsoodshaikh4911]

Very nicE...apka tariqa buhut acha kam krne ka or smjhane ka great bs isi tarah videos upload krte rhen aur hamen guide krte rhe..... ShukriyA...!!!

[@YahooBaba]

Thanks Maqsood :)

[@indranilgoswami1500]

Outstanding sir.. Excellent tutorial

[@YahooBaba]

Glad you liked it!

[@dileshnannaware4881]

Wonderful project, which helps to clear all your doubts🤫💥

[@priyankabhaurjar]

Very well explained sir I m learning web designing from ur videos... Pls responsive navigation and drodown menu explanation ka ek video upload kr dijiye... Bohat videos dekhe bt confusion hi h abhi b ap pls clear kr dijiye responsive navigation bar ka

[@631singh]

thanku so much sir by watching your videos and few ohter youtuber teacher i stated creating basics websites thanku so much sir

[@YahooBaba]

You are most welcome

[@30sunique78]

Many creators Make content like this but you''ll explain and cover and provide structure way that's makes you Unique . Thanks 🙏

[@manasupadhyay266]

Awesome Tutorial. please make more videos about layouts making, they are very helpful

[@YahooBaba]

Yes sure :)

[@vikramjanugade9332]

I was waiting for this type of example.. thanks.. please upload practically web page related examples..!!

[@YahooBaba]

Sure I will

[@Syed_Qasim_Alvi]

Best teaching in the world love from pakistan

[@YahooBaba]

Most welcome :)

[@syedasyeda684]

zabrdast sir bhhht awlaa bhht acha smjhaya ...keep it up

[@YahooBaba]

Thanks Syeda :)

[@saddamtuhin9105]

I am from Bangladesh.The way u teach,is very easy to undesrtand for a fool like me.I request u to make website using css,as u made website using bootstrap.

[@satishkaushik7794]

Sir... Apne li tag ko inline-block diya hae... Lekin li ke andar anchor tag ko block kr diya hae ... So it should up to down. Kyunki block elements to up to down move krte haen ... Can u explain little if possible?

[@YahooBaba]

Satish "block" ka matlab ye nahi hota ki wo down side mein move hogayega. "Block" karne se jo bhi html ka element hota hai wo Block ke tarha kaam karne lagta hai like tag. Jaise div tag browser ke puri width cover kar leta hai waise he, Agar aap tag ko block bana doge toh wo whi div tag ki tarha kaaam karne lagega aur usmein padding aur margin bhi thikh se kaam karenge. Yha tag ke andar ek he tag hai aur wo hai tag toh wo utni he width le lega jitni width tag ki hogi.

[@satishkaushik7794]

@@YahooBaba thanks a lot ..🙂 thanks u so much

[@GamersClubPk]

Your videos are amazing .nicely explained! Good work keep it up.

[@raviVerma-tc4ll]

Nice explain sir ji in short time 🙏🙏

[@ahmadkhan-ud4fz]

Sir Kafi Chezen like hover mene apke btane se pehle hi kar liya tha just cauz of you😁

[@nandlalkumarprajapati5021]

Amazing video

[@syedasyeda684]

thnx to Almighty Allah k apki vedio mujhy mil gai

[@zisanahmed4633]

Love you from Bangladesh😍😍😍

[@YahooBaba]

Your welcome Zisan :)

[@Bruce_Wayne681]

Thanks.!! Awesome Tutorial Bhai

[@MuhammadAhmedLive]

Great teacher great work

[@YahooBaba]

Thanks Computer Education :)

[@mrdashbix4383]

really appreciate you man.Bundle of thanks for amazing video

[@YahooBaba]

Your welcome :)

[@khatariinsaan5284]

Sir Excellent Explanation but try to provide Sorce Code

[@AkashKumar-th8ux]

You are great personality yahoo baba

[@AkashKumar-th8ux]

I am beginner but I learn many fields of the website in minimum time. Thanks for yahoo baba

[@YahooBaba]

Your welcome :)

[@iqrashehzadi5590]

Sir yaha tak css bht ha ya agay b krne plz reply kr de q k.animation walay kn se topic han mene wo nhi krne mje wo b nhi pta jha tak basic css cover ho jae wha tak bta den

[@avijanagal500]

👌👌 awsome bhaijaan asha krtay hai ki apka channel bdi uchaeaa shuay❣️

[@YahooBaba]

Thanks Avi for ur good wishes :)

[@naitikkathiriya]

well thank u so much for this basic one, but... 16:18 sir apne background to crimson diya phir hover pe bg red kyu aa raha hai?? bad me changes kiye!?

[@owaiswali6499]

kamal Sir God Bless You 👍❣🇵🇰

[@YahooBaba]

Thanks Owais :)

[@yuvrajsingh8609]

this practice sum's up the above topics thank u sir!

[@YahooBaba]

Most welcome!

[@sktamim_01]

Content quality first class sir❤️❤️❤️

[@YahooBaba]

Thanks a ton

[@sktamim_01]

@@YahooBaba 😁😁😁

[@arslanahmed653]

Awesome tutorials keep up the good work

[@YahooBaba]

Glad you like them!

[@idontknowmaybesomeone772]

Love you hogyaa sir ❤️

[@taqadasurrehman5808]

Sir amazing learning CSS from your videos

[@YahooBaba]

Glad to hear that :)

[@shoibahmed3259]

Excellent...

[@mdhasiburrahmannafiz9984]

You always make grateful to you.

[@Web_Cric]

Keep teaching us ......

[@bishalchandragautam2866]

Thank you very much, great video.

[@jomiburrahmanrafat]

Please support my channel Elementor button tips and tricks kzbin.info/www/bejne/nauyp6KljNhkga8

[@aj.edits1356]

Thankyou so much sir 🙏

[@studentbengal4043]

Very very nice video Sir 👍

[@YahooBaba]

Thanks and welcome

[@anupyalsangikar6748]

Wow nice Thank you yahoo baba

[@YahooBaba]

Your welcome :)

[@avinashjadhav645]

Good explanation bro....thanks a lot

[@YahooBaba]

Welcome 👍

[@muhammadismail4229]

Zabardast ❤❤❤

[@awaiskhanjadoon12345]

sir je header ka uper or necha menu ka necha bhe space ha vo kasa remove kara gay

[@haristeachingcenter4320]

Asalam o Alaikum bhai jo header ke uper wala space h woh aise remove hoga aap ye code likho. #header h1{ margin: 0; }

[@muhammadashfaq2895]

Bro. you are awesome

[@YahooBaba]

Thanks :)

[@sktbirds3258]

great sir

[@mohammadsulemankhan58]

MA SHA ALLAH GOOD WORK

[@YahooBaba]

Thanks

[@s_u_n_n_y_b_o_y]

Thank You Sir G.

[@YahooBaba]

Most welcome

[@nomanali9836]

good work sir

[@YahooBaba]

Thanks Noman :)

[@harir.prajapati628]

Thank you sir

[@dlsstudio]

Best explained

[@YahooBaba]

Glad you liked it

[@AKASHDAS-pp6dl]

hover is not working. why sir? #menu li a:hover { background-color:crimson; color: white }

[@MuhammadIsmail-dk9sv]

sir is this layout responsive or not?

[@GreatTimeAlwaysTakeTime]

Awesome

[@frontend9206]

Best for beginners

[@afsaramistry7686]

Thank you soo much sir

[@YahooBaba]

Most welcome

[@atifhusain7924]

Sir dislplay:inline-block; property not working in #footer...but it working on #menu #footer { background-color: blue; clear:both; width:100%; } #footer li { displa:inline-block; padding:5px; } #footer li a { text-decoration:none; color:white; padding:5px; font-size:16px; display:inline-block; font-family:arial; }

[@YahooBaba]

show me the results...by screenshot or send me your whole code at : [e-mail]

[@atifhusain7924]

@@YahooBaba Thank you Sir

[@musabkhan2463]

MAST EK DUM

[@YahooBaba]

Thanks :)

[@ujjwalyadav930]

Sir I put margin and padding 0 in body tag but still my wrapper div have some space from top

[@YahooBaba]

I think their is a heading tag in top header in your code. Set margin:0; for heading in header.

[@ujjwalyadav930]

@@YahooBaba thankyou

[@muhammadasifhayat5977]

Bhot zabardast

[@YahooBaba]

Thanks Asif :)

[@computingpulse9144]

Wonderful....

[@aabywhyz3677]

Sir main aaj revesion kar raha tha anchor tag ke saathbana. Maine ek folder banaya jisme saari about us, faq ka page tha.. Jab maine usko link kiya anchor tag ke saatha. Jab mai about us par click kar raha hu to wo same page par content siderbar aur footer ke neeche aa raha tha.Aisa kyon ho rha hai

[@YahooBaba]

Aisa isliye ho raha hai kyu ki aapne jo Anchor Tag ke andar jo href mein path diya hai wo galat hai.

[@manishavids4595]

Great work sir🙏🙏

[@YahooBaba]

Thanks Manisha :)

[@Muhammadasif-ps1ni]

hi, have u complete website make through css & html , if yes kindly provide his url

[@iramawan5766]

sir i added all the coding just as you did, but its not coming out same, everything messed up..i checked again and again but its coming out weird

[@YahooBaba]

Sen your code folder at my email id : [e-mail]

[@pavanpatil7759]

Sir one video on etc

[@YahooBaba]

As soon as possible

[@anukashyap4817]

Thank thank you so much sir 🌹🌹🙏🙏

[@jomiburrahmanrafat]

Please support my channel Elementor button tips and tricks kzbin.info/www/bejne/nauyp6KljNhkga8

[@syedasyeda684]

like it

[@osmonddsilva1577]

Great! Thanks

[@YahooBaba]

Welcome!

[@Timed-Automaton]

2:57, how do you duplicate so quickly? Is there any short cut key for this?

[@YahooBaba]

CTRL + d

[@Timed-Automaton]

@@YahooBaba thank you.

[@otakubuzz4436]

my code: sheru body{ width: 500px; background-color: grey; margin: 0 auto; border:1px solid black; } .starter{ border:2px solid black; background-color:white; width:800px; margin:0 auto; } #first{ background-color: orange; margin: 0; } .second{ background-color: pink; padding: 0px; font-size: 15px; margin: 0px; } .second ul{ margin: 0; padding: 0; } .third{ width: 600px; } .fourth{ background-color: turquoise; width: 200px; float: right; margin-top: -249px; min-height: 251px; } .fifth{ background-color: tan; min-height: 35px; text-align: right; } Website Layout Home | About Us | Gallery | Contact Us Sub Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim augue ut lacinia condimentum. Aliquam eget dictum orci, ut ullamcorper lacus. Vestibulum efficitur lacus ac purus viverra interdum. Nunc aliquet, neque eget rhoncus varius, sem justo mollis diam, ac auctor metus justo nec nisi. Fusce in felis fringilla, bibendum ipsum fermentum, convallis quam. Aliquam erat volutpat. Integer mollis auctor lacinia. Maecenas ultrices sem eu libero malesuada imperdiet. Suspendisse eu sodales purus. Sed scelerisque quis ante et sollicitudin. Suspendisse potenti. Duis accumsan cursus risus et consectetur. Ut interdum fermentum felis, ac efficitur risus ornare quis. Aenean id ex accumsan, tempor sem non, sagittis odio. Morbi sit amet arcu orci. Home About Us Gallery Contact Us [e-mail]

[@techhilfiger1014]

Well done

[@jiteshjoshisde3154]

Sir ye to mobile k liye responsive bna hi nhi.. please.. make vedios for responsive layout .. like professional sites

[@ZaidShahid777]

Sir ager content area mai content barhta hai to uski height increase hoti hai, lekin sidebar ki height utni he rehti hai, ager hum chahtay hain k content area k sath sidebar ki height bhi automatically utni he increase ho jaye to us k liye kia kerna hoga?

[@YahooBaba]

Use CSS Flex property for that.

[@ZaidShahid777]

@@YahooBaba thank you so much , love and respect from pakistan.

[@ZaidShahid777]

@@YahooBaba sir kisi din apna introduction bhi dijiye ga..

[@YahooBaba]

Jaroor Zaid :)

[@hellocoding2614]

Still I'm facing a gap between header and menu and a gap between menu and slide bar by keeping the margin 0; What's the issue? Can anyone tell me!!

[@mnmanish2908]

Great sir

[@ashutoshjhinkwan4304]

Hello sir ye jo file ya webpage bana hai ise kis extension me save karna hai .html me ya .css me

[@YahooBaba]

HTML extension mein.

[@ashutoshjhinkwan4304]

@@YahooBaba thank you sir, i understood

[@syedasyeda684]

soooooper

[@YahooBaba]

Thank you

[@pujapranab29]

great sirji.

[@YahooBaba]

Thanks Pranab :)

[@muhimmen]

+1 like

[@syedasyeda684]

respect for u

[@YahooBaba]

Thanks Syeda :)

[@hu0.464]

body ma margin 0 kaam nhi kr rha ???? sir

[@YahooBaba]

Body mein padding do.... body{ padding:0px; margin:0px; }

[@AbidHussain-hg4gh]

Thank you

[@YahooBaba]

You're welcome

[@alwayscol9061]

❤❤

[@vikasshankeragarwal9529]

Thank You so much.

[@YahooBaba]

You're most welcome

[@rughyr3dfuyhnopl]

rajat body { font-family:arial; background:gray; margin:0 auto; } .start { border:2px solid black; background:white; width:850px; margin:0 auto; } .first { background:orange; height:50px; } .second { background:pink; } .third { } .fourth { background:pink; } Website Layout Home | About Us | Gallery | Contact Us Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim augue ut lacinia condimentum. Aliquam eget dictum orci, ut ullamcorper lacus. Vestibulum efficitur lacus ac purus viverra interdum. Nunc aliquet, neque eget rhoncus varius, sem justo mollis diam, ac auctor metus justo nec nisi. Fusce in felis fringilla, bibendum ipsum fermentum, convallis quam. Aliquam erat volutpat. Integer mollis auctor lacinia. Maecenas ultrices sem eu libero malesuada imperdiet. Suspendisse eu sodales purus. Sed scelerisque quis ante et sollicitudin. Suspendisse potenti. Duis accumsan cursus risus et consectetur. Ut interdum fermentum felis, ac efficitur risus ornare quis. Aenean id ex accumsan, tempor sem non, sagittis odio. Morbi sit amet arcu orci. Home About Us Gallery Contact Us [e-mail] Sir is code main mere header main upar se space kyun arhi hai?

[@YahooBaba]

Woh space ke margin se aati hai. css mein ja kar .first h1{ margin:0; } set kardo

[@rughyr3dfuyhnopl]

@@YahooBaba Thanx Sir!

[@adishmangla1183]

Wrapper would be useless, agar humko resize karna hogga, wrapper ne toh apnna hight width maintain rakhna haai, it will destroy everything. Isse achha toh body ko background color do, aur apne header footer sabko style karna shurru kardo with proper units.

[@naseerahmad7817]

osam bhsi g

[@YahooBaba]

Thanks Naseer :)

[@kshitijgaikwad997]

if you are facing same problem then add universal operator and give padding and margin to 0. *{ padding: 0; margin: 0; } ------------------------------------------------------------------------------------------------------------------------------------------------------------- Basic Layout *{ padding: 0; margin: 0; } body{ font-family: arial,helvetica; background: slategray; margin: 0; padding: 0; } #wrapper{ border: 0px solid black; width: 1000px; background: white; margin: 0 auto; } #header{ background: crimson; color: white; height: 100px; } #header h1{ padding: 30px 0 0 20px; } #menu{ background: lightsalmon; } #menu ul{ margin: 0; padding: 0; } #menu li{ display: inline-block; } #menu li a{ display: block; padding: 10px 13px; text-decoration: none; color: black; } #menu li a:hover{ background: crimson; color: white; } #content{ width: 800px; min-height: 500px; padding: 15px; float: left; box-sizing: border-box; } #sidebar{ background: lightblue; width: 200px; min-height: 500px; float: right; } #sidebar a{ text-decoration: none; color: black; } #footer{ background: lightsalmon; padding:5px 10px; text-align: right; clear: both; } Kshitij Gaikwad Home About Us Gallary Contact Us Design Basic Layout Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Home About Us Gallary Contact Us yahoobaba@copyright 2018.

[@hellocoding2614]

11:40-11:45 Still I'm facing the issue by keeping the margin and padding 0;

[@YahooBaba]

Send your code file at my email id : [e-mail] I will check it.

[@JayeshPatel-qs2ye]

After menu line display taken as inline-block, anchor tag function not working after making it block also

[@khushbooali9504]

U haven’t include width property properly

[@iCanSupport]

Sir WordPress par php use karke website kaise banate h

[@YahooBaba]

Is par toh pura ek course banana padega. Jo ki main 4 months baad banunga.

[@iCanSupport]

@@YahooBaba Ok sir i am waiting

[@mrjockey1375]

Why does my paragraph's text getting blue as link in browser window?

[@YahooBaba]

Because you didn't close your Anchor tag

[@kevivbharti]

I am facing problem, when I set border : 1px solid black; to border : 0px solid black in #wrapper id there is a gap from top. Could someone help me?

[@YahooBaba]

Send your code folder at my email id : [e-mail] I will check it.

[@kevivbharti]

@@YahooBaba I sent you code folder sir please check.

[@mtex448]

@@kevivbharti Thats bcz of your heading margin

[@kevivbharti]

@@mtex448 Thanks for help me.

[@mtex448]

@@kevivbharti welcome ,make heading to zero ,

[@ShortBlaster12]

Sir jab sidebar ke dots ko remove Kar Raha hu to nhi ho rahe hai #sidebar ul a{ list-style-type:none; }

[@YahooBaba]

kaun se sidebar ke dots ?

[@ShortBlaster12]

Jo humne sidebar me ul list ke anadar li item me anchore tag liya tha

[@lsuremusic3787]

@@ShortBlaster12 use #sidebar ul only

[@fullpower4275]

Bhai ul ka andar remove Krna hai na ki ka App aak bar #sidebar ul{ list-style-type: none; } Aasa kr ka dekhe