Тёмный

Tailwind CSS Tutorial #7 - Using Flexbox 

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

Hey gang, in this tailwind css tutorial we'll look at how to work with flexbox & use it to flesh out a little of our design.
CSS Flexbox tutorial - • CSS Flexbox Tutorial #...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/tailwin...
+ Full html template - github.com/iamshaunjp/tailwin...
🐱‍💻 🐱‍💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstudio.com/

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

 

9 июл 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@zealtypedcode3119
@zealtypedcode3119 3 года назад
tailwind is really a bliss
@cterogene
@cterogene Год назад
This was instructive, I do understand everything, Thank you and Keep up the great work.
@Shakeel714
@Shakeel714 3 года назад
The best teacher to learn from!!
@rodlu811
@rodlu811 2 года назад
Best series of all!!!
@waifufx
@waifufx 2 года назад
ALWAYS learn a lot from you
@lukem121
@lukem121 3 года назад
Thank you!!! 😁
@official.mhm13
@official.mhm13 3 года назад
There is a person on the earth who has turned on notifications for the Net Ninja channel just so that he can dislike Shaun's videos whenever he publishes them.
@IzukuMidoriya-st5dh
@IzukuMidoriya-st5dh 3 года назад
and that man doesn't even matter to ninjas fam! xDDD
@michealwaldrup4357
@michealwaldrup4357 3 года назад
Some people just want to watch the world burn...
@golainte
@golainte 3 года назад
the dislike ninja
@yashraut19
@yashraut19 2 года назад
@@golainte 😂
@shaunrussell1020
@shaunrussell1020 2 года назад
Colored divs at 3:50
@Graposhka
@Graposhka 2 года назад
good man
@bachi4855
@bachi4855 3 года назад
Hey Master! When can we expect the Tutorial Express + React? :D
@hos7012
@hos7012 3 года назад
you are awesome mentor
@rajbannasa7662
@rajbannasa7662 Год назад
thank you so much sir
@StudentDictionary
@StudentDictionary 7 месяцев назад
I literally understand flex property 🥳🥳🥳🥳. Thanks sir, you explain very well.
@NetNinja
@NetNinja 7 месяцев назад
Great to hear! :) thanks for watching
@huydoan26895
@huydoan26895 2 года назад
thanks bro !
@tak68tak
@tak68tak 9 месяцев назад
amazing!
@anshsahni2864
@anshsahni2864 3 года назад
Hey Ninja, I absolutely love your videos. Recently I was studying express and node. I kinda feel that we have to memorize a lot of things. Do we in general have to memorize/ see documentation for these things? I know javascript but still feel that there are many things that i don't know. Can it be because of my bad js skills or is it just how express/node works. Also thanks for making videos and helping me in my dev journey
@ManInSombrero
@ManInSombrero 3 года назад
You don't have to memo anything, simply refer to documentation. Even for very basic things, it's absolutely fine.
@NetNinja
@NetNinja 3 года назад
Hey, first of all thanks - really glad you like them. Secondly, for sure you do NOT need to memorize everything. The core syntax of any language / framework / tool you use will sink in over time the more you use it, but the main thing is that you understand how something works & why. As long as you understand something, you can always look-up a method, property or best way of coding something :).
@anshsahni2864
@anshsahni2864 3 года назад
The Net Ninja Thanks a lot
@_hopp3r
@_hopp3r Год назад
I'm unsure if you can help, but I'm fiddling with tailwind at the moment and I want two divs sitting next to each other when the screen width is at a medium size. Anything smaller, I want them sitting on top of each other. I've tried using md:flex and flex wrap, but to no avail. Is there a solution to this?
@sakshamkapoor5905
@sakshamkapoor5905 3 года назад
Hey shaun, can you please tell how many videos are going to be in this series? And when do you expect to complete it? Much appreciated.
@NetNinja
@NetNinja 3 года назад
Hey, about 18 in total probably about another week or something until it's all up.
@sakshamkapoor5905
@sakshamkapoor5905 3 года назад
@@NetNinja that's amazing, thank you Shaun ❤
@laurabennis3871
@laurabennis3871 3 года назад
@@NetNinja thank youuu!!
@chizuru1999
@chizuru1999 3 года назад
There it is! 1:19 TADA! 😝😝
@marcelomagalhaes4508
@marcelomagalhaes4508 3 года назад
How can I guess what the margin, padding, height, width strengths stands in pixels?
@emiltoteb
@emiltoteb 3 года назад
the values are in rem units, as per the documentation (tailwindcss.com/docs/padding) rem is based on the font size of the root element - 1rem = 1 * root font size on most modern browsers the default font size is 16px, if not changed by the user (i.e. made the text larger/smaller), but you can also set it in your css the font-size of the root element (typically ) is just set the way you set font-size anyway: html{ font-size:12px; /*change to 12px*/ } now 1 rem is 12px, and you can do analogously all other calculations keep in mind that while you set it with font-size, you can use rem units for anything you may use pixels for - margin, padding, drop shadows, font-size, borders, etc there are also plenty videos on the topic of rem, and his little brother - em, so I suggest watching some, it was hard for me to understand them at first too ;) hope this helps, 4 months later
@Uranium-bh7kt
@Uranium-bh7kt 2 года назад
anyone knows the color theme he uses?
@shazianoreen3317
@shazianoreen3317 Год назад
I create my own classes and import them in the tailwind confg file, then I go to the html and put them, but they are shown in the html files, but the code does not work.
@fotios4902
@fotios4902 Год назад
Did you find out why? I have the same problem!
@wheeler553
@wheeler553 Год назад
How do you get your terminal to be all stylized like that with the emojis lol
@apricity3131
@apricity3131 3 года назад
What VSCode theme do you use?
@NetNinja
@NetNinja 3 года назад
Hey, it's Monokai++ :)
@apricity3131
@apricity3131 3 года назад
The Net Ninja Thanks!
@RR-et6zp
@RR-et6zp Год назад
@@apricity3131 try synthwave '84 theme with glow enabled
@mohamedyoussef8835
@mohamedyoussef8835 Год назад
Awesome +++++++++++++++++ 😃
@twisted_tea
@twisted_tea 5 месяцев назад
my highschool it class is using your videos lol
@NetNinja
@NetNinja 5 месяцев назад
Aha :) that's awesome
@stocklin9831
@stocklin9831 Год назад
1:45 flex justify-center 2:00 flex justify-start 2:05 flex justify-end 2:20 flex justify-between 2:30 flex justify-around 2:40 flex justify-evenly 2:50 flex justify-end 3:55 h- w- 4:50 boxes - flex 5:10 boxes - flex item-end 5:30 boxes - flex item-center 5:40 boxes - flex item-center justify-center
@andyambrose
@andyambrose Месяц назад
This didn't work on my system. Not sure why. The flex properties didn't reflect on my browser.
@flow1465
@flow1465 Месяц назад
Check the href attribute in the link tag. Make sure the name is correct.
@adeniyitaofik3832
@adeniyitaofik3832 2 года назад
tailwindcss build src/input.css -o public/output.css only builds out @tailwind base; it dose'nt build @tailwind components and @tailwind utilities
@rishadali2866
@rishadali2866 2 года назад
Same thing happened to me but now it's working fine reply me I'll tell you how I did it or you can just search on RU-vid tailwind installation and filter the results as this month and watch the first video that comes up at top
@markjak5031
@markjak5031 10 месяцев назад
💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙
@comradered8125
@comradered8125 3 года назад
Please make a playlist on anime js or howler js or ml5/tensorflow js like if you agree so sensei can see it
Далее
Tailwind CSS Tutorial #8 - Responsive Classes
5:45
Просмотров 172 тыс.
I WISH I Knew These Tailwind Tips Earlier
9:15
Просмотров 168 тыс.
ОСКАР И ДЖОНИ СПАСЛИ ЛЕРУ😳
01:01
Мечта Каждого Геймера
00:59
Просмотров 231 тыс.
Napoletano Pizza w/ Vincenzo Capuano & @Lionfield
00:39
Flexbox or grid - How to decide?
18:51
Просмотров 699 тыс.
Tailwind CSS Tutorial #4 - Margin, Padding & Borders
7:05
Learn CSS flexbox in 10 minutes! 💪
10:01
Просмотров 111 тыс.
Tailwind CSS Tutorial #11 - @apply Directive
3:47
Просмотров 90 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
Tailwind CSS Tutorial #12 - Grids
6:49
Просмотров 159 тыс.
Complete CSS Flexbox Tutorial using Tailwind CSS
38:17
Tailwind CSS Tutorial #5 - Tailwind Config
11:16
Просмотров 165 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 901 тыс.
ОСКАР И ДЖОНИ СПАСЛИ ЛЕРУ😳
01:01