I was interested in checking out your HTML tutorial... Thank you for providing the link.
@janelleschuh32633 жыл бұрын
Thank you Craig you are helping me so much! I paid for a udemy course which has nowhere near the quality of your videos. Keep going 🔥
@craigabourne3 жыл бұрын
That's great to hear! Thank you I appreciate the kind words 🙏
@coolaverage20172 жыл бұрын
Udemy is great but research is part of learning too.
@simonbielik3 жыл бұрын
Really appreciate the way this is narrated and also what really sets it apart from other tutorial videos is that you present a text version of the lesson, that's great!
@craigabourne3 жыл бұрын
Thanks, I appreciate that! Glad it was helpful. Currently (slowly) building a platform for people to learn from tryminim.com/learn
@macesboy2 жыл бұрын
This was so helpful, I feel like all these videos on KZfaq are put out rapid-fire to try and teach you how to create a webpage, but rarely do they teach you how to properly do so.
@craigabourne2 жыл бұрын
Completely agree. I think a lot of detail is missing. I don't think many of the people on the bigger channels would get hired as junior developers. They just got in early and started creating content and courses
@juanortegaa69162 жыл бұрын
Man, to explain it, to make great examples, to write each resource you used on the video on youtube it is a hard work, and even more with the Big Quality and professional you did. Expecting your website with a big desire !!!
@craigabourne2 жыл бұрын
Thanks! Well worth it though! Website in development now, will let you know when a sneak peak is ready
@hectorg3622 жыл бұрын
Thanks for this. Learning HTML is easy, but as I got more serious into learning, I found that the meaning of a content mattered more. I used just put everything into divs. Now I'm more careful as to what I use.
@craigabourne2 жыл бұрын
Thanks for sharing!
@user-ze3jx9vw2i5 ай бұрын
Simply awesome
@plcasiraghi47223 жыл бұрын
Very clear well-made video, thank you. It deserves many more views and likes.
@craigabourne3 жыл бұрын
Thank you! Much appreciated! 🙏
@InactivePhoenix2 жыл бұрын
Just a note about the Gmail example: just because you see dozens of nested divs in your browser's inspector doesn't mean that is how their actual source code is structured. In the case of Google, the site is probably composed of Angular components that are simply rendered down to HTML divs when it comes time to build and ship to production. In the actual project structure, the divs would be abstracted behind custom names that do have semantic meaning.
@craigabourne2 жыл бұрын
For sure. The auto generated class names give it away. You still don’t have to write your components to put out divs though, ie: @Component({ selector: 'not-loads-of-divs', template: ` Hello World! Some text ` })
@petradanquah3 жыл бұрын
Learned so much from this series of videos. Thank you!
@craigabourne3 жыл бұрын
Thank you! Glad they helped 👍
@georgeepohcuaw25453 жыл бұрын
Very good collection of semantic elements and you explain their use and purpose in very good detail
@craigabourne3 жыл бұрын
Thanks! Appreciate the kind words 🙏
@henrythomas71125 ай бұрын
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
@jiajunsun38452 жыл бұрын
Fantastic video!! Clear, clean and straight to the point, keep up the great work!
@craigabourne2 жыл бұрын
Thank you! Appreciate the kind words
@abdpz2 жыл бұрын
Good brevity makes sense. Thank you Craig!
@craigabourne2 жыл бұрын
No problem. Thanks!
@tnt-dn1jp Жыл бұрын
Thank you very much for sharing the knowledge! Very explanatory video! I am 46 yo and I give a chance to myself to learn HTML.
@craigabourne Жыл бұрын
No, thank you! Age is just a number. 46 is young and you have all the time in the world!
@rafirafirafirafi9542 Жыл бұрын
Thank you sir thanks for your valuable information thankyou so much
@sportshealthfitness5065 Жыл бұрын
You just made my life easier.
@freddiekarlsson5429 Жыл бұрын
Thank you, this is clearer for me now!
@craigabourne Жыл бұрын
You are welcome!
@besjanaelezi3 жыл бұрын
That was a great video, thank you so much!
@craigabourne3 жыл бұрын
You are so welcome!
@80Vikram2 жыл бұрын
Thank a ton for this great video, god bless you.
@craigabourne2 жыл бұрын
You're very welcome my friend!
@abubakaroyewale56572 жыл бұрын
great stuff
@craigabourne2 жыл бұрын
Thanks! 👍
@stj86142 жыл бұрын
Clearly explained and easy to understand thanks!
@craigabourne2 жыл бұрын
You're welcome! Thanks for the kind words!
@gambo20033 жыл бұрын
Thanks for you efforts 🎉🎊
@craigabourne3 жыл бұрын
It's absolutely my pleasure 👍
@user-iq1gk7xt6y2 жыл бұрын
Great explanation sir, it's really useful :)
@craigabourne2 жыл бұрын
Thanks! Appreciate the kind words
@mikeyboi56902 жыл бұрын
Great video!
@craigabourne2 жыл бұрын
Thanks!
@jovanstrickland3 жыл бұрын
Awesome bro
@craigabourne3 жыл бұрын
Thanks 🤗
@jamesdarnel3 жыл бұрын
Time zones can't stop the understanding!
@craigabourne3 жыл бұрын
Definitely not! 👍
@it9hektar Жыл бұрын
great tutorial 👍
@craigabourne Жыл бұрын
Thank you 👍
@minnnjupark2 жыл бұрын
Hey mate great video, just curious in your reasoning as to why you decided to choose instead of using or with a nested for your About Me?
@TheJacklwilliams2 жыл бұрын
Glad I'm not the only one. Stuff like this always sticks in my head though taking a wild guess, and maybe you can correct me? Whether it's labeled article or section doesn't matter? Aka, we are going to style it one way or the other. I wonder if, in the case of a screen reader or SEO page crawling it will be viewed/catalogued in any different fashion?
@skimpylemon80342 жыл бұрын
Thank you Craig!
@craigabourne2 жыл бұрын
You're most welcome!
@sanyamjain4777 Жыл бұрын
Thank you learned so much
@Naz-yi9bs3 жыл бұрын
Semantics FTW!!!
@esraamohamed56012 жыл бұрын
Thank you for your hard work !!
@craigabourne2 жыл бұрын
My pleasure!
@ahmedakharoub61882 жыл бұрын
جزاك الله خيرا
@craigabourne2 жыл бұрын
You too, my friend
@tenebrae1191 Жыл бұрын
👍
@craigabourne Жыл бұрын
👍
@camionesfernandez37452 жыл бұрын
Hi Craig im Alex, I just start studying Html, im 46 and i would like to understand what is git, the forks, how to use them, whats github, i asked you because its hard to move forward i guess, if you see any video of how to learn html, css, js, etc, and try to use the github as a tools to understand and practice, but you dont understand github and how to use it, and then [ you get yourself in the middle of a farm w cows, but dont know how to take the milk from this cows ] is just an example, Probably youre very busy, but if you have time someday, ill appreciated if you have the time to make some basic videos explaining some of this staff. And budy, thank you very much for take some of your value time to share your knowledge.
@craigabourne2 жыл бұрын
Hi Alex! Git is kind of like a camera for code. It allows you to take a snapshot of your code at a certain point. We call those ‘commits’. If you want to go back and look at code you wrote in the past, then you can look at your commits. They help you look backwards at where errors arose at certain points of development, or how an idea was previously implemented before it was changed. If you go off track, or break something, you can return to the code from earlier on and start again from there. GitHub is a website that allows you to store the code you have ‘snapshots’ of in a repository, or a repo as it is commonly called. You can then view it all there. So if Git is the camera, the ‘commits’ are the photographs, then GitHub is the photo album. If that makes sense? A branch in git is kind of like an independent development line. You might have several developers working on one codebase. All working on different features at once. You don't want you or are doing to affect them, and vice versa. So you would work on your branch and then when ready you (or more likely, a senior developer reviews the code, and if it is ok) merge the code into the main or master branch. .. and yeah, defintely going to do some Git videos in the future. Have a bit more CSS to get through first. When I first learned Git I took this free Udacity course which might help you www.udacity.com/course/version-control-with-git--ud123 For learning HTML, CSS, & JS together, I’d start with Colt Steele’s Web Devlopment Bootcamp. It’s the best course to get going with. You can usually get it for about $10 www.udemy.com/course/the-web-developer-bootcamp/ Hope that helps!
@appsenence9244 Жыл бұрын
Semantic!!
@eliasbinde2629 Жыл бұрын
The gmail source code is not really just nested divs, I assume google built it in angular and there are many components that all use divs to apply their style and functionality, in the source they are perfectly readable and maintainable, just the rendered html is a div soup
@TheJacklwilliams2 жыл бұрын
Alright Craig, thank you, I'm learning CSS (then js, etc...etc..etc..) working on mastery of the stack then I'll find my place in it I suppose. What I'd love to know is, why at <a href="#" class="seekto" data-time="361">6:01</a> (roughly, not literally) our first example of a symantic page vs div hell, the entire page is wrapped, in a div? Keep in mind where I'm at with this please. Every CSS Grid course I've taken so far I realized, the entire block of content, aka the page consisted of divs with very little to NO symantics. With that in mind, why here, do we choose to wrap the page, in a div? I have to believe the choice is so that you can class that div as container and that allows top level styling of the page? I'm of course taking a wild ass guess because well, I'm new... Anyone, Craig, Anyone? lol, thanks again, enjoying this.
@craigabourne2 жыл бұрын
Hi Jack. The main function of is simply divide content. A div is fine to use where there isn't a more suitable semantic element for the job. This is the case in this example, as we're simply creating a parent container that is holding the page’s content elements. Common practice so we can leave the element alone. The reason we create a container is so that later on we can set global layout styles that affect the whole page. Things like setting the entire page’s width, outer margins and paddings, the page’s media queries, and so on. We can even use it to set the general layout conditions for the page with flex or grid. Also, if you use an id rather than a class, you can link to it from elsewhere on the same page. You might have an internal link somewhere to ‘go back home’ that when clicked brings the user back to the top. Useful on long single pages. tldr: It sets up a container for content to which we can apply layout styles that affect the whole page. We can also use an id to define the top of the page to which users can return via a link.
@TheJacklwilliams2 жыл бұрын
@@craigabourne Thanks so very much! Made me feel a little wiser to know I was headinng in the right direction! Also, thank you for taking the time out to provide an answer and great explanation!
@craigabourne2 жыл бұрын
@@TheJacklwilliams No worries!
@moet69482 жыл бұрын
You are the best
@craigabourne2 жыл бұрын
No, you are! Thanks Moe
@sajmathew87982 жыл бұрын
Thank you, this was helpfull
@craigabourne2 жыл бұрын
You're welcome! Glad it was helpful!
@MC_DarkMaster22 күн бұрын
The section tag is not semantic if it doesn't have a aria-labelledby attribute linking to the heading via id
@craigabourne22 күн бұрын
Mozilla say it is a semantic element: developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements
@MC_DarkMaster22 күн бұрын
@craigabourne Yes, but it is always better to read the source: "w3 org WAI ARIA apg practices landmark-regions # htmlsectioningelements" (why am I not allowed to post links?). You can't argue that it is semantic and that helps improving the accessibility if it is not used correctly. Section is a "region when it has an accessible name using aria-labelledby or aria-label" otherwise it is treated exactly the same as a div => meaningless.
@craigabourne22 күн бұрын
@@MC_DarkMaster The video (and playlist) is aimed at complete beginners that are new to web development. Talking about ARIA authoring practices and associated attributes would be completely inappropriate for the context. Ironically, it would make the topic less accessible to newcomers.
@MC_DarkMaster22 күн бұрын
@craigabourne Well, I wrote it for other developers so that maybe someone would see it and pick it up so that the web would be more accessible to everyone
@Midlife.Skater2 жыл бұрын
Why would the entire page ever need to be wrapped in a div.container and not just wrapped in the body.container tag alone?
@craigabourne2 жыл бұрын
Obviously small websites can avoid doing this, but the more something grows, the better an option it is. There are a couple of main reasons. The first is that it is repeatable. A body tag can only be used once, but you could have more than one wrapper on a page if you wanted. Meaning If you wanted to repeat a wrapper structure, and retain styles you have already written, you can. If you made the body the wrapper, you lose that option. Second is that having the wrapper in the body allows us to size and position relative to the body. We could also style the two differently. ie set a black color to the body then give the content a light color so it appears as a box. You see this on blogs a lot. css-tricks.com for example. Third is accessibility. Having a wrapper allows people with say, vision deficiencies that use screen readers, to know where they are within the page structure. They can assume that a wrapper is the part of the structure that will wrap content. Fourth is web apps. Modern libraries or frameworks usually use one root div within the body to render and re-render all content to. React for example compiles JSX to HTML and displays it all inside a div with a #root id. So it showing a wrapper div is just an early stage teaching technique to prepare students for encountering such patterns later on. That there is one outer structure which holds content.
@Midlife.Skater2 жыл бұрын
@@craigabourne 👍 awesome thanks! I have not used React yet. I am still only using html, css/scss, & JavaScript.
@saeidghorbani43882 жыл бұрын
thanks
@craigabourne2 жыл бұрын
You're most welcome
@CiscoZero2 жыл бұрын
You, sir, are a godsend. One question: How does the aside tag automatically place the aside content within the same section of the article element?
@CiscoZero2 жыл бұрын
Does it automatically join the element above it by design?
@jillianpatterson26772 жыл бұрын
Jamie, my guess is he used display:flex in his CSS to create two columns! I think the aside is just descriptive, but the tag itself doesn’t make the text go to the side. He used CSS for it!
@shaiouaknine91212 жыл бұрын
F! LOL thanks for the informative vid, it was just what I was looking for
@craigabourne2 жыл бұрын
No problem!
@idioticidiot911 Жыл бұрын
Semantics
@webb-developer9 ай бұрын
☑
@aravindc9232 Жыл бұрын
semantic
@EmmanuelOloyede2 жыл бұрын
SEMANTICS
@monemshahriar2 жыл бұрын
<a href="#" class="seekto" data-time="579">9:39</a> F
@kishore84402 жыл бұрын
100th like 👍
@craigabourne2 жыл бұрын
Awesome. Thanks!
@chillbro22756 ай бұрын
Semantic
@ovidiu23942 жыл бұрын
F
@chillbro22756 ай бұрын
I would not want to be charged with maintaining that gmail code. 😬
@yaroslavmako Жыл бұрын
f
@caizza33 жыл бұрын
I think your usage of section and article is wrong. It should be reversed.
@craigabourne3 жыл бұрын
Hi, you’re incorrect sir. I’m not a novice. I’m an experienced senior developer and everything I do on this channel is about detail and accuracy. That's the motive. I wouldn't teach it here or to developers I train in person otherwise. In fact, the primary reason I started the channel is because the likes of Traversy Media and other longstanding channels teach things that are littered with fundamental mistakes. The people running those channels aren't developers. As the primary audience for those channels is usually new and aspiring developers, they don’t see the errors. And worse, take them on board and repeat them in their own coding. We see it all the time when hiring junior devs and consequently spend a lot of time and money correcting bad habits. If we hire them at all. Regarding your point, the section element is a semantic element used to divide a generic standalone section of a document. This could absolutely be a distinct section of a webpage, so the usage shown here is completely correct. Distinct sections might contain images, text (in the form of articles even), forms, tables, whatever. It is much more semantic than using a div to carry out that same job. Does an article need to be in a section? No, definitely not, but it depends on the pattern of how the rest of the page is divided. Can an article itself also contain distinct sections? Sure!
@caizza33 жыл бұрын
@@craigabourne Hey appreciate the response. To clarify, I was only referring to the "typical layout" template portion of the video. According to the Living Standards, "articles are a complete, or self-contained, composition in a document." And based on the examples they have given on sections, in general, a webpage would have multiple sections nested with a (single) article.
@caizza33 жыл бұрын
@@craigabourne Hey appreciate the response. To clarify, I was only referring to the "typical layout" template portion of the video. According to the Living Standards, "articles are a complete, or self-contained, composition in a document." And based on the examples they have given on sections, in general, a webpage would have multiple sections nested with a (single) article.
@latinboy9062 жыл бұрын
@@craigabourne My fear as an aspiring developer is just that, accumulating bad habits I acquire from various sources and not learning the correct way of doing things the first time around. Especially if if hurts my prospects of getting hired! Looking forward to the website, hope you get to unveil it soon.