@@dev.shafkhan That's amazing!! Would it be too much of a burden on you if I messaged you with questions I have along the way? I'm 18 just out of school and I'm looking to do the same thing
'"Sorry if you can hear my son shouting upstairs." I don't know how old that boy of yours is but hopefully one day he'll know just how much his father has helped so many of us. Super-useful vid. Many Thanks for sharing your knowledge and all the Best for the year ahead.
I just came here to thank you Brad from the bottom of my heart. I remember doing this course 7 years ago after my parents separated and I had to provide for my family. Even in India you made me believe I can become a coder. Its been seven years and I'm a senior web dev with a successful firm of my own now. This video just showed up in my feed and made me emotional . Thanks a lot Brad lots of love and respect to you big brother. ❤
I am a begginer and it's my first website I built, it took me a whole day right to 4:30 am until I finally finished, fully responsive, looking at your code minimaly. It's crazy how I get a feeling of achievement, as website looks damn cool x) Thank you for the content!
@@theunholinesswithin70 If you want to do it exactly how Brad did, you need to create a folder with a name of "acme", then choose "new -> text document" and rename it to "index.html". Sometimes when you open this file in your editor it will say "index.html.txt", so then you will need to erase the ".txt" for it to become an html document. That is like that with me, I use Visual Studio (if you want to use it too Traversy Media has a tutorial on how to set it up).
I've been to dedicated videos on CSS but your style of development (HTML first, CSS second) as well as iterative approach (try it, see what happens) is a breath of fresh air! Most instructors put 30 minutes of coding, then show you the whole shooting match, without getting a chance to see what each little change does. Yours is the best type of instruction on subjects like this! Just got another subscriber!
In 2020 this tutorial remains the clearest, easiest, and most understandable introduction to HTML5 and CSS3. I wish college and university instructors teaching basic web development would use Brad's teaching style.
Brad, I've barely watched 4 min of this video and I absolutely HAD to stop and say, "Thank you!"! I've been writing code for longer than most of you and your subscribers have been alive, so I'm very comfortable with the back end. However, this is EXACTLY what I've been waiting for. I know you're very proud of that plaque from TH-cam. And rightly so. But I hope you appreciate how many people you have helped along the way! And possibly in ways you never imagined. :)
dude u jus took my coding competency to a whole new level and i am grateful for your work i sincerely hope from the bottom of my heart that your life is showered with blessings and prosperity keep it up man!! THANK YOU
Sharing knowledge is one of the greatest gifts especially one like this. Thanks Brad for being so generous! You give us hope to be a developer. I will pay you back in the near future.
This is one of the best videos I've seen on how to build a responsive website using HTML5 and CSS3. The instructor relays the logic for every line of code written and seems to flow through this tutorial effortlessly while coding. The way that he explains how to make the site responsive, step-by-step, is appreciated, informative and concise. I've watched this twice before coding along and will use the notes for this for building site in the future. Thanks so much!!
Comming from someone who has been struggling to get into webdev because of the lack of well made tutorials (most are underexplained or have a ton of useless info) I hate it when a video takes 5 minutes to explain me why I should install sublime text, and you just said, oh use atom if you like k (i use atom cause its clean and works tbh). I have to say yours is perfectly what I needed. Kudos for your simple explanations and "to the point" info.
Thanks. I have the same pet peeve. I try to include what you really need and leave the other crap out :) It allows me to put more helpful info in the video
Answers to your questions below, but really quick: Are you trying to take his tutorials to upload your own and try to make money off of that? Even the website in one of your tutorials is literally the same website he showed in this video just with "FMAWeb Tutorials" as a header. If you don't know how to do ANY of this, why do you think you should be attempting to teach others how to do it? Let alone knowing how to use google to answer your own questions. Because the hosting would be an easy find, the .com is pretty close to impossible because even if you get it for free at the start you will have to pay for it again at some point in the future. On to the real answers... You will be hard pressed to find a free .com domain. If you really need a free domain look at .tk (last I tried, it may no longer be a valid option). It won't catch a lot of attention, but it's useful if you are just using it for practice. And you can look around and find some cheap free hosting options easy. Don't expect a lot out of them, but they do exist and work for practice.
Actually, it is my right to say whatever I want to say. And it is your right not to listen to it. And teaching things to beginners is great, but if you don't know how to do it and you teach them wrong, in the end you are only harming their learning. Master what you are teaching before you teach it. Also, you deleted your comment because you know what I was saying is true. You also could easily just link to his tutorials so that the people who miraculously find your videos can not only get the proper education the video provides but also give credit to the creator of the content. That seems much more appropriate than using his content and sort of changing it - but not really.
After this, if you are interested in learning modern CSS like the Grid, check out one of my latest videos building and deploying a product landing page - th-cam.com/video/61R5kn_kYwY/w-d-xo.html
I built my first fully responsive website with HTML5 and CSS! Your crash courses on HTML and CSS were very useful to play with this code! Thanks to you Brad. As another commentator says, you can expect a big donation once I get my first pay as UI Designer. :) Your videos keep igniting my designing passion.
This tutorial is a real eye opener. It pieces together what I am struggling to understand on Codecademy. I feel much more enthusiastic and confident that I can do this and have fun while concentrating. Thank you for providing guidance to a newbie like me....
it's good for the basics, but sometimes you need to watch a 1 hr tutorial like this to learn the whole process from start to finish. I recommend you finish the course there and then you're free to watch tutorials, read articles, or anything to expand your knowledge from there
Brad, I absolutely love your videos. I need to learn HTML, CSS and JavaScript to advance in my current job, and your videos are making it MUCH, MUCH easier on me and other newbies like me. You've EARNED a subscriber, and I cannot wait to watch all of the new content that you put out! Awesome job, and I can't thank you enough.
Thank you so much for this. I would recommend this video for everyone that is starting out in HTML. The video goes through everything in-depth. Much appreciated.
I'm a beginner, and this is the first website I've built that I'm proud of. Took me a while to build this, and I encountered some errors along with the tutorial, but I finally did it. Thank you for this wonderful video!
You are the absolute best instructor on all of TH-cam. I would honestly pay a Subscription Fee to follow your work, and it is incredibly kind of you to share all of this knowledge for free with such thorough and comprehensive explanation.
Really nice tutorial for beginners. I have 3 suggestions and 1 observation 1) I would personally have only one h1 per page 2) I usually name multi-word classes with hyphen ex. button-1. Most frameworks use this style. And on that note be more descriptive ex. button-submit 3) It's good for images to have alt attribute and also be named with hyphen like logo-css.png etc. Helps with the SEO. 4) The last style for the quote form didn't work because of the specificity rules *.quote input* in the media query is less important than *aside****#sidebar**** .quote input* in the main styles
@@alexs7368 it's always sad, isn't it? Seeing a nice comment ruined by poor grammar. It's like having a plate that's filled with delicious food and just as you are about to take a bite, a fly flies out of it. I am not a grammar nazi myself, I can't be if English isn't my first language but I still cringe when I see simple mistakes like "your" instead of "you're".
@Cody Well said. People need to get off of their high horses when it comes to spelling mistakes. This is the internet not a class room. If they care about grammar so much, they should put their energy to good use and get jobs as high school teachers.
OMG. just about two days learning html from absolutely zero experience, now i can make this website. from all of your videos now i know the connections between html and css and javascript without spent any money...
Oh my God this was an amazing tutorial. I've been struggling with CSS for a long time but after your CSS crash course and then this video I finally learned the stuff thank you so much!
Monday 20th April 2020 I've just got to the 44:26 minute mark of the video. I am starting the about page section. I'm learning a lot thank you Brad Traversy.
I watched the 2017 Practical Guide, fantastic. It demystified web development learning path for self-taught individuals like myself. This video has provided a lot of useful, practical info in the first 15 mins. I appreciate and thank you for this video. I would love it, & I'm sure I'm not the only one, if you mirrored the 2017 guide with videos like this one here.
@14:43 "... I'm a web developer, I can't spell." Hence being a deisgner for the web! No but really... fantastic video. I'm throwing my weight into learning HTML/CSS/Javascript/+more, and tutorials like this are making my life soooo much easier. +1 and thanks! PS. Anyone ~35+... ever set up the HTML content without any CSS/etc. and think "Hey, this is what websites looked like when I was a kid?" (with Lynx, etc.) LOL
I downloaded this and just finished watching it offline (I watch before I start putting in the fun) and I just came back to say : THIS WAS AN EXCELLENT TUTORIAL!
Fantastic video. This will be a great reference project for future endeavors. I think a good idea might be to make an extension of this video where you implement some JavaScript. Thanks a lot!
Thank you so much for this. I'm going through web dev courses for a certificate but the emphasis has been entirely on PC-first sites, not mobile designs. This is by far the most direct and thorough tutorial I've seen for a mobile-first site and I can use the skeleton here for many projects going forward. You've helped me out a lot, and I'll be sure to link a lot of my classmates here!
Great video, learned a lot! When following tutorials like this, just don't blindly follow and copy everything he does, take your time and understand the steps he is doing and the changes it makes to the website
as an IT highschool student I decided to make some side money by web designing and I see your videos are perfect to catch some extra skill and use the things I already learnt in a different, great-looking way. gonna stay on this channel!! already recommended you to my web designing teacher. thank you so much for the content you create!
Assuming it comes from github.com/atom/language-text/blob/master/snippets/language-text.cson#L5-L7 I don't think you can, with Emmet however, you of course can: docs.emmet.io/abbreviations/lorem-ipsum/
I work in brackets and i have installed emmet.... so if you type p>lorem 50 and then hit tab .... it will generate a para of fifty words and I think it works the same in sublime too !
Ill admit, Sometimes i just watch your videos for your voice, it's so ASMR-y (i HATE ASMR but your voice is an exception) and its so easy to understand and fluent and smooth. I just love it!
In 2018, this video saving my life when i was making website for my college project. Now this video still relevant for those beginner. Really big thanks Mr Brad. April 13, 2021.
Great tutorial. Thank you so much You can use the live server plugin in Visual Studio Code The changes are directly updated without you having to save it and reload the browser tab. Cheers!
Wow I really love this tutorial. I am using Visual Studio 2013 to follow along with the tutorial. Visual Studio supports everything being used here directly. The main page I named Default.aspx and then created a stylesheet.css. Also Visual Studio has amazing intelli sense so everything being typed here just shows up. You can press the next letter to accept the key word or select it from the list; this is going very fast.
Watched it all. This is the first coding tutorial I've watched from start to finish and now I understand why Brad is revered in tech circles. Thank you, Brad.
Thanks for this video tutorial. As I'm not a programmer by any means, I really want to make a website. So I viewed this over and over again for understanding. Finally, I followed along step-by-step to make my own website. I encountered a few issues along the way which stomped me. For those issues, I enlisted the help of a freelancer site. The freelancer resolved those problems rather quickly (and the price was cheap!). I added a few personal changes to the first page, but end result was a fully functional & responsive website. THANKS!!
Was hoping for more support. It is hard to get people to offer money when they do not NEED to. I don't let it discourage me though. I don't even care about the money, when people offer support it gives me drive and makes me feel like what I am doing is worth something
Traversy Media Do you have a Twitter or Tumblr? A lot of Devs are there and it’s easier to fundraise and showcase your channel. It’s good! I’ll definitely tweet this!
Thank you for the video, I'm absolute beginner but I want to learn how to make website and this helped a lot! I want to let you know that people are watching your tutorial even in 2020, 4 years after you made it.
Great video, helped me a lot. Although when following along I couldn't get my nav menu to float right, it just stays on the right side of my H1 header. What am I doing wrong?
Couldn't he have just added a * { margin: 0; padding: 0; } general rule to avoid the padding and margins? i feel like im wrong in this but just curious???????
You are right, I think this is a course for beginners, so i take it the presenter is trying to be as simple as possible. Travs Is a good teacher with a deep knowledge on this stuff. after doing his bootstrap course on Udemy i know how great he is...
An absolutely fantastic learning resource! Thank you for making the material available - I really enjoyed following step-by-step. Highlights just what is possible with only html and CSS in a very clear and concise way. Definitely the best tutorial on the subject I have come across. Highly recommended for all those getting started!
how would you make it so that when the user types their message, email etc. on the services page, it gets sent to your email? Thank You very much for the Video btw, very helpful!
Can someone clarify for me why add class "container" on every section. Why not wrap all the content inside body to "main" tag for example and cassify that as "container"?
Can someone help understand this? When writing: aside#sidebar{ float:right; width:30%; margin-top:10px; } it works... When writing (with a space between aside and sidebar): aside #sidebar{ float:right; width:30%; margin-top:10px; } it does not work. Why is that?
I'm pretty sure it is pearentTag #idOfChildTag or tag#withThisID So a space represents A child element, whereas no space means that element with a given tag (same with classes).
Exactly. I did some research and it's exactly as you're saying. div #some_id is an element inside of div with id #some_id (so a child element), and div#some_id (without space) is exactly that div with #some_id.
Hey, I need help with the boxes section. Whenever I finish typing the code, the images and text are vertical and diagonal. Could someone help me with a solution? Cheers!
Great Video!! 2 small things which bother me: the one is that when you hover over the nav bar item 'about' and it gets bold, the home icon is pushed a lil bit to the left :S and i want to know how to stick the footer area to the bottom of the browser, i have a high resolution set on my pc, so the footer always floats in the middle of the screen
Helo! Im just starting out in 2020. Thank you for this course. Its really good and easy to follow. Just want to ask : Is this still relevant in 2020? I read that coding is really evolving and always changing. Just asking for some opinion in this topic. Thank you! :)
The first video I watched as a beginner, in 2017. I am a front-end web developer now. Thank you Brad! ❤️
Are you a freelancer, akhi?
@@catsandmusic4635 I am working as a full-time front developer since 2018 and I started freelancing couple of months ago.
@@dev.shafkhan That's amazing!! Would it be too much of a burden on you if I messaged you with questions I have along the way? I'm 18 just out of school and I'm looking to do the same thing
@@catsandmusic4635 I will help you with as much as I know.
Woah! I am happy to read this. Congrats!!!
'"Sorry if you can hear my son shouting upstairs."
I don't know how old that boy of yours is but hopefully one day he'll know just how much his father has helped so many of us.
Super-useful vid.
Many Thanks for sharing your knowledge and all the Best for the year ahead.
Sam Dave Pollard you are cringey
Go cringe somewhere else. He's just thankful for the help Traversy Media is giving us.
"you are cringey" - TheSuprGary
That's one of the most ironic sentences i've ever read.
""TheSuprGary" - NEUCE'TNT OK
That's one of the most ironic sentences I've ever read.
good intention but not very greatly executed...
*Time stamps*
0:00 - Intro (not flatform, no library, Atom editor, markup first then CSS)
4:38 - Semantic tags
*HTML*
* part*
5:30 - Create .html file and link to .css file
8:00 - tag (viewport, description, author, keywords)
* part*
9:50 - tag (#branding) ( container, tag)
12:18 - tag (Home, About, Services link)
13:30 - tag (#showcase)
15:25 - tag (#newsletter) (input field, button "Subscribe" )
17:35 - tag (#boxes) (3 boxes with image on website)
20:15 - tag (#footer)
*CSS*
20:54 - common setting (font, container, background)
24:40 - #branding & Home, About, Service link (min-height)
30:40 - Highlight one word in a sentence
33:07 - #showcase (background image, text)
36:33 - #newsletter (input field, style the "Subscribe" button )
40:13 - #boxes (3 boxes with image on website)
42:10 - #footer
*"About" Page*
43:00 - HTML file (, )
46:25 - CSS file
*"Services" Page*
42:10 - HTML file ( to type information)
52:32 - CSS file
54:33 - @media queries (responsive on mobile device size)
Thanks Mr yves
no one gonna mention how soft-spoken he is?
so tender and soothing! loving it
Yeah he doesn't only have great tutorials but he also has a friendly voice
yup, but it also makes me a bit sleepy.
😂 @ so tender
It sounds depressing ._.
I just came here to thank you Brad from the bottom of my heart. I remember doing this course 7 years ago after my parents separated and I had to provide for my family. Even in India you made me believe I can become a coder. Its been seven years and I'm a senior web dev with a successful firm of my own now. This video just showed up in my feed and made me emotional . Thanks a lot Brad lots of love and respect to you big brother. ❤
I am a begginer and it's my first website I built, it took me a whole day right to 4:30 am until I finally finished, fully responsive, looking at your code minimaly. It's crazy how I get a feeling of achievement, as website looks damn cool x) Thank you for the content!
you should try next time with no hands
Good job! I remember when I made my first that same experience. Keep persevering and good luck!
@@edencastillo4417 ive done it with no brain and pc ah
How is the index.html page created? I don't have it in my NEW list.
@@theunholinesswithin70 If you want to do it exactly how Brad did, you need to create a folder with a name of "acme", then choose "new -> text document" and rename it to "index.html". Sometimes when you open this file in your editor it will say "index.html.txt", so then you will need to erase the ".txt" for it to become an html document. That is like that with me, I use Visual Studio (if you want to use it too Traversy Media has a tutorial on how to set it up).
I've been to dedicated videos on CSS but your style of development (HTML first, CSS second) as well as iterative approach (try it, see what happens) is a breath of fresh air! Most instructors put 30 minutes of coding, then show you the whole shooting match, without getting a chance to see what each little change does. Yours is the best type of instruction on subjects like this! Just got another subscriber!
Thank you. Yeah form me I prefer the order Backend->HTML->CSS
It's Agile! :D
th-cam.com/channels/8k8_qPNDa2nS4wuRbcWBGw.htmlplaylists?view_as=subscriber
In 2020 this tutorial remains the clearest, easiest, and most understandable introduction to HTML5 and CSS3. I wish college and university instructors teaching basic web development would use Brad's teaching style.
on behalf of all the people we are very thankful for this video. you are the hero we dont deserve, but the hero we need
Brad, I've barely watched 4 min of this video and I absolutely HAD to stop and say, "Thank you!"! I've been writing code for longer than most of you and your subscribers have been alive, so I'm very comfortable with the back end. However, this is EXACTLY what I've been waiting for. I know you're very proud of that plaque from TH-cam. And rightly so. But I hope you appreciate how many people you have helped along the way! And possibly in ways you never imagined. :)
dude u jus took my coding competency to a whole new level and i am grateful for your work i sincerely hope from the bottom of my heart that your life is showered with blessings and prosperity keep it up man!! THANK YOU
Sharing knowledge is one of the greatest gifts especially one like this. Thanks Brad for being so generous! You give us hope to be a developer. I will pay you back in the near future.
This is one of the best videos I've seen on how to build a responsive website using HTML5 and CSS3. The instructor relays the logic for every line of code written and seems to flow through this tutorial effortlessly while coding. The way that he explains how to make the site responsive, step-by-step, is appreciated, informative and concise. I've watched this twice before coding along and will use the notes for this for building site in the future. Thanks so much!!
Comming from someone who has been struggling to get into webdev because of the lack of well made tutorials (most are underexplained or have a ton of useless info) I hate it when a video takes 5 minutes to explain me why I should install sublime text, and you just said, oh use atom if you like k (i use atom cause its clean and works tbh). I have to say yours is perfectly what I needed. Kudos for your simple explanations and "to the point" info.
Thanks. I have the same pet peeve. I try to include what you really need and leave the other crap out :) It allows me to put more helpful info in the video
Answers to your questions below, but really quick:
Are you trying to take his tutorials to upload your own and try to make money off of that? Even the website in one of your tutorials is literally the same website he showed in this video just with "FMAWeb Tutorials" as a header.
If you don't know how to do ANY of this, why do you think you should be attempting to teach others how to do it? Let alone knowing how to use google to answer your own questions. Because the hosting would be an easy find, the .com is pretty close to impossible because even if you get it for free at the start you will have to pay for it again at some point in the future.
On to the real answers...
You will be hard pressed to find a free .com domain. If you really need a free domain look at .tk (last I tried, it may no longer be a valid option). It won't catch a lot of attention, but it's useful if you are just using it for practice. And you can look around and find some cheap free hosting options easy. Don't expect a lot out of them, but they do exist and work for practice.
Actually, it is my right to say whatever I want to say. And it is your right not to listen to it.
And teaching things to beginners is great, but if you don't know how to do it and you teach them wrong, in the end you are only harming their learning. Master what you are teaching before you teach it.
Also, you deleted your comment because you know what I was saying is true. You also could easily just link to his tutorials so that the people who miraculously find your videos can not only get the proper education the video provides but also give credit to the creator of the content. That seems much more appropriate than using his content and sort of changing it - but not really.
yes all the other tutorials suck and don't explain things or they don't work out for me
Udemy has some great classes and tutorials! :)
After this, if you are interested in learning modern CSS like the Grid, check out one of my latest videos building and deploying a product landing page - th-cam.com/video/61R5kn_kYwY/w-d-xo.html
Can you share your own brainstorming process before start coding? Example creating the wireframe or mockup design.
This video brought me first prize in web designing competition in college❤️
I built my first fully responsive website with HTML5 and CSS! Your crash courses on HTML and CSS were very useful to play with this code! Thanks to you Brad. As another commentator says, you can expect a big donation once I get my first pay as UI Designer. :)
Your videos keep igniting my designing passion.
did you become a front-end developer ??
looking at this 4 years later. I am so grateful, brad.
This tutorial is a real eye opener. It pieces together what I am struggling to understand on Codecademy. I feel much more enthusiastic and confident that I can do this and have fun while concentrating.
Thank you for providing guidance to a newbie like me....
Same here
Codeacademy wasn't useful? Im thinking of taking their courses.
it's good for the basics, but sometimes you need to watch a 1 hr tutorial like this to learn the whole process from start to finish. I recommend you finish the course there and then you're free to watch tutorials, read articles, or anything to expand your knowledge from there
You and me both pal .. I had my ass handed to me when I tried to do responsive sites. Codecademy is just for the basics..
@@vadhub i do agree, i already knew the basics but didnt know how to implement what i learned on codecademy into stuff like this
Brad, I absolutely love your videos. I need to learn HTML, CSS and JavaScript to advance in my current job, and your videos are making it MUCH, MUCH easier on me and other newbies like me. You've EARNED a subscriber, and I cannot wait to watch all of the new content that you put out! Awesome job, and I can't thank you enough.
Thanks man, I really appreciate that
how much is your package?
"Let's take a look at the browser so far, ok so it looks absolutely disgusting" lol lol. I love your vids, man
Thank you so much for this. I would recommend this video for everyone that is starting out in HTML. The video goes through everything in-depth. Much appreciated.
Had to rewatch my Traversey archives. Thanks, Brad! We truly appreciate your patience and contributions!.
Thank you for watching :)
th-cam.com/channels/8k8_qPNDa2nS4wuRbcWBGw.htmlplaylists?view_as=subscriber
I'm a beginner, and this is the first website I've built that I'm proud of. Took me a while to build this, and I encountered some errors along with the tutorial, but I finally did it.
Thank you for this wonderful video!
You are the absolute best instructor on all of TH-cam. I would honestly pay a Subscription Fee to follow your work, and it is incredibly kind of you to share all of this knowledge for free with such thorough and comprehensive explanation.
He's got stuff on Udemy
Really nice tutorial for beginners. I have 3 suggestions and 1 observation
1) I would personally have only one h1 per page
2) I usually name multi-word classes with hyphen ex. button-1. Most frameworks use this style. And on that note be more descriptive ex. button-submit
3) It's good for images to have alt attribute and also be named with hyphen like logo-css.png etc. Helps with the SEO.
4) The last style for the quote form didn't work because of the specificity rules *.quote input* in the media query is less important than *aside****#sidebar**** .quote input* in the main styles
This was an amazing tutorial! I started learning HTML last week and CSS this week, and was able to follow along very well. I can’t wait to learn JS!
When you last 6 hours just to learn this cause your so interested!
you're*
@@alexs7368 it's always sad, isn't it? Seeing a nice comment ruined by poor grammar. It's like having a plate that's filled with delicious food and just as you are about to take a bite, a fly flies out of it. I am not a grammar nazi myself, I can't be if English isn't my first language but I still cringe when I see simple mistakes like "your" instead of "you're".
Me, you're just making a big fucking deal about it.
@Cody
Well said. People need to get off of their high horses when it comes to spelling mistakes. This is the internet not a class room. If they care about grammar so much, they should put their energy to good use and get jobs as high school teachers.
I watch many tutorials and this is the best! Cristal clear!
th-cam.com/channels/8k8_qPNDa2nS4wuRbcWBGw.htmlplaylists?view_as=subscriber
OMG. just about two days learning html from absolutely zero experience, now i can make this website. from all of your videos now i know the connections between html and css and javascript without spent any money...
Oh my God this was an amazing tutorial. I've been struggling with CSS for a long time but after your CSS crash course and then this video I finally learned the stuff thank you so much!
Wow! I've not received such a useful tutorial on HTML5 until now... Thanks man... More from you...
3 YEARS LATER (2019 ) AND STILL IS WORKING ( Evergreen content ) Thank you
I wish I saw this vid 4 years ago when i started attending to IT class in a new school. My life could be much easier back then.
Monday 20th April 2020
I've just got to the 44:26 minute mark of the video.
I am starting the about page section.
I'm learning a lot thank you Brad Traversy.
I have finished it in around 7 hours. It was worth watching and following each step. Thank you for the gem!
It's really hard to find very good tutorials. You nailed it man!! Thank you so much for providing such a great lesson!
I watched the 2017 Practical Guide, fantastic. It demystified web development learning path for self-taught individuals like myself.
This video has provided a lot of useful, practical info in the first 15 mins. I appreciate and thank you for this video. I would love it, & I'm sure I'm not the only one, if you mirrored the 2017 guide with videos like this one here.
Thanks. Yeah thats what I was thinking I might do
@14:43 "... I'm a web developer, I can't spell."
Hence being a deisgner for the web! No but really... fantastic video. I'm throwing my weight into learning HTML/CSS/Javascript/+more, and tutorials like this are making my life soooo much easier. +1 and thanks!
PS. Anyone ~35+... ever set up the HTML content without any CSS/etc. and think "Hey, this is what websites looked like when I was a kid?" (with Lynx, etc.) LOL
it took me 8 hours to watch this . Thanks a lot i learned the basics right here !!! Thank you .
YOU ARE MY HERO!!!!!!!!! MUCH LOVE AND BLESSINGS MAN.
I downloaded this and just finished watching it offline (I watch before I start putting in the fun) and I just came back to say : THIS WAS AN EXCELLENT TUTORIAL!
Really nice tutorial....i learned so much from it.....please do more tutorials like this with some javascript also. Thanx for such a great tutorial
Fantastic video. This will be a great reference project for future endeavors. I think a good idea might be to make an extension of this video where you implement some JavaScript. Thanks a lot!
yes bro.. its a cool idea... the way he is explaining is really cool and we want more videos of this type.
I was thinking the same thing. It would be nice to continue on to the JavasScript and then maybe PHP or Node.js
Hell yeah! Two thumbs up from me, too. Java script, Java script! Great videos.
Thank you so much for this. I'm going through web dev courses for a certificate but the emphasis has been entirely on PC-first sites, not mobile designs. This is by far the most direct and thorough tutorial I've seen for a mobile-first site and I can use the skeleton here for many projects going forward. You've helped me out a lot, and I'll be sure to link a lot of my classmates here!
What a superb tutorial
Thanks
Thank you for the tutorial,amazing way of explanation.
goo.gl/wvt75o
th-cam.com/channels/8k8_qPNDa2nS4wuRbcWBGw.htmlplaylists?view_as=subscriber
Great video, learned a lot! When following tutorials like this, just don't blindly follow and copy everything he does, take your time and understand the steps he is doing and the changes it makes to the website
as an IT highschool student I decided to make some side money by web designing and I see your videos are perfect to catch some extra skill and use the things I already learnt in a different, great-looking way. gonna stay on this channel!! already recommended you to my web designing teacher. thank you so much for the content you create!
I think if you type Lorem and tab - Atom should be able to generate the dummy text for you...all other editors does
Wow I feel dumb, I did not know this. How do you format the length?
Assuming it comes from github.com/atom/language-text/blob/master/snippets/language-text.cson#L5-L7 I don't think you can, with Emmet however, you of course can: docs.emmet.io/abbreviations/lorem-ipsum/
Thanks, I didn't know that. I just did it with Sublime Text
you can type lorem25 to generate 25 word or any number you want
I work in brackets and i have installed emmet.... so if you type p>lorem 50 and then hit tab .... it will generate a para of fifty words and I think it works the same in sublime too !
"i'm sorry if you hear my son yelling upstairs" © :D
Ill admit, Sometimes i just watch your videos for your voice, it's so ASMR-y (i HATE ASMR but your voice is an exception) and its so easy to understand and fluent and smooth. I just love it!
wow u actually spent time doing this on christmas day !
As much as i love programmming, i would never do that Congrats
the best learning video for beginner... clearly cut explanation .. thank you sir.. i need some basic javascrpit video like this..
Try these out...
th-cam.com/video/DIVfDZZeGxM/w-d-xo.html
th-cam.com/video/vEROU2XtPR8/w-d-xo.html
sure... i'll
you are so good Sir thank you
In 2018, this video saving my life when i was making website for my college project.
Now this video still relevant for those beginner. Really big thanks Mr Brad.
April 13, 2021.
Great tutorial. Thank you so much
You can use the live server plugin in Visual Studio Code
The changes are directly updated without you having to save it and reload the browser tab.
Cheers!
Thanks for the idea!
*Covid-19* : Making Programmers Since 2020 🎓
😆💀
Lmao, it's true asf I have got into programming since lockdown started now checking out these TH-cam videos.
@SlowSunsetVibes I dont think people will stop with only HTML and CSS they will def go over JS
@@skullxl569 Talk to me when they start programming in C.
@@UrAdversary can you just start learning in C or you have to know HTML, CSS, java...first?
One of the most useful videos I've ever come across. I usually don't type comments, but this is out of the usual. Thank you so much.
The best tutorial I've even discovered in my life. Thank you so so much ❤️ ❤️ ❤️
Wow I really love this tutorial. I am using Visual Studio 2013 to follow along with the tutorial. Visual Studio supports everything being used here directly. The main page I named Default.aspx and then created a stylesheet.css. Also Visual Studio has amazing intelli sense so everything being typed here just shows up. You can press the next letter to accept the key word or select it from the list; this is going very fast.
roaringleo57 pls, can I use visual studio for full web development tutoria?
Paulanthech@gmail.com
Watched it all. This is the first coding tutorial I've watched from start to finish and now I understand why Brad is revered in tech circles.
Thank you, Brad.
thank you so much, teacher. Anyone else who is beginner like me ? let's make friends :D
I am learning web developing at the moment. This video is helping me understand html/css more.
me as well bro, this guide was awesome.. the feeling of completing your first awesome looking web page.. I'm so ecstatic right now
im a beginner too. no background at all hahahah where u from?
I've been doing it for over a year but I don't even know some basics so I love to look back at videos like these
i believe you guys are now expert, Am just coming across this video as a web developer novice,its really Amazing.nice meeting you guys.
Thank you very much, sharing this precious knowledge! Congratulations, you are a great professional.
This was INCREDIBLY helpful!!! A little fast but I paused every once in a while and I kept up. Thanks a lot!
Sir I learned the Web Designing skills from You.. Now I am making My own Video tutorials html css and js .. PHP [starting soon]
This video is helping a ton with my first web page. Thank you!
Thanks for this video tutorial. As I'm not a programmer by any means, I really want to make a website. So I viewed this over and over again for understanding. Finally, I followed along step-by-step to make my own website. I encountered a few issues along the way which stomped me. For those issues, I enlisted the help of a freelancer site. The freelancer resolved those problems rather quickly (and the price was cheap!). I added a few personal changes to the first page, but end result was a fully functional & responsive website. THANKS!!
"Okay so that looks horrible but..."
omg this had me laughing way too hard:)
overall, SUPER helpful video!
Do you guys realise Brad only has 43 patrons? For shame!
Was hoping for more support. It is hard to get people to offer money when they do not NEED to. I don't let it discourage me though. I don't even care about the money, when people offer support it gives me drive and makes me feel like what I am doing is worth something
Well he has almost 800 now soo.. :P He deserves it
Traversy Media Do you have a Twitter or Tumblr? A lot of Devs are there and it’s easier to fundraise and showcase your channel. It’s good! I’ll definitely tweet this!
Thank you for the video, I'm absolute beginner but I want to learn how to make website and this helped a lot! I want to let you know that people are watching your tutorial even in 2020, 4 years after you made it.
Very Very nice! But i miss the PHP part for the newsletter and the quote :(
:(
Excellent tutorial!!!! THANK YOU!
I'm on a Traversy Media binge over Christmas, I've done this one before but theres still nuggets everywhere, cheers Brad
at 22:05 everything Boston about you came to the surface in the word "shortcut"
Great video, helped me a lot.
Although when following along I couldn't get my nav menu to float right, it just stays on the right side of my H1 header. What am I doing wrong?
Landing zone for the upset but dogged. Can't really beat the amount of positive comments. Certainly very helpful, very rare talent.
hello greetings from Ecuador.
Media queries start at 54:33
Couldn't he have just added a
* {
margin: 0;
padding: 0;
}
general rule to avoid the padding and margins? i feel like im wrong in this but just curious???????
You are right, I think this is a course for beginners, so i take it the presenter is trying to be as simple as possible. Travs Is a good teacher with a deep knowledge on this stuff. after doing his bootstrap course on Udemy i know how great he is...
* is considered a bad practice since it puts more pressure on a receiving machine on heavier sites.
An absolutely fantastic learning resource! Thank you for making the material available - I really enjoyed following step-by-step. Highlights just what is possible with only html and CSS in a very clear and concise way. Definitely the best tutorial on the subject I have come across.
Highly recommended for all those getting started!
how would you make it so that when the user types their message, email etc. on the services page, it gets sent to your email? Thank You very much for the Video btw, very helpful!
There are many tutorials on exactly that.
Tanzeel Rehman php will do that!
Thank you so much. It really helped.
Just browsing for techniques in making website from scratch and I saw this, THANK YOU FOR SAVING MY LIFE BRO!!!
Can someone clarify for me why add class "container" on every section. Why not wrap all the content inside body to "main" tag for example and cassify that as "container"?
i have the same question
because every section is different to the other ones, and understanding the code will be easy.
Can someone help understand this?
When writing:
aside#sidebar{
float:right;
width:30%;
margin-top:10px;
}
it works...
When writing (with a space between aside and sidebar):
aside #sidebar{
float:right;
width:30%;
margin-top:10px;
}
it does not work.
Why is that?
Yeah, I'm wondering about the same thing...
I think you use a space when the id attribute is in a seperate tag.
no space:
space:
I may be wrong though
I'm pretty sure it is
pearentTag #idOfChildTag
or
tag#withThisID
So a space represents A child element, whereas no space means that element with a given tag (same with classes).
Exactly. I did some research and it's exactly as you're saying. div #some_id is an element inside of div with id #some_id (so a child element), and div#some_id (without space) is exactly that div with #some_id.
You just answered my question. I was stuck on this step. Thanks
Hey, I need help with the boxes section. Whenever I finish typing the code, the images and text are vertical and diagonal. Could someone help me with a solution? Cheers!
Great Video!!
2 small things which bother me: the one is that when you hover over the nav bar item 'about' and it gets bold, the home icon is pushed a lil bit to the left :S
and i want to know how to stick the footer area to the bottom of the browser, i have a high resolution set on my pc, so the footer always floats in the middle of the screen
#main {
min-height: calc(100vh - 296px);
}
I got a distinction on my assignment just by watching this video. Thank you❤️ much respect
how do i Host my website once I have built it for people to see
Helo!
Im just starting out in 2020. Thank you for this course. Its really good and easy to follow. Just want to ask : Is this still relevant in 2020? I read that coding is really evolving and always changing. Just asking for some opinion in this topic. Thank you! :)
I have the same question
@@muddyrockfarm822 Seems to be still relevant. I just used it to lay the groundwork for a site. Everything works as intended.
@@DaveyKanabus Thanks
You should still follow this tutorial then learn flexbox then recreate this website using flexbox instead of floats.
Create Facebook in 4 Steps Trailer Link : th-cam.com/video/sVVnGlrxIko/w-d-xo.html
First Part : th-cam.com/video/Yj1LAxS76IU/w-d-xo.html
Man I hope you respond Asap. Im in a web development class and just need to know how to add JavaScript to this html file you just did.
Put it in the same folder as you did with your HTML file
Hi, thanks for tutorial, i want to ask a questions. which is vscode theme? (monokai? which monokai :) ) Can you tell us, pls. thanks.
he's using Atom, not vscode :)
if u want this theme for vscode, download the one dark pro extension
You are the best code trainer I have ever seen in my entire world!!!
Which button do u press to get Atom to create the entire html structure for you?
edit: solved it, i just need to save the file as html first
Hey can you help me I can't figure it out.... Been stumped for a while on this one
@@brettonyolo5390 just save the file as .html
if download link isn't working 4 u
www.traversymedia.com/downloads/acme_website.zip
Thanks Man!!! Life Saviour!!!!
@@kelvincheekhailoon9596 np ^^
♥ Thank you very much for this! ♥
@@9budddy np
Thx man
one of the best tutorials i've ever seen, step by step, explaining very detail
You texted ''Web Deisgn '' :) Can I become a tester or something ?:D
Big No.!
Deisgn is in that way intentionally.
Doodles Actually no. He does write it wrong (twice) on the home page, but at the bottom it clearly says "acme web design Copyright (c) 2017"
@Jake Jilg What?
@Jake Jilg hum
11:50
This is just a bookmark
How amazing it is to see the gradual development of building the web page. Thank you very much, you are awesome
Great video, very interesting.
A bit outdated, but great nonetheless!
What's outdated? Trying to avoid bad habits and mistakes.