HTML & CSS Crash Course Tutorial #8 - CSS Layout & Position

HTML & CSS Crash Course Tutorial #8 - CSS Layout & Position

Net Ninja

4 года назад

232,837 Просмотров

Hey gang, in this HTML & CSS Tutorial we'll look at how to layout our content on the page. We'll do this by using a mixture of display types (block, inline & inline-block) as well as looking in detail at the 'position' property.
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

+ VS Code download - https://code.visualstudio.com/

🐱‍💻 🐱‍💻 Other Related Courses:

+ Modern JavaScript Tutorial - https://www.thenetninja.co.uk/udemy/modern-javascript

Тэги:

#html #css #html_tutorial #css_tutorial #html_and_css #html_crash_course #css_crash_course #crash_course #tutorial #html_for_beginners #css_for_beginners #web_development_for_beginners #web_dev_for_beginners #web_dev_tutorial #html_&_css_crash_course #static_position #absolute_position #fixed_position #relative_position #static #absolute #relative #sticky #sticky_position #css_position #position #inline-block
Ссылки и html тэги не поддерживаются


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

@egbesampson3568
@egbesampson3568 - 08.11.2023 13:12

pls one question ninja why is it that you avoid using the caps lock like writing in capital letters
thanks

Ответить
@egbesampson3568
@egbesampson3568 - 07.11.2023 14:05

you make the web so easy and understanding for everyone

Ответить
@francomateoturco306
@francomateoturco306 - 05.11.2023 02:25

I hope you read this comment, what do you think about flexbox? should i use it for display ? could you do a tutorial about it ? thank you so so so much for your videos ! much appreciated your time and dedication

Ответить
@user-sn7rp6yy7l
@user-sn7rp6yy7l - 31.10.2023 00:30

İ changed. Banner's position to the static and there was nothing changed

Ответить
@acquij
@acquij - 25.08.2023 22:34

My brain is fried, but in a good sense; this will take a bit of re-viewing as some concepts make sense immediately / intuitively while others will likely just need repetition..

Ответить
@kashifdeshmukh9340
@kashifdeshmukh9340 - 06.08.2023 19:20

Awesome Course and Very easy to understand.

Ответить
@dms6553
@dms6553 - 10.07.2023 02:49

I went through the whole course in 2 days using 1.5x speed - trust me you did a god level job - I loved the way you focused on details and positioning is really well explained. I feel like I should go through the whole coure once a month.
Keep up the good work.

Ответить
@DoseOfAi1
@DoseOfAi1 - 05.06.2023 15:36

litreally css is so sensetive it cares for semi comas and space between .banner (this space).welcome i didnot wore and i was trouble shooting problem for whole 1 hrs and i knew space was problem hmmmmm

Ответить
@sam4457
@sam4457 - 06.05.2023 06:52

"All right there gang "this are great tutorials💯

Ответить
@Dianacat777
@Dianacat777 - 02.05.2023 22:06

Something I really love about these courses is how you deliberately make common mistakes when setting code up so you can explain why they're happening and then show the viewer how to address them. Seriously, it's invaluable. Really deepened my understanding of how these different elements interact!

Ответить
@syeedimtiaz2974
@syeedimtiaz2974 - 07.01.2023 23:31

Thank you very much for a well planned tutorial .

Ответить
@JSL-07
@JSL-07 - 06.12.2022 02:07

thank u so much u give us hope..

Ответить
@hussainbabonji4207
@hussainbabonji4207 - 29.11.2022 12:37

i really loved the way you designed this course thank you

Ответить
@Palaan92
@Palaan92 - 29.11.2022 06:22

You are the best tutor and I am big fan of your Style to teaching us... Thank You ☺️.... For teaching us Sir💗😊...

Ответить
@markzait2750
@markzait2750 - 24.11.2022 18:47

Very useful and clear video. Thank you!

Ответить
@heineken-jv1nc
@heineken-jv1nc - 20.11.2022 01:53

Had to watch it 4 times but now I got it. Insane. Thank you m8.

Ответить
@Lucas_V.P.
@Lucas_V.P. - 11.11.2022 14:55

Dude, your Videos are overall so well done! I even figured out, that you dont need to experiment with the nav tag. If you inspect the header and hover over the outer field of the "block graphic" it shows you the exact measurement of the element in pixels on the webpage! So you can just read that off :)) in this case you couldve instantly seen that it were 147.88 pixels, so pretty accurate with the 148" in the video :D
Greetings from Germany man, you are helping us out so much!!

Ответить
@Tenly2009
@Tenly2009 - 30.10.2022 17:09

You did a poor job of explaining the “ems” unit. Questions you should have answers is: What is it? What does it stand for? Why do we need it? The only question you actually answered was “What does it do?” 🙄

Ответить
@jeffxcc
@jeffxcc - 13.10.2022 11:18

This is great! I'm getting it.

Ответить
@shiningzhang2288
@shiningzhang2288 - 05.10.2022 16:08

thank you so much

Ответить
@johndoe-lk5eg
@johndoe-lk5eg - 03.09.2022 02:19

I changed it to an id, & added a t. is that alright?.

Ответить
@johndoe-lk5eg
@johndoe-lk5eg - 02.09.2022 09:00

.join worked for me, to turn the text red, at 24 minutes. nav li a .join didn't.

Ответить
@nicholaslewis279
@nicholaslewis279 - 16.08.2022 01:39

Out of everyone I've watched, you're the only one who actually described what the viewport is lol

Ответить
@111ramico
@111ramico - 13.07.2022 21:46

when i deal with inline-block i use HTML comments

``` html
<li><a href="join.html" class="join">Join the club</a></li><!--
-><li><a href="/news.html">Latest news</a></li><!-
-><li><a href="/games.html">Games</a></li><!-
--><li><a href="/contact.html">Contact</a></li>
---

do you prefer nowrap instead and why?

Ответить
@ikeiris
@ikeiris - 01.07.2022 23:01

You are number one in my top 3 of the best instructors, I am seriously happy to have found your channel. I'm grateful 🙏

Ответить
@marisakirisame659
@marisakirisame659 - 20.05.2022 18:26

Your teaching is amazing, I have never understood positioning until I watched this

Ответить
@weareloved
@weareloved - 05.05.2022 15:25

omg! Thank you so much for these tutorials !! 🙏🏻

Ответить
@kritikjain3617
@kritikjain3617 - 23.04.2022 11:35

Man! what a fantastic course this is. Completed in one sitting, and let me tell you that it's worth in gold

Ответить
@Lenny4400
@Lenny4400 - 26.03.2022 00:38

Dear friend you are doing a good job break ing things for the people! Keep it that way.

Ответить
@anuragthakur5787
@anuragthakur5787 - 18.03.2022 20:07

Had to watch this 2 times but I got it all
great explanation ✌

Ответить
@flifluflofli
@flifluflofli - 10.03.2022 11:45

wow the no wrap i would not have figure it out lol

Ответить
@assadullah7816
@assadullah7816 - 15.02.2022 10:57

Tnx u sir : After 2 months of searching finaly i fully understand the position properties

Ответить
@michaelfestus3619
@michaelfestus3619 - 09.02.2022 04:30

You’re too Good man

Ответить
@joonaspuurtinen6396
@joonaspuurtinen6396 - 05.02.2022 01:42

Hello The Net Ninja! Which theme are you using in these videos? It certainly looks like Monokai++ but it is a bit dimmer with the colors than what I have found which is more pleasing to eyes.

Ответить
@nanz8646
@nanz8646 - 24.01.2022 15:32

Hi,
My CSS has decided not to load in the browser all of a sudden.
A message shows up reading: "Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
Basically nothing that I add in the CSS loads in the browser but the HTML is still responding.
How do I fix this? Tried searching this on the web but I am completely stuck :( Appreciate any help with this

Ответить
@shervangh9660
@shervangh9660 - 20.12.2021 01:21

you are god bro

Ответить
@kodidelasanjayreddy3427
@kodidelasanjayreddy3427 - 01.12.2021 17:18

why we usin two classes?
.banner.welcome
simply .welcome would suffice ig

Ответить
@robertbibong1040
@robertbibong1040 - 24.11.2021 11:50

You are The Best Teacher Ever! You deserve alot of respect. Be blessed for the content you are sharing to us!

Ответить
@prasadingole7315
@prasadingole7315 - 10.11.2021 09:19

You explain it very well, I learn lots of from your video, Thanks man!

Ответить
@andysandroidiosgaming797
@andysandroidiosgaming797 - 30.10.2021 13:49

my images inside this code are tiny, I don't know why <ul class="images">
<li><img src="img/thumb-1.png" alt="mario thumb 1"></li>
<li><img src="img/thumb-2.png" alt="mario thumb 2"></li>
</ul>

Ответить
@mizocreatestuff1412
@mizocreatestuff1412 - 08.10.2021 16:03

Can you provide us with HTML and CSS source code?

Ответить
@tobyroy336
@tobyroy336 - 28.09.2021 17:23

position: sticky thank you

Ответить
@yinonb172
@yinonb172 - 30.08.2021 14:34

Best HTML & CSS Tutorial, explanations are greats and brights.

Ответить