HomeОбразованиеRelated VideosMore From: mmtuts

14: How to Create a Wrapper in HTML | Learn HTML and CSS | HTML Tutorial | Basics of CSS

414 ratings | 26964 views
How to create a wrapper in HTML | Learn HTML and CSS | HTML tutorial | Basics of CSS. In this lesson we will learn how to create an HTML wrapper, which is used to center HTML content on a web page. ➤ GET ACCESS TO MY LESSON MATERIAL HERE! First of all, thank you for all the support you have given me! I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you! I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach. I hope you will find it helpful :) Material for this lesson: https://www.patreon.com/posts/html-14-download-15593693
Html code for embedding videos on your blog
Text Comments (75)
diane gibbs (3 days ago)
what program are you using to write your code?
aeaeae ffjfgjjgf (20 days ago)
I have a problem,so bassicly my nav moves in the middle but my H1 wont
Ruel Agnes (1 month ago)
your tutorial goes in every direction,very confusing
Rishab Bulusu (1 month ago)
<question>Can you add content outside the wrapper?</question><br><explanation> If yes How do you do it. Please do create a video for this .{Only if yes}</explanaton>
tolgahann susur (1 month ago)
Thank you for video series, i was trying to make same thing with Firefox about wrrapper but Firefox was not worked as you did, then I changed to Chrome and it work like a charm. Do you know what what is the reason of this?
Andrew Stuckey (1 month ago)
I've been going thru all of your HTML tutorial. Super helpful! Thank you. I'm following along with closed caption (I'm deaf) and this video is missing one. Could you set up automatic one and throw em on? Thank
tuan nguyen (2 months ago)
Excellent ! You explain it so clearly. Perfect for a beginner like me.
Chukonu5 (2 months ago)
What keyboard are you using?
mmtuts (2 months ago)
Here I think its the Corsair K70 RGB
pelin kahraman (4 months ago)
My h1's are fixed in the center. Can't move them to the left. User Agent Stylesheet overrides them. I wonder what style should I use to override fixed safari stylesheet :( h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; }
Jelon (6 months ago)
i have red color on my menu and on wrapper how to fix it that wrapper should be under this menu ? i have all like u... and the same effect
Lia Sue Kim (8 months ago)
this was really confusing.dont change your mind later on in your tutorial first of all make a div and put inside nav then you are really confusing.changing your mind so many times that s hard to grasp for non-native english speakers
Lia Sue Kim (7 months ago)
actually i solved this.sometimes it is hard to define all divs inside each other its like a sandwish
mmtuts (8 months ago)
Thank you :) You are always more than welcome to ask questions ;)
Lia Sue Kim (8 months ago)
Please dont get my comment as a negative feedback or something.I really appricate your efford and time .i just was saying that it was confusing to me and i am a newbie so i hope it didnt make you sad .Dont mind me cuz i dont want you to change the way you teach .I am a student of yours so i have to ask questions. :p
Lia Sue Kim (8 months ago)
hey i love your examples and the way you teach.I didnt mean you have to change.but it didnt work with my styles and it took me two hours to spend on two tutorials.just to do the way ou did.so im a newbie just be yourself and teach how you teach and i like your english.Because why not? Its partly british and partly american accent lol.thanks
mmtuts (8 months ago)
Hi Lia, I wasn't changing my mind during the video by later inserting it inside the nav :) I started by showing the general effect the wrapper creates on our content, and then later showed that in some usages we need to place them inside our HTML markup to get a different desired effect. I live in Denmark and I'm a non-native english speaker myself by the way. If you have trouble understanding the content because I show more than one example, then unfortunitaly I won't be changing my teaching format. I want my videos to be thorough, and if I simplify the videos too much then I wouldn't feel that I am teaching the content properly.
web pad (8 months ago)
Hi, I know this is super basic question, super noob here. At 6:43 part of the video, I am curious how the nav tabs have the white background all the way to the left and right side of the page, different from the gray body color? Which element made that effect? Was it the CSS reset that did it, or the width of 1000px?Or is it by just moving the class "wrapper" inside the navigation, instead of in the body before the nav tag?
Lehm Black (5 months ago)
that was the width 100% at <nav> css.
Jorge Morales (8 months ago)
My nav tab doesn't go from left to right as yours, it only takes some portion of the width; considering I gave 1000px to the nav in my css. Any idea why this is happening?
Gerald Foushee (9 months ago)
now that we have started using flexbox, should we use the wrapper for this project but later on JUST us flexbox? and can we center the content like you did here using flexbox so we have space on the sides?
Gadget inline (9 months ago)
hey mmtuts, can u make a tutorial about html positioning? like left and right slide-bar, footer. layout positioning. thanks.
DeathDrive (9 months ago)
Damn Daniel, back at it again with 3 downvotes ? :(
TheAgeOfTheWolf (10 months ago)
cool vid thanks whats the difference between having a <div class="container" for the entire website, basically from body tag to body tag and <div class="wrapper" for each section within the body I've seen people do both these methods and I'm not sure what the difference is. would be great if you could explain, thanks
TheAgeOfTheWolf (10 months ago)
ahhh so do you think it's necessary to have both a container and wrapper? Or would the body tag do the same job as a container?
mmtuts (10 months ago)
A container is usually something that indicates a container for content or sections of a website, where as a wrapper is used to place or center the content in the browser.
Amy Steam (10 months ago)
Thanks for another great video! 👏
Wong Wen Yean (11 months ago)
Hey mmtuts, can you make a video about image slider?
Wong Wen Yean (11 months ago)
mmtuts Sorry i didn't notice it. Thanks for reply
mmtuts (11 months ago)
I already did in my JavaScript course ;)
Nabil Ahmed (1 year ago)
Hey mmtuts, <!DOCTYPE html> is not letting me change the color of the navigation div. With out <!DOCTYPE html> it is working. Why is this happening?
T Frapp (6 months ago)
I know this question is 5 months old, but I'm fairly certain the issue you're running into has to do with the class name you are using in the <div> tag. You can't have a space in a class name. In this case <div class="Top bar"> is indicating that the particular <div> element belongs to two separate classes; one class named "Top" and another class named "bar". Try giving the <div> a class name without a space, such as: class="top_bar", and then change the .css to match.
k Ram (1 year ago)
And your CSS?
Nabil Ahmed (1 year ago)
Hey mmtuts, Thanks for the reply, my html code looks like this- <!DOCTYPE html> <html> <head> <title>mallbd</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="Top bar"> <nav> <ul> <li><a href="index.html">Home </li> <li><a href="products.html">Products</li> <li><a href="support.html">Support </li> </ul> </nav> </div> </body> </html>
mmtuts (1 year ago)
It is very likely a typo in your code. How does your entire index.html code look like?
James Barratt (1 year ago)
IT's not about making the wrapper that is troubling me. I want to know how it can become responsive afterwards. I know how to style in CSS but when I load the website on small devices it always look crap. For example: Your create a login video with styling. The login section with input boxes, and signup. OK on iPhone in portrait you can't see the boxes, and in landscape you can better but not like using bootstrap framework. So how does one do CSS to become responsive......... That's the real question I'm sure many of us want to find out the answer to.
Gerald Foushee (1 year ago)
what about text that leaks ouside the div box. i think you mentioned how to fix this in another video but i didn't write it down. can you explain again?
gold Granat (1 year ago)
Kan du ikke spil
Gerald Foushee (1 year ago)
Part of my navigation is red like the wrapper and the other part Gray....cant find the error I made
subrat chand (1 year ago)
Hi mmtuts , Can you make a series on angular js with php , it would be great
Gerald Foushee (1 year ago)
I love the video..the speed was a little fast especially when you copy and paste and tell us where it needs to go next. The information is excellent but I had a little trouble with that because I have to watch on one device and try to code on my laptop...and I hAve a MacBook pro and use two fingers to copy and paste and I been deleting code by accident all day lol...i will save what I have so far to a flash drive just in case I screw this up I will not have to start from scratch...and can you recommend a book also ? I sometimes need to see this written down But thank you so much Daniel !
Gerald Foushee (1 year ago)
Will this be applied to all the pages or do we need to repeat this for every page? I assume we want all the pages to have the same look?
mmtuts (1 year ago)
Without other programming languages we unfortunitaly need to dublicate everything on each page :(
Mr. Sinha (1 year ago)
Hey mmtuts, Please make a video on creating a reply system with a comment system
Mr. Sinha (1 year ago)
This is about how to run python on android
Mr. Sinha (1 year ago)
mmtuts watch my YouTube channel https://youtu.be/yLJBvr5bIkY
Mr. Sinha (1 year ago)
Please make it fast!
Mr. Sinha (1 year ago)
mmtuts hi, just make it like the comment system of YouTube with PHP and mysql
mmtuts (1 year ago)
Hi, I plan to create a comment system tutorial in my PHP series. We cannot create it using HTML only unfortunitaly.
Ambrogio Piredda (1 year ago)
w3schools (link below) is one of the best (and free) websites to learn HTML, CSS, JavaScript, and everything you need to know to get started in web development, with tutorials, exercises, quiz, and even a certificate. Link to w3schools: http://byearn.com/42T4UGU
Juras Kavaliauskas (1 year ago)
Hello Daniel! So you're going to make new HTML and CSS videos from now on? Or should I continue with your old lessons?
Juras Kavaliauskas (1 year ago)
Thank you for your reply! Keep up with the good work!
mmtuts (1 year ago)
I am updating the older lessons. The old lessons are still useful, however the videos are bad quality and were created many years ago based on old habbits.
NepalCode TV (1 year ago)
this super basic bad way to create a wrapper /starts from mobile first design or/ use grid or/ media or bootstrap !!!! teach php laravel that is why is subscribed
web pad (8 months ago)
Thank you so much for this explanation. I am actually following the Treehouse tutorial but I find myself scouring through all your CSS tutorials for more info because your videos are so beginner friendly and make us newbies feel motivated to follow along and continue with the Web Dev journey.
mmtuts (1 year ago)
Hi there! I am glad that you are enjoying my PHP course. This comment... I'm not sure if you understand have negative it was received, but to avoid that people watching this video will get bad advice, I will leave a long answer. So here it goes... WHO THE H**L DO YOU THINK YOU ARE!!! Hehe just kidding :) But seriously though... This is a HTML course for people who are COMPLETELY new to programming and web development, it is not a framework course. I strongly disagree that people should learn these frameworks you mention, before learning the basics of HTML. Frameworks will only confuse people who are new to programming, and should be taught in a completely seperate course AFTER they have learned basic HTML and CSS. Creating a wrapper like I did in this video IS NOT a bad way of creating a wrapper, it is what people NEED to learn before moving on to frameworks, and it is the correct way to do it without using frameworks. When you make a public comment that people should ignore the foundamentals of HTML and jump directly to frameworks, I can't just ignore your comment. Remember that people are watching this course because they want to learn AND UNDERSTAND how to make websites. If they skip learning HTML basics then they WILL NOT UNDERSTAND the code used in frameworks. You are telling people that learning the foundamentals is bad, and that they should jump straight to a skill that REQUIRE that you already understand HTML. Frameworks like Bootstrap and grids WHICH ARE BUILD on HTML. Without learning basic HTML people wouldn't understand the foundation of these frameworks! To put what you say in simple terms, your comment is like a person in college telling freshmen in highschool that highschool is overrated, and that they should just skip highschool and jump straight to college. You are a person who already posses this knowledge, telling people who doesn't have the knowledge to skip it, simply because you already know these skills. With all this said, I agree that if you were to create a professional website, then the creation process is easier using frameworks, and you are in your full right to criticize my video badly, and say that professional web developers should develop using frameworks. However when you as an experienced HTML developer try and convince beginners to skip the foundamentals and jump directly to frameworks, it upsets me and I write long replies like this because you potentially set people up for a bad learning experience. What I am trying to do with this comment, is to argue and disprove why you think people should learn frameworks this early on in their learning process.
Gerald Foushee (1 year ago)
Are we going to be using css grid ALSO in this portfolio project? And thanks for taking this approach, it's more helpful than you can ever imagine....and I am going to donate to you Daniel because I really appreciate your time and effort. I wish I could tell you my story but I see you're busy. But thanks and I am following along with you.
mmtuts (1 year ago)
Thank you for the kind words. Congratulations on your baby :) he/she must by around 5 years old by now. I'm sorry to hear that things have been so tough, and I really hope that the future looks brighter. In my experience tough periods usually come and go as long as we keep moving, and I really hope that what you learn will help accomplish that.
Gerald Foushee (1 year ago)
Well, I have always been Interested in computers. My brother is a dada base administrator and his wife a programmer in TX. I took a few classes here and there but the school was just taking our money. Long story short....i got laid off in 09 and found myself working 2 jobs. I was always super tired and just needed a change. We had a baby in 2012 and then things got even more crazy. My wife has a masters degree in English and she got a teacher position here in Dubai. We jumped at the opportunity because of money and benefits and we have been here 3 years. I could not find a job here although I have a Bachelor's degree and an associate degree. Anyway I was like super depressed. I had spent all my money but just enough for a flight back home. Meanwhile my wife is happy and I am like what I going on here. I could not do anything computer because I don't know anyone here and it's not like its easy to find meet up groups. Anyway...i figured I could try to learn something in my spare time and my friend back home was like learn JavaScript or python...so I started looking and was like..i need to learn HTML and then CSS before JavaScript...then it hit me that if I can learn to build a website I will have a good skill and that was when I started searching for how to accomplish that goal. Your tutorials are the only ones I have seen where you are building a project along with the students with a set goal in mind. That is what set you apart from the others. They teach but you teach to actually accomplish something and that helps us stay focused and driven....i thank you for that... I really appreciate it and it has been a blessing.
mmtuts (1 year ago)
Hi there :) we will not be using CSS GRIDs in this first portfolio project. But later I am planning to create a separate video where we create a complete page using it. You can always tell your story either by commenting on my channel or if you want it not to be public send me a e-mail on [email protected] ;)
Santosh Kp (1 year ago)
Finally you are here to teach us. Good to see you. Try to make us understand how can we make a mobile friendly website.
Santosh Kp (1 year ago)
ohh that's great. waiting for it curiously. I'hv really learnt a lot from your tutorials. Thank's a lot.
mmtuts (1 year ago)
Hi there :) I plan on making lessons on mobile friendly websites a bit further ahead in this course. I think that there are a few basics that needs to be learned first, such as inserting images and creating a simple section inside a website. But I will probably teach it within the next few lessons :)
Gerald Foushee (1 year ago)
That was alot of steps in 8 minutes....i know I will be making lots of errors and pulling my hair out this time... O well time to get busy.... Thanks Daniel.... I really appreciate you.
chesca ramos (4 months ago)
I have 1 question, Was that supposed to be an insult, or compliment?
Reecry (1 year ago)
Very nice .............helpful
Klaas (1 year ago)
Wouldn't it be better to create the website with sections instead of divs (so the new HTML5 Tags) ?
mmtuts (1 year ago)
Hi there :) unfortunitaly so far there are no HTML5 tags that refer to itself as a wrapper. So in this case we will be using a regular <div> as our wrapper :) However if you create a website that has a HTML5 tag which can also function as a wrapper, then you can use that tag for the same purpose ;)
SOLID BEN (1 year ago)
cubeermaui I think section are still considered div but with a name. probably good if working with a group for better readability.
Supine (1 year ago)
Could you make a video about flat UI website design and color themes?
mmtuts (1 year ago)
That would make a cool episode. I will consider it for when the basics have been taught :)
DrHanna (1 year ago)
Welcome back brother im here as always to be honest and its funny at the same time i never getting bored from your videos ever :)
DLiberator78 (1 year ago)
Another great tutorial. I am really enjoying this series. Thanks.
Abdennasser EL YASSIN (1 year ago)
Good work brother continue

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.