16 | MAKING A HERO SECTION WITH HTML | 2023 | Learn HTML and CSS Full Course for Beginners

Подписаться 471 тыс.

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

50% 1

In this video we will create a hero section together on our website! 🙂 A hero section is the first part of the website, which the user sees as soon as they enter your site, which means that this is a extremely important part to get right.
Lorem Ipsum generator: www.lipsum.com/
Royalty free images and icons:
www.pexels.com/royalty-free-i...
pixabay.com/
www.flaticon.com/
Full playlist: • 1 | INTRODUCTION TO HT...
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon and RU-vid Memberships to share improved and updated lesson material, and for a small fee you can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Memberships: / @dani_krossing
Patreon: / mmtuts

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

12 янв 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@yousifky Год назад

I don't know if you know this but you are one of the best teachers in the world. i have been watching your tutorials for year's now and every video you drop is one better than another ❤ much love and respect ❤

@Dani_Krossing Год назад

Thanks Yousif! You always leave such nice comments. 🙂

@yousifky Год назад

@@Dani_Krossing If I get out of my situation of being a refugee, I'll be your top supporter on Patreon 🤍

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

Damn you are an awesome teacher! Learned so much, genuinely loved how you explained it!

@Daddy_Sexy Год назад

I love how you explain what everything means along the way. Everything really makes so much more sense, when you know why things are the way they are and what they mean. Looking forward to the next video.

@kieranwentworth Год назад

Yet again loving the tutorials, I learnt html and css in college and now I’m able to pursue a career in this area, you are massively helping with relearning everything. Could we get more updated php lessons as I would really appreciate that. Thanks ❤

@angelukpongprogramanalyst.8942 9 месяцев назад

you are the best. you made my journey of 3 years had to understand what is going on just simple in minutes.

@noestephenzimba9213 Год назад

I have been glued to this Channel approx. 10hrs today, I am learning a great deal out of these Tuts. Thanks Dani. Appreciated. You are a great Teacher!

@Dani_Krossing Год назад

Glad you are enjoying my videos ☺

@arshad1781 Год назад

Thanks for sharing free knowledge

@alexandruristea-journeytol4766 3 месяца назад

Really good teacher ! Thanks , man ! I have really struggled with layouting, positioning .... I now have a better idea on how to do it and it helped me set up my first homepage :D I have gotten compliments on it :D

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

Great Job! A little hint though, there is an extension is vs code called live server, and it automatically updates your page when you save, so you don't have to refresh after each edit!

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

Have to say Dani I really appreciate the way you provide explanations to what you are doing on screen. I've watched many videos on Html and CSS and many are very good but don't go into the why and what happens if scenarios that you do so well. I didn't realise that you could have two background pictures on the same line of code for the hero page. That said, I was a bit confused when you changed the height to 70VH, in that the actual colored background didn't seem to change in size? Might have to try and duplicate what you did and see the result. Will continue working through the whole series. Thankyou - Paul

@ayushthakur9254 Год назад

Too good mate

@denhamk 2 месяца назад

These videos are just 👌👌👌👌 ... so many little pieces of gems that you share! Thank you.. Pleasee can you do a video about creating MegaMenus? maybe with this same website? Thank you!

@guli670 Год назад

Tthank you👍

@s3v3n-rb2rz 5 месяцев назад

16:35 When I add margin here, the header slides down and the issue remains. What do I do? edit: doing padding instead fixed it.

@namycodes Год назад

I love your coding 👀

@troyeinstein9487 Год назад

This might sound a little off, but I just began learning web dev thru Edx and using other important web resources like W3 school. It is interesting yet a little confusing, so my question is: why didn't you use the tag for the quote? Is it a question of choice? Thank you! Oops by the way forgot to mention than - and your tutorial series for HTML and CSS. Thanks again 🙏

@Dani_Krossing Год назад

Using a would be more appropriate there 🙂 So just change that if you feel the need ☺

@Ennie-ix2od Месяц назад

Hi, I'm using your tutorial for my portfolio website can I know what was the size dimension you used for the hero background (both please)?

@kofikwame2175 3 месяца назад

Thanks Dani for these amazing but free videos. You have made HTML and CSS become easier to learn than expected. But please my Hero image ( not the the background image), when I added it first, it overlapped just like yours. After adding { background-size: 70vh, cover background-position: bottom, center } My image fit to the whole page unlike yours that has some margin at the top. Meanwhile I have followed and repeated your code several times but still get the same results. What could be the problem here please?

@enfysgreen2758 Год назад

geat vid love how u explain every thing in detail are u planning on using javascript later on or php ?

@alexandruristea-journeytol4766 3 месяца назад

As I have seen later on in his videos, he uses php. Which is sort of better for europe, but not do helpful for the U. S..

@tanny_edits Год назад

How do you export the pattern in a png format in PS?

@seand6906 Год назад

Nice use of "relative"

@stoneroot_pk 6 месяцев назад

I am trying to follow each and every step you are teaching here. Trying to write the same text as possible for me. But I am facing two problems and couldn't get what I did wrong. 1: I wrote a{ ..} in main.css. My menu bar links went in white color and when I removed the #fff from main.css my ONLY anchor tag in index.html where My Work becomes black font, I mean CSS is not working for only this part. I went back and checked all the tutorials but still couldn't figure out what was happening. a{ font-size: 14px; line-height: 18px; color: #fff; font-family: 'Roboto', sans-serif; cursor: pointer; } 2: When I wrote this in index.css main{ width: 100%; height: calc(100vh - 60px); background-color: darkblue; margin-top: 60px; } The dark background is now above the Main menu 😭😭 this didn't work as you are doing in your tutorial. Kindly help me, sorry for my too long comment/message here. Regars Maima

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

how did u add the words on the image of yourself, please reply me

@djfago6240 Год назад

I always click on like before watching your videos .you never disappoint us.

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

how do i get an image like the one you used in this video? without background.

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

Mobile phone camera, and a photo editing software, like Photoshop 🙂

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

@@Dani_Krossing can it be done with Canva?

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

Yes Canva is also the photo editing software my wife uses to crop 🙂

@Reflection-iu2vg 7 месяцев назад

the image used in this. provide me with the link please

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

only my main section changed colour when i added background colour any help

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

I would need to see your code in order to help. 🙂 Did you make sure to add a background color to the body element? And do a "hard refresh" inside the browser? A hard refresh is sometimes necessary since the browser stores a cache, which saves your previous styling.

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

@@Dani_Krossing MAIN-CSS :root { --site-color-01: #c13584; --site-color-01-hover: #9e2f6e; } body { background-color: #1d1d1d; } body:after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../img/facebook-color.png) url(../img/instagram-color.png); } h1 { font-size: 26px; line-height: 32px; color: #fff; font-family: Roboto; font-weight: 600; text-transform: uppercase; } p { font-size: 14px; line-height: 18px; color: #fff; font-family: Roboto; } a { font-size: 14px; line-height: 18px; color: #fff; font-family: Roboto; cursor: pointer; } .header-main { position: fixed; top: 0; width: 100%; height: 60px; background-color: #fff; display: flex; justify-content: space-between; z-index: 1000; } .header-main-logo { width: fit-content; height: 100%; padding-left: 60px; display: flex; } .header-main-logo img { height: 40px; align-self: center; } .header-main-nav { width: fit-content; height: 100%; } .header-main-nav ul { list-style: none; margin-left: 30px; } .header-main-nav ul li { display: inline; float: left; } .header-main-nav ul li a { padding: 0 10px; font-family: "Roboto", cursive; line-height: 60px; color: #000; display: block; height: 100%; } .header-main-nav ul li a:hover { color: #c13584; } .header-main-sm { width: fit-content; height: 100%; padding-right: 60px; display: flex; align-items: center; column-gap: 10px; } .header-main-sm-fb { width: 20px; height: 20px; background-image: url(../img/facebook.png); background-repeat: no-repeat; background-size: cover; } .header-main-sm-fb:hover { background-image: url(../img/facebook-color.png); } .header-main-sm-in { width: 20px; height: 20px; background-image: url(../img/instagram.png); background-repeat: no-repeat; background-size: cover; } .header-main-sm-in:hover { background-image: url(../img/instagram-color.png); } INDEX CSS: SO FAR main{ width: 100%; height: calc(100vh- 60px) ; background-color: #1A253A; margin-top: 60px; background-size: 70vh, cover; } RESET.CSS{ /*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ *:where(:not(, canvas, img, svg, video):not(svg *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Remove list styles (bullets/numbers) in case you use it with normalize.css */ ol, ul { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* Removes spacing between cells in tables */ table { border-collapse: collapse; } /* Revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } (HTML) My First Website Home Gallery About Us Contact Welcometo my firstwebsite Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quos fuga obcaecati ullam quidem ipsam, cupiditate, in ea aspernatur excepturi est laboriosam quae nihil iure dolorum odit ducimus omnis voluptatum! MY WORK The more that you read, the morethings you will know.The more thatyou learn,the more places you will go. - Dr.Seuss For the best return on your money,money pour your purseinto your head. - Benjamin Franklin

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

According to your CSS (at a quick glance), your website background is a white/light grey color, and only the main element has a different color. If you want a different color for the website background, make sure to change it in the main.css styling.

@Stoney_Eagle Год назад

You are the here on our websites now 🤣

@user-my5lr8pz5j 4 месяца назад

It is a shame that some authors makes good videos like these and then not make the code available. If one is giving away knowledge for free then one should not hold back. I'm having to type all the code but what makes me irritated is that the images aren't available either. I know I could pay a fee for the material but that's not the point.

@Dani_Krossing 4 месяца назад

I have to pay my bills, and this is the solution the majority of my viewers came up with. So unfortunately this is how I do things. :)

@user-my5lr8pz5j 4 месяца назад

@@Dani_Krossing Fair enough.