Тёмный

The only tags you need when first learning HTML 

Kevin Powell
Подписаться 912 тыс.
Просмотров 42 тыс.
50% 1

📒 Get the Only Tags you need to know (for now) cheat sheet here: kevin-powell.ck.page/0399076ad3
When you're first learning HTML, it starts nice and simple, often with a paragraph tag and then heading tags. Then you add in lists, links, images, em and strong, and the list of elements just keeps getting longer and longer.
So in this video, I'm looking at the 20-25 essential elements that are good to know early on, grouping them into three categories to help simplify things even more.
You'll need more than just these over time, but when you're just starting, this is more than enough to get you going 🙂.
🔗 Links
✅ The cheat sheet: kevin-powell.ck.page/0399076ad3
✅ My HTML & CSS for beginners playlist: • HTML & CSS for beginners
⌚ Timestamps
00:00 - Introduction
00:47 - The categories
02:15 - DOCTYPE
02:40 - html
03:07 - head and body
03:50 - title
04:11 - style and link
05:01 - tags vs elements
05:32 - paragraphs and headings (h1 to h6)
07:05 - ordered and unordered lists, and list items
07:42 - strong and em
08:49 - the a tag (links)
09:42 - span
10:39 - layout related elements
11:09 - the main
11:36 - header
12:19 - footer
12:44 - nav
13:22 - article
14:08 - section
14:44 - multiple headers and footers
15:34 - div
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

 

30 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 72   
@lunaticberserker5869
@lunaticberserker5869 9 месяцев назад
remember boys, the only one you need is ;)
@itzikca
@itzikca 9 месяцев назад
Lol absolutely
@TechtalkAi2762
@TechtalkAi2762 9 месяцев назад
That where you make the dive grid or flex box div the only one you need more then others
@lunaticberserker5869
@lunaticberserker5869 9 месяцев назад
@@TechtalkAi2762 You need to be skilled to be able to center a div.
@Someone-vg6jk
@Someone-vg6jk 9 месяцев назад
Nah,semantic html for SEO😔
@TechtalkAi2762
@TechtalkAi2762 9 месяцев назад
@@Someone-vg6jk it woks same as div but has special meanings for programmers and search engine robot
@NathanSan1144
@NathanSan1144 9 месяцев назад
These are great, I love the explanation that comes with these beginner videos. I can find tutorials anywhere that tell me about h1, h2, h3 elements, but having you explicitly say things like "only have 1 h1 tag in your page, here's why" is such a valuable piece of information that often gets glanced over. It's like having a survival guide telling you "eat these berries, they're okay" instead of reading a book with a list of edible berries.
@jonathanschwartz8
@jonathanschwartz8 7 месяцев назад
Kevin, I’ve been coding for 20 years but my knowledge base is like Swiss cheese. At retirement age, I decided to start over with this course. Sure enough, I learned new things. Too many to admit. Thanks!
@dgenerationx5220
@dgenerationx5220 9 месяцев назад
Can you please do video on meta tags and seo
@rafacalvodev
@rafacalvodev 9 месяцев назад
The article vs. section always confused me, and you made me understand their differences in a very clear way. Thanks mate!
@EsmeiLaura
@EsmeiLaura 9 месяцев назад
I'm so glad I found this channel😁. It was hard for me to find creators that explain these in a way I understand.
@Khawar_Mehfooz
@Khawar_Mehfooz 9 месяцев назад
The explanation of Strong and em tag.💯
@MasayaShida
@MasayaShida 9 месяцев назад
I am trying to make an HTML tutorial in my local language and this has helped me alot to make things less scary for people just getting started. Thank you.
@fwily2580
@fwily2580 2 месяца назад
I love how much you talk.
@dezlymac
@dezlymac 8 месяцев назад
Awesome! Well explained
@mahadevovnl
@mahadevovnl 9 месяцев назад
Most applicants I review: "I will use only div. Oh, and I'll nest a inside an tag. This is fine." Me:
@bulelanibotman
@bulelanibotman 9 месяцев назад
awesome explanation!
@kamrulislamshantow1966
@kamrulislamshantow1966 7 месяцев назад
I love your content .You are awesome....keep teaching us Sir
@ssava_ema
@ssava_ema 9 месяцев назад
All along have been using the content tags the wrong way. Great video. have added the 1% daily on this thanks.👍👍
@bumbleguppy
@bumbleguppy 9 месяцев назад
Oh man, that takes me back...I remember back in the day when I was first starting and if digital content could get dog-eared, my HTML cheat sheet would have been down right furry with fingerprints and coffee stains.
@MochaPlayer1
@MochaPlayer1 2 месяца назад
Another great video! I love that you used Smitten Kitchen's site as an example for the tag! Her oatmeal raisin cookies are amazing!
@peterlistig2020
@peterlistig2020 9 месяцев назад
You only need one tag in : ! One tag and a ton of CSS to emulate all other tags. :)
@TheCocoaDaddy
@TheCocoaDaddy 9 месяцев назад
Thanks for posting this! I have a question about the use of terminology (tag vs element). Generally speaking, I'll refer to things on the page as "elements" unless I'm talking about some specific in-line attributes. Then, I'll use "tag". With regard to em, strong, and span, is it ever appropriate to refer to them as "elements"? You're a genius and I recommend your work and classes to everyone I know who works with HTML! Thanks again! (Sorry if this comment was posted twice)
@KevinPowell
@KevinPowell 9 месяцев назад
tag is really the opening and closing bits, and when you take them and everything in between, it's an element, so yeah, it is a strong element, but it does seem a bit funny to think of it that way 😅
@Brainspoil
@Brainspoil 9 месяцев назад
I very much appreciate this video. It explained some of the things I've been having some problems grasping fully, like article, section and div. You explained it in a very easy and understandable way. Thank you.
@AxxionMarketPlace-iu6ri
@AxxionMarketPlace-iu6ri 9 месяцев назад
Thank you
@27sosite73
@27sosite73 6 месяцев назад
thank you
@NicholasShanks
@NicholasShanks 9 месяцев назад
7:08 that other type of list, are you referring to DIR, MENU, or DL?
@Xeratas
@Xeratas 9 месяцев назад
so is it tag or element, since it doesn't have a closing tag, the entire tag is also always an element.
@KevinPowell
@KevinPowell 9 месяцев назад
It's both 😅 - It's a self-closing tag, and by definition, an element.
@kszyh_
@kszyh_ 9 месяцев назад
so next essential CSS for beginners plz :)
@KevinPowell
@KevinPowell 9 месяцев назад
It's in the works, but won't be ready for a little bit :)
@frittex
@frittex 9 месяцев назад
nice video
@sldimaf
@sldimaf 9 месяцев назад
Niiiice!
@travellingstranger3378
@travellingstranger3378 7 месяцев назад
...excellent
@sujoykrhaldar
@sujoykrhaldar 9 месяцев назад
I want to design a card so for that is it right to use article as html tag ?
@KevinPowell
@KevinPowell 9 месяцев назад
Often, yes. Depends a little on the context, but a lot of the time articles work.
@martinsenoner8186
@martinsenoner8186 9 месяцев назад
I started 20 years ago (sadly our new cms (content AI hasn't e html section)
@Anonymous-zi5wr
@Anonymous-zi5wr 3 месяца назад
Why didn't you mention description lists? They aren't deprecated or obsolete.
@franciscobarria3647
@franciscobarria3647 6 месяцев назад
I love you too Kevin
@CodingWayz
@CodingWayz 7 месяцев назад
Wonder if the screen readers will also blush when saying LOVE like that.. Just kidding, cool video.
@GR_BackingTracks
@GR_BackingTracks 9 месяцев назад
I am very ergerly on... #NewbieTuesday Sections within articles, not the other way around. I'll remember that!
@lamejehn6000
@lamejehn6000 9 месяцев назад
118 elements? Where did I hear that before... Ah :( In chemistry when I FAILED IT
@GiorgiKavtaradze-cy1ye
@GiorgiKavtaradze-cy1ye 9 месяцев назад
❤🔥🔥
@re.liable
@re.liable 8 месяцев назад
What's the other type of list?
@parkvictor1940
@parkvictor1940 9 месяцев назад
Thanks Kelvin! this is great work you are doing here, keep up the good work. I am becoming seriously interested in CSS and demystifying it. However, I desire your help here. The contents of the business training book you used as an illustration in this tutorial appears captivating and interesting to read. I want to know the business training book, "title" and the publisher (Author). Business: what's it all about? 2 Purpose of a Business 4 The Nature of business Operation 5 Ownership structure of a business 6 Sole Proprietorship 6
@KevinPowell
@KevinPowell 9 месяцев назад
I honestly have no idea, it was just a good example I found looking around online 😅
@NicholasShanks
@NicholasShanks 9 месяцев назад
STRONG is short for “strong emphasis” not “strong importance”
@darthdzl
@darthdzl 9 месяцев назад
Great video. One thing: strong and em...I don't think you got around to actually saying that "em" defaults to being shown as italics.
@KevinPowell
@KevinPowell 9 месяцев назад
Did I not? Oh no 😅 - Bit of an oversight on my part there
@darthdzl
@darthdzl 9 месяцев назад
@@KevinPowell Hey, it happens. 😁 Just wanted you to know.
@nnaemekasama
@nnaemekasama 9 месяцев назад
You mean div tags?
@Plykiya
@Plykiya 9 месяцев назад
I'm guilty of using headings for styling purposes instead of for organizing page content :(
@goodshiro10
@goodshiro10 9 месяцев назад
at least you're not the only one
@VolodymyrInTech
@VolodymyrInTech 9 месяцев назад
💙💙💙💙💙👍💛💛💛💛💛💛
@Joey-ni8kh
@Joey-ni8kh 9 месяцев назад
this is great however I think you missed an opportunity by not also stating that elements have a default display style and explain what that is. P is block, span is inline etc. why important to get the look you want.
@KevinPowell
@KevinPowell 9 месяцев назад
Good point, I should have mentioned it for sure.
@njordholm
@njordholm 9 месяцев назад
In the kind of same direction, I would have also mentioned the tag, you can use, to create a single line break within a paragraph. I sometimes also use it instead of a to visually break up a sentence which contains a (longer) enumeration, without the need to undo preformatting of lists. Sth. like this: Kevin spoke about the basic html tags in this video, which are html, body, header, main, footer, and a couple more. instead of this: Kevin spoke about the basic html tags in this video, which are html, body, header, main, footer, and a couple more.
@NicholasShanks
@NicholasShanks 9 месяцев назад
The only element you need is TITLE.
@Greg8872
@Greg8872 9 месяцев назад
Two different types of lists.... or three.... LOL
@KevinPowell
@KevinPowell 9 месяцев назад
There is as well, but I wouldn't include that one as essential at the very start 🙂
@Greg8872
@Greg8872 9 месяцев назад
@@KevinPowell true, though I feel it is one of the ones that has some good uses but it overlooked.
Далее
Beginner’s guide to styling text with CSS
26:34
Просмотров 33 тыс.
The 6 most important CSS concepts for beginners
28:58
Просмотров 149 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 49 тыс.
These CSS best practices might be holding you back
23:28
Simple Yet Powerful: 5 HTML Elements to Use!
12:11
Просмотров 10 тыс.
5 important HTML concepts for beginners
14:37
Просмотров 115 тыс.
How to take control of Flexbox
16:01
Просмотров 96 тыс.
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 188 тыс.
Two simple layouts that work better with Grid
14:05
Просмотров 58 тыс.
A flexbox trick to improve text wrapping
5:02
Просмотров 145 тыс.
Are you using the right CSS units?
6:30
Просмотров 440 тыс.