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

Подписаться 918 тыс.

Просмотров 295 тыс.

50% 1

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-plus.org/
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 (creativecommons.org/licenses/...)
Source: incompetech.com/music/royalty-...
Artist: incompetech.com/

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

25 окт 2016

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 185

@markevans7239 7 лет назад

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

@KevinPowell 7 лет назад

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

@frazebean5117 11 месяцев назад

The Odin Project boys and gals where you at??

@user-zs4yc2or3h Месяц назад

I am here

@salehahx 4 дня назад

day 1 bro

@chewelanthani432 Год назад

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

@jonathanportorreal179 7 месяцев назад

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 11 месяцев назад

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

@maurolimaok 5 месяцев назад

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!

@michaeljoseph4772 Год назад

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

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

Gang lol how far u be?

@nikasikharulidze5287 2 года назад

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

@freysoares9126 2 года назад

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

@Loki_Dokie 2 года назад

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

@lucidityy1 2 года назад

@@nikasikharulidze5287 yo

@sm5970 2 месяца назад

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.

@Berbipedia 4 месяца назад

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!

@Calcific9 Год назад

here from the odin project !

@TanyaHakala 5 месяцев назад

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!

@robertanton7566 2 года назад

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

@mikaelarasmusson6855 9 месяцев назад

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

@timidjawa6324 2 года назад

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!

@michaelmabasa2439 2 года назад

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

@rhowie.dearest Год назад

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

@WebDevSimplified 5 лет назад

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 5 лет назад

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.

@29namankumar29 3 года назад

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

@LucyGossip Год назад

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

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

@jacob.peters 3 года назад

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

@randomdom 2 года назад

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

@chrisp2639 Год назад

Glad TOP brought me here. Thanks Kevin!

@rosslinwood5380 3 года назад

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

@mark-o1201 6 лет назад

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 RU-vid; 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 6 лет назад

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

@vitpav1164 3 года назад

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

@Mika-hk3sm 2 месяца назад

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

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

@joellisfsantana Год назад

Thanks for the content and your time Kevin 👨‍💻

@ianlewis1180 2 года назад

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

@wja14msu 2 года назад

Howdy from Odin Project. Thanks for the video.

@edith918 2 года назад

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

@florencemensah6288 Год назад

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

@romelchowdhury2396 3 года назад

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

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

@leonardoandrade1598 6 месяцев назад

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

@jaden85643 2 года назад

Finally mastered the absolute basics after 2 days

@zach.bashir 2 года назад

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

@nohandle759 2 года назад

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

@zachk4520 2 года назад

Here from the TOP! Keep it up guys!!

@omkarshendge5438 2 года назад

same!

@fkipandrd7795 2 года назад

Same Here too!

@yavuzselimist34 2 года назад

It was very comprehensive thank you so much

@ammarhammada4317 2 года назад

Best html tutorial in youtube!!

@Mohammadreza-Dolati Год назад

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

@Jayheni Месяц назад

Thanks for making these very informative videos mr powell

@umiterdemyigitoglu4074 7 месяцев назад

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.

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

@__epicgaming__3492 3 года назад

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.💗

@mr2_pg Год назад

I'm from TOP. Really helpful video

@anvarbekziyodov 2 года назад

You made my day bro

@yavuzselimist34 4 года назад

Thank you i really appreciate

@cjuchiha 3 года назад

Much love ❤

@robertwong737 Год назад

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

@sebloo6770 2 года назад

This was a great video!

@calebb5490 2 года назад

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

@JR-jn9mk 5 лет назад

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

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?

@SumanthLazarus 2 года назад

TOP 💯

@anelibrahimovic7787 2 года назад

The Odin Project gang ASSEMBLE!

@franklinmayad659 2 года назад

THANKS MAY GOD BLESS YOU

@igbinedionurho7515 2 года назад

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

@OceanFanatic 26 дней назад

Odin Project Lezzz goooooooo

@michelleenriquez9376 3 года назад

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

@xArcaJethx 3 года назад

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.

@jugglingbeast 4 месяца назад

Where did you get the desktop background?

@LindsLou5 2 года назад

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?

@chatmansr Год назад

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

@nathalieferreiraBR 2 года назад

thanks teacher

@moviecorner125 11 месяцев назад

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

@hyperpop_xoxo_ 4 месяца назад

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

@EHines-kb7rc 4 года назад

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

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

@EHines-kb7rc 4 года назад

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

@Hespi. Год назад

The Odin Project gang, where you are

@eliasbriceno7955 Год назад

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

@coolaverage2017 2 года назад

vs code has build in plug ins for the html template

@lukefisher1779 3 месяца назад

Odin Project let's goo!

@mardocheemutabi4183 25 дней назад

For my code editor, I prefer using VS Code

@williamsteele8480 2 года назад

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

@mariobarrosmbn Месяц назад

Shout out to everyone from TOP! Perseverance is key!

@kumarpratyush175 2 года назад

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

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

@CarreyOn2.0 9 месяцев назад

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

@itzpep1073 2 года назад

Hello from TOP!

@KevinPowell 2 года назад

Seen a few of these lately, what is TOP?

@ICXCNIKA139 Год назад

@@KevinPowell The Odin's Project

@okechukwuanudokem2060 2 года назад

TOP

@con7rl670 2 года назад

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

@pranavnyavanandi9710 2 года назад

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

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

@webuild7843 2 года назад

Odin Project!

@hexdee4406 2 года назад

Please add link to first video and playlist to description

@darconp 2 месяца назад

Here from The Odin Project 🙂

@coffe06 6 лет назад

as you know Powell, im totally new to this. Im going to test Atom, and i want my tags to be autocompleted, how do i do that with Atom and its packages?

@KevinPowell 6 лет назад

There is Emmet, but I don't think that's what you're after. I don't use atom anymore, but I think it may be in the settings, rather than a package

@coffe06 6 лет назад

oh okey what will you say is the best editor from your experiance?

@erinhopkins4846 5 лет назад

What editor do you use now?

@KevinPowell 5 лет назад

VS Code

@HabeebAbiola 2 года назад

@@KevinPowell That is my favorite right from time.

@Gauss6174 2 года назад

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

@Stevenloveprogramming Год назад

can i write my html using visual studio code??

@karenwilliams1156 Год назад

Yes. Definitely. Almost the same way he used Adam code editor

@cesarlara3974 6 лет назад

Hey Kevin! I have been learning HTML and CSS for the past three months. I learn all the tags and CSS rules that there is but I just have trouble making basic websites. Like I get stuck so many times it feels like I forget everything. Any advice?

@cesarlara3974 6 лет назад

I have to build websites using RU-vid tutorials but can never build one myself from scratch

@KevinPowell 6 лет назад

Lots of practice! It's one thing to learn all the tags and all that, but nothing beats out just making as much stuff as possible. Find layouts to try and build, and start simple! It's easy to get frustrated with fancy designs when something isn't working, so focus on easier stuff and build up from there.

@estherwafula8118 Год назад

Can i use VSCode instead to create my first webpage

@yokidrift1720 Год назад

Yes, you can use anything you want.

@stevevazquez1429 2 года назад

is there any video for atom best extensions to use?

@KevinPowell 2 года назад

No, I've switched from Atom to VS Code, so I do have one on that though. They're probably very similar extensions as well :D

@stevevazquez1429 2 года назад

@@KevinPowell I starting using both to give them a try, any chance you have any videos for extensions? I’m following your videos on HTML and CSS and honestly best tutorials, I’m able to understand it a lot better!!!