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. ❤
😅 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
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 ✊🏾
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
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.
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)
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".
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.
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 !!!!!!!!!!
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?
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 👍
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.
@@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.
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!"
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.
That seems like a nightmare with the link and folder traversing using the "../" notation. It would be easier to just reference the links to the root folder with a "/" in front of the link. This way, the links doesn't have to know what is the current location of the html file. The index file will be in the root and the other html files will be in the subfolders.
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
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!
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???
its real amazing tutorials thanks you so much for doing and then it is helping me to come up with something i hope, i would be following your tutorials and get more ,
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.
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"
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!
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/
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?
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
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.
@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!
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"
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?
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"
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")
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.
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
Hey I know this is 5 months old, but thanks! I kept the folder 'pages' too as I thought it'd help with learning. Great spot, as in the video, he put them all back into the same directory.
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
I don't love pink 6:10, btw i love watching your tutorials, they're vere helpful, thanks for all your hard work, finally i can do some coding on my website ;)
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. ❤
😅 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
Just learning for myself
I have to build a esbite and I have 3 more days pray for me😢😂
@@ceciliamessina6356hey what did u do
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 ✊🏾
For those wondering what the a stands for in , it stands for anchor.
you make it so quick and simple. Thanks for not overdoing the video with unnecessary crap
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!
This is literally the most useful html tutorial I've ever seen. The way it is explained is perfect. Thanks a lot
Yes, I needed that.
This is actually Gold! Many Thanks From me, a coding newbie in a tiny town in Nigeria!
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.
nahhh i've been searching for it many times but this dude got my respect
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
Love it! Thanks for doing the lookup!
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.
Thank you, Sir. I have been scrolling all day looking for something like this. You are a star
Not everyone has a natural ability to make people things understand, especially technical stuff, mate you are among those few who do!. great work!
its tag because there already is tag used in heading for linking a .css file to a .html file
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
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 ! :)
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)
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".
Very good explanation, helping me now with a college project.
Thank you.
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.
Your voice is so awesome to understand everything, my problem has been solved for multiple pages.
Thank you
You make it so easy to understand! Thanks!
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 !!!!!!!!!!
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!
thank you so much man you deserve 10 million subs you are a life saver of a lot of people including me
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?
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 👍
@@JenniferStewart100 thank you so much for answering 😊
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.
What a lifesaver 😭 I'm literally crying bruh
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
"A" tag defines a hyperlink.
The most important attribute of the "A" tag is the "href". The "href" indicates the link's destination
@@nightcorealg5765 but sir used 'rel' also before 'href'. What is the functionality of 'rel'?
Thank you.
@@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.
@@nightcorealg5765 Thank you very much😊
Thank you so much; I kept getting confused on how to link pages together until now.
Great video bud. Your voice is on par with Morgan Freeman. Great info. My question was quickly answered, Much appreciated.
Awesome to hear it helped you! Haha, and Morgan Freeman...I'm totally taking that one :) . Have a good one!
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!"
Thanks man so much! I really like your tutorials, its easy to understand from you and you explane everything how its need to be!!
thanks a lot ! cant wait for the next one!
Thank you so much .... I was stuck but now I made a beautiful website with multiple pages....
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.
When will the next video be released?
wow the great experience with your coordination of website .. fantastic and real improvement is switch on.
That seems like a nightmare with the link and folder traversing using the "../" notation. It would be easier to just reference the links to the root folder with a "/" in front of the link. This way, the links doesn't have to know what is the current location of the html file. The index file will be in the root and the other html files will be in the subfolders.
you're really good teacher damn
i've just stucked so u helped me sm thx
🤦♂️🤦♂️🤦♂️ and here's me thinking it's gonna take onClick and stuff like this!
Honestly! It is so easy!
Thanks man!
Your tutorial videos are very easy to absorb. I really do appreciate all your content. Keep it up.
You are the best teacher ❤❤
When I link my styles page it does not show the styles. Please help!
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
so insanely helpful and simple. thank u bro
Wow this is the best video I watch about tutorial. Thank You so much for all this video GB
You are Rocking Man..... Thank you so much for this 😘😘
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?
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!
I did paste the style into the “styles.css” file.
did u correctly link the style.css?
Awesome Videos... this will help with my new created company in the SEO world.
when creating a website do you use one CSS file for each page? I'm a beginner.
Thanks for this Tutorial.
Thanks bro!!!!
Short, precise, upto the mark! Amazing explanation as well. Keep it coming 👍👍👍👍👍👍👍😊😊😊😊🙌🙌🏼
made css very easy ! love it.
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???
its real amazing tutorials thanks you so much for doing and then it is helping me to come up with something i hope, i would be following your tutorials and get more ,
Which software do u use for coding??pls tell
Thank you so much im a starter coder and this helped me alot
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.
I have a problem with linking i ussed exact same code and it doesnt work everything is in the same folder
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"
@@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
Shit bro, I've been looking for this for quite sometime. Thanks bro.
"coz everybody likes pink"😂
Big help thanks! I'm not overthinking anymore haha.
Thank you so much!! This helped tremendously
I have problem, i cant link locations and contact, it doesnt working. It only acept for index.html
I need help! Asap
Ty😄
Is there any way of getting around having to edit every single page when a change is made without using a framework?
My attempt to style two HTML pages did not result in any change to the webpage.. Can some body help me out please..?
hello could you help me please i dont know what to do the link isnt working?
How to complie all html pages in a single file because I will uploading on blogger
The reason it's not a link tag is, that when html was written, we weren't sure yet if you could ever communicate outside your network.
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!
Mario Matschgi this is not what HTML and CSS is about. For that, look for Angular or Vuejs.
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/
@@learncodeacademy
Thank you.
Ill try it.
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
Added it to the description! Thanks
nice and easy to understand video. Thank you!
Thanks man love the explanation 😭
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?
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
Thank you for this, very simple.
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?
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.
@@szb5328 Ah thank you man! I was so stuck
hi when im in locations i cant get back to home .. i went into locations and put the ../ in but still cant return
@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!
../styles.css
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"
@@jacobpoore9575 you are a absolute legend, im using this method for my project portfolio, thanks so much
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?
I'm having some trouble with getting the styles page to actually work, does anyone have any tips?
whats the trouble?
bro ive been trying to make my updates to the page me live like this for the longest .. smh . I always have to close everything out and re run it . .
Thank you, this was very helpful.
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"
yes adding the ../ worked, I forgot you deleted the pages in the other video.
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")
Hey how can one publish or set up the website for public use?
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.
OMG Thank you so much - you helped me THANK YOUUUUUUUUUUUUUU
thank you so much! this helps me out. when i become famous, i will credit you. (no joke)
Thanks! I will hold you to that...now you go become famous!
Thanks u im new subscriber i hope i can see more or lot of information thanks a lot 🍻
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
for the styles.css when i do the link i made sure i did it correct it wouldnt work
My style sheet didn't work on the other pages so i added ../ tag in the link href= for locations and contact and it applied. I'm learning :)
Hey I know this is 5 months old, but thanks! I kept the folder 'pages' too as I thought it'd help with learning. Great spot, as in the video, he put them all back into the same directory.
Thank you so much!
For some reason my css link doesn't work, does anyone know why is that?
Thank you
what tools you are using? i mean, where to write the code? BRACKET? or just notepad?
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
I don't love pink 6:10, btw i love watching your tutorials, they're vere helpful, thanks for all your hard work, finally i can do some coding on my website ;)