HTML & CSS for Beginners Part 7: File Structure

A quick look at how to organize the files of your website, and fixing any links that might break when you move things around.
This video is part of a large series introducing HTML & CSS to people who have never used it before. 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!
----
Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (creativecommon...)
Source: incompetech.com...
Artist: incompetech.com/

[@souj8731]

for all of my fellow odinites (The Odin Project) we are almost done with the HTML section and so close to our first project!!

[@chetankumar9463]

Where are you know? Have you completed foundation?

[@yrnkevinsmithC-137]

@@chetankumar9463 well how abt u?

[@muhamadsarhad6566]

@@yrnkevinsmithC-137 what about you

[@georgechasiotis2985]

@@muhamadsarhad6566 what about you?

[@zactocher6335]

@@georgechasiotis2985 What about you?

[@porobertdev]

Kevin, those series are awesome! Truly beginner-friendly. Good luck to everyone who's here from The Odin Project :)

[@mariobarrosmbn]

Thanks to The Odin Project for bringing me up to Kevin's channel. Great content! Really anxious to start my 1st project! +1 sub

[@silentslayer3184]

I am about to start my very first project for the Odin project! Good luck everyone, I hope you stick with this.

[@YushinWE]

I come here from TOP and I love your great videos and I love your teaching!

[@josemanuelvialopez1488]

The odin project here - I was in javascript already but my progress suddenly dropped and was because they added this amazing information in the html and css subject.

[@prawnstars3160]

same suprised when foundation section was incomplete!

[@danteeep]

same hi5

[@sus6788]

just yesterday they added new stuff, now the html and css part in the fullstuck is split into intermediate and advanced

[@chetankumar9463]

How much time it you guys to complete foundation course?

[@LaVidaDelRoba]

@@chetankumar9463 if you do it like 4 hours a day it should not take more than 3 weeks.

[@bejai1962]

I'm presently doing an HTML & CSS course. This information is helping with areas in the course I just couldn't understand. The course does not, for instance, teach me to create a root folder which is why I couldn't load my images. Being stuck on something that simple makes it very difficult to move on to the next subject with confidence. I plan to watch all 23 parts of this series. I'm taking lots of notes and adding tons of comments to the pages to make sure I'm clear on every detail. You are GREATLY appreciated and I plan to tell my friends to watch this series as well!!

[@morountodunokedara]

so true! esp on the images thing! great point!

[@rw2783]

I'm on the Odin Project. This was a really helpful video for me thank you !

[@silentarcadia]

Did you manage to complete Odin and pursue a career in WebDev?

[@rw2783]

@@silentarcadiaI didn’t continue with it. However, I got into networking so I decided to do that.

[@user-dt2sp9dj7f]

@@rw2783 so it means that Odin Project are not that good?

[@410villa]

I’ve recently watched a lot of videos that have taught me new things about HTML/CSS but I’m SO glad I found your channel today. Already you have gone in to depth about so many things that the other channels didn’t mention. So informative 👍🏽 thanks! Must watch all your videos now and pick up more tips that I’ve been missing.

[@BluD4g]

just started the odin project here. love the ending soundtrack.

[@silentarcadia]

Did you manage to complete Odin and pursue a career in WebDev?

[@Silverflame1]

"And my hamster doesn't live in this place anymore." Fore some reason I love this sentence.

[@OfficialKillJoy]

Just wanted to say thank you for the video. Was looking at website organization because I started using PHP for the repeated items and was unsure of creating sub folders for html but this solved it. Thank you!

[@KevinPowell]

Awesome, glad it helped!

[@maurolimaok]

Not only lazy to type, but shorter names, shorter the possibility to mistaken this strokes. I did like the idea

[@EbukaFestus]

I love these explanations. Very well broken down. Great job sir, thanks.

[@julietamobi]

TOP.... Self learning going so well💃💃💃💃

[@silentarcadia]

Did you manage to complete Odin and pursue a career in WebDev?

[@dungeonstalker]

TOP student here!

[@silentarcadia]

Did you manage to complete Odin and pursue a career in WebDev?

[@lesliehayden8450]

TOP was here.

[@maurolimaok]

The spaces on names also cause problems when we do things using terminal, 'cause terminal undertans spaces as a break to something new, a file, a command, etc. Even if que do all the web stuff on VSCode or alike, someday we may need to use the terminal to SCALE a large number os directories, files, etc. so, if there were names with spaces, we're gonna be in serious troubles.

[@Amknowledge]

A Suggestion for you... Hi kewin I had watched some of your videos , these are very helpful, i have a suggestion for you... Please make a video on css and html tree structure... Thanks

[@kevin.itruth6880]

Doing The Odin Project. They would like us to create a "pages/" directory to keep pages like "about.html" etc. seprate from "index.html" for better organization. To me it seems like an extra step, what is everyones thoughts on this? just curious.

[@SumanthLazarus]

TOP 💯

[@silentarcadia]

Did you manage to complete Odin and pursue a career in WebDev?

[@xox-marissa-xox]

Why should we avoid numbers when naming files? Are underscores suitable alternatives to hyphens when we want indicate a space? Love all your videos!

[@KevinPowell]

Glad you like them :D. Technically numbers are okay, they can just make for awkward names. Generally you want to be descriptive with the file names, so 23.html doesn't tell me very much. Unless I'm including a date in a file name, I avoid them. Sort of the same for underscores. They would work, but hyphens are the standard, and underscores are harder to see. It could lead to someone mistyping. I have also read (though I'm not sure if it's true) that search engines will read URLs with hyphens are individual words, but will see ones with underscores as one giant word.

[@xox-marissa-xox]

I didn't know that about hyphens on the web, good stuff. As a photographer I tend to name my images with date, shoot name and original file number so I'll look into shortening those file names. Although...since image URL's don't have to be short or easy to read and have alt text for search engines it might be okay, and since I'll be using Dreamweaver I won't have to type it in manually. It's good to know why the guidelines are there. I'll definitely name every other file type as you recommended so they display properly in browsers and for SEO.

[@KevinPowell]

That type of file name would be great for an image. It's consistent, and no one is going to be trying to type the URL of one anyway. Though, as you said, if you had to type each one out, it might be a pain in the ass, hah.

[@davidromero527]

Odin!

[@babettevanes483]

"my hamster doesn't live here anymore" for now forever be paired to the path not working in my brain😂

[@mihirvphadnis]

Hey Kevin, thanks for awesome videos! Just wanted to know will it be okay creating separate folders for HTML as well, if I have dozens of html pages to manage 😕 in this case should I only leave my index.html in main folder and rest in subfolders?

[@sebloo6770]

Hey, these videos are great! I am not sure why but after I made a separate file the only way I am able to get a photo show is by "copy as path". Also when I open up Atom it now shoes the picture in the folder saved as (ex hamster.jpg.jpg) when I remove the .jpg I added it shows up just hamster.jpg. I tried a few variations with img src but it seems only the copy as path works. Is there a solution for this or can I just use this moving forward? Thanks.

[@mikeshaw4610]

You mentioned keeping lower case but what about camel case for better reading.

[@icarusfluffybottom899]

Question: You say when naming things to not use capitalization, but in the past I've commonly used camel case in situations where a 'space' was prohibited. Is it generally frowned upon to use camel casing for file names instead of hyphens? I don't know why, I just feel like it's more readable.

[@matheusguifer]

I was wondering this as well.

[@RandyOwensJr]

Thank you.

[@MagnusAnand]

this tutorial is pretty good

[@mariaromero3488]

Great series!!!

[@siyamali5978]

Thank you

[@dpvlogs0921]

I found this so helpful

[@KunalSinghSuper]

TOP Student here

[@charlesabiader9899]

@kevin powell i know its been almost 6 years but i got a question, when im trying to use to link to another page from my folder it gives me File not foundIt may have been moved, edited, or deleted.

[@anujpillai2450]

Should I make a new folder on the desktop for every project and then have index.html, Css folder, hardware folder and image folder within it or should I have one folder with all my projects and sub folders for every project? Thanks kevin

[@zt.5677]

A good one. Thanks.

[@hoangnamvo6377]

i love this is very helpful

[@TB7-X]

Will using underscores in file or document names cause any issues?

[@samyen3210]

Good luck gang

[@leothalion3983]

This was a big help, among others, haha.

[@kennethbalilo197]

can I ask why my image doesn't show on my web? when I move my image to a folder

[@westmaestro3959]

hey you doing great work her. Just got a problem uploading pictures to my site. you see i write the name of the picture in my root folder and yet it seems not to find it

[@yavuzselimist34]

Thank you so much sir

[@aleksandrasocha9508]

thank you for work keys and crack

[@arnabdas4790]

Hi! Is it better to create a pages folder separately inside root, like for example: root-> img, css, js, webpages. Or should I just keep all the web pages including index.html inside the root folder only? And also, what about if I wanted to add videos to the site I'm trying to create? Should it be on a separate folder or just the video files inside the root? Thanks.

[@91dgross]

Good question, I thought it was also interesting we didn’t create an html folder, considering the consistency of everything else. My guess would be that it would be redundant to create an html folder? As a web developer the html files and its text, is the most simple or “root” file one is working with, and everything else like images, styling and videos would sort of be secondary to what makes a website. That’d be my guess. Though I don’t think it would be confusing or harmful creating an html subdirectory for a website.

[@joseville]

5:50 If your hamster's not working, try turning it off and on again. Oh wait that's for a different IT track. I mean make sure the relative link path for your hamster is correct.

[@div_07]

What if my website only uses HTML files and for the images i use links? I still need to create other folders?

[@ryanvaughn3121]

No just reference the absolute links. Protocol domain path.

[@DharmikGohil-bw2ug]

Thanks sir

[@dillonfreilinger6069]

So is using camel case when naming files not a good idea?

[@icarusfluffybottom899]

Oh dang... I literally just asked this same thing. Seeing this hasn't had a response gives me little hope I'll get feedback either :p

[@DriveandThrive]

good vid

[@cemcandan4079]

tNice tutorials dude makes tNice tutorials easy! I wish he would have been my Nice tutorialgh school maths teacher

[@user-dj8gt6ik7c]

my files aren't pulling ever since i put them in folders :'(

[@KevinPowell]

Did you update the path to the files? 'example.jpg' => 'img/example.jpg'

[@hoangnamvo6377]

where do you do you teach at

[@KevinPowell]

I teach for a school in Montreal, Canada, but it's focus is design, not front-end.

[@emirhancalskan1581]

I think it is a more standard practice to name folders "styles" instead of "css" and "scripts" instead of "js"

[@nohandle759]

I feel like that wallpaper is older than I am, and I'm not a young man.

[@hoangnamvo6377]

im new

[@ManobadhikarForEveryone]

My hamster is working properly. 😅😅😅

[@tigrannersisyan4120]

Hey are you here?

[@KevinPowell]

I try to be :)

[@tigrannersisyan4120]

Kevin Powell can you help me in Html and css

[@electricalstuff259]

Windows ew

[@pashko-k6h]

I added space to 'page two' and interestingly no weird characters (%) appeared in the directory; was just /page two.html