5 important HTML concepts for beginners

[@jxclark13]

As a teacher myself I really like how you refer to learning as a journey. It allows for mistakes and doesn’t put pressure to know everything right now. And this video is useful to me personally as I’m at the start of my web dev journey. Thanks!

[@Xamy-]

John, this is why Kevin is so good :) Despite how humble he is, I have found for the most part he is in the upper echelon of web dev teachers - much of his content is well organised and considers its target audience + does not skip over important things leading to bad habits

[@ne9835]

@@Xamy- Yup!

[@prathmeshpatil4581]

m.kzbin.info/door/WDh1av09nJw2tJKZXPE_GA

[@mahadevovnl]

Please, to all newbies out there, use the W3C validator on your HTML. Too often have I seen things like something and other monstrosities like that. Recently I saw another: asdasd and so forth. There are tags that never nest for many good reasons. Basically: you generally don't nest a block element inside an inline element. And you never nest a and an because they each do very different things.

[@dancarter6044]

Button tags are better than input type submits because they can have a value different from their label

[@mahadevovnl]

@@dancarter6044 That is not the point, the point is not mixing and ...

[@dancarter6044]

@@mahadevovnl A is a form submit button.

[@mahadevovnl]

@@dancarter6044 It can be, but it can be just a button in general outside of a form. Semantically, a button doesn't have to submit a form, it is also (and most often) used for page interactions that don't change the URL.

[@lonelylosersclub8453]

Hey I’m a newbie what is the W3C validator and what is the other “validator” we would be using?

[@AlexMuscaria]

I find it actually easy to understand the single steps of HTML and CSS to learn but when it gets to a complex website its hard to keep the overview and find the right way to master all the different rules and technics of HTML and CSS. Thanks for all the amazing tipps about the programming. I really love your clear and helpful way to teach. Greetings from the southern part of germany

[@JoppeKroon]

Something experienced Devs get wrong all the time is that a has no semantic meaning unless you give it a label through aria-label or preferably aria-labelledby.

[@lonelylosersclub8453]

So glad I came across your page. You break everything down and use great examples, especially for someone like me who’s not a fast learner. I really appreciate the time and effort you put into this. I wasn’t sure I could do this being 37 and trying to switch careers but your videos help a lot and give me hope thank you

[@KevinPowell]

So glad to hear that! And it's never too late, so many stories of career switches to tech "later" in life!

[@Mjdemass]

Astonishing how similar is my situation, 37y old and doing a career switch, learning web dev through an online course platform for 1 month now. Still have a lot of doubts on my capacities but seeing testimonials like yours helps, and also ofc mister Powell awesome videos :)

[@lonelylosersclub8453]

@@Mjdemass aye bro let me know how it goes… to be honest I got a little overwhelmed doing it by myself and have been thinking about taking a course or boot camp so I can have extra push.

[@itsgojoverfr]

@@lonelylosersclub8453 bro im learning web development myself, i know intermediate html and css at this point so i have got a long way to go, there were things which i couldn't wrap my head around in the first try but it gets easier once you just keep doing it, so just don't give up man! The end result will be worth it

[@Stoney_Eagle]

I just learned that the declaration of the doctype is nessesary to declare you are NOT writing for internet explorer and want to use the W3C spec complaint stuff. No one willingly uses IE but we just can't get rid of it because it's still deeply rooted in windows. I'm definitely appreciating standards that we can all follow, this makes everything soo much easier 😊

[@linuxramblingproductions8554]

I mean its pretty easy to get rid of just don’t use windows

[@Stoney_Eagle]

@@linuxramblingproductions8554 unacceptable condition 🤣

[@polemin]

should be at 4:14

[@mezza001]

You are the best instructor/lecturer so far. You made something so mind boggling to me, a bit easier to understand. . . :)

[@TheMusicalHarmonee]

Just starting in my journey. Love your channel, so happy I found it! You make web development more exciting!

[@hamm8934]

Hey Kevin, wonderful video! (as always!) Quick feedback on your video editing: I like your (relatively) new use of zooming in on your face for effect! However it might have more effect if you zoom back out a little sooner than you currently are. In some of your shots, the zoom holds for a few seconds too long for my liking. Just a thought! Keep up the great videos, happy holidays!

[@Mwtorres89]

you have a very calming tone of voice. It literally calms me as I learn. Thanks

[@TheVideogamemaster9]

I'm watching this even before applying to senior frontend engineering positions. You can never be too prepared!

[@prathmeshpatil4581]

m.kzbin.info/door/WDh1av09nJw2tJKZXPE_GA

[@penyepongNASA]

terima kasih mas kevin. YOU ARE Really MY Evangelist

[@Aaron-sy5yx]

Great video with great information. Thank you. The only thing I would correct is to not use div if you’re not sure but to use div when you are sure that you should use a div. Otherwise research the correct tag. Grabbing a div is too seductive and will result in poorly written sites because most people won’t come back later to fix it.

[@thebluebeyond2329]

This is better than binging Netflix shows when stuck with an early projects

[@castlemoyle]

Ten years ago when I made the jump from inline styling to using css, I apparently didn't realize the difference between ids and classes. So I'd end up with ; then I "moved" to using classes for styling and ids for identifying. And I'd end up with a . So now the style.css file for my largest legacy site is full of lines like #classname, .classname {... style here ... } . Someday (ha ha), I'll clean it up.

[@eqprog]

Kevin, have you looked at JavaScript web components? With it you could potentially take semantic html to a brand new level!

[@offroaders123]

Great mention! I love using Web Components now also, and I'm not sure if he's published a video about them yet. I'd love to learn more about how to make Web Components accessible with Aria behavior too, when not everything can be accomplished with nicer HTML.

[@AmodeusR]

4:15 shouldn't the tag be header, instead of heading?

[@tinmancode]

Keven you do such an amazing job showing us what we should be doing. Adding some visual cues to such explainer videos would be awesome though it means more work and all the headache that comes with that. Awesome video

[@mauricebuchi]

Thanks so much...i keep learning everyday on your channel

[@adeisaac]

😊😊 That intro is always awesome., "Hello friends and friend...."

[@paulvanobberghen]

You should have first defined what is « semantic ». Not everyone understand what « semantic » is. Basically, it is the science of significations. Meaning a semantic tag tells what its content « means ». The H1 tag says: « what is here is a title of highest signification in the page », etc,…

[@sbtoolman12123]

I am asking this question of all of you brilliant people while i am halfway into the video.But are the and tags interchangeable?

[@kushagraaagnihotri1081]

I'm a dev for 2 years but this was still helpful ❤❤

[@prathmeshpatil4581]

m.kzbin.info/door/WDh1av09nJw2tJKZXPE_GA

[@OlinFernandes]

Very clean, clear and concise. 👏🏽 Thanks for this awesome video 👌🏽🤩

[@prathmeshpatil4581]

m.kzbin.info/door/WDh1av09nJw2tJKZXPE_GA

[@Taka-nq3ys]

I love your explanation and introduction, it helps a lot for a beginner like me. Which playlist should I check out after the "beginner" playlist?

[@Pareshbpatel]

A great tutorial on the important concepts in HTML. Beautifully delivered. Thanks, Kevin {2022-01-08}

[@krismatic_]

This man is a god. Thank you for your help.

[@Victor_Marius]

If I remember correctly the data-* attributes can be set as css pseudo elements content value. ...::after { content: attr(data-my-value); } Should work (maybe I missed some quotes - anybody interested should always lookup more on internet, not just copy paste)

[@Michael-Martell]

Thanks! I’ve just completed my JavaScript Masterclass as well as completed a full gulp class. I’m 1.2 years in since first learning html and your videos are great! It’s nice to go back and pick up things that I may have missed, and if not, at least I’m Re reviewing what I know. Thanks for doing what you do!

[@lonelylosersclub8453]

Hey I’m just starting off on my journey of self taught html… did you take a boot camp or learn yourself? Just wondering how much studying in that 1.2 years and when it all started to make sense to you

[@Michael-Martell]

@@lonelylosersclub8453 KZbin taught. Unfortunately no mentors and I still haven’t found anyone to bounce ideas off of. Time wise I go through cycles. So there’ll be like 3 months where I’ll spend 4-6 hours a day 5 days a week. Studying and creating and then I’ll take a couPle weeks break just to absorb and apply. and work my other jobs.

[@Michael-Martell]

@@lonelylosersclub8453in regards to start making sense, that’s a funny one. I’m going to use my experience learning google firebase, npm and connecting to a backend server. I started learning v8 right when v9 came out and of course it completely changed and I couldn’t find any v9 courses for like 2 months, so I needed to try to figure things out without much growth. You’ll go through phases at least I did and still do. phase one is watching a tutorial. You don’t have any idea, but you build something, and you feel great afterwards. You think you know it, but you don’t. You actually learn a lot, but practically it doesn’t give you much until you start building on your own. Phase 2 is required deviation of that code. Any deviation breaks the code ( because you don’t really understand it.) so your frustrated and you realize you don’t really know it. phase three is you rebuild it using a different tutorial or you just start over. You start seeing what works and what doesn’t, you start recognizing g patterns of why something works or doesn’t work and you start saving the working code. You then have a good premise of why but you don’t fully understand it yet. The last step is repetition, after you’ve written something out over and over again, and you can trust that you can write something more or less without error is when you can really move on. To get there you’ll see the same thing from multiple people. Like I’ll watch like 6 tutorials, see how all 6 people solve the problem to format code in 6 different ways and that’s really when you have a good grasp of it but there’s one last step. Step 5. You have any idea but you are not sure exactly how to build it. This is where your own creative energies start flowing, you’ll make something it’ll break and you’ll have to go back to what you’ve written before just to get it fix it. It’s this step where I think you really learn the most. You’rve really learned most everything but this step you learn what not to write, what makes something break. It’s what takes the longest but what creates functional results. Sorry to go on so long. This is definitely not something set in stone. I’m really just going off the top of my head so with some planning I could have probably written this more concise and better, but you get the idea. Here’s just a bit of inspiration: I had an impromptu meeting with my boss (I’m a business consultant pretty much but my job description varies quite a lot. My boss wanted me to describe what I’ve been working on. (I’m creating a CRM web app, with a bunch of different functionalities; Manipulating data and outputting PDF presentations for customers. After showing him mindmaps of the breakdown of the app, with working examples of code that I’d have made of the essential parts, and UI designs I had made in Adobe XD, he offered me $15k, to produce it in 2 months - he was already getting it for free but he wanted to pay me that much to build it quickly. (I don’t think it’s possible at least not by myself.) I’ve maintained communication clarifying full ownership of the product, but that my employment provided lifetime usage of this product for as long as the servers. We’re live. So now I’m frantically trying to build it. I’ve got a meeting with him tomorrow to provide a timeline with milestones to make a finalized deal. We’ll see what happens.

[@sammackh4369]

understandable, fast. We respect you😀

[@ourcore]

Surprised to see you don't use IDs for styling. Not even for higher specificity? Great video

[@prathmeshpatil4581]

m.kzbin.info/door/WDh1av09nJw2tJKZXPE_GA

[@tommyzDad]

5:02: Wow, I never thought to use parenthesis in my Emmet to group things!

[@Premiumleads]

Thank you for the sincerity!

[@David-zp3dv]

4:15 should be ?

[@8xd256]

This is precious sir

[@RobertMcGovernTarasis]

Watched the CSS video and saw this and thought I should probably watch this … open comments and see I’ve already commented and have apparently forgotten watching this 🙊 🤦‍♂️

[@KevinPowell]

Don't worry, I forget about videos I've *made* all the time 😂

[@ibraheema.rekany9641]

Keep going

[@danisob3633]

lol i thought section tag was a completely different thing. nice to know

[@retagif]

When writing html for a company website does the article tag used? Or article tags are more used on information related content sites like newspapers etc etc?

[@RobertMcGovernTarasis]

I’m curious if there is a course that focuses on teaching HTML/CSS from an Accessibility first point of view?

[@KevinPowell]

I know Sara Soueida is working in a course!

[@RobertMcGovernTarasis]

@@KevinPowell thank you Kevin, I will look into that. I think it would be an interesting way to approach learning.

[@MrMairu555]

The most outstanding thing in this video was the T-shirt! 🤣🤣🤣

[@mverma7845]

Thanks Kevin, very helpful

[@Kai-zein]

Thank you for this awesome video!

[@Shou06]

I'm also learning your css course for conquering responsive layout its much helpful Thanks for your constant effort

[@jaimesastre6393]

Hello Kevin, Nice video I watch to make a review. One Question: My teacher in html three years ago taught us That to have a better referencement in Google search machine, We should only use h1 everywhere. As you know better I guess, I suppose I will now follow your recommendation in structuring with only one h1 and the rest of the page in h2>h3>h4. Thanks of giving me your opinion, experience. Jaime

[@runtimmytimer]

A little interesting you have strong and em tags in the cheat sheet. I would expect to do a span and apply a class to it.

[@SuperGylden]

Strong and em tags are semantic ("strong" emphasize and "normal" emphasize = visually bold and italics). So screenreaders could get the semantic meaning without the user being able to see it. Unfortunately the screenreaders don't give that information to the user. Still better to use though

[@andreyveda]

Thanks from the Russian developer!

[@DavidTheITGuy.]

My teacher forever but Mr. kevin let me know which software is used for resizing images to be of the same size without using width & height in

[@newdimension4731]

well looks like SPAN class doesn't work well when linked into CSS for ex: .cd=italic .artist=bold in the 2012 HEAD FIRST HTML&CSS page 449 don't work for me

[@nickgreen8196]

Hey! Currently I'm learning JavaScript and I would like to ask you a bit about HTML basics, since they're connected with my study profile : In element img, meaning of width "width=32" corresponds to : 1. 32% from parent's width 2. 32% from screen's width 3. 32pt 4. 32px I would be so happy if you answer me ^^

[@mimosorosario]

32px

[@dancarter6044]

4 All attribute dimensions default to pixels, unlike CSS

[@DylRicho]

#4

[@paulvanobberghen]

The odd thing about html is that you can arrange you H tags as you like, mixing them completely. It will render no matter what. This drives me crazy, that html does not have a real proper outlining system that would be enforced no matter what.

[@arsh999cg]

Awesome as always....

[@KevinPowell]

Thank you so much 😀

[@meka3506]

@@KevinPowell Kevin,can you teach us Bootstrap 5 please,We'll pay for it.Your teaching style is impeccable.You give reasons for everything which is important for beginners like me.I have your CSS course on Scrimba.Please help us with Bootstrap 5.

[@itsgojoverfr]

@@meka3506 boostrap 5 isn't hard to learn, it's just a css framework. All you gotta do is put in the classes in your html elements and you are done

[@elijah5176]

thank you very much

[@Sephiroth43]

If you are creating a content that will be inserted with an , would you still add a single h1 element in case you knew that the page in which the will be added has an h1. Is that semantically correct or should you use only h2 and lower headings for the content?

[@sergejstojanovic2518]

Thank you.

[@Knards]

Kevin, someday could you do a short or vid on using Sass variables in CSS variables, if such a thing is possible?

[@KevinPowell]

You could use CSS variables in Sass variables, but not the other way around...

[@Knards]

@@KevinPowell I am crushed lol. I have a ton of color variables already made in Sass. Thanks!

[@Alexisreading]

Love your videos! I'm still a beginner and this video is awesome. But I'm missing a tutorial of a coding a website from start to finish "for dummies" - or maybe I've not found it yet. I know why the html tag is there and how a paragraph and image tag is used but I'd like to follow along coding a whole website really from scratch and with you explaining everything. Is there anything on your channel that could provide that?

[@silvosaearljohn878]

Go to Traversy Media's Channel

[@aram5642]

Are you excited about the new cascading layers? (FF 97 nightly)

[@KevinPowell]

Very!

[@JohnDoe-jc4xp]

I get things wrong all the the time, thats why iam here :D

[@tapank415]

Downloaded cheatsheet, i wanna try replacing tags from my projects to semantic ones.

[@COOKIESIXTEEN]

[@RonnieNissan]

I finally understand section vs article hehe

[@gustavoviana5508]

I actually have a question, do I really have to have only one main/header/footer per page? Because I've seen some people say that you can have multiple in different parts, as long as it's the header/main/footer of that specific part. For example: I have a card, my card has a header, a body and a footer I can use a header tag for my header, a main for my body and a footer for my footer, is that correct or is it semantically wrong?

[@edwardgray6167]

A bit of both. There is a spec that says you can specify additional mains (e.g. in asides) but none of the browsers implement it at the moment. Kevin did a video on this very topic a few months ago. You should be fine to add header/footer inside sections and asides etc. But adding additional mains will cause issues. Try setting up pages with or without additional mains and running your browsers accessibility in dev tools. Should flag up any issues with multiple mains.

[@Sharkmarshall]

Hi I'm new to web development. I want to become a developer, but know very little about it. I opened up my VS code and had an idea to practice on a static website, but all I could do is stare at the blank page because I did not know what code to put in it. I believe this video helps because I do not where to begin.

[@DylRicho]

If you're struggling for content specifically, try writing about a topic of interest.

[@SpyderTechHub]

Complete html tutorial: kzbin.info/www/bejne/b4Gzk2trnKmdsNU

[@TheKetoSurvivor]

Dude, R u from Simi Valley?

[@azamatkozuaidarov5183]

Ok Kevi lets not dive into HTML INSTEAD DROWN

[@HishamA-fs5ju]

Love u kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkppppppppppppppppppppppppppppppppppppppppppppppppppppppp......🤠🤠🤠🤠🤠🤠🤠🤠

[@joegreen427]

I thought its bad practice to have scripts in your head tag because it could take long to load the page.

[@KevinPowell]

If you have the defer attribute in there it's all good. Makes it easy to keep everything I'm the head,, and the defer attribute will load it once everything else has loaded in

[@user-cr4gn2pr5v]

meat in the patoes

[@humayunkabirrony614]

Gd

[@NeerajLalu]

2 introductions is a sign not to subscribe content creators need to show they value peoples time

[@BurnLikeAFlame]

When you reach a new low in desperation to find a reason to cry...

[@tommyzDad]

Punctuation is a good thing.