How to create Website Page Layout in HTML CSS | using Float - Web Layout Design Tutorial 01
Переглядів 350,469
Рік томуHow to create Website Page Layout in HTML CSS | using Float - Web Layout Design Tutorial 01
Image Reference Attribution:
www.ecurtisdesigns.com/wp-con...
=========================================
Follow the link for next video:
How to create Website Page Layout in HTML CSS - Web Layout Design Tutorial 02
• How to create Website ...
=========================================
Web Layout Design Tutorials Playlist:
• Web Layout Design Tuto...
=========================================
Watch My Other Useful Tutorials:-
JavaScript Tutorials Playlist:-
• JavaScript Tutorials
JavaScript Interactive Applications Playlist:-
• JavaScript Interactive...
Navbar for Websites Tutorials Playlist:-
• Navbar for Websites Tu...
Slideshow for Websites Tutorials Playlist:-
• Slideshow for Websites...
Web Design & Development Projects Playlist:-
• Web Design & Developme...
=========================================
► Subscribe to our UKposts channel:
/ chidrestechtutorials
► Visit our Website:
www.chidrestechtutorials.com
=========================================
Hash Tags:-
#ChidresTechTutorials #WebLayoutDesign #HTMLCSS
@ChidresTechTutorials Рік тому
👍 Every video on my channel is made with Love and Hard work, So don't forget to Like, Comment & Share. 👉 Please do Subscribe, Hit the bell icon & Enjoy Learning. It's FREE.
@darksumon716 Рік тому
If I want to Increase the size of the text, what is the css property?
@ChidresTechTutorials Рік тому
@@darksumon716 font-size
@darksumon716 Рік тому
@@ChidresTechTutorials Thank you sir
@ChidresTechTutorials Рік тому
@@darksumon716 You are welcome.
@chandusutradhar5925 Рік тому
@@ChidresTechTutorials;
@patrickjabiguero5896 Рік тому
I started watching you 3 months ago, now im a front end developer and still learning backend. you helped me so much and i want to thank you for that.😊
@ChidresTechTutorials Рік тому
Welcome. Happy to hear. Please do share and spread the word about our UKposts channel in your social network.
@josephjeremiashjamil6915 5 місяців тому
What was your road map? Im Planning to shift to programming
@aakashpaswangiet5059 4 місяці тому
Hello 👋
@NGgamin1 3 місяці тому
I just followed him too and I must say his teaching skills is something else. Continue the good works
@ebiekem Рік тому
This video is truly God-sent. I've always struggled with layouts. Thank you for simplifying it.
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@georgetuges4821 Рік тому
YOU ARE THE BEST MY BROTHER, I have been struggling in web layout design for years, My Jesus Christ has lead me to your tutorial and its so simple, than all the other tutorial. God bless you.
@ChidresTechTutorials Рік тому
Thank you for your wishes. I pray God Jesus to make my videos to reach many students. Wish you happy, healthy and successful life ahead.
@amberehjere4062 Рік тому
very true
@ria1503 Рік тому
@@ChidresTechTutorials How lovely! God bless you
@ChidresTechTutorials Рік тому
@@ria1503 Thanks for the wishes.
@disliker2398 Рік тому
Faith is a delusion
@jnslzr 11 місяців тому
Hi Chidre, cannot thank you enough for the master class, was struggling real hard trying to lay out a web page AND understanding why there were so many divs here and there, after your class everything came into place, thank you!
@ChidresTechTutorials 11 місяців тому
Welcome. Please do share and support. For more videos explore our UKposts channel.
@sharathkumar2612 Рік тому
Sir i am from india .....a telugu guy seeking webdesign layouts ....but i couldn't find any clear explanation like this😇😇....Love u sir..commenting for better reach and to make known everyone abt this amazing and informative content
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@Empezamos1734 Рік тому
As a non-native english speaker this is so helpful. I subbed
@ChidresTechTutorials Рік тому
Please do share and support.
@ryancarney7616 5 місяців тому
This is what I have been looking for! I have found it difficult to self-teach html and css because I have't found someone who is a good conceptual teacher of the languages. Thank you!
@ChidresTechTutorials 5 місяців тому
Welcome🎉 please share
@rojelapanzo397 Рік тому
You're so excellent in teaching keep going thank you I've learned a lot
@ChidresTechTutorials Рік тому
You are welcome. For more videos Please do subscribe share and explore our UKposts channel.
@toxic_119 Рік тому
Hi
@JoannaReason Рік тому
Thank you for making these series and videos! Very helpful.
@ChidresTechTutorials Рік тому
Welcome. Please do share and support
@minakshigaikwad7935 Рік тому
Hi
@rajeshkilladi7124 Рік тому
Thank you brother ♥️, I'm struggled all day with this ,but u made my day thank u so much,your explanation is on peaks,and again and again thank you so much....
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@abhrajitsaha7 11 місяців тому
You made this easy topic seem so easy, thank you!❤ Couldn't understand from other channels...
@ChidresTechTutorials 11 місяців тому
Welcome. Abhrajit. Please do share and support. Let's make this video reach to more students.
@Travelmoments Рік тому
Very clear explanation for each and every property used in building the layout.
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@osho143 Місяць тому
You are my god to me i was always confused and everything has become clean and crystal clear in my mind now. Respect to you sir ❤ i would like to have classes from you sir.
@ChidresTechTutorials Місяць тому
Thank you. Please share 💯 and support.
@ganeshkapoor8329 Рік тому
The way of teaching is very nice everything is very easy after watching this video thank you sir .
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe, share and explore our UKposts channel.
@rohanmp-rt1si Рік тому
Sir no words are sufficient to say thank for your work I searched lot to get this content before watching your video Thanks lot!! ❤
@ChidresTechTutorials Рік тому
Welcome. Please do share and help the video to reach more students like you.
@codeishard3182 4 місяці тому
the way you are explaining every line of the code is outstanding. Please make an entire course on modern css (flex-box, grid, etc) like this. There's a tones of videos on youtube but they skip the core concept. why things happen behind they don't say.
@ChidresTechTutorials 4 місяці тому
Please explore the channel. I have videos on flexbox.
@brendensong8000 Рік тому
What an amazing video! It's so easy to understand! thank you for sharing this video!
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@sagarsri4143 Рік тому
No Words, One word from my end: Excellent👍
@ChidresTechTutorials Рік тому
Thank you. Please share and help others too learn easily.
@marlonabellanosa Рік тому
your genius.. you make it easy for us to understand how layout works
@ChidresTechTutorials Рік тому
Thank you. Please do share and support.
@kaviarasanm4543 Рік тому
The way of explaining Each concept is clearly understood
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@harshalnikam1864 Рік тому
Best , from 2 3 days i was upset , that iam not getting to desing perfect layout. But thanks to you sir, its help me lot
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@fit-matters 3 місяці тому
Day 1 watching just wrote the first layout, looks great, works great, thanks so much. I am saving them in a folder for later development, "just add JS".
@ChidresTechTutorials 3 місяці тому
Great
@liezlcurambao9165 Рік тому
First I don't know how to create but after this video ..I done with my problem..Thank you
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@amberehjere4062 Рік тому
wow your such a great teach i got each and every point without facing any problems 🙂🙂🙂🙂
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe, share and explore our UKposts channel.
@reynold2 4 місяці тому
I pray God bless you for sharing your knowledge, and that He continue to illuminate the light of your understanding.
@ChidresTechTutorials 4 місяці тому
Thank you. Please share
@BonthalaRamesh Рік тому
Really good explanation of your teaching..I think so many people got placements in best companies..i want also join in a good company.. please give me your blessings to me.. you are the best teacher..
@ChidresTechTutorials Рік тому
Thanks for for positive feedback. I wish you get placed in good company with good package. Wish you a successful career.
@MyArtisnotsogood10 Рік тому
Thank you! You make our life easier because of this vid.
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@Lanterns09 Рік тому
Thank you so much for uploading this. You explain so well.
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@shortcutprogrammer2395 6 місяців тому
This is the best informative video I have ever watched. and you teach in such a way that a 5 year child can understand.
@ChidresTechTutorials 6 місяців тому
Thank you. Please share
@dal968 5 місяців тому
Thank you very much. Finally i understand how to do it. Not understanding that clearfix perfectly yet. But ill read more about it
@ChidresTechTutorials 5 місяців тому
Welcome. You can find a video dedicated to float and clearfix on my channel. Please search.
@sumansauda3981 Рік тому
Thank you so much You have explained everything so clearly
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@nishaditharuka1659 Рік тому
Sir, I'm from 🇱🇰. This was very helpful me. Thank you very much. 🙏
@ChidresTechTutorials Рік тому
Welcome. For more videos please do subscribe share and explore our UKposts channel.
@hirushadeshan1454 3 місяці тому
This is the greatest video. Thank you very much and good luck with your work! ❤
@ChidresTechTutorials 3 місяці тому
Thank you. Please share
@veoquenoesunproblema 5 місяців тому
How sick is to teach web layout with Notepad haha, this guy is awesome with this knowledge.
@ChidresTechTutorials 5 місяців тому
Thank you
@epex9025 3 місяці тому
Your videos is amazing. It's on point, covers a lot in short time. I am glad I found it.
@ChidresTechTutorials 3 місяці тому
Thank you. Please share
@ChidresTechTutorials 19 днів тому
thank you🙏
@mallondan 5 місяців тому
Brilliant teaching. Clearly instructed. Well done Sir!
@ChidresTechTutorials 5 місяців тому
Thank you. Please share
@vijaypalmanit 6 місяців тому
Perfect, 👌 first video related to layout where I could understand everything, please make such more videos, thanks …
@ChidresTechTutorials 6 місяців тому
Welcome🎉. Explore my UKposts channel.
@_pandey__007 Рік тому
5hank you so much sir..I have some problem facing on place element in correct order ,you have solve successfully
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share support.
@mohans6301 11 місяців тому
Thank you so much for this video sir in this video I learned many things and I have clear idea about box-sizing
@ChidresTechTutorials 11 місяців тому
Excellent. Please do share and support.
@josephjeremiashjamil6915 5 місяців тому
this is very easy to follow and you explain it directly on point. keep making videos
@ChidresTechTutorials 5 місяців тому
Sure. Thank you. Please do share.
@josephjeremiashjamil6915 5 місяців тому
@@ChidresTechTutorials brother, do you have tutorials for responsiveness/media query?
@ChidresTechTutorials 5 місяців тому
Watch it: ukposts.info/have/v-deo/aZqoaGyijX5ownk.html @@josephjeremiashjamil6915
@martinkobimbo8090 Рік тому
I've been wondering how these layouts are achieved, thanks bro
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@letsdoitfordream5463 11 місяців тому
Sir your way of explanation is just outstanding ❣️💯
@ChidresTechTutorials 11 місяців тому
Thanks
@TechnicalAsthavi Рік тому
Thanks you sir This layout design is very useful for me
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@engene.4_u745 Рік тому
Thank you, this video was very helpful! ❤️
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@ezajhossain Рік тому
Excellent brother. Very easy to understand ❤️
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@shreyas908 Рік тому
Thank you it's crystal clear now
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@suneerak668 Рік тому
your teaching is excellent Sir..
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@code9848 Рік тому
Thank you brother your video is very helpful.💖❤
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@doga123 Рік тому
I cant tell how much i love you right now thank you soo much
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@Crickets_2.0 Рік тому
Very simple to understand.❤
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@pinoyshowbiztrends Рік тому
Nice one
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@ArmanKhan-nq9mj Рік тому
Awesome! I just lost my voice. Your presentation skill is awesome!
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and support.
@cumarmxyusuf8248 6 місяців тому
Thanks teacher so before i'm watching this lesson i am confused 100%tnks our dear eng
@ChidresTechTutorials 6 місяців тому
Welcome🎉
@RohitModak-rd5qr 3 місяці тому
Your video really helped me a lot...liked and subscribed already...keep posting videos like that ❤
@ChidresTechTutorials 3 місяці тому
Thank you. Please share
@RohitModak-rd5qr 3 місяці тому
@@ChidresTechTutorials indeed ❤️
@ChidresTechTutorials 3 місяці тому
thats great@@RohitModak-rd5qr
@lokeshjegini4354 5 місяців тому
21:00 explain about float 25:32 explain note point about how to place elements beside after given width to the child elements
@ChidresTechTutorials 5 місяців тому
That's great. Lokesh.
@ajaygimbhal9053 Місяць тому
Very easy to understand thank you
@ChidresTechTutorials Місяць тому
Welcome🎉 Please share💯
@souha3233 3 місяці тому
Sir how to open another website on the same page layout that that website from the internet opens only in the main body of the layout which means we can still see left and right parts of my website because I'm opening that website on my website but in a specific size which is in the main content
@ChidresTechTutorials 3 місяці тому
Refer this video: ukposts.info/have/v-deo/nJiHZHqtq4GXo5c.htmlsi=RjuwcDhxrH7FzEhC
@user-sc2sd7zt8b Рік тому
Understanding skill you have quite bro thanks thanks a lot.
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and explore our UKposts channel.
@syazadamia9494 Рік тому
can i ask? when the "side bar" and "body area" already sit one beside another, why do we still need to bring back "main-div" by using clearfix? cause i think it would be okay if the main-div gone. hope someone answer this 😊
@ChidresTechTutorials Рік тому
Watch this video: ukposts.info/have/v-deo/hZ2dk32Ea4aH0Y0.html
@sangamingyt1896 10 місяців тому
Did you find the answer
@pngartsofficial7843 Рік тому
Excellent👍
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and explore our UKposts channel.
@Techg-252 7 місяців тому
Kindly explain how to insert text and diffrrent stuff in these layouts
@ChidresTechTutorials 7 місяців тому
ukposts.info/have/v-deo/sH91ioGxln1yuKc.htmlsi=YnpzHJ4b1vIwMNZo
@archanapandey2780 7 місяців тому
Thnkx
@ChidresTechTutorials 7 місяців тому
Welcome🎉
@rohittripathi5829 Рік тому
Excellent teaching skill...
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@muhammadinshal2742 Рік тому
Excellent 👍 100/100......... keep continue it
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and explore our UKposts channel.
@proshkhan1763 Рік тому
This video is very useful and I have learned easily
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and support.
@sudiptadas690 10 місяців тому
Is there any other options to centre the text horizontally except using the line-height? Cause when we go to select the text it is selecting the full area that's not expected. If we place some text in the upper portion then it will also be selected. Hope you understand. please confirm. Otherwise your tutorial is very much helpful for me.
@ChidresTechTutorials 10 місяців тому
Use flexbox. Watch next tutorials in the playlist.
@sudiptadas690 10 місяців тому
@@ChidresTechTutorials ok thank you 😊
@ChidresTechTutorials 10 місяців тому
@@sudiptadas690 Welcome.
@poojachaurasiya1712 Рік тому
Thank sir 😊 for your guidance excellent sir
@ChidresTechTutorials Рік тому
Welcome. Please do subscribe share and support.
@SirDemonitized Рік тому
This video was amazing
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe, share and explore our UKposts channel.
@sourabhredekar6208 Рік тому
Great sir ,you can teach small and small concept that using in html❤
@ChidresTechTutorials Рік тому
Thank you
@ronaldtamparong7070 5 місяців тому
Thank you so much you explain it very clearly!!!
@ChidresTechTutorials 5 місяців тому
Welcome🎉
@phulerahub6763 Рік тому
Very nice information
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@jenirahman5994 Рік тому
Your very clearly explain that thx,,,,
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@doga123 Рік тому
When I do example pages for study footer div dont go to bottom of the page. What should i do?
@ChidresTechTutorials Рік тому
Use clear fix class on parent div. Rewatch the video you might be missing something.
@Ravisoni07 Рік тому
Really a helpfull video, good job sir 🙏
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and explore our UKposts channel.
@riadamin813 Рік тому
Very nice and clear
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe, share and support.
@divyaranidasari6925 4 місяці тому
Really god bless you sir i am very grateful to you
@ChidresTechTutorials 4 місяці тому
Thank you. Please share
@bkdagartala 5 місяців тому
I found this video very informative ❤. Only doubt, whether this layout is mobile friendly or not?
@ChidresTechTutorials 5 місяців тому
You need to use media query
@sudhadevi6692 Рік тому
Sir does border-box doesn't include margin?
@ChidresTechTutorials Рік тому
Yes. Doesn't
@MichaelNavarro-om4bc Рік тому
Thank you sooo much you earn another subscriber, I am stuck in only reading classess and I saw this content its very easy to understand your teaching and I found out what I am lacking, an actual practice. I am newbie and learning to be Front-End Web Developer, and sorry for my bad english.
@ChidresTechTutorials Рік тому
Welcome. Please do share and support.
@hello_doaa6383 Рік тому
Thank you so much!
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@shyamtiwari9219 Рік тому
Well
@ChidresTechTutorials Рік тому
Thanks. For more videos please do subscribe share and support.
@reetachauhan2452 Рік тому
Apparent explanation Thank you so much sir .
@ChidresTechTutorials Рік тому
You are welcome. Please do subscribe share and support.
@reetachauhan2452 Рік тому
Ofcourse 😊
@ChidresTechTutorials Рік тому
@@reetachauhan2452 Awesome
@srimancreation4253 Рік тому
❤❤❤
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@aakulacharan 5 місяців тому
Excellent and Extra-ordinary Chidre!
@ChidresTechTutorials 5 місяців тому
Thank you. Subscribe, Share & Support.
@AS-mc2db Рік тому
Great video
@ChidresTechTutorials Рік тому
Thank you. For more videos please do subscribe share and explore our UKposts channel.
@souha3233 3 місяці тому
Hello sir, How can I open a website on the internet on my own page in the body content which means once I click on a link in my page that website will be opened in my website with a specific size which that covers the body or what we call content body in the middle while left and right and bottom parts are the same ???? Or could you please provide me with your email to explain the idea much better because I really need . Thank you
@ChidresTechTutorials 3 місяці тому
ukposts.info/have/v-deo/nJiHZHqtq4GXo5c.htmlsi=RjuwcDhxrH7FzEhC
@roster6292 3 місяці тому
Use vs code or any other code editor please 🙏🙏🙏. In 2024 you are still using note pad. You are legend 🤯
@ChidresTechTutorials 3 місяці тому
Learn HTML language and it's Concepts perfectly. IDEs help you code easily.
@roster6292 3 місяці тому
@@ChidresTechTutorials btw I am full stack web developer. 😊
@ChidresTechTutorials 3 місяці тому
Happy to hear that. Web development is so cool. @@roster6292
@roster6292 3 місяці тому
@@ChidresTechTutorials do you make any money no including yt?
@sbglobalnetworks2983 9 місяців тому
❤
@ChidresTechTutorials 9 місяців тому
Thank you
@arslanmalik5904 Рік тому
That is very well explained you saved my time Thank you JazakAllah
@ChidresTechTutorials Рік тому
You are welcome. For more videos please do subscribe share and explore our UKposts channel.
@farhadcohan8867 2 місяці тому
Awesome instead of floating elements and clear can you grid / flexbox /position ?
@ChidresTechTutorials 2 місяці тому
Explore the channel for flexbox
@ramkhilawanpatel2702 Рік тому
Nice video
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@Surajkumar-or4nk Рік тому
🙏Thanks You Sir🙏
@ChidresTechTutorials Рік тому
You are welcome. Please do subscribe share and support.
@jeromesinfuego3867 Рік тому
nice and clear tutorial...
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@jj-xy5wg Рік тому
Made it very clear 👍
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@zubairaleee-bo6bw Рік тому
wow
@ChidresTechTutorials Рік тому
Thanks
@naimnaim9910 Рік тому
Nice
@ChidresTechTutorials Рік тому
Thank you. Please do subscribe share and support.
@MarilynnOfficial 4 місяці тому
Thank you for sharing this! I learned so much! My question: My footer has white space below it, unlike yours its placed directly at the bottom. I doubled checked my code, and its correct to what you have. Why does mine have white space below it? How do I fix this? 😊
@ChidresTechTutorials 4 місяці тому
Paste your code let me check
@MarilynnOfficial 4 місяці тому
@@ChidresTechTutorials I figured it out! It's just the min-height that was causing it to float above. :) TY for the video.
@ChidresTechTutorials 4 місяці тому
That's great@@MarilynnOfficial
@Toby337 4 місяці тому
hey MarilynnOfficial, im sitting with the same problem rn, if im allowed to ask, how did you fix it, because I cant figure it out 😊😅
@MarilynnOfficial 4 місяці тому
@@Toby337 change the min-height. It’s bringing everything up. The higher the number, you’ll notice that the slide bar will appear than. You can play around how much min-height you want to put in that div.
@oscarskidoo9884 5 місяців тому
easy to understand, thank yu
@ChidresTechTutorials 5 місяців тому
Welcome. Please share
@reynold2 4 місяці тому
Thank you Sir.
@ChidresTechTutorials 4 місяці тому
Welcome🎉 Share it with friends
ChidresTechTutorials
Переглядів 40 тис.
ОВР Шоу
Переглядів 4,1 млн
Суспільне Донбас
Переглядів 403 тис.
Zeeshan Academy
Переглядів 58 тис.
ОВР Шоу
Переглядів 4,1 млн