How to create a Simple Website with Multiple Pages using HTML & CSS

Подписаться 838

Просмотров 135 тыс.

50% 1

This video will show you how to make a Simple Website with multiple pages using HTML & CSS. You will learn how to create a navigation bar, transparent buttons, and links with #HTML and #CSS.
This tutorial is for beginners.
#htmlcss #webdesign #htmllink #samplewebsite #tutorial #websitetutorial
❤️Like & Subscribe
---------------------------
You must save your image in the same folder and write the complete path of the image in CSS file to make the image visible on your website.
👉 If this tutorial is helpful for you please like this video and subscribe to my channel to watch more website development tutorials.
---------------------------
❤️ Like this video
❤️ Subscribe to my channel
❤️ Share this video on social media
---------------------------
❤️ Recommended Videos:
How to create a Spinner Animation using HTML & CSS
► • How to create a Spinne...
How to create design a website using HTML & CSS and JavaScript
► • How to create design a...
How to create a Glowing Text Effect using HTML & CSS
► • How to create a Glowin...
How to create a Landing Page using HTML & CSS | Animation Effects
► • How to create a Landin...
---------------------------
Background Music
Music provided by Nat Keefe & Hot Buttered Rum
Track: Come With Us
Music Used From RU-vid Audio Library

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

8 ноя 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@aishwarya_jamdade 3 года назад

Thank you for making this video just when i needed it!! God bless you and me :))

@_PratikshaUnhale_N 2 года назад

It's really helpful

@arvindkumar2178 2 года назад

👍

@alvinmedia6940 2 года назад

Tanks you are best

@salahdr3253 Месяц назад

❤❤

@-gebrehertube3239 3 года назад

thank you very much

@jamescooper4108 3 года назад

I could use some help please, 4:45 when you added your image with background-image: url(); code i tried doing the same thing with my own image and I typed the name of the image I wanted to use in my example "background-image: url(background.png);" and the image isn't displaying and causing 2 errors what am I doing wrong?

@codenow1441 3 года назад

Please, upload your code somewhere ( like github) and I will check your code. And I will try to help you out.

@warriorninja51 3 года назад

I can help, instead of putting just the “background.png” make sure you have the full address of where it is saved on your computer. For example: “C:/My Website/Pictures/Background.png”. Hope this helped!

@codenow1441 3 года назад

@@warriorninja51 Nice

@BhakkarFun 2 года назад

Check IMG name

@dragomirpetrov6469 Год назад

New to coding here . Question: Apart of the linked css file with the index.html do I need to create for each navigation button/html file additional css? Is there a way to style all html files with just 1 css file? Also if I understand well this video doesn't make the nav buttons functional right?

@zill972 Год назад

ong i got the same question

@codenow1441 Год назад

Hello Dragomir, Thank you for your question. I am sorry about the delayed answer. Yes, you need to create a new .html file for every page - you can use one file if you use PHP for example, but not in HTML. Yes, you can style ALL of your pages with only 1 CSS file, you just have to call the same CSS file in the . Yes, in this video the navigation buttons are NOT functioning. To make them functional, you need to replace the hash ( this one: "#" ) in the to your other HTML files like services.html or other .html file you have for a page. If you have any questions, I am happy to answer.

@dragomirpetrov6469 Год назад

@Yanácska Coding Thank you for your response. This clarifies a lot. Following your video combined with other videos in RU-vid helped me to complete successfully my first 6 pages website. Much appreciated!

@reemalkhalily4177 3 года назад

I loved the video and it helped a lot!:) but I'm wondering where you would find a png like the logo? I tried pasting my logo onto my site but it comes with a background boxed around it. Did you just photoshop yours or did you just find it like that?

@codenow1441 3 года назад

I designed that logo. You can try to find a logo in png format on google.

@reemalkhalily4177 3 года назад

@@codenow1441 thanks, will do. Also the logo looks really good!

@codenow1441 3 года назад

@@reemalkhalily4177 Thank you very much. Have a nice day.

@codenow1441 3 года назад

@Reem Alkhalily Here is my logo link. You can take a look: github.com/yanacskacoding/logo

@reemalkhalily4177 3 года назад

@@codenow1441 that looks dope!

@anshitajain2089 3 года назад

Thanks a lot!

@Itsbadjoker Год назад

sir mujy as ma background ka size nhi pth chal ska pleas agr bta de do baqi sb fit ha

@arihantkamde9985 2 года назад

You put the file location in href but if I host the website on server how will I link that page, please help me I am currently working on a project where I need to host the website too.

@codenow1441 2 года назад

Hi. If you are talking about this line: " LOGIN " the answer is that you can replace this part "file:///D:/STUDY/1.HTML_CSS/42.%20Login%20form/index.html" with just the name of your login page, for example: "login.html" (this would work if you have a "login.html" file in the same place as your "index.html" . I hope this helps.

@arihantkamde9985 2 года назад

@@codenow1441 And then if I host my site it will work ?? THANKS FOR HELPING.

@btsxenhypen5998 3 года назад

So pretty! Can i have your whole codes please🙏

@codenow1441 3 года назад

Thank you :) You can find my code here: github.com/yanacskacoding/multiple-pages

@btsxenhypen5998 3 года назад

@@codenow1441 thank you so much! ♥♥♥

@coopstadter1211 2 года назад

@BTS BANGTANTV an other army here

@arvindkumar2178 2 года назад

Bhai in video par voice bhi add kar diya karo

@aabirraghib8826 Год назад

man,in front page i hwe Top panel,left panel,& bottom panel & central panel.i want to open a new url page in the same window(central panel).without changing other panels.just changing the content of central panel.how do i do tht in html.

@codenow1441 Год назад

Greetings friend! 🙂 Good question. Unfortunately it is not possible only through HTML (as far as I know at least). Maybe HTML5 has an option for that, but I am unsure. How I would do it is using either PHP or Javascript. With PHP is easy to handle dynamic content, BUT you need to have a webstorage/webserver which supports PHP, as it works on the server side. If you have a Windows machine, you can install WAMPserver on your machine, and it will allow you to use PHP, it will display it properly. OR if you don't want to install anything or have a webstorage or a machine with a webserver installed, you can use Javascript. Javascript works on the client side, meaning if you load the page in your browser the same way you load HTML pages, it will work. BUT doing it with Javascript will make your webpage "heavy" meaning it may load slower. I would go with a PHP based solution if I were you. PHP is not as easy to get into, plus you should have a webserver or webstorage setup for development, but it will teach you some useful skills. Good luck, happy learning!

@aabirraghib8826 Год назад

@@codenow1441 thank u

@iteshyt1216 2 года назад

500th subscriber😁

@codenow1441 2 года назад

Thank you very much for your support. :)

@Maha-op6nl 3 года назад

hey thank u or the vid but im struggling with the background image a bit can someone help

@codenow1441 3 года назад

How can I help you?

@N-Hector 3 года назад

@@codenow1441 can i get a link of the image you used for the background?

@codenow1441 3 года назад

@@N-Hector I tried to find it for you, but unfortunately I can not find the link.

@sameehajiyavudeen5232 2 года назад

hi can u create a website topic- about uae culture . create the website withoth java script , css , and login.

@sameehajiyavudeen5232 2 года назад

plz...

@joce7469 2 года назад

Where is the background music from? I enjoyed listening to it!

@codenow1441 2 года назад

Audio library - RU-vid

@grahamc9890 3 года назад

Thanks bro what about puing ina paymet method

@codenow1441 3 года назад

Maybe I will make a video about that later. Thank you for the idea.

@hishammohali2543 3 года назад

where I can get the images and the logo

@codenow1441 3 года назад

You can search any images on google follow your favorite. I was design this logo, so you can download logo at this link: github.com/yanacskacoding/logo/blob/main/logo.png

@mduduzimtolo4335 3 года назад

What is the name of the violin behind

@codenow1441 3 года назад

Come With Us - Nat Keefe & Hot Buttered Rum

@warriorninja51 3 года назад

May I please have the dimensions of the logo? Thanks!

@codenow1441 3 года назад

1280 x 851

@warriorninja51 3 года назад

@@codenow1441 Thanks so much!

@sahilyho2242 Год назад

Who else liked the Chick Fil-A music?

@nour3660 2 года назад

bro how do i link other pages with a link? do I make another html.index file and link in to the anchor text? like how does that work?

@codenow1441 2 года назад

If you use only HTML, when you want to create another page, you need to create another file - like example.html - at the same place where your index.html is. Once you done that, you can put a link on your index.html which if you click would take you to another page - like example.html. To add a link to another page, you can use this code: Example Page If you add this code to your index.html, you will see "Example Page" which will be clickable. And when you click it it would take you to "example.html". I hope this helps. If you have any more questions, don't hesitate to ask me.

@nour3660 2 года назад

@@codenow1441 thank you so much, im struggling anyway my nav bar is displaying in the site but the text on the tabs and everything is just white blank, only the nav bar that is showing, idk if this is my problem, but when I open the website locally everything works fine, i use netlify for hosting

@codenow1441 2 года назад

@@nour3660 Hi, if you could show me your code, or copy it in here, I can have a look for you.

@nour3660 2 года назад

@@codenow1441 alright one sec let me get my laptop

@codenow1441 2 года назад

@@nour3660 And about the logo: you need to place a picture in the same directory where your index.html. After that replace "logo.png" with the name of your image. But be careful, if the image is too big, or too small, it can effect how the site looks like.

@user-nj8gg3cn8g 2 года назад

can i have the link of the background image which u used in website plzzzzzzz

@codenow1441 2 года назад

Thank you for your comment. I am sorry, I don't have the link to that image. I have used Google Image search to find the image, you can do the same and download the image from there. I am not sure if you can find the same, but you can use any image you like.

@user-nj8gg3cn8g 2 года назад

@@codenow1441 i was thinking i will not get reply because this video was uploaded in 2020

@codenow1441 2 года назад

@@user-nj8gg3cn8g I am trying to answer all questions on all of my videos. It does not matter how old the video is.

@user-nj8gg3cn8g 2 года назад

@@codenow1441 thats v-good

@techysoul2153 3 года назад

how didi you created login page

@codenow1441 3 года назад

You can refer to this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OG_WJnTScVU.html

@aaravgk8162 2 года назад

can i get the html code & css code you used in above video please!!! its really urgent for me

@codenow1441 2 года назад

You can find the link here: github.com/yanacskacoding/multiple-pages

@aaravgk8162 2 года назад

@@codenow1441 your loving subscriber from Nepal needs your help ???please help me

@codenow1441 2 года назад

@@aaravgk8162 How may I help?

@ghritkalash8307 2 года назад

i do have one question which i m not able to solve..will you please help me out!!! may i send you the question in your insta??

@codenow1441 2 года назад

@@ghritkalash8307 What do you have trouble with?

@rupok1742 2 года назад

Sublime text editor font name plz?

@codenow1441 2 года назад

I am using basic settings, except the font size. I have increased the font size to 16.

@eshaaneshaan2095 2 года назад

hey can you tell me what is the size of your background

@codenow1441 2 года назад

Hi, I don't remember exactly, but it was a very high resolution picture. I believe it was FullHD ( 1920x1080 ) .

@eshaaneshaan2095 2 года назад

@@codenow1441 oh ok but it was really good background

@codenow1441 2 года назад

@@eshaaneshaan2095 Yes, thank you. I am really love that background too.

@editormasteryt4521 2 года назад

WHICH APP YOU HAVE USED FOR CODDING PLS TELL ME

@codenow1441 2 года назад

I use Sublime Text 3. It is a free editor. You can get it from here: www.sublimetext.com/3

@ericfeil6632 2 года назад

@@codenow1441 you beautiful man, thank you

@codenow1441 2 года назад

@@ericfeil6632 Thank you very much :)

@sohelahmmed9706 2 года назад

where I can get the images. please link

@codenow1441 2 года назад

Thank you for your comment. I am sorry, I don't have the link to these images. I have used Google Image search to find these images, you can do the same and download the images from there. I am not sure if you can find the same, but you can use any image you like.

@sohelahmmed9706 2 года назад

@@codenow1441 thanks

@tank1official248 2 года назад

Can you put all the code that you use thanks.

@codenow1441 2 года назад

You can find my code here: github.com/yanacskacoding/multiple-pages

@tank1official248 2 года назад

Thank you bro keep doing this kind of tutorial godbless.

@codenow1441 2 года назад

@@tank1official248 thank you :)

@Max-rv8ul 3 года назад

can u put the code in the comments

@codenow1441 3 года назад

You can find my code here : github.com/yanacskacoding/multiple-pages

@AshwinDK 2 года назад

How can i get the login thing

@codenow1441 2 года назад

You can find the code here: github.com/yanacskacoding/login-form Bear in mind, this is only the HTML and CSS code, so it does not come with any actual mechanics which you would need to handle user logins. You would need something like PHP or JQuery for that.

@sameehajiyavudeen5232 2 года назад

hi can u create website about uae culture

@sameehajiyavudeen5232 2 года назад

withouth explore , subscribe and login plz

@sameehajiyavudeen5232 2 года назад

and send the code plz