HTML & CSS Crash Course Tutorial #6

No video

HTML & CSS Crash Course Tutorial #6 - HTML 5 Semantics

Рет қаралды 222,869

Күн бұрын

Hey gang, in this HTML & CSS tutorial for beginners we'll take a look at some of the newer HTML semantic tags, like section, article, header, nav and aside.
HTML 5 Semantic tags, more information - www.w3schools....
Course files:
github.com/iam...
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
+ VS Code download - code.visualstu...
🐱‍💻 🐱‍💻 Other Related Courses:
+ Modern JavaScript Tutorial - www.thenetninj...

Пікірлер: 122

@albertvaldes2580 5 жыл бұрын

Watched an entire ad just to help out this extremely valuable channel :)

@NetNinja 5 жыл бұрын

Really appreciate it thank you! 😊

@redditcamp543 4 жыл бұрын

I think ads main goal is to be clicked on, not watched.

@akshaykalamkar1545 2 жыл бұрын

@@redditcamp543 I think only ads showing is enough..... because no one click on ad...no one... youtube just give money for advertisement

@anshugarg6353 2 жыл бұрын

I am a newbie and I wanna ask that these semantic tags don't change how the website works, right?

@yungmoni Жыл бұрын

@@anshugarg6353no it doesn’t

@FAVTHEDEV 10 ай бұрын

I really appreciate what you do for everyone who watches this channel, I am a 16 yr old who wants to make it big in the world of web development, and you have really helped me alot.Pls continue what you do.

@aiswarikamohapatra147 4 жыл бұрын

the only channel where i wouldnt mind watching the ads

@PirateOfTheNorth 6 ай бұрын

I studied html way back in high school in 2007. I’m starting a course on Wordpress and I hadn’t heard of semantics before, I always was taught to use . This video was so useful, thanks.

@soumadip_skyy_banerjee 3 жыл бұрын

The best aspect of 🇬🇧: The Net Ninja❤️

@RafiIsrael 4 жыл бұрын

incredible teaching skills, very clear and organized. thank you!

@Azar211 3 жыл бұрын

Friendly happy clear voice and above all very efficient course , thank you, I should absolutely watch the entire ads to help this channel which is helping me a lot

@NetNinja 3 жыл бұрын

Thanks so much :)

@Vladimirtr1 4 жыл бұрын

You're amazing man, I love your courses

@TheChakriramoj 4 жыл бұрын

How can you be this patient man👏👏👏.Explanations were very clear ❤️❤️❤️ Keep up the good work!!

@jaSoNel 4 жыл бұрын

bro your work is amazing, i learn a lot of things from this, love ya

@cedric_ds 4 жыл бұрын

The first image (img/banner.png) doesn't display when I use Live Server. But if I put the exact same code outside of the it displays. Using the file protocol, it displays both in and outside of the Edit: the whole doesn't show using Live Server. If I rename banner to anything else like banne without r, it works.

@abhay7130 3 жыл бұрын

sometime this type of shit happens

@shayokhshorfuddin2576 2 жыл бұрын

Thanks a lot from the bottom of my heart man. My career as a developer heavily relies on you buddy! You are the best! ❤❤❤

@bachir-beyimene1909 Жыл бұрын

i really enjoy learning this here, i love how you make this all have a prefect sens thanks for the hard work, you are wonderful

@NetNinja Жыл бұрын

Thank you so much!

@fasinudennis9874 4 жыл бұрын

No! No! No!..you are the best. Your courses are so exceptional and very fun. I don't slumber while having your course...much love.

@egbesampson3568 9 ай бұрын

one thing for sure is that you are very good and your explanations are so easy to understand great job 💯💯💪

@NetNinja 9 ай бұрын

Thanks, I appreciate that! :)

@punkinpunker 3 жыл бұрын

Found the ambiguity of semantics a little confusing, not being any strict rules to it. This definitely helped answer some questions I had in my head. Thank you :)

@abrahamlouisgarcia7770 4 жыл бұрын

This is what I'm looking for! Thanks for the clear explanation! :)

@Skyrai49 2 жыл бұрын

I agree with a lot of the other comments that Net Ninja is one of the best Code/Programming Teachers out there.

@jinixjunior682 Жыл бұрын

it is awasome teaching skills that have qiute goood for the beginner to catch up

@yinonb172 3 жыл бұрын

Best HTML & CSS Tutorial, explanations are greats and brights.

@HappyHorge 2 жыл бұрын

Quick tip for lorem impsum, if you type Lorem*n, where n is a number, it will generate more lorem ipsum for you :D

@StarBattle08 4 жыл бұрын

so are these semantics basically function the same? Like can you switch the tag in the video to ?

@tigrankhachaturian8983 3 жыл бұрын

I appreciate this course after abandoning web development for 3 months (i totally didnt waste any of that time no-no-no)

@jonathanhammond5563 3 жыл бұрын

Great job Mario! I’ve added your video here to a full stack playlist. Hopefully it gets more clicks.

@NetNinja 3 жыл бұрын

Thanks so much :)

@integratedjourney 4 жыл бұрын

You are such a great teacher. I have a question pls: How come the nav is not in the header? How is it better to have the nav in the header or in the same div with the rest of the content?

@NetNinja 4 жыл бұрын

Hey, it depends on your design. You have navs in different places on a site (top of page, sidebar, sometimes in a footer). There can be multiple navs on a page this way. So it’s best just to place it where makes most sense for that design.

@integratedjourney 4 жыл бұрын

@@NetNinja tnx so much for the answer. love the videos.

@mrabumhd 4 жыл бұрын

Thank you, Ninja.

@amaan7877 Жыл бұрын

First, thanks for your training videos. Very well done training videos. I have a question to clarify my understanding. Why didn't you make the part of the semantic and kept it separate? Thanks in advance.

@karimsabsabi8729 4 жыл бұрын

Great job explaining everything! Respect!

@HarryScofield Жыл бұрын

Amazing course..😇

@programmingnewbie6439 4 жыл бұрын

what is the reason for putting the tag in a if its the only thing in there? Could we just give the a class and refer to it that way in the CSS? I guess I am thinking in terms of having the least amount of code possible. Thanks!

@ricardopassos1180 4 жыл бұрын

The reason is because the more you add content to your website, the more you need to control everything you add. If you keep your code that simple, at some point, you'll end up not having the flexibility to control/position your content. Open any website and inspect its code. You gonna see that there's a bunch of divs nested inside other divs. Doing this (nesting your h1, h2, p, ul, etc) makes your website more flexible to maintain and to update it later on. I know that your question is pretty old. But my answer may be helpful to other people with the same doubt.

@drot13 2 жыл бұрын

@@ricardopassos1180 You were right, it's helpful today. 🙂

@addymakkker654 4 жыл бұрын

should be only 1 in a webpage ?

@adhikarianish 3 жыл бұрын

Very simple and understandable Good work. Thanks

@sethstenzel 5 жыл бұрын

The github link is not in the show notes right now, looks like the repo is set to private still. If you are impatient like me.... just screen shot them out of the HD video.

@Shakeel714 3 жыл бұрын

Thanks Shaun J. Pellling.

@DoctorAnnasImaginarium 3 жыл бұрын

Excellent work! Thank you for this high-quality content.

@user-ft4mp5lw6n 4 жыл бұрын

Thank you very much for this useful video!

@BuilsXshorts 5 жыл бұрын

I think this nnja shaun loves mario too much D:)

@NetNinja 5 жыл бұрын

Maybe a little :p haha

@BuilsXshorts 5 жыл бұрын

The Net Ninja the way you pronounce "Mario" Shows you love mario too much.

@Palaan92 Жыл бұрын

Thank you 😊

@NetNinja Жыл бұрын

You're welcome 😊

@AnNguyen-jf2cj 3 жыл бұрын

Hi, how to make lorem-tab to be showed in multiple lines like yours?

@travelselects272 5 жыл бұрын

Great stuff! Thank you.

@jonathanhammond5563 3 жыл бұрын

Can’t a header and footer also be used as child elements within these other elements and still be syntactically correct?

@drhastings 4 жыл бұрын

very informative tutorial thank you Mr Net Ninja

@hashimanshad1041 3 жыл бұрын

u r awesome at teaching

@shaukatullah7743 5 жыл бұрын

Thank you sir g.

@Majkey 3 жыл бұрын

hey net ninja! what visual theme are you using in vsc? i would like to have the sme as it helps me in learning because thd colors i have now makes me think there are errors EVERYWHERE :D

@neaadi2566 2 жыл бұрын

This course went from 0 to 100 pretty fast

@neelmitra8939 Ай бұрын

Shouldn't the nav tag be inside the header tag?

@NtiamoahMajesti 3 ай бұрын

Am stack at image tag is not showing. What should I do

@GarimaKhandelwal Жыл бұрын

Sir how to set the images according to the website... actually i was learning through your video but in the live server my images were seen very large.how to set the image dimensions??

@addymakkker654 4 жыл бұрын

love you sir huge respect

@ketz108932 3 жыл бұрын

Excellent Video...

@SonSon-rq5dj 3 жыл бұрын

U're really amazing thank you so much!

@Rohit-tq5df 2 жыл бұрын

background-color: not red please xd awesome content btw

@ansadahmad1958 4 жыл бұрын

Hey, can you just tell me what VS Code extension you have used to make your setup look like that?

@StarBattle08 4 жыл бұрын

Monokai++ & Material Icon Theme. It was showed in his videos on Udemy if you're wondering where i did i know them from.

@alicoder9872 3 жыл бұрын

You are an OG dude!!

@aminmouhamed2502 3 жыл бұрын

the best ninja

@vincent4384 5 жыл бұрын

i don't see the link in the description for the github of this project, on the video i says private.

@ariellyrycs 4 жыл бұрын

I would put the nav inside the header. is that wrong?

@AjayPatel-yp6ij 4 жыл бұрын

amazing

@Whoknowsthatman 4 жыл бұрын

Thank you.

@emantsrifemantsal2834 4 жыл бұрын

wow, i see it thank you very much

@dxdn5217 4 жыл бұрын

Nice

@MTGpackopeners 4 жыл бұрын

do u like mario mate? ahahah :P thank you good videos :)

@jipeejoce1353 5 жыл бұрын

No github repo at the moment ???

@uapsiabiduba 5 жыл бұрын

@@321123wtfwtf I think it might be this one: developer.mozilla.org/en-US/docs/Web/CSS/Specificity

@DeraMonica-lj9ig 4 ай бұрын

How to get the those img

@arese9202 4 жыл бұрын

Hey please what are Span tags for?

@eunderscorevuki 5 жыл бұрын

Shouldn't your header encompass h1, section and nav tags? Why just the h1? Also, isn't it best practice to have header, main and footer be the three top level tags inside the body tag?

@sufyansaifhoori Жыл бұрын

please can anyone tell me how how, when shaun (this man), Type Lorem then press tab the paragraph show in or come in 3 to 4 lines automatically, but when i type Lorem then press tab my line is come in only one and that one is so huge! is that any solution for it? Isnt it🙂 btw these video's is so so much fantastic i really love it, literally having no words to appreciate it 🖤

@carlabalos3884 10 ай бұрын

Word-wrap in vs code settings search it.

@harryflim 5 жыл бұрын

Another reminder for ninja plz update nodejs playlist 😅

@femi-ayeniayodeji1264 Жыл бұрын

How do i download png images

@zerosandones7547 4 жыл бұрын

whats the theme of your vscode? this looks cool!

@vishnuprasadh7692 4 жыл бұрын

Material Icon Theme

@Lbmaniak 5 жыл бұрын

Thx

@firasalsghier3944 5 жыл бұрын

I love you bro from 🇱🇾 libya

@NetNinja 5 жыл бұрын

Thanks Feras 😊

@slenkhar 9 ай бұрын

thankful algo comment

@NtiamoahMajesti 3 ай бұрын

0:48 Am now starting to learn and am stack at making my image appear on my page 😢😢

@NtiamoahMajesti 3 ай бұрын

Am stack at image tag help me

@Olejoss1906 Жыл бұрын

Your side comments cracks me up so often. > Let's preview it so we can see what it looks like so far A complete mess

@sipping 4 жыл бұрын

Why did you put in main section, isn’t it smart to put it in tag

@KillaDot909 4 жыл бұрын

Nintendo has entered the chat

@mohammedkhalil6092 4 жыл бұрын

HTML 5 icon not showing for me

@vishnuprasadh7692 4 жыл бұрын

Use Material Icon theme extension

@amiraziz7531 5 жыл бұрын

Sir also upload html Css project

@dorcasemmanuel6265 Жыл бұрын

😭😭😭 i can't say enough thanks

@NetNinja Жыл бұрын

Aha, thanks for watching dorcas :)

@MrHaifresse 4 жыл бұрын

my brain :(

@dot32 4 жыл бұрын

What? I really see no reason for using semantics? Why cant i use div instead of header, article or nav?

@hartyom 5 жыл бұрын

lol, the repo is private.

@NetNinja 5 жыл бұрын

Hey, I've just checked and it's not, the link is in the description, below!

@natachabienaime1700 2 жыл бұрын

Merci !