9 | HOW TO INSERT IMAGES INTO YOUR WEBSITE | 2023 | Learn HTML and CSS Full Course for Beginners

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

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

50% 1

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 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

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

27 дек 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@user-nk5pz9io2n 6 месяцев назад

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!

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

thanks for lesson. i appreciate it and learned a lot from it.

@dahyun8664 Год назад

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!!

@finchfinchy2480 Год назад

Good lecturing

@helbertpemba8167 8 месяцев назад

I love this page, holy shit. good job bro, great teacher!

@rebeccafolakemi-tn2jq Месяц назад

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. 👍👍👍

@user-zu9gy1ul1p Год назад

Thank you dani

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

Great

@ipoderma Год назад

the way you explain is absolutely clear and to the point. Thanks !!

@jeandouat7500 Год назад

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!!

@davecoll13 5 дней назад

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?

@Stoney_Eagle Год назад

Basse 😍 we need more doggo again hehe

@nkosinathitrevor-nc7zq 2 месяца назад

amazing i can do so much more know

@simsolchanel Год назад

Well teacher, I follow your coaching ...

@fissionchips223 8 месяцев назад

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!

@user-pl5rv7qh5o 8 месяцев назад

What app are you using pls

@elijahking2653 7 месяцев назад

So the folder, image, and index.html should all be saved to C; Drive?

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

No, it needs to be inside the website rootfolder. The rootfolder can be anywhere.

@RetroblocRBC Год назад

I'm first

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

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?

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

align-center. I think.

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

OK. Very good. 4 minutes of html and 16 minutes of css.

@storm5492 Год назад

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?

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

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. 👍

@okorieinnocent4854 7 месяцев назад

Mine is not working, i kept creating the image folder and it's still not working

@badcatdesign Год назад

🖼 Maybe you could talk about ?

@Dani_Krossing Год назад

Once I get into responsive design, I will talk about 🙂

@HazelRichardson-Amos 11 месяцев назад

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?

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

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. 🙂

@HazelRichardson-Amos 11 месяцев назад

@@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?

@HazelRichardson-Amos 11 месяцев назад

@@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.

@RetroblocRBC Год назад

Pin me

@takwingebenyi 16 дней назад

why do guys always do quality videos with blur cameras

@Dani_Krossing 16 дней назад

Blur camera? If you mean my facecam, then I see no blur. 🙂

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

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 🫡

@Sac-chan Месяц назад

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

@MauriceWilliams Год назад

You favor Elon Musk.

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

for free ?!?!?!?!?!?!?!?!?

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

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); }