9 | HOW TO INSERT IMAGES INTO YOUR WEBSITE | 2023 | Learn HTML and CSS Full Course for Beginners
ฝัง
- เผยแพร่เมื่อ 27 ธ.ค. 2022
- In this video I will show you how to insert images into your HTML website. 🙂 You can insert images either using the img element, or by setting a background image to a container, and in this video I will show how to do both. I will also cover how to create hover effects for your website images.
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 TH-cam 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 just wanted to take a moment to express my sincere appreciation to Mr. Dani Krossing for his fantastic teaching of HTML and CSS. Dani, your tutorials and lessons have been incredibly valuable to me, and I've learned so much from your expertise. Your dedication to educating others is truly commendable, and I'm deeply thankful for the knowledge and skills I've gained through your guidance.
Keep up the great work, Dani! Your contributions have made a significant impact on my learning journey, and I'm sure many others feel the same way.
Thank you!
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!!
thanks for lesson. i appreciate it and learned a lot from it.
I love this page, holy shit. good job bro, great teacher!
Thank you dani
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. 👍👍👍
the way you explain is absolutely clear and to the point. Thanks !!
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!!
Good lecturing
Great
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!
Basse 😍 we need more doggo again hehe
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
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 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.
amazing i can do so much more know
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?
Well teacher, I follow your coaching ...
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'm first
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?
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.
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
OK. Very good. 4 minutes of html and 16 minutes of css.
🖼 Maybe you could talk about ?
Once I get into responsive design, I will talk about 🙂
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.
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
Pin me
why do guys always do quality videos with blur cameras
Blur camera? If you mean my facecam, then I see no blur. 🙂
You favor Elon Musk.
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);
}