Create your first HTML/CSS project

You've made a basic HTML site, but let's add some style with CSS. In this video, Brendan walks you through this process!
Take Codecademy's Learn HTML course: j.mp/3vRqRSr
Take Codecademy's Learn CSS course: j.mp/3vRqIOT
More details:
Check out our previous video on making an HTML website: • How to create a website
Check out part 2, where we go beyond basics: • Create your first HTML...
- - - - -
Join the millions learning to code with Codecademy.
Learn to code: j.mp/3399YX1
Check out our full course catalog: j.mp/33i96Pz

[@Edward_Adams]

Probably the best tutorial video I've ever seen. The part with sped up code was HILARIOUS. Thank you, Brendan!

[@dave2163]

Oh man Brendan you are A LEGEND! Getting into this environment of building things via VS code has been the eureka moment for me personally. Your passion and your straight to it instruction have been infinitely helpful!

[@OppasWithoutJams]

Thank you so much for this! I want to create my own project but I had no idea how to start and it was a bit intimidating. However, this video is such a big help!!

[@bhekanibradleyndebele4203]

Thanks man, I am improving through these video tutorials...thumbs up💯

[@Westonator5000]

This is actually fun. I've been putting off learning this stuff because I took a web dev course at university, but we never really built anything, even like this. It was mostly studying slides for tests, and boy do they know how to make everything you like absolutely awful. Thanks man, I would like to like the subjects I like again, you know?

[@julianooms327]

These videos are great! Thank you!

[@M1ke0xN1ghtHawk]

This is great! So much easier to learn HTML / CSS with Brendan's video! Thanks! 👋

[@patricianascimento5224]

Brendan, I feel I can learn anything with you. Thanks, man!

[@kureio]

atacante

[@brandonparker9632]

Add a line break () after the image source to fix the text from being beside it and the image not being centered.

[@kaijuh]

How hungover is this guy lmao

[@JPGodschild]

This video helped me so much.. thank you!!

[@caseyyontz3672]

This is a really good video, and I love learning from this guy bc he is really chill and makes me think everything is going to be ok.

[@suraiyarahman2471]

Thank you so much. It was really easy.

[@pitermadepaker9787]

What the does in the line

[@gisellec1126]

same question

[@CrysCrain]

took me forever, but I DID IT!! thank you so mucho!!

[@maxmaxwell4211]

How much did it take you to learn html and css?

[@lonelyghost202]

@@maxmaxwell4211 it depends on how fast you get the subject and how your brain gets it

[@MrKreisKlinge]

This is fun!

[@anton_talan-shevchenko]

Thx for this video! It was useful

[@adenuse]

thank you so much for useful tutorail

[@ryanrobinson7390]

Brendan's the best!

[@Jeremmythekid]

What I learned from other tech, video (like bro code) is to put the vs code and the browser side by side.

[@mariamvelasquez9198]

Great!

[@NehaKumari-yx2xr]

very use full website

[@victorvillacis9688]

You should have an H1 tag though for screen readers and just clear the tags style.

[@hatchnhatch]

Yeah, also caught my attention. This came just a few lessons after Codecademy highlighted the importance of semantic HTML lol

[@novatlizrz4931]

Thank you. Easy to follow through. Maybe some area need to slow down a bit more.

[@favourgold7212]

You should have put the image resources in the comment or description section... If you can do that please do

[@yvng4697]

Thanks!

[@sofitocyn100]

so codeacademy makes us download Atom and shows us this video on the very next lesson where the man uses VS. Very helpful...

[@UniqueS85]

I'm using third editor, it doesn't really makes some huge difference. Did you managed to complete it?

[@osmarzayas3269]

Great song!!

[@Bigmanting150]

Finally I did it 🎉 it's not easy

[@denialisnotjustariverinegypt]

Ripped those training wheels off! 😂

[@09bohdan]

Hi!) Where I can find your images?

[@franciscoreyess.7965]

Gracias por el video

[@neetalalchandani4400]

Thankyou

[@insist1754]

good one

[@geekprobin1456]

Nice Video

[@JD-kf2ki]

Dude is fun.

[@hamzamotara4304]

at 8:18 what is the use of those tags in the list?

[@dkris3204]

i was wondering the same :D

[@yaysneha]

The tags and the elements between them make up one group on a webpage. Yk the semantic page structure. It contains of a and a . So the div elements don't covey the position or role of the group. Using the semantic elements instead, we can convey this role. ~ we use the header element to define content the top of the page. Such as a company name. ~ we use the footer element for the content at the bottom of the page, such as the social media info ~similarly,the navigation bar which is mostly displayed onthe left side of the webpage, will show anything else like options or another social media info...

[@breanna3995]

hey I right clicked the index button multiple times but it won't allow me to see the preview what's should I do?

[@preschoolrelaxingmusicaler9000]

🙌🙌🙌

[@kravataf]

brandon = epik

[@craigburton4447]

When I copy relative path, the slashes are back slashes when I need forward for it work, ideas please? Thanks

[@saketsoni2587]

It works both ways I guess

[@shahanazbanu1814]

Which software to download??

[@mastermind2032]

I got stuck for about 10 minutes at the resources/css/index.css part(12:40) but then I just typed css/index.css, let the page refresh and it worked like it should have.

[@Jridgen]

I'm stuck at this part too. First I tried his suggestion. Then I tried using the href of href="css/index.css" like you recommended, but that didn't work either. My folders are all saved the same way his are, so it's frustrating.

[@Jridgen]

Nevermind, figured it out. Kept with the ./resources/CSS/index.css. I figured out that you have to save the .css file and .html file BOTH SEPARATELY when you're in each tab in VSC. I navigated to my .css in my PC folder system and it was empty because I hadn't save the text from the Visual Studio Code (even though it was sitting there). That resolved all issues.

[@ShaneSmith-qm5bb]

@@Jridgen Thank you. Had the same issue

[@anavazquez5996]

how do you link your images???

[@eggminolia]

Best tutorial ever :)

[@Aslamkaztro]

❤❤❤❤

[@memorytoburn]

when I copy and paste the path into the browser, the path doesn't open, please help!

[@Uxcis]

I don't understand why you would create a "bold" class if you could just make it bold inline? I feel like it would be cleaner, since if you make classes for "bold" or "italic" or anything like that, where you're using css to assign one attribute to something, you're basically just using inline css.

[@bradmiller2465]

What if it says your file couldnt be accessed?

[@brayanfrausto1517]

does anyone know why my id code wont work? all i do is type id because im assuming thats what he did but when i do it my "id" doesnt turn gray like his it just becomes part of the title

[@brayanfrausto1517]

nvm bois i got it

[@Slush8604]

@@brayanfrausto1517 How did you do it cos mine didn't work and I got stuck there (at about 13:51. Thanks in advance

[@sanebird508]

please don't use light mode next time , i don't feel my eyes anymore

[@KristaMusicCZ]

Hi, I am a newbie to coding, how can I make the background cover the whole width with no white "frame"? Thank you a lot for your answer 🙂

[@frontagmedia5591]

i need language in indonesia sir

[@triplegmint2795]

this is confusing since I use sublime text

[@sanebird508]

change to vs code

[@Virvos-vd8py]

wn, me perdonai por lo del prompt?

[@ouvie]

why r u using VS lol, VSC is better for HTML and CSS :)

[@darshaim]

white *IDE?, seriously?....hmm nice video btw

[@LosEspookys]

it's the best

[@ReyBanYAHUAH]

Always remember to repent of your sins (sin is transgression of YAHUAH The Father In Heaven’s LAW: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy) And Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that you can be forgiven of your sins! HE Loves you! Come to HIM🙂🙂🙂🙂🙂🙂🙂

[@user-le9kn4rf2p]

Thank you!

[@lolameshioyeolaniyi-alabi8782]

what is your file icon

[@ChristianRodriguez-xh5qt]

Ayyeee thank you for this

[@guilherme8104]

Maaan i lol when you start a mexican music and congratulations your video is awsome!!!! :D

[@johnczapla9894]

question for the devs ... I am following the instructions here every time I go ./resources/images/ my image , the word resources turns red with the back slash and period .. when i take the period away it goes back to normal it still doesnt work ... I using VS code here , can you some how tell me wth is going on cause i am getting upset while trying to do this

[@johnczapla9894]

I also tried linking the css threw the method you did it does the same and not working ...