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 ✊🏾
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.
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, 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 !!!!!!!!!!
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".
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.
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.
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)
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 👍
@@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.
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???
The rel attribute specifies the relationship between the current document and the file you're linking the document to. Stylesheet is a value that rel can take in. When rel = "stylesheet", this means that the linked file contains styles, which the file then imports from. Examples of other values rel can take in include "alternate" (a printer-friendly page) and "preload".
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.
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 ,
Wordpress dev - this is it's own world and often a dead-end, not evil or "wrong", but it is what it is and rarely a good long-term career move Front End Dev - most common for new developers. React dev falls into this category as most front end devs are expected to know at least one JS framework React Dev - Front End Dev who specializes in React. Probably won't be expected to know Angular or Vue
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 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.
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!
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
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.
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.
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.
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
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 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.
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 ruclips.net/video/2m31n2n312/видео.html
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!"
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/
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"
the link to the code is not the same as whats on screen could it not just be a notpad file to download? Ive just deleted as you tube took me to the wrong video supper helpful you tube
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
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
For those wondering what the a stands for in , it stands for anchor.
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 ✊🏾
you make it so quick and simple. Thanks for not overdoing the video with unnecessary crap
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.
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!
Thank you, Sir. I have been scrolling all day looking for something like this. You are a star
This is actually Gold! Many Thanks From me, a coding newbie in a tiny town in Nigeria!
nahhh i've been searching for it many times but this dude got my respect
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 your tutorial.
The "a" tag in the hyper link reference origins in the word anchor which somewhat make sense.
Have good life.
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.
Your voice is so awesome to understand everything, my problem has been solved for multiple pages.
Thank you
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 ! :)
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!
What a lifesaver 😭 I'm literally crying bruh
Thank you so much; I kept getting confused on how to link pages together until now.
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!
Very good explanation, helping me now with a college project.
Thank you.
Which software do u use for coding??pls tell
thank you so much man you deserve 10 million subs you are a life saver of a lot of people including me
wow the great experience with your coordination of website .. fantastic and real improvement is switch on.
Thank you so much .... I was stuck but now I made a beautiful website with multiple pages....
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 !!!!!!!!!!
Thanks man so much! I really like your tutorials, its easy to understand from you and you explane everything how its need to be!!
you're really good teacher damn
i've just stucked so u helped me sm thx
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".
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.
You are the best teacher ❤❤
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.
🤦♂️🤦♂️🤦♂️ and here's me thinking it's gonna take onClick and stuff like this!
Honestly! It is so easy!
Thanks man!
When will the next video be released?
Your tutorial videos are very easy to absorb. I really do appreciate all your content. Keep it up.
thanks a lot ! cant wait for the next one!
what tools you are using? i mean, where to write the code? BRACKET? or just notepad?
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)
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!
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 😊
when creating a website do you use one CSS file for each page? I'm a beginner.
made css very easy ! love it.
This responsive? For tablet or smartphone
How did you make the "My Website" folder?
so insanely helpful and simple. thank u bro
Is there any way of getting around having to edit every single page when a change is made without using a framework?
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😊
What software are you using?
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?
Which editor do u use
what is the use of mt-3 plese help me
Thank you so much im a starter coder and this helped me alot
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???
these are great.
What is the meaning of rel and stylesheet?
The rel attribute specifies the relationship between the current document and the file you're linking the document to. Stylesheet is a value that rel can take in. When rel = "stylesheet", this means that the linked file contains styles, which the file then imports from. Examples of other values rel can take in include "alternate" (a printer-friendly page) and "preload".
Thanks for this Tutorial.
hello could you help me please i dont know what to do the link isnt working?
What do you edit the text in? Is it atom? I have notepad++ can I create folders and all that in this program?
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.
I have problem, i cant link locations and contact, it doesnt working. It only acept for index.html
I need help! Asap
Ty😄
Wow this is the best video I watch about tutorial. Thank You so much for all this video GB
which software u use for coading
Hey how can one publish or set up the website for public use?
Awesome Videos... this will help with my new created company in the SEO world.
OMG Thank you so much - you helped me THANK YOUUUUUUUUUUUUUU
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 of these has the highest demand for junior developers with no experience?
1)”Front end dev”
2) “Wordpress dev”
3) “React dev”
Wordpress dev - this is it's own world and often a dead-end, not evil or "wrong", but it is what it is and rarely a good long-term career move
Front End Dev - most common for new developers. React dev falls into this category as most front end devs are expected to know at least one JS framework
React Dev - Front End Dev who specializes in React. Probably won't be expected to know Angular or Vue
Thanks bro!!!!
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 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.
Thanks man love the explanation 😭
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?
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
How to complie all html pages in a single file because I will uploading on blogger
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.
You are Rocking Man..... Thank you so much for this 😘😘
Shit bro, I've been looking for this for quite sometime. Thanks bro.
My attempt to style two HTML pages did not result in any change to the webpage.. Can some body help me out please..?
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.
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.
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
how do i link the css to another folder?
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?
nice and easy to understand video. Thank you!
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.
Short, precise, upto the mark! Amazing explanation as well. Keep it coming 👍👍👍👍👍👍👍😊😊😊😊🙌🙌🏼
what app do you use?
"coz everybody likes pink"😂
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
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 ruclips.net/video/2m31n2n312/видео.html
Thank you so much!! This helped tremendously
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!"
Bro thought he said sum
Big help thanks! I'm not overthinking anymore haha.
any idea when the next video will be out finding these so helpfull and cant wait for the next vid
This week for sure. Hopefully Mon or Tues
Thanks heaps!!
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, what's the extension which auto-fills that link to the CSS?
Very good sir
Many thanks
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
the link to the code is not the same as whats on screen could it not just be a notpad file to download? Ive just deleted as you tube took me to the wrong video supper helpful you tube
TY but how do i remove the line and change color and font?
What line
If your referring to horizontal line then just go to css and type hr{ color: red;}
Thanks for the help!
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