Тёмный

HTML CSS TUTORIAL FOR BEGINNERS - multiple pages 

LearnCode.academy
Подписаться 769 тыс.
Просмотров 562 тыс.
50% 1

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/edit/PKoGCHFccc...
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...
~-~~-~~~-~~-~

Хобби

Опубликовано:

 

28 ноя 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 263   
@HolyCheezeNipz
@HolyCheezeNipz 6 месяцев назад
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
@gtcross4512 3 месяца назад
😅 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
@chrisrelated_
@chrisrelated_ 4 года назад
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 ✊🏾
@Vizia219
@Vizia219 4 года назад
For those wondering what the a stands for in , it stands for anchor.
@JenniferStewart100
@JenniferStewart100 4 года назад
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!
@zantvr6314
@zantvr6314 2 года назад
you make it so quick and simple. Thanks for not overdoing the video with unnecessary crap
@sebastianwolf499
@sebastianwolf499 4 года назад
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.
@puseletsobushy8074
@puseletsobushy8074 2 года назад
Thank you, Sir. I have been scrolling all day looking for something like this. You are a star
@baltaza
@baltaza 3 года назад
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.
@fmtuby
@fmtuby 2 года назад
Not everyone has a natural ability to make people things understand, especially technical stuff, mate you are among those few who do!. great work!
@ShabbyVelarde
@ShabbyVelarde 4 месяца назад
nahhh i've been searching for it many times but this dude got my respect
@master-ik9ro
@master-ik9ro Год назад
This is actually Gold! Many Thanks From me, a coding newbie in a tiny town in Nigeria!
@johnleon
@johnleon 4 года назад
This is literally the most useful html tutorial I've ever seen. The way it is explained is perfect. Thanks a lot
@deansummer1356
@deansummer1356 4 года назад
Yes, I needed that.
@dianadaviana
@dianadaviana 5 лет назад
thanks a lot ! cant wait for the next one!
@raymondschaefer3566
@raymondschaefer3566 3 года назад
Thank you so much; I kept getting confused on how to link pages together until now.
@MultiOlelukoe
@MultiOlelukoe 4 года назад
Very good explanation, helping me now with a college project. Thank you.
@artyono9002
@artyono9002 4 года назад
Thanks man so much! I really like your tutorials, its easy to understand from you and you explane everything how its need to be!!
@nathalievanbellegem5313
@nathalievanbellegem5313 2 года назад
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!
@elitecombine5373
@elitecombine5373 5 лет назад
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.
@vinodappu100
@vinodappu100 2 года назад
wow the great experience with your coordination of website .. fantastic and real improvement is switch on.
@kabirbhai2441
@kabirbhai2441 11 месяцев назад
Your voice is so awesome to understand everything, my problem has been solved for multiple pages. Thank you
@siadetx7552
@siadetx7552 Год назад
thank you so much man you deserve 10 million subs you are a life saver of a lot of people including me
@jefflambert7513
@jefflambert7513 2 года назад
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 !!!!!!!!!!
@magicman8516
@magicman8516 Год назад
its tag because there already is tag used in heading for linking a .css file to a .html file
@VEOdev
@VEOdev 2 года назад
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
@ItsAnnieKB
@ItsAnnieKB Год назад
Thank you so much .... I was stuck but now I made a beautiful website with multiple pages....
@unruly_ronin
@unruly_ronin Год назад
What a lifesaver 😭 I'm literally crying bruh
@evansteph
@evansteph 3 месяца назад
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 ! :)
@markreyes8291
@markreyes8291 2 года назад
Your tutorial videos are very easy to absorb. I really do appreciate all your content. Keep it up.
@obaidullahnoori8805
@obaidullahnoori8805 3 года назад
made css very easy ! love it.
@withmoshka
@withmoshka Год назад
you're really good teacher damn i've just stucked so u helped me sm thx
@harie8035
@harie8035 5 лет назад
You are Rocking Man..... Thank you so much for this 😘😘
@abdulfathaah2464
@abdulfathaah2464 3 года назад
Thank you so much im a starter coder and this helped me alot
@microdoulo2250
@microdoulo2250 4 года назад
Wow this is the best video I watch about tutorial. Thank You so much for all this video GB
@justinlong4331
@justinlong4331 2 года назад
Thank you so much!! This helped tremendously
@carljoshuaricafrente5387
@carljoshuaricafrente5387 3 года назад
Thank you for this, very simple.
@gatmaitap6611
@gatmaitap6611 3 года назад
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 ,
@mumbaikachallenge5526
@mumbaikachallenge5526 2 года назад
Thanks man love the explanation 😭
@maxwee5276
@maxwee5276 3 года назад
Thank you so much!
@LearnWithBelkhair
@LearnWithBelkhair 3 года назад
Thanks for the help!
@trucduongthanh5524
@trucduongthanh5524 Год назад
nice and easy to understand video. Thank you!
@cliffjewels
@cliffjewels 5 лет назад
Thanks bro!!!!
@rabaa9352
@rabaa9352 8 месяцев назад
You just don't know how awesome your explanation is... Thanks a lot. You stopped uploading for a long time.. I hope u r fine..
@simplifiedsolutionseo1657
@simplifiedsolutionseo1657 4 года назад
Awesome Videos... this will help with my new created company in the SEO world.
@zealdfelix3577
@zealdfelix3577 2 года назад
Thank you, this was very helpful.
@Fumsta
@Fumsta 3 месяца назад
You are the best teacher ❤❤
@michaelpanchu8738
@michaelpanchu8738 4 года назад
Big help thanks! I'm not overthinking anymore haha.
@TheWeeklybite
@TheWeeklybite 3 года назад
thank you Great job!
@PuzaExplores
@PuzaExplores 4 года назад
Short, precise, upto the mark! Amazing explanation as well. Keep it coming 👍👍👍👍👍👍👍😊😊😊😊🙌🙌🏼
@tonyfreehauf4463
@tonyfreehauf4463 4 года назад
good job - very clear - thanks - old tony
@yusufmohammad6589
@yusufmohammad6589 3 года назад
Very good sir Many thanks
@heptagaming2k5
@heptagaming2k5 Год назад
Thank you so much
@alexgieder9107
@alexgieder9107 2 года назад
THANKS SO MUCH
@nevinkuser9892
@nevinkuser9892 4 года назад
Great video bud. Your voice is on par with Morgan Freeman. Great info. My question was quickly answered, Much appreciated.
@learncodeacademy
@learncodeacademy 4 года назад
Awesome to hear it helped you! Haha, and Morgan Freeman...I'm totally taking that one :) . Have a good one!
@frank_9058
@frank_9058 2 года назад
Thank You!!!
@PagDim
@PagDim Год назад
Nice tutorial
@Pankaj-Verma-
@Pankaj-Verma- 3 года назад
Thank you.
@uzairabdullah208
@uzairabdullah208 3 года назад
🤦‍♂️🤦‍♂️🤦‍♂️ and here's me thinking it's gonna take onClick and stuff like this! Honestly! It is so easy! Thanks man!
@satyajitchattopadhyayyt
@satyajitchattopadhyayyt 4 года назад
Very important video.
@charliecalunsag2384
@charliecalunsag2384 3 года назад
Thanks u im new subscriber i hope i can see more or lot of information thanks a lot 🍻
@tobie5730
@tobie5730 2 года назад
Shit bro, I've been looking for this for quite sometime. Thanks bro.
@Hassankhan-oy5ep
@Hassankhan-oy5ep Год назад
Thanks man
@yourfellowmuslimyagi2065
@yourfellowmuslimyagi2065 3 года назад
Thank you
@CCLLRRKK
@CCLLRRKK 5 лет назад
love it
@yglol623
@yglol623 3 года назад
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!"
@galuscagabriel1123
@galuscagabriel1123 3 года назад
thx a lot men!
@blablabla5847
@blablabla5847 4 года назад
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 ;)
@ahmadazad8300
@ahmadazad8300 4 года назад
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)
@mraflateen571
@mraflateen571 2 года назад
thankyou bro !!!!!!!!!
@FrozenAssassine
@FrozenAssassine 3 года назад
Really helpful
@willcm896
@willcm896 3 года назад
Thankssss!!!!!!!!!!!!!
@moomonsta9986
@moomonsta9986 5 лет назад
When will the next video be released?
@mcwan7076
@mcwan7076 2 года назад
thank you
@cattuswood5752
@cattuswood5752 3 года назад
Thanks bro
@bdrsubuntu3159
@bdrsubuntu3159 4 года назад
so far so good
@Imbeded
@Imbeded Год назад
thx soo much
@rorh6462
@rorh6462 4 года назад
when creating a website do you use one CSS file for each page? I'm a beginner.
@annanyabiswas9957
@annanyabiswas9957 4 года назад
Thank you sooooooooo muchhhhh🤩🤩🤩🤩🤩🤩🤩🤩🤩
@moomonsta9986
@moomonsta9986 5 лет назад
any idea when the next video will be out finding these so helpfull and cant wait for the next vid
@learncodeacademy
@learncodeacademy 5 лет назад
This week for sure. Hopefully Mon or Tues
@moomonsta9986
@moomonsta9986 5 лет назад
Thanks heaps!!
@apporvaarya
@apporvaarya 5 лет назад
thanks buddy :)
@artancreators
@artancreators 2 года назад
Thanks
@Nagushelp
@Nagushelp 4 года назад
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???
@apporvaarya
@apporvaarya 5 лет назад
your tutorials are the best :)
@vincentv.berchem2085
@vincentv.berchem2085 4 года назад
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")
@dmytrodavidenko6889
@dmytrodavidenko6889 5 лет назад
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
@learncodeacademy 5 лет назад
Love it! Thanks for doing the lookup!
@jakethecreep5782
@jakethecreep5782 4 года назад
Hey, what's the extension which auto-fills that link to the CSS?
@abanimohanty550
@abanimohanty550 3 года назад
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
@appychd
@appychd 5 лет назад
Hey Will, Please do a video on graph databases
@learncodeacademy
@learncodeacademy 5 лет назад
There's a lot of fun database videos I want to do once I'm done with the beginner's stuff! First, up, though, are some React updates, and possibly Docker/Monitoring/Infrastructure videos.
@thegoonist
@thegoonist 4 года назад
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?
@gregagregy
@gregagregy 5 лет назад
amazing tutoirial!
@PoojaSharma-lk5cn
@PoojaSharma-lk5cn 2 года назад
Which software do u use for coding??pls tell
@ahndeux
@ahndeux 2 года назад
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.
@mariomatschgi344
@mariomatschgi344 5 лет назад
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
@AmedeeBoulette 5 лет назад
Mario Matschgi this is not what HTML and CSS is about. For that, look for Angular or Vuejs.
@learncodeacademy
@learncodeacademy 5 лет назад
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
@mariomatschgi344 5 лет назад
@@learncodeacademy Thank you. Ill try it.
@nurulashyikin966
@nurulashyikin966 3 года назад
what tools you are using? i mean, where to write the code? BRACKET? or just notepad?
@GenetetIncorporated
@GenetetIncorporated 2 года назад
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.
@adeelashfaque5764
@adeelashfaque5764 4 месяца назад
"coz everybody likes pink"😂
@Greystone76
@Greystone76 4 года назад
@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
@jacobpoore9575 4 года назад
../styles.css
@adobezev8751
@adobezev8751 3 года назад
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
@sharna3929 2 года назад
@@jacobpoore9575 you are a absolute legend, im using this method for my project portfolio, thanks so much
@PuzaExplores
@PuzaExplores 4 года назад
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
@JenniferStewart100 4 года назад
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
@PuzaExplores 4 года назад
@@JenniferStewart100 thank you so much for answering 😊
@youngdolo8
@youngdolo8 3 года назад
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?
@Joed74
@Joed74 4 года назад
hi when im in locations i cant get back to home .. i went into locations and put the ../ in but still cant return
@Manana7016
@Manana7016 Год назад
Is there any way of getting around having to edit every single page when a change is made without using a framework?
Далее
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,3 млн
How to put an HTML website online (on the Internet)
29:37
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 489 тыс.
Login Form in HTML & CSS
11:07
Просмотров 1,1 млн
The secret to mastering CSS layouts
17:11
Просмотров 263 тыс.
EASY! Hand-code an HTML + CSS layout
11:24
Просмотров 474 тыс.
HTML Tutorial - How to Make a Super Simple Website
33:24
Сделал ТАТУ на ЛИЦЕ
0:20
Просмотров 2,5 млн
Результат невероятен🤯
0:39
Просмотров 3,7 млн
ТИПИЧНАЯ МОСКВИЧКА
0:43
Просмотров 2,2 млн
Волшебные козы Монголии
1:00
Просмотров 15 млн