16 | MAKING A HERO SECTION WITH HTML | 2023 | Learn HTML and CSS Full Course for Beginners
HTML-код
- Опубликовано: 12 янв 2023
- 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 RUclips 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
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 ❤
Thanks Yousif! You always leave such nice comments. 🙂
@@Dani_Krossing If I get out of my situation of being a refugee, I'll be your top supporter on Patreon 🤍
I love how you lay everything down it's nothin short of amazing
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!
Glad you are enjoying my videos ☺
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.
Damn you are an awesome teacher! Learned so much, genuinely loved how you explained it!
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 ❤
you are the best. you made my journey of 3 years had to understand what is going on just simple in minutes.
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
Too good mate
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
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!
Thanks for sharing free knowledge
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!
Tthank you👍
How do you export the pattern in a png format in PS?
I love your coding 👀
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 🙏
Using a would be more appropriate there 🙂 So just change that if you feel the need ☺
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
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)?
Nice use of "relative"
how did u add the words on the image of yourself, please reply me
geat vid love how u explain every thing in detail are u planning on using javascript later on or php ?
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..
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?
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
I always click on like before watching your videos .you never disappoint us.
how do i get an image like the one you used in this video?
without background.
Mobile phone camera, and a photo editing software, like Photoshop 🙂
@@Dani_Krossing can it be done with Canva?
Yes Canva is also the photo editing software my wife uses to crop 🙂
the image used in this. provide me with the link please
only my main section changed colour when i added background colour any help
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.
@@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
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.
You are the here on our websites now 🤣
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.
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. :)
@@Dani_Krossing Fair enough.