5 important HTML concepts for beginners

Поділитися
Вставка
  • Опубліковано 27 сер 2024

КОМЕНТАРІ • 120

  • @jxclark13
    @jxclark13 2 роки тому +56

    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-
      @Xamy- 2 роки тому +2

      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
      @ne9835 2 роки тому

      @@Xamy- Yup!

    • @prathmeshpatil4581
      @prathmeshpatil4581 2 роки тому

      m.ua-cam.com/channels/WDh1av09nJw2tJKZXPE_GA.html

  • @mahadevovnl
    @mahadevovnl 2 роки тому +26

    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
      @dancarter6044 2 роки тому

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

    • @mahadevovnl
      @mahadevovnl 2 роки тому +1

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

    • @dancarter6044
      @dancarter6044 2 роки тому

      @@mahadevovnl A is a form submit button.

    • @mahadevovnl
      @mahadevovnl 2 роки тому +1

      @@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
      @lonelylosersclub8453 2 роки тому

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

  • @AlexMuscaria
    @AlexMuscaria 2 роки тому +10

    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
    @JoppeKroon 2 роки тому +4

    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
    @lonelylosersclub8453 2 роки тому +8

    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
      @KevinPowell  2 роки тому +4

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

    • @Mjdemass
      @Mjdemass 2 роки тому +3

      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
      @lonelylosersclub8453 2 роки тому

      @@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
      @itsgojoverfr 2 роки тому +1

      @@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
    @Stoney_Eagle 2 роки тому +9

    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 😊

  • @polemin
    @polemin 2 роки тому +5

    should be at 4:14

  • @AmodeusR
    @AmodeusR 2 роки тому +14

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

  • @TheMusicalHarmonee
    @TheMusicalHarmonee 2 роки тому +2

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

  • @mezza001
    @mezza001 2 роки тому +2

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

  • @Mwtorres89
    @Mwtorres89 2 роки тому

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

  • @eqprog
    @eqprog 2 роки тому +5

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

    • @offroaders123
      @offroaders123 2 роки тому +2

      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.

  • @TheVideogamemaster9
    @TheVideogamemaster9 2 роки тому +1

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

  • @mauricebuchi6973
    @mauricebuchi6973 2 роки тому +2

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

  • @thebluebeyond2329
    @thebluebeyond2329 8 місяців тому

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

  • @castlemoyle
    @castlemoyle 2 роки тому +1

    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.

  • @hamm8934
    @hamm8934 2 роки тому +1

    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!

  • @penyepongNASA
    @penyepongNASA 2 роки тому +1

    terima kasih mas kevin. YOU ARE Really MY Evangelist

  • @tinmancode
    @tinmancode 2 роки тому +1

    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

  • @paulvanobberghen
    @paulvanobberghen 2 роки тому +1

    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,…

  • @Aaron-sy5yx
    @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.

  • @krismatic_
    @krismatic_ Рік тому

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

  • @David-zp3dv
    @David-zp3dv 2 роки тому +1

    4:15 should be ?

  • @OlinFernandes
    @OlinFernandes 2 роки тому +1

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

  • @Victor_Marius
    @Victor_Marius 2 роки тому +1

    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)

  • @Taka-nq3ys
    @Taka-nq3ys Рік тому +1

    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?

  • @adeisaac
    @adeisaac 2 роки тому

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

  • @Michael-Martell
    @Michael-Martell 2 роки тому +1

    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
      @lonelylosersclub8453 2 роки тому

      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
      @Michael-Martell 2 роки тому

      @@lonelylosersclub8453 UA-cam 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
      @Michael-Martell 2 роки тому +2

      @@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.

  • @sbtoolman12123
    @sbtoolman12123 2 роки тому

    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
    @kushagraaagnihotri1081 2 роки тому +1

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

  • @Pareshbpatel
    @Pareshbpatel 2 роки тому +2

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

  • @8xd256
    @8xd256 Рік тому

    This is precious sir

  • @SpyderTechHub
    @SpyderTechHub Рік тому

    Complete html tutorial: ua-cam.com/video/9PPb85gDjzs/v-deo.html

  • @sammackh4369
    @sammackh4369 2 роки тому

    understandable, fast. We respect you😀

  • @retagif
    @retagif 2 роки тому +1

    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
    @RobertMcGovernTarasis 2 роки тому +1

    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
      @KevinPowell  2 роки тому

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

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis 2 роки тому +3

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

    • @KevinPowell
      @KevinPowell  2 роки тому +2

      I know Sara Soueida is working in a course!

    • @RobertMcGovernTarasis
      @RobertMcGovernTarasis 2 роки тому

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

  • @tommyzDad
    @tommyzDad 2 роки тому

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

  • @ourcore
    @ourcore 2 роки тому +1

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

  • @DavidTheITGuy.
    @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

  • @MrMairu555
    @MrMairu555 2 роки тому

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

  • @ibraheema.rekany9641
    @ibraheema.rekany9641 Рік тому

    Keep going

  • @newdimension4731
    @newdimension4731 2 роки тому

    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

  • @Premiumleads
    @Premiumleads 2 роки тому

    Thank you for the sincerity!

  • @Shou06
    @Shou06 2 роки тому +1

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

  • @mverma7845
    @mverma7845 2 роки тому

    Thanks Kevin, very helpful

  • @runtimmytimer
    @runtimmytimer 2 роки тому

    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
      @SuperGylden 2 роки тому

      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

  • @Sephiroth43
    @Sephiroth43 2 роки тому

    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?

  • @Kai-zein
    @Kai-zein 2 роки тому

    Thank you for this awesome video!

  • @danisob3633
    @danisob3633 2 роки тому

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

  • @paulvanobberghen
    @paulvanobberghen 2 роки тому

    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.

  • @jaimesastre6393
    @jaimesastre6393 2 роки тому

    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

  • @elijah5176
    @elijah5176 2 роки тому

    thank you very much

  • @nickgreen8196
    @nickgreen8196 2 роки тому

    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 ^^

  • @RonnieNissan
    @RonnieNissan 2 роки тому +2

    I finally understand section vs article hehe

  • @gustavoviana5508
    @gustavoviana5508 2 роки тому

    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
      @edwardgray6167 2 роки тому +1

      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.

  • @Alexisreading
    @Alexisreading 2 роки тому

    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?

  • @Knards
    @Knards 2 роки тому

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

    • @KevinPowell
      @KevinPowell  2 роки тому +1

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

    • @Knards
      @Knards 2 роки тому

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

  • @andreyveda
    @andreyveda 2 роки тому

    Thanks from the Russian developer!

  • @Sharkmarshall
    @Sharkmarshall 2 роки тому +1

    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
      @DylRicho 2 роки тому +1

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

  • @tapank415
    @tapank415 2 роки тому

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

  • @arsh999cg
    @arsh999cg 2 роки тому

    Awesome as always....

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      Thank you so much 😀

    • @meka3506
      @meka3506 2 роки тому

      @@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
      @itsgojoverfr 2 роки тому

      @@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

  • @sergejstojanovic2518
    @sergejstojanovic2518 2 роки тому

    Thank you.

  • @aram5642
    @aram5642 2 роки тому

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

  • @TheKetoSurvivor
    @TheKetoSurvivor 2 роки тому

    Dude, R u from Simi Valley?

  • @JohnDoe-jc4xp
    @JohnDoe-jc4xp 2 роки тому

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

  • @azamatkozuaidarov5183
    @azamatkozuaidarov5183 Рік тому

    Ok Kevi lets not dive into HTML INSTEAD DROWN

  • @COOKIESIXTEEN
    @COOKIESIXTEEN 2 роки тому

  • @joegreen427
    @joegreen427 2 роки тому

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

    • @KevinPowell
      @KevinPowell  2 роки тому

      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

  • @HishamA-fs5ju
    @HishamA-fs5ju Рік тому

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

  • @user-cr4gn2pr5v
    @user-cr4gn2pr5v Рік тому

    meat in the patoes

  • @humayunkabirrony614
    @humayunkabirrony614 2 роки тому

    Gd

  • @NeerajLalu
    @NeerajLalu 2 роки тому

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

    • @BurnLikeAFlame
      @BurnLikeAFlame 2 роки тому +3

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

    • @tommyzDad
      @tommyzDad 2 роки тому +1

      Punctuation is a good thing.