Тёмный

HTML & CSS Crash Course Tutorial #9 - Pseudo Classes & Elements 

Net Ninja
Подписаться 1,6 млн
Просмотров 134 тыс.
50% 1

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

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 79   
@shyamsriram
@shyamsriram 3 года назад
"Goodness Gracious". Your subtle jokes are just as awesome as your teaching. Love this, sir. Thank you for all the courses. 🙏
@gbubemia
@gbubemia 5 лет назад
Your teaching style is powerful! It is so easy to remember things. Thanks so much! I just bought your js from udemy!
@NetNinja
@NetNinja 5 лет назад
Awesome! Thank you so much, I hope you enjoy the course :)
@4You190
@4You190 3 года назад
what a wonderful channel and teaching style , thank you very very much
@П.С-й4о
@П.С-й4о 3 года назад
Great tutorial so far! I just have one question: what is the point of 'after' and 'before' pseudo-elements if you can simply type the content (in this case three dots) inside the tag in HTML?
@JohnnyB.Good10
@JohnnyB.Good10 Год назад
you can change to something else in one place and it will apply to all.
@mhamzaq869
@mhamzaq869 4 года назад
Thank you net ninja, Learn New tags and New things
@Dianacat777
@Dianacat777 Год назад
Great tutorial, as always! One question. Can you apply multiple pseudoclasses to the same element? Say I want my email input border to turn red if it doesn't contain a valid email, but only if it's the current focused element, so :focus and :invalid at once. Can you apply these in a single class or do you have to do separate styles and align them in a way where one will take precedence?
@Jeromebreyne
@Jeromebreyne 4 года назад
nice series! What's your colour theme called?
@janardanpethani5755
@janardanpethani5755 4 года назад
❤❤👌👌
@meuhmeuhmeuhify
@meuhmeuhmeuhify 5 лет назад
My name is not correct :D thanks again for this video ;)
@NetNinja
@NetNinja 5 лет назад
Haha, sorry, corrected it now :)
@ANipi-hs5hp
@ANipi-hs5hp 3 года назад
You solved a problem in two steps, that almost made me gave up web development studies .. Bravo . thank you
@astrix8812
@astrix8812 4 года назад
You take one look and run a mile....LMAO! You epic
@zoltanhorvath2238
@zoltanhorvath2238 3 года назад
You just won me with this short course. It is very hard to focus for me sometimes when i learn, but your content keeps me on the screen. It is very rare. I don't have to think which course to buy on udemy.
@luaneaquino7835
@luaneaquino7835 4 года назад
thanks! top-down approach of learning is great for me now
@ch4dix
@ch4dix 6 месяцев назад
Not sure if this issue still exists today but around 5 or so years ago, if you had a text-decoration or some transition on a hover class with around 1000+ of that on a page, it would cause the browser to freeze on every hover. This would literally make the page unusuable because any part of the page that had a link would cause it to freeze. Worth doing though is to minimize using this on styles that will be applied on a lot of links or even elements. e.g. A page where you paginate 1000+ pages with 100 rows per page and you don't set a limit for the pagination. Also, if you had a heavily styled page with hundreds of form elements, it would also cause the page to freeze when you focused/tabbed out as well. Why would anyone ever have a page with hundreds of form elements? Clients with large data entry requirements generally fall in this use case. e.g. If you worked in the financial sector with detailed KYC requirements or in the airline industry, you'll find this use case all too common. If you experience any of these issue, better reduce those elements or simplify your style.
@longduong3110
@longduong3110 Год назад
10/10 this is 4 year old but still amazing. I need some html and css refresh for my job this one is perfect.
@NetNinja
@NetNinja Год назад
Thanks, glad it was helpful! :)
@cosminalbu77
@cosminalbu77 5 лет назад
Quite a good course for beginners. I found the pace to be quite good. Cheers
@odetundefemi5138
@odetundefemi5138 Год назад
How are you doing with programming right now brother just checking out cos I started one month ago
@wonderlens692
@wonderlens692 10 месяцев назад
I have a question: Why did you apply the pseudo-class to ".image li" instead of ".image li img"?
@mohammadsaeidi4624
@mohammadsaeidi4624 Год назад
hello there, first of all thank you for this amazing course. i just wanted to ask you do you know any website that we can practice these stuff that we learn here. or if not can you please tell me what is the best practice when it comes to css if i want to practice on my own and not use any specific website
@shibainu8888
@shibainu8888 4 года назад
Thanks for the tutorial. I had difficulty understanding DOM explained in a JS course (not yours) at udemy and found your easy-to-understand DOM tutorial on RU-vid. After finishing your DOM tutorial, I started watching this awesome tutorial. After this, I will move on to your Modern JS course at udemy!
@NetNinja
@NetNinja 4 года назад
Awesome, thank you so much! The link below has a discount auto applied for the Udemy course! :) www.thenetninja.co.uk/udemy/modern-javascript
@shibainu8888
@shibainu8888 4 года назад
@@NetNinja Thank you!
@Babs42
@Babs42 Год назад
I love your tutorial. The only real thing that bugs me a bit is that your git repo is only referenced in one of these lessons but you could've made a branch for each one with the different files, especially when you start copy/pasting html into the files from nowhere ;). But I can see you not wanting to go back and fix this after it being 2 years now. I'm a super experienced backend guy (staff engineer) but I'm diggin' into full stack Elixir and this was a nice refresher to get up to speed on frontend UI bits. I can't wait to hit up your tailwindcss tutorial next since Phoenix has now baked it into the framework.
@bonchan4404
@bonchan4404 5 лет назад
Hi the net inja , i constantly watch your videos about HTML and CSS 8 months ago but i got hired on my first job as a helpdesk agent . Now that i have the experience , i want to go back to programming and do the old habits that i did which is to watch your videos and start all over again . i have this feeling that i want to go back to this stuff again but the situation is different now , im working and have a less time to watch your video . I want to be successful in IT field because that is my wildest dream and also im pressured to my family to be successful as soon as possible . typical asian parents . no need for you to reply in this comment. i just want to thank you for this kind of videos . i want to go back to programming but procastination beats me . please help
@NetNinja
@NetNinja 5 лет назад
Thank you so much, good luck with it. Just try and stay focused and picture your end goal - it's always hardest at the start, but it will get easier! In 6 months time you will be so much happier that you started now :D
@arunhembram1859
@arunhembram1859 4 года назад
@@NetNinja You are right!
@emantsrifemantsal2834
@emantsrifemantsal2834 4 года назад
hey bon-chan! hanashi no tsuzuki wo kisetekudsai! (please tell me the continuation of your story!) what are u doing now??
@bonchan4404
@bonchan4404 4 года назад
@@emantsrifemantsal2834 still learning web development tutorials. i cannot shift to another career yet due to covid situation . Need to be practical these days . still watching his udemy course for javascript . i can say that over a year i have a better understanding about web development. i also use code wars to familiarize myself on logics and create an clean code . Im enjoying these long path of learning but i know its gonna be worth it in the future
@emantsrifemantsal2834
@emantsrifemantsal2834 4 года назад
@@bonchan4404 cool
@speakoutloud7293
@speakoutloud7293 5 месяцев назад
4 years later of the video published. Learning css is still valid and clean.
@cristianfz16
@cristianfz16 4 года назад
Would be great to know how to use the ::before and ::after, i could not understand this two and i know you would explain it so i could understand it
@fuad7258
@fuad7258 4 года назад
I watched many more tutorials before but "The Net Ninja" is absolutely different. love from Bangladesh
@mohammadfarhat3933
@mohammadfarhat3933 2 года назад
for some reason it only worked when i put id when i tried using class for focus and valid it didnt work
@arwahsapi
@arwahsapi 5 лет назад
Thanks, my fine fellow, for tirelessly bringing us such wondeful tutorials!
@NetNinja
@NetNinja 5 лет назад
Thank you :D
@bolajivictor2892
@bolajivictor2892 Год назад
How do you advise a new front end dev student to go about your classes, tutorial videos?
@Shakeel714
@Shakeel714 3 года назад
TheNetNinja - Number one youtube channel to learn web development
@RidleyS79
@RidleyS79 4 года назад
Great tutorial, but the nav bar doesn't seem to be in the middle. It did not even in the previous clip in spite of setting the side margins to auto. Would you explain that for me, please?
@tejasahluwalia8713
@tejasahluwalia8713 4 года назад
The nav bar itself is in the middle. The text in the nav items is left aligned. If you make them center aligned it would look how you expect. Easy way to identify this is to inspect the element in the browser.
@RidleyS79
@RidleyS79 4 года назад
Tejas Ahluwalia thanks for taking the time for the clarification. This I didn’t think of!
@michaelezennadili8476
@michaelezennadili8476 3 года назад
Your tutorials are so friendly to the brain that i couldn't help but to buy your JS course on Udemy. I am enjoying it and i will buy more of your tutorials to encourage you. You are a nice teacher!
@TimVerdouw-itmobilesupport
@TimVerdouw-itmobilesupport 2 года назад
Question: 9 mins in, why did you not put the selector as 'nav ul li:first-child'? Dont you have to put in the 'ul' as well? Great course by the way. :-)
@gemsstr7933
@gemsstr7933 3 года назад
Love your course! However, my scrollbar went missing when i reset the webpage with margin 0; padding 0; . I cant even scroll with my mouse wheel. Need help thnks!
@MULTICODE
@MULTICODE 5 лет назад
thanks for this content, good for beginners. Advanced learner can use it as a refresher too.
@gameknightplayz
@gameknightplayz Год назад
this is great i am definitely subscribing
@NetNinja
@NetNinja Год назад
Thanks :)
@yinonb172
@yinonb172 3 года назад
Best HTML & CSS Tutorial, explanations are greats and brights.
@wierdwabbitt
@wierdwabbitt Год назад
You're exceptionally gifted at simplifying complex concepts ❤
@Ziad-Al
@Ziad-Al 2 года назад
for the sake of supporting you and as a massive THANK YOU, i am going to buy your javascript course on udemy.
@NetNinja
@NetNinja 2 года назад
Awesome, thank you for the support Ziad!
@joe5260
@joe5260 5 лет назад
nice job brudda, may i ask you about is there a way to change an img inside my blog to base64 for be able to download it ?
@bhagyashreekhairnar683
@bhagyashreekhairnar683 Год назад
simply amazing! Can't thank you enough!!
@speakerspeak7722
@speakerspeak7722 3 года назад
Thanks for clearance😍about pseudo class and element
@adeadpoet4221
@adeadpoet4221 4 года назад
When i hover the images it comes over the nav tab
@michaelpaxman9731
@michaelpaxman9731 4 года назад
Go to the .images li:hover rule set, and set the z-index to -1. .images li:hover { position: relative; bottom: 2px; z-index: -1; }
@ahnafkhan8115
@ahnafkhan8115 4 года назад
Your tutorials are always very informative! Thank you very much. But I have a question regarding the code in styles.css. When I tried to use a different jpg image for the image in the banner class, this code wasn't working then. It did work with the Mario image you used. banner img{ max-width: 100%; I even tried to set the max-width at 180%. However, when i used width-1400px, it came out good. Can you tell me why sir?
@toothlessa2346
@toothlessa2346 4 года назад
it's not jpg it's png
@aminedrouche5465
@aminedrouche5465 2 года назад
believe me when i say that i had no thought that i would be able to understand CSS that easy before watching your videos. I've been hovering all over youtube trying to find someone with a proper way of making information go through you are simplt the best gang thank you
@chungshengli
@chungshengli 3 года назад
Thank you, Shaun. Your class is great.
@bohlkenwells9982
@bohlkenwells9982 5 лет назад
Watch. See the ninja go wild-with-style. Awesome!
@cross5574
@cross5574 3 года назад
I like the way he says "here" and "preview"
@sparshgupta8078
@sparshgupta8078 4 года назад
is that a mario face on bob the builder??
@bikramchettri9405
@bikramchettri9405 5 лет назад
Hey thanks for the tutorial can you please explain date object in javascript and then show how to create a datepicker?
@JEMustang
@JEMustang 5 лет назад
They take quite a lot of time to make good. I'd recommend just using a library.
@ziadamer5739
@ziadamer5739 3 года назад
kindly project code
@Beenjammiin
@Beenjammiin 4 года назад
You are truly gifted at teaching!
@mare8076
@mare8076 2 года назад
Great tutorial, thank you!
@aminmouhamed2502
@aminmouhamed2502 4 года назад
the best ninja
@MianYar
@MianYar 5 лет назад
Can you please make semantic ui playlist like materialize
@Etheriiss
@Etheriiss 5 лет назад
He have materialize css playlist on the channel :D
@Lbmaniak
@Lbmaniak 5 лет назад
Thx
@Scream-ne3np
@Scream-ne3np 5 лет назад
I have bleeding eyes from this red background, thank you=)
@arunhembram1859
@arunhembram1859 4 года назад
wear blue light reflecting glasses.
@leodragonheart754
@leodragonheart754 4 года назад
ey man, the outline command doesnt work anymore.