Тёмный

HTML & CSS for Beginners Part 10: Divs & Spans 

Kevin Powell
Подписаться 941 тыс.
Просмотров 85 тыс.
50% 1

A look at divs and spans, what they are and a little bit of how they work.
This video is part of a large series introducing HTML & CSS to people who have never used it before. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own!
----
Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (creativecommon...)
Source: incompetech.com...
Artist: incompetech.com/

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

 

20 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 67   
@cinnamunbun
@cinnamunbun 3 месяца назад
This is the BEST explanation of divs and spans I've come across. Every newbie knows what they are and what they do in principle, but the visualization technique you used in this lesson helps us lock in knowledge. Thank you so much!
@faizalhaffejee9258
@faizalhaffejee9258 3 года назад
thanks for a brilliant site. You are a very good teacher. Your use of the English language is delightful. I am a retired teacher who has been engrossed with your presentation. I am getting it free on RU-vid. That is a gift i cherish.I teach disadvantaged kids as a volunteer mentor. I am learning plenty and will pass this on to my kids. Thank you for making this possible.
@rrasch8125
@rrasch8125 Год назад
The BEST explanation of DIV & SPAN. Thank you Sir for making it clear 👏🏼
@freedomsquare
@freedomsquare 2 месяца назад
I have been struggling with understanding CSS selectors. After going through over 10 different materials and videos, I began to understand tag, type, class and ID selectors to some extent. Though still struggling with how they apply. I found your video searching for more explanation on grouping, chaining etc and I decided to go through this one first. It is mind blowing how you have made this very clear. Thank you so much because this video easily cleared all my confusion on the real use of div and span. I will be using your videos hence forth.❤🙏
@KevinPowell
@KevinPowell 2 месяца назад
So glad that my approach worked for you! Good luck with the rest of your learning journey into development!
@markdyballuk
@markdyballuk 3 года назад
Just watched your first 10 tutorials, many thanks for them Kevin, more tomorrow. Much appreciated
@BeckyAlter
@BeckyAlter 2 года назад
Crazy good!! I haven’t known how in the heck to actually use divs. I needed this. Thank you!!
@yohannesJony
@yohannesJony 7 месяцев назад
this is one of the best tutorials of div and span tags. Thanks!!!
@hongquannguyen5532
@hongquannguyen5532 Год назад
"blocks or boxes stack on each other" truly a plain language to describe "div", i just fully understand div's functions, thank you Mr.Kevin !!
@rancor4708
@rancor4708 2 года назад
That into and outro music is jsut so good. You hear it then feel like you will learn something good then after its done, its like reminding you that you've actually acheived something.
@superfutbolistas
@superfutbolistas Год назад
I can say I am clearly understanding everything you say and teaching style is unparalleled to anything or anyone I have encounter before, Thank you so much
@ka.ka4325
@ka.ka4325 Год назад
This helped me a lot. I was struggling to comprehend Divs and you explained it perfectly. Thank you.
@pashko-k6h
@pashko-k6h 6 месяцев назад
with every lesson I get more excited
@PeterJewell2
@PeterJewell2 3 года назад
Hi Kevin. These tutorials deserve more likes because they are really good! I watched your tutorial on ::before and ::after and thought, "what editor is he using?"...scroll to the bottom of your list and, hey, there's a basic HTML/CSS tutorial. That'll tell me. And now I'm using this as a refresher course! (I learned from an actual book must be 20 years ago, and a few things have changed since then. Also good to pick up tips and tricks). You have a very easy style, no faffing about, straightforward, easy to understand. Thank you.
@sadaffarsa6058
@sadaffarsa6058 2 года назад
Kevin, thanks for amazing tutorials. I don't know when to use divs and when to use sections.
@nitinroy1331
@nitinroy1331 2 года назад
Best tuturial on div & span on the internet.
@whoeverwhoever400
@whoeverwhoever400 2 года назад
Is background: red same as background-color: red? When to use either one?
@marvivofoundation5638
@marvivofoundation5638 2 года назад
I was about asking the same question. I think it works using either of the two as the program automatically understand it. But then.. this is just my thoughts... I may be wrong.
@Utsav_Viradiya
@Utsav_Viradiya Год назад
I'm little late, sorry. But I have the same question. I guess you might have already got the answer. If so, please do me a favor.
@ThoughtSharer846
@ThoughtSharer846 2 года назад
Great help. You made element and it's attributes make senses for me. Thank you so much
@vitpav1164
@vitpav1164 3 года назад
second day of watching this. really helpful and knowledge-organizing. hoping to further learn from it.
@Nikiyvett
@Nikiyvett 2 года назад
Thank you very much! I’m finally getting this - thank to you. You have a gift for teaching 👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾
@yaldakarimi3772
@yaldakarimi3772 5 лет назад
love your tutorials. thank you!
@scopeinsurancebrokerage5283
Great teacher .thank you
@themalonecode
@themalonecode 2 года назад
Thank you KP once again!!!!!
@robertmanigault625
@robertmanigault625 Год назад
Excellent video. Thanks.
@cmcreynolds3743
@cmcreynolds3743 5 лет назад
Perfectly Clear - Good Stuff
@krishnav6244
@krishnav6244 6 лет назад
perfect explanations to each n everything... :) thaaaaaanksssssssssss...
@KevinPowell
@KevinPowell 6 лет назад
Thanks so much Krishna :D
@ellacosl329
@ellacosl329 10 месяцев назад
Hi Kevin, I created a new devs-spans.html in js folder together with the previously created index.html and Page2.html, etc but when I put in the link It won't change the background color, font, div color of my devs-spans.html file at all no matter how hard I check. Help please!! Thank you.
@Bantus
@Bantus 2 года назад
Cool!! . I almost quit css and then I met your videos.
@jakekumra7273
@jakekumra7273 3 года назад
Brilliant tutorials thank you so much!
@mhammadsaani
@mhammadsaani 4 года назад
What if I have three paragraphs p1, p2 and p3 and I have to style p1 differently,p2 differently and p3 differently. Then how will I use div tags
@wattadrag
@wattadrag 4 года назад
You may use different id's for each paragraphs so that you may style them individually. For e.g: Hey! #div1 { background-color: rgb(255, 163, 177); width: 480px; margin-bottom: 12px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; padding: 5px; font-size: xx-small; } #div2 { background-color: rgb(185, 235, 86); width: 480px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; padding: 6px; font-size: xx-small; } #span1 { color: rebeccapurple; } #span2 { color: red; } body { background-color: rgb(155, 213, 236); } Lorem ipsum |You can see I have changed only this part of the text according to me under this div.|dolor sit amet consectetur adipisicing elit. Reiciendis qui quae doloremque, veniam magnam ipsam expedita ut possimus ad molestiae nisi temporibus. Commodi inventore veniam nostrum eius dolorum. Ab, expedita Lorem |Different styling used!|ipsum dolor sit amet consectetur adipisicing elit. Porro, voluptatem. Et ducimus ipsam provident optio quibusdam, ipsum soluta voluptatem hic repellat quod expedita excepturi non fugit dicta ea ullam. Facilis?
@marvivofoundation5638
@marvivofoundation5638 2 года назад
@@wattadrag Using Id's in a situation like this isn't advisable. id's are better off used for pointing to a specific section on a page and similar stuff like that, not for styling... Instead please use a class selector inside your tag element. (class="unique identifier/name to make reference to") Eg. , then use your unique identifier to point to that paragraph when you want to style it in your css stylesheet. in HTML5 you start using a dot/full-stop, followed by the class name(unique identifier) and a curly bracket example= .paragraph-01 {insert the code on how you want to style your paragraph}
@Fenetking
@Fenetking 2 месяца назад
how do you creat new page and why don't u explain about that i dont understadn every thing. pls explain how u create new page.related to the previous video
@ganganijayathilake7178
@ganganijayathilake7178 2 года назад
Thank you so much.
@Arshdeep243
@Arshdeep243 Год назад
I spent $32k in college and never grasped anything , this is the only time I could actually understand divs 🤦🏻‍♂️
@erfannikbin7683
@erfannikbin7683 2 года назад
great
@novasoul1966
@novasoul1966 2 года назад
great tutorials! bet I've seen yet
@cfjahn
@cfjahn 2 года назад
Hi guys, I am looking for a solution. i need create some boxes as Div, but i want leave them small and u pass the mouse over the div open and show all the content inside. thx in advanced . X*
@newdimension4731
@newdimension4731 2 года назад
you didn"t do any SPAN in your page...
@dillangeo
@dillangeo 5 лет назад
helped a lot cheers.
@cesarlara3974
@cesarlara3974 7 лет назад
Do you recommend already learning javascript before making actual project websites?
@KevinPowell
@KevinPowell 7 лет назад
Nope. I say learn it as you go. If you try to figure out HTML, CSS and JS before really diving into some projects, you'll know a lot of theory, but not really know how to build something. Start simple, make some really simple things and slowly grow. Try to add new things to each project.
@loze
@loze 6 лет назад
really helps a lot thanks
@KevinPowell
@KevinPowell 6 лет назад
Awesome, glad it helped!
@TheCrusaderRabbits
@TheCrusaderRabbits 6 лет назад
very nice.
@upasanaasopa6406
@upasanaasopa6406 2 года назад
some (important) basic points about which you covered here is really useful, although am new to your channel i must say i'm enjoying the beginner's concept of HTML and CSS from you(Kevin) :)
@GeeHood666
@GeeHood666 Год назад
This helped a ton, thank you!
@cesarlara3974
@cesarlara3974 7 лет назад
What is the difference between section and div?
@KevinPowell
@KevinPowell 7 лет назад
They behave exactly the same, and just like a header, footer, main, aside and all of those as well. The difference is, a div has no meaning, whereas the section (and header, footer, etc.), tell the browser that there is a new section. It has actual meaning. So if you look at the document structure, you can use an h1 inside every section, and the browser understands that as meaning it's the title for that section, as one example.
@yohannesJony
@yohannesJony 7 месяцев назад
@webb-developer
@webb-developer 11 месяцев назад
@rubenbest5732
@rubenbest5732 5 лет назад
what a legend it me ruben btw
@nayeemahmed163
@nayeemahmed163 7 лет назад
Do you complete full font-end web development in this course
@KevinPowell
@KevinPowell 7 лет назад
+Nayeem Ahmed I'll be building a basic layout at the end of this series, which I'm planning for next Wednesday
@KevinPowell
@KevinPowell 7 лет назад
+Nayeem Ahmed I'll be a day or two late wrapping this series up, hopefully by Friday I'll be doing a basic layout. Next week I'm going to do a video on a full, responsive website from scratch.
@nayeemahmed163
@nayeemahmed163 7 лет назад
Thank you. I already know the basic of HTML and CSS that's why I am not following your previous videos, but I definitely watch the final part of your course. And I hope after this you create advanced tutorials how to create HTML and CSS web template
@KevinPowell
@KevinPowell 7 лет назад
+Nayeem Ahmed this one git bigger than I planned, hah. After this one is done, the focus will be on more advanced things. I'm looking at cover pseudo elements and fun things you can do with them, layouts with flexbox and some more. If there is anything specific you'd like to see, let me know, I'm open for ideas as well!
@dr__ey
@dr__ey 2 года назад
i was confused how worked, thank you for this explanation and for the w3schools recommendation, so much good info there as well :]
@omerhakimi37
@omerhakimi37 3 года назад
OK NOW WHO THE HELL LEFT A DISLIKE?????????????
@vincentcleaver1925
@vincentcleaver1925 3 года назад
Volume is way too low. I can't hear what you are saying and I can't increase the volume any further on my cell. This is self-defeating, on your part or RU-vid
@nohandle759
@nohandle759 2 года назад
I've been using Spans wrong.
@yohannesJony
@yohannesJony 7 месяцев назад
Далее
HTML & CSS for Beginners Part 11: Classes & IDs
10:47
Распаковка Monster High Potions #monsterhigh
01:00
5 important HTML concepts for beginners
14:37
Просмотров 118 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 956 тыс.
HTML & CSS for Beginners Part 9: External CSS
13:38
Просмотров 87 тыс.
CSS Floats and Clears Tutorial for Beginners
13:08
Просмотров 22 тыс.
Are You Making These CSS Height Mistakes?
8:54
Просмотров 130 тыс.
Learn CSS in 12 Minutes
12:11
Просмотров 2,3 млн