No video
16 | MAKING A HERO SECTION WITH HTML | 2023 | Learn HTML and CSS Full Course for Beginners
Рет қаралды 36,868
Күн бұрын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...
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 KZfaq 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
@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 🤍
@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 ☺
@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.
@angelukpong Жыл бұрын
you are the best. you made my journey of 3 years had to understand what is going on just simple in minutes.
@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 ❤
@abdulmuhsinbaksh8757 Жыл бұрын
Damn you are an awesome teacher! Learned so much, genuinely loved how you explained it!
@GarciaFerrufino 2 ай бұрын
I love how you lay everything down it's nothin short of amazing
@alexandruristea-journeytol4766 6 ай бұрын
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
@paulcharman8113 Жыл бұрын
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
@abdulmuhsinbaksh8757 Жыл бұрын
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!
@arshad1781 Жыл бұрын
Thanks for sharing free knowledge
@ayushthakur9254 Жыл бұрын
Too good mate
@denhamk 5 ай бұрын
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!
@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 ☺
@namycodes Жыл бұрын
I love your coding 👀
@maxlolol007 3 ай бұрын
I whant to thank you for these Videos. It helped me a lot to understand how the things work. Can i ask you how you create the Background? You sad that you created it by yourselfe but how? :D
@kofikwame2175 7 ай бұрын
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?
@Ennie-ix2od 5 ай бұрын
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)?
@guli670 Жыл бұрын
Tthank you👍
@seand6906 Жыл бұрын
Nice use of "relative"
@omisorefranklin9786 5 ай бұрын
how did u add the words on the image of yourself, please reply me
@enfysgreen2758 Жыл бұрын
geat vid love how u explain every thing in detail are u planning on using javascript later on or php ?
@alexandruristea-journeytol4766 6 ай бұрын
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..
@stoneroot_pk 9 ай бұрын
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
@tanny_edits Жыл бұрын
How do you export the pattern in a png format in PS?
@djfago6240 Жыл бұрын
I always click on like before watching your videos .you never disappoint us.
@Reflection-iu2vg 10 ай бұрын
the image used in this. provide me with the link please
@bigbeuh Жыл бұрын
how do i get an image like the one you used in this video? without background.
@Dani_Krossing Жыл бұрын
Mobile phone camera, and a photo editing software, like Photoshop 🙂
@bigbeuh Жыл бұрын
@@Dani_Krossing can it be done with Canva?
@Dani_Krossing Жыл бұрын
Yes Canva is also the photo editing software my wife uses to crop 🙂
@Stoney_Eagle Жыл бұрын
You are the here on our websites now 🤣
@jaceayo1929 Жыл бұрын
only my main section changed colour when i added background colour any help
@Dani_Krossing Жыл бұрын
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 Жыл бұрын
@@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 Жыл бұрын
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.
@user-my5lr8pz5j 7 ай бұрын
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 7 ай бұрын
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 7 ай бұрын
@@Dani_Krossing Fair enough.
Dani Krossing
Рет қаралды 23 М.
Dani Krossing
Рет қаралды 26 М.