How To Make A Website Header Using HTML And CSS Step By Step | Web Design In HTML & CSS

Подписаться 1 млн

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

50% 1

Learn How To Make A Website Header Using HTML And CSS Step By Step | Web Design In HTML & CSS Tutorial
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Here in this video we will create a travel website header section using HTML and CSS. On this web page we will make a navigation bar with logo, some links and menu icon.
after that there will be 2 columns with some title, text and images. We will also learn to create hover effect on Image.
Download Images: drive.google.com/file/d/1ZbDT...
-------------------------------------
Recommended Videos:
Complete HTML and CSS course for beginners
► • HTML And CSS Tutorial ...
Create Login and Registration form using HTML CSS
► • How To Make Login & Re...
Make Contact us page in HTML and CSS
► • How To Make A Contact ...
Create Range Selector Input filed using HTML & CSS
► • How To Make Range Slid...
Make Full Website With HTML and CSS
► • How To Make Complete W...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialspro.com/
------------------------------------
Image Credit:
pexels.com/
freepik.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr

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

8 авг 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Indians are the best for real, thank you for this amazing tutorials

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

Thank you so much 😀

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

Programming By TSH -- This channel is so good too

@zaeltrus Год назад

So many people look down on them, but they are the ones who have brain paired with humility and creativity. Almost all guides I need are made by them and they are all great.

@righteousblessed Год назад

you are the best, its my first time that i create a website, i am glad that you are doing a great job. i cant tell you how happy i am, i follow your each and every step and got the same design. it took me 5 hours, it was bit hard for me in start, but i keep trying and now i have completed it, i dont know even a b c of html, but i did it. may you live long , lots of prayers for you.

@thaido1750 Год назад

INSTANT SUBSCRIBED, it has never been wrong when you need help in coding from an Indian guy, you guys are best, love from Vietnam

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

Very inspired by your tutorials! Keep the good work going on

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

Hey Easy Man please Make video on Backend . If You Have FirstHand Experience in That field

@0001-exe 3 года назад

I FOUND THE ONE. THIS CHANNEL HAS FREAKING EVERYTHING I NEED TO KNOW ABOUT CSS LIKE WHAT AAAAAAA THANK YOU SO MUCH

@ShahadatHossain-gz2cw 2 года назад

Asia and a433

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

That’s correct

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

Thank you. Really great tutorial! It feels good to be able to learn and build at the same time

@isroxy33 Год назад

Me to i feel good thank you tutoria

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

This is a really good frontent tutorial, being a developer I can see you have a really good eyes for design. I think you should try to explain some advanced tags so beginner's can understand better. Thou, your content is good, I wish to start using voice over for my videos as well.

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

Programming By TSH -- This channel is so good too

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

Perfect ! Thank you ❤️

@drstrange6571 Год назад

Well explained!! Gained good knowledge in HTML and CSS after watching this video..

@_Lalunal_ 8 месяцев назад

Amazing!!! Thanks for the tutorial!!

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

Man You are a genius🔥🔥🔥

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

It's Soooo Beautiful ❤️!!! Thank You Sir 👍👍

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

You are a STAR -- Thank You so much

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

After a long time searching in RU-vid, I find a correct channel to learn web developer, your explaining each and every point very clearly thank you sir👍👍

@patrickdjivo3862 Год назад

All your videos are perfect! Thank you so much

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

thank you good sir! you give me another point of view how to use the CSS

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

Since I found your channel... Web design has been so much fun and I'm always looking forward to your new videos

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

Happy to hear that!

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

@@GreatStackDev which screen recorder do you use...

@NimeshFernando-vq9dl 9 месяцев назад

Thanks bro this video help me to do my course work as my wish all the best do more contents

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

Thank you sir. I learn a lot with your channel!

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

Awesome man! Loved it.

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

Really. It's a very helpful tutorial. Thanks

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

Thank you so much. It is really helpful

@margretmauno1285 9 месяцев назад

Youre such a blessing... OMG!

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

Loved the video. You made it appear so simple lol

@AkashRaj-vj6br 7 месяцев назад

Thank you so much for such a great explanation

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

Hiii thank, you for speaking and explaining in videos, it's very helpful

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

You are a great developer..... Love you sir......

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

Very nice and well presented tutorial!!! BUT .... the design is only applicable to desktop. For tablet and mobile phone, the functionality is a total fail. It's 2020, and website design must be fully responsive, otherwise it has no practical use. Would be very helpful if you create a follow-on tutorial to extend the design to tablet and mobile phone (perhaps using bootstrap or tailwind). In any case, thank you for your effort.

@Gamer_Guy2.0 11 месяцев назад

Great Tutorial, I really Understood Everything

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

Thank you for this effort and please use the media query in the next videos

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

I admire your courage brother. Keeep it up, can I suggest a video tutorial for you to create!? Greetings from Tanzania 🇹🇿

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

Good sir i really appreciate you work keep it up.😍😍😍

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

thank you for sharing this with us!!

@003charles 7 месяцев назад

Thank you! This is a great video. Very concise. What size are the pictures? I used my own and I did not get the images in a set like yours.

@GreatStackDev 7 месяцев назад

Glad you liked this tutorial. You can check the image size by downloading my images from link given in the description

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

Excellent tutorial.many thanks .Zakir

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

Sir, Have you used css3 & and html5 in this video or just css & html ? please answer sir

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

Amazing explanation 😍😍

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

I love your web page its awesome

@fraidebdl3292 Год назад

I'm always satisfied with your tutorial it's help me a lot for learning html and css

@GreatStackDev Год назад

Glad you enjoy it!

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

Thank you! Really helpful :)

@aditideshpande3799 Год назад

thanks a lot, man! helps beginners.

@ram-cy3gi 11 месяцев назад

thank you so much i was about to fail my html class and u helped me god bless you and ur family i love you so much. if u are looking for a wife i can be yours

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

Really I love this video i learned a lot from such amazing video thank you so much

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

My pleasure 😊

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

thank you so much it was really helpful

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

Good job please my bro don't stop this lessons🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

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

A really good viedo, it helps me a lot! I just wanted to know if you can show us how to make it responsive! Ty

@kunzjulija3201 11 месяцев назад

thank you, great job!

@SBDVlogs Год назад

very very lots of thank you brother.. will be thankful to you always

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

Super sir 🌹🙏 thank you so much sir 🙏🙏🙏

@roswaaal Год назад

A great video. Pretty easy to follow along👏🏼👏🏼

@ram-cy3gi 11 месяцев назад

hey man, sorry about the harsh words. i came back to thank you for this wonderful video

@kennethmuchui4660 Год назад

Hello am a very big fun of your content, am teaching am self web development and I was asking if you could make a video explain the meaning of some of the CSS tags like for example justify content, translate -y etc and when to use them kindly. thank you

@ThuRainKyawZawl 24 дня назад

Thanks for this tutorials

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

Thank you for sharing this tutorial. However, I'm a little confused as to why you didn't do anything with the hamburger menu / make the navigation responsive at smaller view port. I followed the whole tutorial but that part seems to be left out.

@abdultaqui6361 Год назад

Wh compiler to use?

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

Thanks Bro 😊

@ibrahimhany7268 8 месяцев назад

Thanks ❤

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

very nice explained and made my first website by seeing your video thanks for making video

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

Glad it helped

@dokja_king Год назад

thank you sir i really appriciate your works sir thanks a lot

@hart-coded 3 года назад

really enjoy, so simple to follow, great design, please responsive much appreciated

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

so was it able to be responsive?

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

I think I was wasting my time scrolling on other channels.now i got the one i was looking for

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

Gracias, saludos desde México

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

For some reason my element created a white space and is below the background image. Any tips? Edit: Nevermind I didn't place the row inside the container . Whoops!

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

Perfect⭐️

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

Great tuto. Thanks !

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

Thank you sir, success and always healthy

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

Can u send me cod plz

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

Thank you 💕

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

Great work, thankyou veryyy very much ;-)

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

hi do u gave some vidieo when u open some contact or about it will openanother pages?

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

Really helps so easy coding method.. thnx

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

You are welcome

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

Great video, question: how is it that when you specifcy which image each card will show you need different class names to differentiate (card card 1, card card 2, etc.) but when you changed the font in CSS later you changed the color of the text without having to write multiple class names, around 99, you only wrote: ".card " and it worked on all of them, is it because the text is not connected to each image, and rather is an entity on its own?

@Aderynn Год назад

Think of card1 as a subclass or child of card. So "card card1" is like "parent child grandchild", where grandchild inherits from child, and both grandchild and child inherit from parent. So any info you specify for the first one (card or parent) will apply to any of the subclasses of children (card1 or child) unless you override it. Compare earlier in the video he uses ".nav", ".nav ul li", and ".nav ul li a" to specify which of the subclasses the code applies to. Hope this is (still) useful.

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

Fantastic ThankU!!

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

Sir you are great

@NerdyXRPanda Год назад

BRO! Thank you!

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

Thank for the tutorial Eminem (Rap God)

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

ahahahahhahaha lol...and I thought I speak fast!!

@abufrontend128 Год назад

Hi i loved this tutorial but i have a question i wrote that transistion:transform 0.5s; and i added card:hover but it doesn't work can you please help?

@Raaj_11 Год назад

Thank you 😊

@cncmachinistaartist2160 Год назад

hoping to see your tutorial webdesign sir your good ...

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

Thank u sir 👍, it's really helpful

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

Thanks Kiran

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

Good day! How do you fix the first card, because I also use the card coding on the CSS, and the first card wasn't showing the result, unlike the second, third, and fourth card, they showed beautifully, while the first card remained out of nowhere, and not fixed? What should I do about it? Can you please reply to this, I am making my project and it is nearly deadline. Thank you!

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

Absolutely good video

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

Hii, ur tutorial is awesome bt when I follow these and I will trouble in mobile and desktop responsive. You do responsive design also

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

thank you very much you helped me a lot! keep up

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

Glad it helped!

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

Your videos are very helpful. I really appreciate for your great work. Can you kindly help me on how you managed to align images in square form next to Sahara. for me my images are appearing in horizontally. Thanks.

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

Programming By TSH -- This channel is so good too

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

@@GamingTSH Yeah. This man is good to go.

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

Programming By TSH -- This channel is so good too

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

I have the same problem!! Do you solve it

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

@@muaidmohamed5787 No

@okaarwansyah6626 Год назад

thankyou Mate!

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

Another great tutorial . 😍🤩🤩😍. will it be responsive for phone resolution?

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

no it's not responsive will make another part for this. for now you can check this video to make any website responsive: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HHtMMS42cWs.html

@thebrotherltd9546 Год назад

Thank You Sir

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

Thanks..also include the website responsiveness in your tutorials

@ATC728 7 месяцев назад

Can use display inline blcok instead flex

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

Thank you soo much sir. I am your big fan.

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

Thank you suraj brother

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

good job, thank u

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

from Egypt 🇪🇬💕

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

Nossa que massa! Você faz isso em 10minutos kkk ! Muito Bom fiz Certinho.

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

Programming By TSH -- This channel is so good too

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

Né kkkk esses indianos são demais

@jkiidev 10 месяцев назад

hhh I mean I can 1 hours, but he's only 10 minutes bruh

@user-rt4ej3rw3r 7 месяцев назад

Great helping video

@abanghengker2473 Год назад

thank youuuuuuu MASTER

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

Make a video....please.... Static website to daynamic website with wordpress....

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

Спасибо автор, ты лучший

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

Ага)

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

thank you!

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

Great project , I'm going to add some javascript to make it more interactive

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

Can you make a video of javascript i want to learn it please bro with hindi voiceover

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

@@halaldose4594 sorry bro, I don't speak Hindi. I'll post the code though, all I wanted to do was just add an event listener to change background image after you hover over each image

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

@@scorpion32 ok bro please give me the source code of it

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

@@halaldose4594 As soon I build it I'll put it on GitHub. What's your email?