HTML and CSS for Beginners Part 2: Building your first web page!

It's time to build your very first webpage! In this video I look at everything from getting a code editor, setting up your files, and writing your very first lines of HTML!
The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own!
Code editors:
Atom - atom.io/
Brackets - brackets.io/
Notepad ++ - notepad-plus-p...
Subscribe so you don't miss the next videos in the series!
----
Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (creativecommon...)
Source: incompetech.com...
Artist: incompetech.com/

[@markevans7239]

I've watched all the videos on html now and they are so easy to understand and follow. I would recommend this channel!!!

[@KevinPowell]

Amazing! I'm so happy that they helped! Thanks for letting me know, makes it all worth while :D.

[@chewelanthani432]

One love to all people here from the Odin Project. Lets win this!!

[@frazebean5117]

The Odin Project boys and gals where you at??

[@user-zs4yc2or3h]

I am here

[@salehahx]

day 1 bro

[@theotherperspective-zh6rk]

@@user-zs4yc2or3h just reached here lol

[@samuelso5315]

whats uppppp, stating fresh here

[@frazebean5117]

@@samuelso5315 Power on mate you're gonna be a boss at programming

[@jonathanportorreal179]

Odin Project homies, keep Griding!

[@Fuckingcoward]

Good luck to everyone on their Odin Project Coding Journey, consistency is key! doesn't matter when you started or how difficult it is, stick to it long enough and you shall succeed.

[@hrishikeshparab1236]

Thanks for the encouraging words!!

[@favourattah817]

Thank you!

[@rhowie.dearest]

how is it going for you buddy?

[@wavesramesh4821]

Thank you for the encouragement!

[@ulisesabraham3175]

Thx bro, I was looking for a comment related to the Odin Project.

[@maurolimaok]

I start a while ago the "Odin Project" and it was a pleasure to see they point me to this series and your channel. I already had it on my bookmarks to help me in the journey! Nice!

[@sm5970]

Thanks so much to all the open source people who help and share all this information for free, online. We appreciate this. Some of us are learning to code to climb out of poverty.

[@MichaelJosephGFX]

Thank you so much! And best of luck to everyone on TOP. I'm 4 months in and 83% done with Foundations. Why am I back here? Just to solidify this information more and recap. There is no shame with going back to fortifying your HTML/CSS/JS understanding. Keep going, you can do this. Yes, you!

[@retarded6529]

you took 4 months to do Foundations? how many hours do you spend it on average?

[@GeeGe.]

Good job Michael, let's do this shiz

[@rhowie.dearest]

how is it going so far? thank you for your encouraging words pal.

[@UNKNWN96]

You do such an amazing job of explaining things and breaking them down in a digestible way, also shout out to all the TOP students coming through!

[@animeandstuff5377]

Gang lol how far u be?

[@nikasikharulidze5287]

@@animeandstuff5377 Just started out tag me in 3 months pls so i can remind myself where i was

[@freysoares9126]

@@nikasikharulidze5287 I'm right with you! We got this! :D

[@Loki_Dokie]

Just started here also and I just turned 40, it's never too late! :)

[@lucidityy1]

@@nikasikharulidze5287 yo

[@wja14msu]

Howdy from Odin Project. Thanks for the video.

[@Calcific9]

here from the odin project !

[@Berbipedia]

Thanks man. These videos have been SUPER helpful. I come here from The Odin Project. Sending the best to all those coders that come to these videos because you want to get into the coding world!

[@robertanton7566]

i like how he explains everything even to the point of ctrl+s = save. He's the best channel about web development

[@michaelmabasa2439]

Never knew nor understood anything about coding and web development until I watched these videos. Great work Kevin.

[@WebDevSimplified]

Great video Kevin. I especially love the way you edited this video. It makes it so much more enjoyable as a viewer, while also making it easier to understand and learn what is going on. Watching this really makes me want to work on and improve my editing skills for my own videos.

[@KevinPowell]

Thanks a lot, glad you enjoyed it :). Editing is important, and takes awhile to get used to. I see you're just starting out. Keep it up! It took me forever before this channel got any traction what so ever.

[@INFPownage]

Love to see it. Web Dev Simplified is a now a bigger channel than Kevin. :)

[@WilliamPark-hs4id]

Ooooh a time capsule :)

[@raftguy1376]

Kevin is a god at teaching this stuff. Wish every language had someone like him to explain.

[@rhowie.dearest]

It's 3 am, I'm at the library and learning this stuff. Thank you for making it enjoyable Kevin

[@TanyaHakala]

Hi Kevin, the background on your computer is missing a step: 1) Get Cape. 2) Wear Cape. 3) Run three steps. 4) Fly. I am a web dev from eons ago. I'm quickly running through the Odin Project lessons to modernize my knowledge. It's fun seeing how HTML has evolved over the years. Great video!

[@29namankumar29]

Hello Kevin! I love ur tutorials. They are easy to understand, and your voice is really very smooth and satisfying... Thanks a lot!

[@mikaelarasmusson6855]

I just started at university to study mediatechnology: web design and development and of course I have already learned a lot over these past few weeks. However, Kevin Powell just makes me have so much more patiens with HTML and CSS. He explains in a way that is just very simple and easy to understand!! With Kevin backing up where my teachers can't, I'm defiently nailing this class at the end of the semester!!

[@rosslinwood5380]

Actually cant wait to watch this whole series, its almost 2am and this is keeping me up lol not a complaint tho

[@LucyGossip]

I thought I was intermediate at HTML/CSS but turns out I can still learn more about the fundamentals. Thanks!

[@randomdom]

OMG, KEVIN! Your videos are so clear and detailed! Thank you for actually breaking down what the code means! I've done a few different intro to coding classes, and I think one thing people that teach often forget is: newbs don't know what a tag is or why these sections are a thing. So, as someone who is excited to work through your videos, I already wanna say thank you for going into so much detail from the start! =D

[@rachaelknapp8871]

Just started this series for the first time and it's 8 days before Atom is retired. I'm so sad because it looks like such a cute interface and I'm a sucker for cute stuff. But I followed along just fine with notepad++ and this is my first time ever doing any kind of coding. I'm very excited. Super easy to follow! Thank you for this video series!

[@KevinPowell]

I'd recommend checking out VS Code. It's basically the reason Atom is dead now 😕

[@rachaelknapp8871]

@@KevinPowell awe man 😭 thank you for the recommendation!

[@zachk4520]

Here from the TOP! Keep it up guys!!

[@omkarshendge5438]

same!

[@fkipandrd7795]

Same Here too!

[@chrisp2639]

Glad TOP brought me here. Thanks Kevin!

[@mark-o1201]

I am starting out on coding in a course I'm doing here in Australia. I have just completed the W3Schools tutorial on HTML which was a really good starting point to assist in understanding the basics (theory) - I chose Atom as my text editor and found your videos here on KZbin; really good to see this put into practice. Just watched the first two videos and so far it is explained so easily - thanks for doing these and I look forward to referring to them as I move through my course... cheers!

[@KevinPowell]

That's awesome Mark, good luck in your course and future learning! I'm glad the videos have helped!

[@florencemensah6288]

Wow, I can't believe I create my first Website with this channel. Awesome

[@joellisfsantana]

Thanks for the content and your time Kevin 👨‍💻

[@jaden85643]

Finally mastered the absolute basics after 2 days

[@timidjawa6324]

Decided to learn how to make a site at my third ten of years. Found and tried several online lessons and guides, but all of them was dull. Eventually, YT recommened me one of your videos, aaand... Here I am. Boy, I can't stress enough how interesting your videos are. Informative, laconic and catchy. Thank you for your lessons!

[@zach.bashir]

Day 2 on my coding journey following the Odin Project - Thank you

[@jacob.peters]

I already like this way better than the browser based training sites. thanks for taking the time to make all of these.

[@mr2_pg]

I'm from TOP. Really helpful video

[@nohandle759]

I already went through all these videos I just wanted to make sure I gave a like and a comment to each video.

[@edith918]

here from the Odin project!!! Your tutorials are so comprehensive and easy to understand!!!

[@vitpav1164]

thanks a lot. making some order in my head as I started in a mixed way.

[@ianlewis1180]

I had found you before and subbed but the Odin Project bought me here.Fantastic resource on this channel,thank you

[@Mika-hk3sm]

I love the screensaver you have in the video, very motivational!

[@leonardoandrade1598]

Hi Kevin! I am watching your videos about html. And surprise me the easier understanding, You earned a new subscriber!!!

[@SlothNiraj]

Thanks for the tutorial sensei, I am new to web dev and wanted to become a frontend developer. This series is helping me a lot. Thanks again!!✌✌

[@JR-jn9mk]

just a little tip, if you saved the file as a .html file, you could just write html in Atom and press tab for the HTML structure.

[@ahmedsabsoob1956]

I mean isn't better to learn how to type the structure? or we need to make it brief and just press tab every time?

[@Jayheni]

Thanks for making these very informative videos mr powell

[@umiterdemyigitoglu4074]

as many tells,s you explain things very well. I espetially love how you emphisize accessibility in your videos. One thing I did not see is lang atribute.@it is important for screen reader.

[@calebb5490]

Hey Kevin, love your stuff, and congrats on being part of the Odin Project!

[@romelchowdhury2396]

Hello Cabin. Your videos are great for beginners. Love your tutorials.

[@ascwahid]

I love this video. great start.. will watch the rest. you seem like the css wizard and i struggle with css. I watched the 1st video you posted and had a hard time but I dont think this is catered to beginners like this. this is more my pace. Thank you!!!!!!

[@SumanthLazarus]

TOP 💯

[@__epicgaming__3492]

In the tag, why do you put "utf-8"? What would happen if you put something else in the meta tag as the charset?

[@seekingknowledge00]

I like your background.💗

[@ammarhammada4317]

Best html tutorial in youtube!!

[@yavuzselimist34]

It was very comprehensive thank you so much

[@OceanFanatic]

Odin Project Lezzz goooooooo

[@Mohammadreza-Dolati]

Thank you very much for your good content ,❤from Iran

[@mariobarrosmbn]

Shout out to everyone from TOP! Perseverance is key!

[@chatmansr]

Oh Hi love your channel and content. Your stuck with me now. I will follow you everywhere. Just kidding I really need to learn this. Thanks.

[@mardocheemutabi4183]

For my code editor, I prefer using VS Code

[@lukefisher1779]

Odin Project let's goo!

[@anelibrahimovic7787]

The Odin Project gang ASSEMBLE!

[@robertwong737]

am certainly a noob. Big help, thank you so much!!

[@coolaverage2017]

vs code has build in plug ins for the html template

[@chatmansr]

I have tried multiple times to install Atom. I have a desktop windows 10 . 64 bit. Bracket installed with no issues.

[@michelleenriquez9376]

Hi Kevin, How come some tags don't have the closing tag? Like in the line. I noticed image does the same thing.

[@xArcaJethx]

I'm not Kevin, and the answer is a bit late, but it's a valid question so here's my attempt to answer it: Some tags don't need to be closed because there is nothing inside. An image is just the image, there's nothing inside the image. So there is no start & end-tag, it's just the one tag. In the older HTML standard, XHTML, there was a way to say "hey, this is a single tag", you had to close the tag within the tag. It was done by the / right before the > at the end. You can still do it this way, and often you still see this style, but it's optional now. Similar tags are the input tags , the break line , or the meta.

[@nathalieferreiraBR]

thanks teacher

[@itzpep1073]

Hello from TOP!

[@KevinPowell]

Seen a few of these lately, what is TOP?

[@ICXCNIKA139]

@@KevinPowell The Odin's Project

[@avigamingyt2019]

Love from india

[@sebloo6770]

This was a great video!

[@moviecorner125]

im using visual studio code can i practice on that or i must have to download the software you using dear Sir!

[@aniket1008]

If you already have a code editor jump to 5:55

[@jugglingbeast]

Where did you get the desktop background?

[@franklinmayad659]

THANKS MAY GOD BLESS YOU

[@anvarbekziyodov]

You made my day bro

[@Hespi.]

The Odin Project gang, where you are

[@Sebastian-zs8cp]

I know which "tag" there is, but I don't know in which sequence they come and I have no way to improve because I don't have critical help.

[@yavuzselimist34]

Thank you i really appreciate

[@PeakProgression25]

i made the folder but when i right click it doesnt say open with atom

[@igbinedionurho7515]

Hello great video but I have a question, why is there no open and closing tag for the content in body?

[@null1101gaming]

The Atom editor is now deprecated and will no longer receive updates. I recommend you use VSCode instead, it's made by the same company (Microsoft).

[@okechukwuanudokem2060]

TOP

[@williamsteele8480]

I think it’s cool to be able to code your own website but I just wonder when I would use this?

[@LindsLou5]

How come you didn't close the meta line the same way, by using ? Is this not necessary like it was below on the title line or for the other elements?

[@con7rl670]

I have a simple begginer's question: any reason not to recommend VSCode?

[@EHines-kb7rc]

Great instructional video Kevin. Having problems pairing the Atom program and the browser together like you did in this video. Please advise! Thanks! EH.

[@KevinPowell]

You'll need an extension in Atom to do that. I forget which one I used to use!

[@EHines-kb7rc]

@@KevinPowell Kevin, how do i add an extension and how can i obtain one to make Atom with with browser?

[@cjuchiha]

Much love ❤

[@darconp]

Here from The Odin Project 🙂

[@CarreyOn2.0]

hey kevin. what about ATOM. it's not available.

[@oddity2231]

I followed all of the instructions on here but my website isn't registering that I've put MY FIRST WEBSITE on it. Any idea what I might be doing wrong?

[@hyperpop_xoxo_]

can i do this on linux or does it only work on windows/mac?

[@clayjeansen5502]

The odin project

[@webuild7843]

Odin Project!

[@hexdee4406]

Please add link to first video and playlist to description

[@pashko-k6h]

1) atom is dead 2) interesting that in strings don't need to be enveloped in " " to be displayed as text in a browser

[@chadchampion7985]

Redditor

[@chillinincalifornia]

Aren't you supposed to use the command to indicate that it will be in English?

[@pranavnyavanandi9710]

Hi. I hope using Sublime Text is okay for this.

[@elinge.01]

how does he move the tags indentation with the cursor at the end?

[@Gauss6174]

nerd!!!!!!!!!!!!!!!! good video, enjoyed it

[@estherwafula8118]

Can i use VSCode instead to create my first webpage

[@yokidrift1720]

Yes, you can use anything you want.

[@mustafeelmi257]

How about mobile code editor 🤔

[@amietaylor6364]

My browser isn’t refreshing and I did all you did

[@kumarpratyush175]

Can you tell me some apps for html like atom in mobile phone