CSS SELECTORS MADE EASY - HTML CSS Tutorial for Beginners

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

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

50% 1

You won't get far in web dev without understanding CSS selectors, and they aren't hard at all!
Play with the code! codepen.io/anon/pen/BGeKVM
View the whole Web Development Tutorials for Beginners playlist! • Latest Web Development...
Using CSS selectors are the bread and butter of HTML and CSS coding. You have to think about what elements on your page you want to target and how to write rules that cleanly target and apply css styling to those elements.
2 good rules you always want to follow: don't make rules more specific than they have to be (but also don't make them overly generic like "target every div on a page"), and also don't repeat yourself (DRY).
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~

Хобби

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

16 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@phanirithvij 5 лет назад

CSS is what defines the beauty. JavaScript the logic. HTML the format.

@prouddesk6577 4 года назад

HTML = Builder CSS = Artist JavaScript = Wizard

@4TH4RV 3 года назад

@@prouddesk6577 my analogy: HTML : Skeleton (defines and builds a foundation) CSS: Skin (Appearance) Javascript: Nervous system (controls everything)

@mal3k 3 года назад

@@4TH4RV OMG!, This so exactly similar.

@amol_thakurdware 2 года назад

Well said! 😊

@aidanzipzap 2 года назад

@@4TH4RV human anatomy in code

@willisvensson 3 года назад

I did two webbcoding classes in school. Then I haven't coded for about a year, so I watched this to refresh my memory, and let me tell you DAMN! You cover way more material than I learnt on my courses in a much more compressed time. Great tutorials, thank you!

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

which country do u live btw?

@oscwavcommentaccount 4 года назад

These are probably the best HTML tutorials I have watched.

@YourMomsSideDude 2 года назад

I have watched and bought so many courses on HTML, CSS, and JavaScript, but these are the best! And they're bite-sized which helps a ton. Thank you!!!

@noahm.9091 3 года назад

I've had a website domain sitting around for a month and a half. finally got motivated to start and this series has taught me everything I need. Thank you!

@chaeriz 2 года назад

how did it turn out?

@novaplex4763 5 лет назад

Please continue this series it is amazing and very good at teaching code. I need more of this

@zandbergx9747 4 года назад

Best tutorial I've ever watched. Also the best coding tutorial I've seen in general (that isn't a book)

@indigoxalis 4 года назад

Thank you so much for your tutorials! I've been binging them the past couple hours and feel so much more comfortable with HTML and CSS! I can't wait until I can create my own webpage.

@CommonWealthSnow 2 года назад

How's it going?

@amgdeg4897 2 года назад

we need to know please

@scottsaccenti 5 лет назад

This is really good, and while you can find so many free resources like this one online to help you understand these concepts, I have yet to find a better one for clear, quick, concise instruction. Thanks a bunch for making these.

@renspolak6154 3 года назад

This is the first episode that i start to think its hard to learn!

@adarshp6930 4 года назад

Awesome dude, love the way you've detailed everything.

@tapasranjanpaul6743 3 года назад

I am 14 year old student I understood web development easier than my studies , thanks for making such a video ,thanks

@dawin6710 4 года назад

I don't know who you really are. But you are doing an amazingly great job with these tutorials. I believe you're want people to understand and get autonomous. Thanks.

@TR011TIM3 5 лет назад

Thank you so much for all this tutorials, im building my own website and want to learn more! hope you could continue with these tutorials

@Numonique 5 лет назад

'Thank you very much, I'll be here all week.' Your course is informative and funny. Had a good laugh. A great way to learn this all! :)

@reubenjoji7091 Год назад

This course has actually helped me to refresh my memory on HTML and CSS.. THanks a lot daddy!!

@Inarius999 Месяц назад

yooooooooooooo

@Skrattoune 3 года назад

This one is really a must watch ! thanks for it

@niloykabir4426 4 года назад

excellent tutorial with great speaking skill... keep the series going

@evandixondesigns6751 3 года назад

This is so helpful! Thank you!

@farrukhatabekov595 5 лет назад

Great tutorials, man!

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

best most simplified web development videos..... amazing🥰

@skitspits 4 года назад

Thank you. For some reason the .class doesn't work but the # does! thanks for the tutorials keep it up!

@deepakrathore7723 3 года назад

i love to watching your tutorials you made everything easy thank you sir

@reclearning558 3 года назад

Ya these are awesome tutorials dude, thank you.

@christianek.963 4 года назад

I liked your video, thank u!! Btw you need ID's for an 'anchor link' and for a 'target selector'.

@gadafijaphaly2767 3 года назад

stunning tutorial

@shivamraval6172 5 лет назад

love your vids watching since a long time, just some advice theres a live preview plugin built into vs code since you use it so do i. theres also a wrap text setting which would make life easy for ya, was hectic for me. enjoy man love ya vids got me from zero to hero at web scripting

@amgdeg4897 2 года назад

how is it going now man

@elisabethabia4781 2 года назад

Very helpful! Are there more videos on creating the page layout?

@jeffroper1218 5 лет назад

I love the tutorials but this one feels like I've missed one. In which tutorial was the code for test.html written?

@seyit3552 4 года назад

He has written test.html before the video.

@jkremis1423 4 года назад

This just seems to be kind of a follow-up to the regularly scheduled html/css project he's been working on. This expands upon on the use of commands in CSS past the most basic things like background: or color:. You didn't miss anything, this is just extra info for the long haul :)

@MathinusG 4 года назад

Dude...you rock!

@hardstylerzPL 5 лет назад

9:45 Maybe I'm missing something but :active will not be applied when you are on the /home page but it's applied for only a moment just after clicking a link (after mouse down and before mouse up) so it allows to select a link while it is being activated.

@talhabinzubair8464 4 года назад

same

@satyajitchattopadhyayyt 4 года назад

You are a great teacher..

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

Watched this with my dad we are building websites now in pur free time i replaced codin/programming with gaming its alot more rewarding and satisfying

@razeev4685 5 лет назад

Thanks very Helpful :)

@clearwavepro100 4 года назад

Great, thank you!

@blessingmaneta4480 4 года назад

Appreciate it work. Education changes ppls life

@jerwellsavella97 3 года назад

Sometimes you just wanna mess with the first child, lmao that one sent me.

@jeromekentbayubay5059 Год назад

Thank you very much!

@zensasquatch4627 5 лет назад

Thanks for making these vids dude. I was finding them really helpful but the the past 2 clips are impossible for me to read the code that you are typing. It is displayed way too small on my screen and the way that youtube auto sizes the clip means that zooming In / out with the browser doesn't help. Is there any way you could make the code appear larger and more readable please? ♥

@imerla1316 4 года назад

OMG. dude You are really awesome!!!!

@tomzhao8262 4 года назад

This needs 1M views

@snaek 4 года назад

Maybe like 10 mil

@lennard5690 2 года назад

thx man, so helpfull

@rasulali4690 3 года назад

"This is the ugliest navbar of all time"... Amen brotha

@guest_adev616 3 года назад

amen

@oleksandrsokolov4496 4 года назад

Your voice is beautiful !

@snaek 4 года назад

Thank you for so much help.i. the last videos

@apporvaarya 5 лет назад

very very interesting tutorial :0

@pelumimustapha4146 2 года назад

You are a great teacher, lucky to come across your page. Do you have other courses JavaScript/Phyton/C+ and more detailed information on Html/Css on Udemy?

@hypegt6885 4 года назад

Thanks, Can you do one with X-Path?

@amerrashed6287 4 года назад

Ids for selecting form elements, buttons, inputs, etc. Classes for any other else.

@theguyrightthere9056 5 лет назад

Still waiting for the next part...

@jordanpotoski8203 3 года назад

Is it better to use ID's or Classes? Or does it not matter particularly? Thanks!

@kritishah1659 3 года назад

Thank you sir, very informative video to learn CSS Selector. These days I am hearing a lot about SelectorsHub CSS Selector tool, hows that tool sir?

@mahyamohamadi343 4 года назад

what do we call other li s in between first and last child? also can we style div s differently ?

@odynnxd 5 лет назад

Hey! The audio is fixed ;)

@gregscolumn 4 года назад

Have a problem getting the display flex working well.. all sections looks jammed together

@robertbutcher222 3 года назад

Wouldn’t using a css selector like “section.class-name” be cleaner than just “.class-name” since it tells you what the class is on, making it easier to remember precisely what your targeting?

@Summer-uc8hr 3 года назад

is this like an extra vid in the middle of the series?

@koenterheegde9328 5 лет назад

So where can I find the next video?

@demetre6473 3 года назад

Is it ok to give link () to div_es?

@VadexVx 3 года назад

hey can u tell me what ide that u use???

@amrinjaffni4268 5 лет назад

how often are you posting the video?

@w.zganiacz3109 5 лет назад

Any chance for a new part ? :)

@F0r3v3r96 4 года назад

Good work , is not that hard at the end thanks to you .... The funny part is ( I`m ironic ) how the ppl the wached first tutorial didn`t continued ...

@10meisterballe 3 года назад

I think I will use IDs if I want to only style a single element

@fuadajkic9167 4 года назад

when i put grey background on first section, my text wasnt visible...it makes me crazy..until i change color..now its fine, il be able to sleep

@gadafijaphaly2767 3 года назад

ahahahaha

@user-sl6ou3qb9l 5 лет назад

What does he mean by illegal Was that figurative language or literal

@matiasvaccaro453 5 лет назад

figurative, the thing is that the diferent browsers will not read the page of the same form so a good css practice is not use more than use an id per object, if you got another element use another id not the same. sorry for my bad english

@erikiseki 5 лет назад

lol arrested for using the same id twice on the same page.

@carolkelly8848 5 лет назад

These are very nice videos but they are extremely hard to read.. Maybe if the font was larger.

@hotshots149 5 лет назад

What text editor are you using?

@learncodeacademy 5 лет назад

I'm using VSCode - I show my setup in the first video of this series ru-vid.com/group/PLoYCgNOIyGABDU532eesybur5HPBVfC1G

@hotshots149 5 лет назад

@@learncodeacademy Thanks!

@SM-jf9gx 3 года назад

this escalated pretty quickly lol

@onesandzeroes 5 лет назад

Shouldn't that be "ul:first-child", not "li:first=child"? The child of "li" would be "a" (so I'm surprised this works).

@jamespierce946 5 лет назад

The video is correct. `li:first-child` is the first `li` in the parent, not the first element within the `li`. Since there is no space between two selectors (such as `li` and `:first-child` or `section.feature-box`, it will not be referring to a nested element). `ul:first-child` would make the background red for the entire `ul` that also happened to be the first within that parent-in this case, the first `ul` on the page.

@Peedy 4 года назад

Pounding Frank is illegal

@Edgypenguin 4 года назад

I came here just for that lmao

@jasonbrassett8130 5 лет назад

Jason Bateman?!

@juraijbinjamal5313 Год назад

2:18 I lost it here

@codeaxen 5 лет назад

Hello Learncode.academy Thanks a lot for these Tutorials Great work... but have a question in mind, is there a easier way in 2019 for converting a Static web template to a Dynamic one with full administrative controls ??. Thanks

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

❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

@user-lg8ms8pw6z 7 месяцев назад

Good Good Good Good Good Good Good Great Great Great Great Great Great Great your explanation is good to understand for me, Thank you you you you you God Bless You God Bless You God Bless You God Bless You God Bless You God Bless You

@aksai0003 4 года назад

anbody having any whatsapp groups for web development

@user-gu5cs2wt9g 4 года назад

You mention getting the point across. I don't get the point at all. Ive watched you spend two lessons doing all sorts of playing around with rules, classes, elements, whatever for these 5 tiny rectangles named a,b,c,d,e. What god are they? Why would anyone want those on a website?

@erfanrahmani 3 года назад

Less than 12 minutes video with 4 ads! I don’t find that mush ads even on TV! It is distracting.

@christiancoleman5870 Месяц назад

Dude made a very comprehensive beginners guide to html and CSS that you have access to for free. He's allowed to monetize. If you are that slow just rewind the video