5 important HTML concepts for beginners

Поделиться
HTML-код
  • Опубликовано: 26 дек 2024

Комментарии • 120

  • @jxclark13
    @jxclark13 3 года назад +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- 3 года назад +1

      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 3 года назад

      @@Xamy- Yup!

    • @prathmeshpatil4581
      @prathmeshpatil4581 3 года назад

      m.ruclips.net/channel/UCWDh1av09nJw2tJKZXPE_GA

  • @mahadevovnl
    @mahadevovnl 3 года назад +30

    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 3 года назад

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

    • @mahadevovnl
      @mahadevovnl 3 года назад +1

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

    • @dancarter6044
      @dancarter6044 3 года назад

      @@mahadevovnl A is a form submit button.

    • @mahadevovnl
      @mahadevovnl 3 года назад +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 3 года назад

      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 3 года назад +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 3 года назад +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  3 года назад +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

  • @polemin
    @polemin 3 года назад +6

    should be at 4:14

  • @Stoney_Eagle
    @Stoney_Eagle 3 года назад +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 😊

    • @linuxramblingproductions8554
      @linuxramblingproductions8554 2 года назад +1

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

    • @Stoney_Eagle
      @Stoney_Eagle 2 года назад +1

      @@linuxramblingproductions8554 unacceptable condition 🤣

  • @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. . . :)

  • @AmodeusR
    @AmodeusR 3 года назад +14

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

  • @hamm8934
    @hamm8934 3 года назад +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!

  • @Mwtorres89
    @Mwtorres89 3 года назад

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

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

  • @thebluebeyond2329
    @thebluebeyond2329 Год назад

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

  • @TheVideogamemaster9
    @TheVideogamemaster9 3 года назад +1

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

  • @tinmancode
    @tinmancode 3 года назад +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

  • @adeisaac
    @adeisaac 3 года назад

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

  • @OlinFernandes
    @OlinFernandes 3 года назад +1

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

  • @mauricebuchi
    @mauricebuchi 3 года назад +2

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

  • @David-zp3dv
    @David-zp3dv 3 года назад +1

    4:15 should be ?

  • @penyepongNASA
    @penyepongNASA 3 года назад +1

    terima kasih mas kevin. YOU ARE Really MY Evangelist

  • @castlemoyle
    @castlemoyle 3 года назад +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.

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

  • @retagif
    @retagif 3 года назад +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 3 года назад +3

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

    • @KevinPowell
      @KevinPowell  3 года назад +2

      I know Sara Soueida is working in a course!

    • @RobertMcGovernTarasis
      @RobertMcGovernTarasis 3 года назад

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

  • @kushagraaagnihotri1081
    @kushagraaagnihotri1081 3 года назад +1

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

  • @eqprog
    @eqprog 3 года назад +5

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

    • @offroaders123
      @offroaders123 3 года назад +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.

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

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

  • @krismatic_
    @krismatic_ 2 года назад

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

  • @Michael-Martell
    @Michael-Martell 3 года назад +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 3 года назад

      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 3 года назад

      @@lonelylosersclub8453 RUclips 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 3 года назад +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.

  • @Pareshbpatel
    @Pareshbpatel 3 года назад +2

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

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

  • @Sephiroth43
    @Sephiroth43 3 года назад

    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?

  • @sammackh4369
    @sammackh4369 3 года назад

    understandable, fast. We respect you😀

  • @MrMairu555
    @MrMairu555 2 года назад

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

  • @tommyzDad
    @tommyzDad 3 года назад

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

  • @Victor_Marius
    @Victor_Marius 3 года назад +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)

  • @ourcore
    @ourcore 3 года назад +1

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

  • @gustavoviana5508
    @gustavoviana5508 3 года назад

    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 3 года назад +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.

  • @Premiumleads
    @Premiumleads 3 года назад

    Thank you for the sincerity!

  • @8xd256
    @8xd256 Год назад

    This is precious sir

  • @runtimmytimer
    @runtimmytimer 3 года назад

    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 3 года назад

      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

  • @Kai-zein
    @Kai-zein 2 года назад

    Thank you for this awesome video!

  • @Shou06
    @Shou06 3 года назад +1

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

  • @mverma7845
    @mverma7845 3 года назад

    Thanks Kevin, very helpful

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

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

  • @nickgreen8196
    @nickgreen8196 3 года назад

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

  • @danisob3633
    @danisob3633 3 года назад

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

  • @arsh999cg
    @arsh999cg 3 года назад

    Awesome as always....

    • @KevinPowell
      @KevinPowell  3 года назад +1

      Thank you so much 😀

    • @meka3506
      @meka3506 3 года назад

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

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

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

  • @Knards
    @Knards 3 года назад

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

    • @KevinPowell
      @KevinPowell  3 года назад +1

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

    • @Knards
      @Knards 3 года назад

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

  • @andreyveda
    @andreyveda 3 года назад

    Thanks from the Russian developer!

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis 3 года назад +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  3 года назад

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

  • @ibraheema.rekany9641
    @ibraheema.rekany9641 2 года назад

    Keep going

  • @tapank415
    @tapank415 3 года назад

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

  • @elijah5176
    @elijah5176 2 года назад

    thank you very much

  • @RonnieNissan
    @RonnieNissan 3 года назад +2

    I finally understand section vs article hehe

  • @JohnDoe-jc4xp
    @JohnDoe-jc4xp 3 года назад

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

  • @TheKetoSurvivor
    @TheKetoSurvivor 3 года назад

    Dude, R u from Simi Valley?

  • @aram5642
    @aram5642 3 года назад

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

  • @sergejstojanovic2518
    @sergejstojanovic2518 3 года назад

    Thank you.

  • @Sharkmarshall
    @Sharkmarshall 3 года назад +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 3 года назад +1

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

  • @COOKIESIXTEEN
    @COOKIESIXTEEN 3 года назад

  • @joegreen427
    @joegreen427 3 года назад

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

    • @KevinPowell
      @KevinPowell  3 года назад

      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 2 года назад

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

  • @azamatkozuaidarov5183
    @azamatkozuaidarov5183 Год назад

    Ok Kevi lets not dive into HTML INSTEAD DROWN

  • @SpyderTechHub
    @SpyderTechHub Год назад

    Complete html tutorial: ruclips.net/video/9PPb85gDjzs/видео.html

  • @user-cr4gn2pr5v
    @user-cr4gn2pr5v Год назад

    meat in the patoes

  • @humayunkabirrony614
    @humayunkabirrony614 3 года назад

    Gd

  • @NeerajLalu
    @NeerajLalu 3 года назад

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

    • @BurnLikeAFlame
      @BurnLikeAFlame 3 года назад +3

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

    • @tommyzDad
      @tommyzDad 3 года назад +1

      Punctuation is a good thing.