HTML CSS TUTORIAL FOR BEGINNERS - multiple pages
HTML-код
- Опубликовано: 7 сен 2024
- Setting up multiple pages in HTML + CSS is easy, there are just a few gotchas to be careful of! VIEW THE CODE: next.plnkr.co/...
You'll start by creating multiple HTML pages. They can be in the same folder, or in their own folder, it doesn't matter, you just need to know where to point to them. Then, you simply make A tags to point to them. In HTML, when referencing a file, beginners tend to make 2 mistakes - they don't spell the file name right (or use capital/lowercase letters on accident) OR, they don't point to the right location for the HTML/CSS file. If the HTML or CSS file is in a folder, you need to reference the folder as well.
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~
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!
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!
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
Thank you, Sir. I have been scrolling all day looking for something like this. You are a star
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.
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
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 ! :)
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
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)
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!
Your voice is so awesome to understand everything, my problem has been solved for multiple pages.
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".
Thank you so much; I kept getting confused on how to link pages together until now.
Very good explanation, helping me now with a college project.
Thank you.
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 !!!!!!!!!!
You make it so easy to understand! Thanks!
thank you so much man you deserve 10 million subs you are a life saver of a lot of people including me
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 a lifesaver 😭 I'm literally crying bruh
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.
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!"
Thank you so much .... I was stuck but now I made a beautiful website with multiple pages....
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.
wow the great experience with your coordination of website .. fantastic and real improvement is switch on.
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 😊
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.
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!
🤦♂️🤦♂️🤦♂️ and here's me thinking it's gonna take onClick and stuff like this!
Honestly! It is so easy!
Thanks man!
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?
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???
you're really good teacher damn
i've just stucked so u helped me sm thx
Your tutorial videos are very easy to absorb. I really do appreciate all your content. Keep it up.
You are the best teacher ❤❤
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.
so insanely helpful and simple. thank u bro
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.
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😊
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
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?
Thank you so much im a starter coder and this helped me alot
Wow this is the best video I watch about tutorial. Thank You so much for all this video GB
Thanks for this Tutorial.
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.
made css very easy ! love it.
Awesome Videos... this will help with my new created company in the SEO world.
You are Rocking Man..... Thank you so much for this 😘😘
My attempt to style two HTML pages did not result in any change to the webpage.. Can some body help me out please..?
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.
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 have problem, i cant link locations and contact, it doesnt working. It only acept for index.html
I need help! Asap
Ty😄
Short, precise, upto the mark! Amazing explanation as well. Keep it coming 👍👍👍👍👍👍👍😊😊😊😊🙌🙌🏼
When will the next video be released?
if i have 10random efect pages should make 10style.css for every page or you can change every page whit one style.css
or i can youse same style.css and youse for every link class and then in style.css change every class for every page somthing like that
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
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! 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 bro!!!!
Thank you so much!! This helped tremendously
Big help thanks! I'm not overthinking anymore haha.
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.
hello could you help me please i dont know what to do the link isnt working?
Which software do u use for coding??pls tell
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
Thank you for this, very simple.
nice and easy to understand video. Thank you!
@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
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 . .
when creating a website do you use one CSS file for each page? I'm a beginner.
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.
Is there any way of getting around having to edit every single page when a change is made without using a framework?
Thanks man love the explanation 😭
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
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 ;)
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")
How to complie all html pages in a single file because I will uploading on blogger
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
Shit bro, I've been looking for this for quite sometime. Thanks bro.
For some reason my css link doesn't work, does anyone know why is that?
Thank you
Thank you, this was very helpful.
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
Thank you so much!
OMG Thank you so much - you helped me THANK YOUUUUUUUUUUUUUU
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?
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?
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
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?
i am late but that happens to me too
did you find a solution?
Nice tutorial
good job - very clear - thanks - old tony