HTML CSS TUTORIAL FOR BEGINNERS - multiple pages

[@HolyCheezeNipz]

Shout out to all the people that are here because their instructors don't give them proper guidance and you have to learn how to do everything yourself for assignments. ❤

[@gtcross4512]

😅 actually im the one who started online course when suddenly i herd that chatgpt can do anything so i quit the course but later it turned out i do need to learn even for chatpgpt

[@jeromeHill-oo4ol]

Just learning for myself

[@ceciliamessina6356]

I have to build a esbite and I have 3 more days pray for me😢😂

[@4gamers81]

​@@ceciliamessina6356hey what did u do

[@Vizia219]

For those wondering what the a stands for in , it stands for anchor.

[@thechrisexperience263]

Dude your a life saver I’ve been trying to learn for years and could never understand. You make it so clear and easy to follow I just wanna say I appreciate you for taking time to release these to the public. Much respect ✊🏾

[@TheDarkSide.tk9]

lowkey the most helpfull youtuber. You actually teach stuff and dont just abuse your popularity with sponsors. You explain, keep it up.

[@johnleon]

This is literally the most useful html tutorial I've ever seen. The way it is explained is perfect. Thanks a lot

[@deansummer1356]

Yes, I needed that.

[@zantvr6314]

you make it so quick and simple. Thanks for not overdoing the video with unnecessary crap

[@JenniferStewart100]

Just found this video. All I can say is Wow! Every aspect is perfect. Sound, visual, instructions. You have my vote 👌 Thank you so much!

[@master-ik9ro]

This is actually Gold! Many Thanks From me, a coding newbie in a tiny town in Nigeria!

[@ShabbyVelarde]

nahhh i've been searching for it many times but this dude got my respect

[@fmtuby]

Not everyone has a natural ability to make people things understand, especially technical stuff, mate you are among those few who do!. great work!

[@puseletsobushy8074]

Thank you, Sir. I have been scrolling all day looking for something like this. You are a star

[@sebastianwolf499]

Thank you for your tutorial. The "a" tag in the hyper link reference origins in the word anchor which somewhat make sense. Have good life.

[@baltaza]

Man, you are great. I took the Codecademy course and learned a lot of what you are showing here, but the way that you are explaining these things to me it's helping me a lot when it comes to actually building something myself.

[@magicman8516]

its tag because there already is tag used in heading for linking a .css file to a .html file

[@ahmadazad8300]

1:05 An anchor tag is used to make what is usually referred to as links, but a link tag does not create a clickable link, which might be what you'd expect. ... A link tag can only be used in the document header, and is used to "link in" other resources to the document. The most common use is to fetch stylesheets (.css files)

[@evansteph]

Helped me past my studies because you do a better job of explaining than my tutors. One day when I get hired I`m sending you a 12pack ! :)

[@nathalievanbellegem5313]

thank you! my teacher for web 1 never explained this stuff but we have to use it for our final assignement, you really saved me!

[@sunday2671]

How did you make the "My Website" folder?

[@unruly_ronin]

What a lifesaver 😭 I'm literally crying bruh

[@VEOdev]

Thank you for the videos it helped me to start a lot i think anybody watching the first 6 videos will be able to start from it and learn fast

[@kabirbhai2441]

Your voice is so awesome to understand everything, my problem has been solved for multiple pages. Thank you

[@raymondschaefer3566]

Thank you so much; I kept getting confused on how to link pages together until now.

[@MultiOlelukoe]

Very good explanation, helping me now with a college project. Thank you.

[@siadetx7552]

thank you so much man you deserve 10 million subs you are a life saver of a lot of people including me

[@rickprohaska3949]

CSS style page isn’t working. I made the style.css file. I copied and pasted all the style into the “style.css” file. I cut the style from the “index.html” file. The webpage went bland. I went back to the style sheet, refreshed, still nothing. I put all the style back into the index.html file and it’s fine. Help!! I need suggestions!

[@rickprohaska3949]

I did paste the style into the “styles.css” file.

[@dharmang]

did u correctly link the style.css?

[@dmytrodavidenko6889]

To anyone who is interested, why tag is called "a" and not "link": The HTML element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. (from mdn) And in the very first HTML specification we can find: Anchors specify addresses of other documents, in a from relative to the address of the current document. Normally, the address of a document is known to the browser because it was used to access the document. However, is a document is mailed, or is somehow visible with more than one address (for example, via its filename and also via its library name server catalogue number), then the browser needs to know the base address in order to correctly deduce external document addresses. The format of this tag is not yet specified. NOT CURRENTLY USED www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

[@learncodeacademy]

Love it! Thanks for doing the lookup!

[@muhammadeesa265]

got a weird issue, for my 'contact' link , it works fine but doesnt turn purple after clicking on it, any idea how to fix this?

[@PuzaExplores]

What if I want to change each page style? Will i have to create same no. Of .Css file too? How can I link .Css file but with diff style format for every page?

[@JenniferStewart100]

Lorna Muccio You can use just one css style page. In that page you can list as many classes, id's, and tag names as you need to. All the styles from all your html files can be done on this one css page... unless you use an additional css library, like animate.css. If you want your pages to have their own stylesheets then add a style tag in each html file with the css file name. Hope this helps 👍

[@PuzaExplores]

@@JenniferStewart100 thank you so much for answering 😊

[@ItsAnnieKB]

Thank you so much .... I was stuck but now I made a beautiful website with multiple pages....

[@moomonsta9986]

When will the next video be released?

[@marekmedas]

hello could you help me please i dont know what to do the link isnt working?

[@dianadaviana]

thanks a lot ! cant wait for the next one!

[@abanimohanty550]

hi i have an issue is that ,for home page i have an style sheet and same will be for other page for basic design but how to do for the gallery page and contact page because there we have to design differently on the contact page for styling and for gallery image stuff style part

[@PoojaSharma-lk5cn]

Which software do u use for coding??pls tell

[@JuliaGarbe1]

You make it so easy to understand! Thanks!

[@jefflambert7513]

Man, what an excellent series. This is by far the best I've come across. You provide use with an awesome tool (Visual Studio Code) and your explanations are clear and precise. I can't thank you enough, thank you ... thank you ... thank you... thank you !!!!!!!!!!

[@vinodappu100]

wow the great experience with your coordination of website .. fantastic and real improvement is switch on.

[@tailishlaller5365]

When I link my styles page it does not show the styles. Please help!

[@nightcorealg5765]

Maybe you put the css inside a folder. If you did that then you should specify that folder/html.css where folder woulde be the folder where you have the css and html the name of the css file

[@nevinkuser9892]

Great video bud. Your voice is on par with Morgan Freeman. Great info. My question was quickly answered, Much appreciated.

[@learncodeacademy]

Awesome to hear it helped you! Haha, and Morgan Freeman...I'm totally taking that one :) . Have a good one!

[@toriancromar]

I created the style.css sheet and copied the link line to all the pages but for some reason it's not working on any of the pages, any ideas? Do I have to put the ../ in front of the styles.css so href="../styles.css"

[@toriancromar]

yes adding the ../ worked, I forgot you deleted the pages in the other video.

[@seekerandroses]

Hey how can one publish or set up the website for public use?

[@Manana7016]

Is there any way of getting around having to edit every single page when a change is made without using a framework?

[@eurostar0711]

The styles.css portion of the video reminds me of using Excel where you can make a second (or more than one) spreadsheet and have your main spreadsheet grab data from those, that way the main spreadsheet has less "clutter". In this case, you are using #styles.css as a "box" to store code, so your Index (and other pages) can grab that code directly to reduce "clutter".

[@uzairabdullah208]

🤦‍♂️🤦‍♂️🤦‍♂️ and here's me thinking it's gonna take onClick and stuff like this! Honestly! It is so easy! Thanks man!

[@adeelashfaque5764]

"coz everybody likes pink"😂

[@artyono9002]

Thanks man so much! I really like your tutorials, its easy to understand from you and you explane everything how its need to be!!

[@Yosuke94]

Ok, but If I change something for example in header I need to change single page header or copy this page and then copy content which I had for every page. If I have 100 pages its a torture. Is it posible to only modify whats in your content?

[@elitecombine5373]

Thanks you so much for the free content! This is really helping me on my website and learning more about web development. I’ll be showing my friends your content to help them learn as well.

[@al_daf33]

OMG Thank you so much - you helped me THANK YOUUUUUUUUUUUUUU

[@Nagushelp]

We can change the styling of navigation bar of all the pages using a common style sheet. But what If I want to edit in HTML itself like I want to add one more tab 'about us' then I have to go and add in each page? Is there any option we can save the navbar in a common place from where we can edit and it shud reflect in all the pages. Is there a way???

[@Greystone76]

@learncode.academy What if I want to keep the pages folder with my “location, contact” pages but want to link the style sheet?? I can’t seem to figure out how to link them with index out of the pages folder. Thanks!

[@jacobpoore9575]

../styles.css

[@adobezev8751]

You use it as a directory. Use "\" to get to the root. For instance, if my CSS was in my root but my pages were in a separate folder I would do "\main.css"

[@sharna3929]

@@jacobpoore9575 you are a absolute legend, im using this method for my project portfolio, thanks so much

[@yglol623]

three years ago- viewer1: *sees this video*-"meh, ill neaver need to watch it anyway. Viewer 2:*three years later*-*sees the vid*-"YAY I FINALLY NOW HOW TO CODE!"

[@juliansinghbassi5320]

Bro thought he said sum

[@ankita_pal_0305]

Sir....I am learning this topic but I have a doubt...please clear this. In the 'a' tag you used 'rel'....I couldn't understand that's functionality

[@nightcorealg5765]

"A" tag defines a hyperlink. The most important attribute of the "A" tag is the "href". The "href" indicates the link's destination

[@ankita_pal_0305]

@@nightcorealg5765 but sir used 'rel' also before 'href'. What is the functionality of 'rel'? Thank you.

[@nightcorealg5765]

@@ankita_pal_0305 oh I am sorry, you are talking about linking the CSS. The "rel" tag specifies the relationship between the current document and the linked document/resource.

[@ankita_pal_0305]

@@nightcorealg5765 Thank you very much😊

[@King-gx8yh]

I have problem, i cant link locations and contact, it doesnt working. It only acept for index.html I need help! Asap Ty😄

[@withmoshka]

you're really good teacher damn i've just stucked so u helped me sm thx

[@ThePreacherman9]

how do i link the css to another folder?

[@williamobrien5430]

No matter what I do the links won't work. It loads the home page but I keep getting Cannot GET /Locations.html or Cannot GET /contacts.html when I click on either of those links. Please help

[@markreyes8291]

Your tutorial videos are very easy to absorb. I really do appreciate all your content. Keep it up.

[@thisis1704]

So If I used a bootstrap Navbar what links would I carry over to the other pages? So the links can work no matter where you are on the website

[@learncodeacademy]

You would either use absolute links e.g. "somesite.com/some-link" or relative links that start with a / e.g. /some-link If you look at youtube's code, you'll see they use /watch?v=2m31n2n312 for their links, which translates to kzbin.info/www/bejne/aJ6WYqFoo5hkaA

[@jakethecreep5782]

Hey, what's the extension which auto-fills that link to the CSS?

[@Joed74]

hi when im in locations i cant get back to home .. i went into locations and put the ../ in but still cant return

[@nithishnshetty3406]

what is the use of mt-3 plese help me

[@_Juicebaba]

I love your tutorials, but you mentioned that you do not know what the the A tag stands for. well, it is an Anchor tag. used to attribute an anchored link to the texts within it.

[@lllore9895]

What do you edit the text in? Is it atom? I have notepad++ can I create folders and all that in this program?

[@sabrinal.5775]

He's using Visual Studio Code. I'm not too familiar with Notepad++, but there's a tree view in Notepad++ where you might be able to create directories and files.

[@whyrachit]

Which editor do u use

[@rorh6462]

when creating a website do you use one CSS file for each page? I'm a beginner.

[@Dawud-b7f]

My attempt to style two HTML pages did not result in any change to the webpage.. Can some body help me out please..?

[@Zetus]

Why my css not working 5:50 ?

[@woozhenchee2886]

Hey there, just wondering why we would need to write ../../../ to get to the index.html. I have been using just / to get to the root index.html file, wouldn't this be quicker and less cumbersome?

[@woozhenchee2886]

Home

[@adobezev8751]

"../" goes down one directory. So if you didn't want to start from the root if you have nested folders you would just use ../ per directory.

[@itsnephix]

I am super confused. I am doing an assignment for school and I have done exactly what this video has said. When I save all and refresh the server, I try clicking onto my navigation buttons, but the CSS does not display across all of the HTML pages I have created. Can anyone help me? I can't find an answer anywhere for this.

[@captainunderpants4882]

For some reason my css link doesn't work, does anyone know why is that? Thank you

[@norakat]

What software are you using?

[@ZolaPfc_]

I have a problem with linking i ussed exact same code and it doesnt work everything is in the same folder

[@kelvindiaz8409]

1. check case sensitivity (lowercase and capital letters) 2. make sure the "../" is on the "index.html" level and not the child page level. so if you are editing your "contact.html" page your directory to go back (../) will be on the "index.html"

[@ZolaPfc_]

@@kelvindiaz8409 ty for helping i solved this problem that day(i messed up in ../ part hope someone find your answer helpfull. Much love from Serbia

[@obaidullahnoori8805]

made css very easy ! love it.

[@vincentv.berchem2085]

when i put my style code in another .css file like you did in your video, my style code suddenly gets errors. ("errormessage": "at-rule or selector expected")

[@PhilipStomp]

TY but how do i remove the line and change color and font?

[@cockroachwithinternet1709]

What line

[@cockroachwithinternet1709]

If your referring to horizontal line then just go to css and type hr{ color: red;}

[@mollygloeckner1807]

my stylesheet isn't working when I add it into the head. Any tips on what might be going wrong? I validated my css through a validation checker and made sure there were no errors.

[@rudymelo880]

Did you save the .css file before linking it?

[@female_wellness]

My CSS does not work. I am using Chrome and it just does not see the css. When my styles are inside the .html files it works but once I put them into a separate .css file they do not work. Why could that be?

[@unknown-ge1ik]

i am late but that happens to me too

[@unknown-ge1ik]

did you find a solution?

[@youngdolo8]

Tried creating a folder called Pages to make life easier on myself and I can't save anything into it. What do I do in that case to string pages together?

[@amirnasab5467]

Hi, Well I don't know what's happening. I exactly followed your tutorial but when I create a folder "pages" and move all 3 pages into the pages folder then and to link "pages/index.html" this error message appeared "Cannot GET /pages/pages/Locations". I don't know were the second pages folder created as I can't see it.

[@fleecky7011]

I got that first to but i'm too smart and figured out myself

[@mistakenmeme]

@@fleecky7011 then tell Amir how you did it! So freakin rude!

[@mistakenmeme]

It should be "pages/Locations" (and Home and Contacts) not "pages/pages/Locations". You only have one folder, not two.

[@thegoonist]

when i try Pages/locations.html, it works the same as 'pages/locations.html. so does this mean the folder name is not case-sensitive but the last part, i.e. locations.html is case sensitive?

[@GenetetIncorporated]

Hi, I have about a thousand pages, each as a file for an individual person. What I want to do is to add their names at a specific location (say h1). Now I know how to edit a batch of pages when they're all open in my Sublime editor and I look for a regular string that I'll replace with another string. But what when the replacement is different? Cos I really don't see myself editing page after page… Any idea? (If you tell me about some API or whatever that works with a database from which it extracts data, sorry but that's beyond my field, all I know how to use and that works with batches is NameChanger. It renames files in sequence mode by linking a list in a .txt file. But it works with filenames, not their insides.) Thank you in advance.

[@programmercodes3002]

which software u use for coading

[@hithere997]

so insanely helpful and simple. thank u bro

[@abdulfathaah2464]

Thank you so much im a starter coder and this helped me alot

[@caleb9826]

for the styles.css when i do the link i made sure i did it correct it wouldnt work

[@glok1989]

why is your link text on a preview page all in one line tho you don't have any syntax for that. if i do the same syntax my links are all in new line and bulleted

[@Kiyalucy]

why part doesnt work for me😢

[@ryanwhitlock4547]

Try

[@vikaschoudhary6043]

How to complie all html pages in a single file because I will uploading on blogger

[@quinver15]

can someone help me my styles. css only works with contact

[@spencerknifes5260]

If anyone is getting an error that looks like this" } expected css(css-rcurlyexpected) [73,8]" in VS code then you are missing a curly brace bracket. hope this helps.

[@Fumsta]

You are the best teacher ❤❤

[@mariomatschgi344]

hey, great video... Can you make a tutorial for "global blocks"? Like a global header/footer in html? I mean like a file where some html code is placed and then i can "link" it to some pages, so that if i change something in this file, it gets updated on all "linked" pages this would be sooo nice!

[@AmedeeBoulette]

Mario Matschgi this is not what HTML and CSS is about. For that, look for Angular or Vuejs.

[@learncodeacademy]

If you want to get into content blocks that are shared across multiple pages (which is how large websites scale without a ton of copy/paste), then you have 2 choices: • do it in a front end framework (React, Vue, Angular), which uses javascript to generate HTML/CSS on the fly • do it in a back end framework (Node.js, Laravel, ...there are several for each language), which uses a templating tool specific to each framework to piece together the HTML that gets sent back to the browser when it requests somewebsite.com/some-page There's been discussion about browsers implementing HTML imports, which would allow a feature like you're describing and Google Chrome has done it, but they way they did it was terribly wrong and it looks like it will never materialize because of it. Here's some interesting reading on the topic: hacks.mozilla.org/2015/06/the-state-of-web-components/

[@mariomatschgi344]

@@learncodeacademy Thank you. Ill try it.

[@harie8035]

You are Rocking Man..... Thank you so much for this 😘😘

[@moomonsta9986]

any idea when the next video will be out finding these so helpfull and cant wait for the next vid

[@learncodeacademy]

This week for sure. Hopefully Mon or Tues

[@moomonsta9986]

Thanks heaps!!

[@nurulashyikin966]

what tools you are using? i mean, where to write the code? BRACKET? or just notepad?

[@Ginfio]

Can you please help me with something? (NAV bar)

[@trex793]

I'm having some trouble with getting the styles page to actually work, does anyone have any tips?

[@lyub12tutorials]

whats the trouble?

[@thieftakerow]

Hey FYI - you mention the link to the earlier videos in the series to be in the description, but it looks like you forgot to paste it in there

[@learncodeacademy]

Added it to the description! Thanks

[@colin7799]

the trick to fix the locations doesn't work for me. I did the steps you told me but, it just says error after saving?

[@szb5328]

First of all make sure you didn't move the index.html file into the 'pages' folder. That's what I did at first. Next step is to make sure you put "pages/" only in the 'index.html' file and only in front of 'locations.html' and 'contact.html'. Lastly make sure you put '../' only in front of 'index.html' in both "locations.html" and "contact.html" files. Hope that helped.

[@michaelsnow2839]

@@szb5328 Ah thank you man! I was so stuck