You are so good at teaching, this is the best tutorial series I've watched, all the solution for the problems that I encounter when I did my first website is all here. Thanks man!!
Bro, I'm taking a class in HTML right now, and my professor has 0 lectures. I've been watching you alongside the readings, and you're so good at teaching. Sincerely, thank you 🫡
huh, you too? my ex teacher was the same, he comes late and then goes to the restroom and does nothing. These type of videos made me pass his lesson with very high grades at least
You look like Elon Musk a bit... On a serious note, I started studying HTML and CSS and the videos that the teacher sent are 3 hours long...your course is WAAAYYY better than those from Linkedin Learning. Thank for that!!
Another terrific installment, Dani. I really appreciate many things you are doing, but keeping best practices and semantics in the forefront seems essential for success. Thank you, as always, for your incredibly considerate instruction!
Hey! It's me again from sololearn. I like how you show us different scenarios for an element before showing us the actual solution . Like saying "if we were to set the width to 50% see how it looks." While knowing we are actually supposed to set the width to maybe 100%. I Just like the way you give us a glimpse of most of what we need and want to know. Great Lesson btw. 👍
I follow your tutorials and think they are great! I have one question tho, when I use visibility collapse in CSS it doesn't flicker either… is there a disadvantage of using that?
This was really helpful though at first I couldn't hear much of his words but has I sat in from of my PC and rewatch the video for a few rounds. I was able to understand better. 👍👍👍
Whenever I adjust the image height and width from within the img element in HTML it works, but when I target it with a class is CSS, nothing changes. I'm linked to the correct stylesheet.
what if in the .image you put backround-image: src="the source of the image that you want when you hover" then after that you put the source of the image that you want before hovering so that it reads the first image src then reads the new one, will that load the image?
Thank you for the education, sir. but I practiced as you showed me. In my case, I did as you did, but the image did not appear when I used the class to insert the image. so what's the problem sir? Why can't I like what you do? I so very helpful if you want to answer
Good morning. This video partly useful only because some of your code is cut off. Line 6 in the html module and line 4 in the main.css module. I don't if your notice it after you posted it.
I'm currently having this issue where my image isn't showing up in the browser but is in my test window (using dreamweaver which has a live view). It works perfectly fine if I attach it like a normal image but when I embed it in a class as "background-image: url()" it won't show on my browser. Any solutions?
Clear your browsers cache or “hard refresh” it, and if that doesn’t work, then it is most likely because you have the wrong file open in the browser. 🙂
@@Dani_Krossing I tried all that but then had the thought of using the inspect panel on chrome like you've said and it's showing an error: "failed to load resource: the server responded with a status of 404 (not found)" but I don't understand why chrome can't find the file but dreamweaver's live mode can?
@@Dani_Krossing Ok I'm really dumb, I've never set up my folders like you have so my CSS file is normally with all my HTML files. However this time I set it up your way and when I added the image I added it as "background-image: url(/img/cover_1.jpg);" which meant that dreamweaver could find it but I needed to add the ".." like you did which is why it wasn't working on the website. Thank you for your help though, as resetting the cache did fix some small CSS stuff that was bugging me.
i've been trying to figure out how to put text beside the image and I'm still having trouble, messed around with margin and float but it didn't work. the text keeps going underneath the image, finally got it to work but moving the text away from the image so it doesn't collide was a problem that's why i used margin it worked but i only wanted to use the margin for the text and not the image, whenever i use margin top it also does it for the image and I'm trying to align the text to be in the middle beside the image, what do i do to make it work (I'm using CSS to do it)
Hello, I wrote the same lines/code for CSS and HTML but when I do Go Live from VS Code for the first time the Image blinks, once the page is opened then on page refreshing it's fine. My code is like this (Sorry for pasting here but I want to resolve this issue :( ) body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../images/coffeehouse-b&g.jpg); } .image { width: 300px; height: 400px; background-image: url(../images/coffeehouse.jpg); background-size:cover; background-repeat: no-repeat; background-position: center; transform: all ease-in-out 100ms; } .image:hover { background-image: url(../images/coffeehouse-b&g.jpg); }
You are so good at teaching, this is the best tutorial series I've watched, all the solution for the problems that I encounter when I did my first website is all here. Thanks man!!
Bro, I'm taking a class in HTML right now, and my professor has 0 lectures. I've been watching you alongside the readings, and you're so good at teaching. Sincerely, thank you 🫡
huh, you too? my ex teacher was the same, he comes late and then goes to the restroom and does nothing. These type of videos made me pass his lesson with very high grades at least
You look like Elon Musk a bit... On a serious note, I started studying HTML and CSS and the videos that the teacher sent are 3 hours long...your course is WAAAYYY better than those from Linkedin Learning. Thank for that!!
another very good installment from mr Krossing.
the way you explain is absolutely clear and to the point. Thanks !!
Thank you so much
Well teacher, I follow your coaching ...
Another terrific installment, Dani. I really appreciate many things you are doing, but keeping best practices and semantics in the forefront seems essential for success. Thank you, as always, for your incredibly considerate instruction!
OK. Very good. 4 minutes of html and 16 minutes of css.
Hey! It's me again from sololearn. I like how you show us different scenarios for an element before showing us the actual solution . Like saying "if we were to set the width to 50% see how it looks." While knowing we are actually supposed to set the width to maybe 100%. I Just like the way you give us a glimpse of most of what we need and want to know.
Great Lesson btw.
👍
I follow your tutorials and think they are great! I have one question tho, when I use visibility collapse in CSS it doesn't flicker either… is there a disadvantage of using that?
I love this page, holy shit. good job bro, great teacher!
This was really helpful though at first I couldn't hear much of his words but has I sat in from of my PC and rewatch the video for a few rounds. I was able to understand better. 👍👍👍
Whenever I adjust the image height and width from within the img element in HTML it works, but when I target it with a class is CSS, nothing changes. I'm linked to the correct stylesheet.
Good lecturing
Your coding is quite completed, you know plus description for that particular pic lol
Thank you dani
Great
thanks for lesson. i appreciate it and learned a lot from it.
I'm first
Is there an easier way to just set the image in the center of the page? Or is that always done via a margin value?
align-center. I think.
What app are you using pls
what if in the .image you put backround-image: src="the source of the image that you want when you hover" then after that you put the source of the image that you want before hovering so that it reads the first image src then reads the new one, will that load the image?
Basse 😍 we need more doggo again hehe
🖼 Maybe you could talk about ?
Once I get into responsive design, I will talk about 🙂
image just pop up on web as a small icon, any suggestions please
So the folder, image, and index.html should all be saved to C; Drive?
No, it needs to be inside the website rootfolder. The rootfolder can be anywhere.
Mine is not working, i kept creating the image folder and it's still not working
amazing i can do so much more know
ayy are u danish
This is the second video I've watched and the instructor failed to show a download from the a webstie and show it was working in CSS
Thank you for the education, sir. but I practiced as you showed me. In my case, I did as you did, but the image did not appear when I used the class to insert the image. so what's the problem sir? Why can't I like what you do? I so very helpful if you want to answer
Good morning. This video partly useful only because some of your code is cut off. Line 6 in the html module and line 4 in the main.css module. I don't if your notice it after you posted it.
why do guys always do quality videos with blur cameras
Blur camera? If you mean my facecam, then I see no blur. 🙂
I'm currently having this issue where my image isn't showing up in the browser but is in my test window (using dreamweaver which has a live view). It works perfectly fine if I attach it like a normal image but when I embed it in a class as "background-image: url()" it won't show on my browser. Any solutions?
Clear your browsers cache or “hard refresh” it, and if that doesn’t work, then it is most likely because you have the wrong file open in the browser. 🙂
@@Dani_Krossing I tried all that but then had the thought of using the inspect panel on chrome like you've said and it's showing an error: "failed to load resource: the server responded with a status of 404 (not found)" but I don't understand why chrome can't find the file but dreamweaver's live mode can?
@@Dani_Krossing Ok I'm really dumb, I've never set up my folders like you have so my CSS file is normally with all my HTML files. However this time I set it up your way and when I added the image I added it as "background-image: url(/img/cover_1.jpg);" which meant that dreamweaver could find it but I needed to add the ".." like you did which is why it wasn't working on the website. Thank you for your help though, as resetting the cache did fix some small CSS stuff that was bugging me.
Your faces is similar Elon Musk
You favor Elon Musk.
i've been trying to figure out how to put text beside the image and I'm still having trouble, messed around with margin and float but it didn't work. the text keeps going underneath the image, finally got it to work but moving the text away from the image so it doesn't collide was a problem that's why i used margin it worked but i only wanted to use the margin for the text and not the image, whenever i use margin top it also does it for the image and I'm trying to align the text to be in the middle beside the image, what do i do to make it work (I'm using CSS to do it)
Pin me
for free ?!?!?!?!?!?!?!?!?
Hello, I wrote the same lines/code for CSS and HTML but when I do Go Live from VS Code for the first time the Image blinks, once the page is opened then on page refreshing it's fine.
My code is like this (Sorry for pasting here but I want to resolve this issue :( )
body::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(../images/coffeehouse-b&g.jpg);
}
.image {
width: 300px;
height: 400px;
background-image: url(../images/coffeehouse.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: center;
transform: all ease-in-out 100ms;
}
.image:hover {
background-image: url(../images/coffeehouse-b&g.jpg);
}