Learn CSS Displays in 12 Minutes | Grid, Flexbox, Inline Block, Block

  Рет қаралды 26,364

developedbyed

developedbyed

Күн бұрын

💖 Check out my web development courses
developedbyed.com
-------------------------------------------------------------------------------------------------
If you are interested in learning about the weird behaviours display properties have in CSS, this video is the one for ya. We will speedrun through the most important CSS display types that you will need for creating layouts and styling elements.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
📖Chapters
00:00 Intro
00:13 Display Block
01:07 Inline
03:08 Inline Block
05:49 Flexbox
08:51 CSS Grid
11:34 Other Display Types
-------------------------------------------------------------------------------------------------
#programming #css #webdevelopment

Пікірлер: 53
@PatrickHoodDaniel
@PatrickHoodDaniel 2 ай бұрын
After watching this video, my brain had this "level up" moment! 🤯 EVERYBODY that does anything with CSS should watch this video!
@Landon_Hughes
@Landon_Hughes 9 ай бұрын
One trick I love is using: .parent { display: flex; gap: 1em; } .child { margin-left: auto; } Great for nav items and dashboards :D
@vice-108
@vice-108 9 ай бұрын
I'll try this 😊
@emmanueloyiboke
@emmanueloyiboke 9 ай бұрын
I’ll definitely try this😃
@carlocrighton
@carlocrighton 8 ай бұрын
Thanks, got an example (via a url link) I can see?
@developedbyed
@developedbyed 9 ай бұрын
Flex is honestly the best 👍
@synodox
@synodox 9 ай бұрын
I learned from you it's been a year and I'm happy to say i learned html css and js from ur paid course and made projects you really developed my skills and confidence thank you "DEV ED"❤
@TheTechHubSisters
@TheTechHubSisters 3 ай бұрын
WHOA WHOA, did i mention display:💪; cool eh
@dotpenji
@dotpenji 9 ай бұрын
Hey there, my tech-savvy friend! Your CSS tutorial was not only informative but also delivered with such enthusiasm that it made learning about display properties in CSS genuinely enjoyable. Among all the display properties you covered, which one is your personal favorite, and why? Have you ever used a specific property in a unique or unconventional way that turned out to be surprisingly effective? Share your insights with us!
@motivatedbeastph
@motivatedbeastph 9 ай бұрын
I must say, your CSS tutorial left me thoroughly impressed, blending both informativeness and genuine enthusiasm to make delving into CSS display properties a truly delightful experience.
@itsme_jervy1404
@itsme_jervy1404 9 ай бұрын
His enthusiasm and clear explanations in this CSS tutorial make learning about display properties a breeze, and I genuinely appreciate your engaging teaching style! 🚀😊
@DenverOrtiz
@DenverOrtiz 9 ай бұрын
That's right @dotpenji! Worth watching. I learned a lot from his video. Kudos!
@monicasoriano8581
@monicasoriano8581 9 ай бұрын
I completely agree! Effective teaching often combines knowledge with passion, making the learning experience more engaging and memorable. Great work! Sharing insights and unconventional uses can inspire others to explore the full potential of CSS in their web design projects. 💻🎨
@lusyow0517
@lusyow0517 9 ай бұрын
CSS tutorial is my choice hehe
@vermaanurag137
@vermaanurag137 9 ай бұрын
I have recently started watching your videos and i really like how simply you explains it.❤❤
@hoiskypoisky3896
@hoiskypoisky3896 9 ай бұрын
Thank you for all the helpful tips Ed!
@pcost
@pcost 9 ай бұрын
Ed, have been waiting for your ultimate Solid.js course for so long now 😢
@geniusstudent8804
@geniusstudent8804 9 ай бұрын
holly sh*t man, I was just looking for a good tutorial for Grid, Flexbox, Inline Block, Block, then this video shows up in my youtube home page, thanks a lot mate, I hope you do more video about the GSAP animations (combined with react and tailwind) thank you again
@cristovao96
@cristovao96 9 ай бұрын
One powerful and often underrated display property is the display: contents property. I find it particularly useful when I don’t have control over the markup, which can affect styling. For example, when I need to have items in the same container for flex or grid layouts.
@Stoney_Eagle
@Stoney_Eagle 9 ай бұрын
I use a nice little mnemonic: Justify FOLLOWS the direction, Align CROSSES the direction. 😉
@idorenyinbenson1161
@idorenyinbenson1161 9 ай бұрын
i subscribed long time ago to your channel because i like how you explain things
@jediampm
@jediampm 9 ай бұрын
Hi, thanks for the video. A few tips, like gap work beside grid also flexbox, instead of using flex-end or flex-start, you can use exactly like grid, just end or start. You need to learn how used dev tools to show flexbox and grid, to help you show gaps, lines, cells, etc. To finalize another alternative to flexbox and grid is css columns !!!!! :)
@KevinDamm
@KevinDamm 9 ай бұрын
I think it helps to mention visibility: hidden when talking about display: none. The float property is kind of related to display, but thank you for not mentioning the absolute-position-outside-of-view hack for hiding things.
@abiodunhodonu1340
@abiodunhodonu1340 9 ай бұрын
Thank you my gorgeous tutor on the Internet. 😊
@Nikolafesb
@Nikolafesb 9 ай бұрын
Are all this videos prelude to new css course? I can see you are really focused on html and css in recent videos :D
@taylortoast2
@taylortoast2 9 ай бұрын
As always thank you for the content.
@mjylove2
@mjylove2 2 ай бұрын
thank you for the video!
@nickderaj
@nickderaj 9 ай бұрын
I think the most typed thing on my laptop is flex justify-center items-center (with tailwind). Just solves 90% of my issues with spacing haha
@krasavchiklite
@krasavchiklite 9 ай бұрын
EDDD!!!! forget about display:flex; mate, where did you get that wallpaper??? looks awesome!!!
@saimohanatkuri9169
@saimohanatkuri9169 8 ай бұрын
Can you tell me which vs code theme are you using in this video
@Schisek
@Schisek 9 ай бұрын
Small correction for the curious ones at 11:10 . I think you meantto use 4/5 instead of 5/6. by using 5/6 you extended the grid layout by one column which may be a bit confusing. At least it was me having to watch it 3 times😂
@leulwebshet9750
@leulwebshet9750 9 ай бұрын
Heyy Dev 😊 can you make Hasura tutorial and show us how to use Hasura Actions
@darwinstar6753
@darwinstar6753 9 ай бұрын
please make tutorial about function in css example calc function?
@gangasaikumarg7393
@gangasaikumarg7393 9 ай бұрын
Hi can you make vscode rightside scroll bar with wide thumb nail preview of current possiton like in css
@vice-108
@vice-108 9 ай бұрын
You mean minimap?
@gangasaikumarg7393
@gangasaikumarg7393 9 ай бұрын
ya yes is this possible to create in css js, if it is possible can you give me a code please@@vice-108
@GameClips8
@GameClips8 9 ай бұрын
I miss you guy, been a while...
@GameClips8
@GameClips8 9 ай бұрын
Does this still count? I have moved on to #framer, #webflow and more...
@Agung-yk7hr
@Agung-yk7hr 9 ай бұрын
The best
@andreschou9560
@andreschou9560 9 ай бұрын
CSS tailwind made me forget how it was to work with stylesheets ahaha
@RomalBhulani
@RomalBhulani 3 ай бұрын
Can you please NOT use a blue background with black text? Otherwise, an excellent explanation. Thank you
@atanumojumdar
@atanumojumdar 9 ай бұрын
💜
@anselum540
@anselum540 9 ай бұрын
Flex users 👇
@uwu3614
@uwu3614 9 ай бұрын
I waiting to make you a js ecommerce
@bugraotken
@bugraotken 9 ай бұрын
Don't wait, there are 4085640855064 tutorials about it on KZfaq.
@bugraotken
@bugraotken 9 ай бұрын
Do not limit yourself to learn a thing by waiting a streamer to make a video about it, just find another guy instead of waiting. There is no schedule of developedbyed on public that you can check when your desired tutorial will pop up. Just find someone else and learn for gods sake.
@leulwebshet9750
@leulwebshet9750 9 ай бұрын
First
@marjhuncantago9476
@marjhuncantago9476 4 ай бұрын
@DevelopedByed please, can you please, able to fix my HTML/CSS code. Whatever WORK Experiment img { width: 200px; border-radius: 50px; float: left; margin-right: 20px; } .angry-grid { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0px; height: 100%; } #item-0 { background-color: #b5dd9d; grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; } #item-1 { style="style="width:150px;height: 300px; line-height:1em; overflow:scroll; padding:5px;"> " background-color: #ed759b; grid-row-start: 1; grid-column-start: 2; grid-row-end: 2; grid-column-end: 13; } #item-2 { background-color: #000000; grid-row-start: 2; grid-column-start: 1; grid-row-end: 6; grid-column-end: 2; } #item-3 { background-color: #f6de8f; grid-row-start: 2; grid-column-start: 2; grid-row-end: 6; grid-column-end: 11; } #item-4 { background-color: #7ee5eb; grid-row-start: 2; grid-column-start: 11; grid-row-end: 6; grid-column-end: 13; } Epic Seven Epic Seven is a free-to-play 2D RPG available on iOS and Android platforms. Control a variety of characters as you explore the game's world through its adventure mode, which is brought to life with anime cutscenes that detail the game story as well as individual character special attacks. Ragnarok Ragnarok M: Eternal Love is a massively multiplayer online role-playing game (MMORPG) that allows players to create a character and explore the world of Rune Midgard as they complete quests. YS Lacrimosa NIS America, Inc. This is an action role-playing game in which players lead adventurers on a quest to escape a mysterious island. As players explore the environment, they interact with characters, engage in quests, and battle fantastical beasts (e.g., dinosaurs, dragons, skeletons). Disgaea 7 Like its predecessor, Disgaea 7 is a tactical role-playing video game. The game follows Fuji, a demon warrior, and his companion Pirilika as they embark on an adventure in a netherworld named Hinomoto. New mechanics, such as "Jumbability" which increases the size of the player character, are introduced. Pokemon Black & White Pokémon Black and White takes place in the Unova region, based on New York City. As with all regions, Unova consists of a number of cities and towns connected by "Routes". Random encounters may take place in tall grass along routes or in bodies of water. Saga Frontier The basic concept of SaGa Frontier is based on its Free Scenario System, in which one can play as any of seven different protagonists, all of whom exist in the same setting, a solar system known as The Regions: a group of planets, each with its own culture, game-level of technology, and form of magic. Magia Record Magia Record: Puella Magi Madoka Magica Side Story is a Japanese role-playing video game developed by f4samurai for Android and iOS, which was released by Aniplex in Japan on August 22, 2017. A North American version was available from June 2019 to October 2020. Button Button Button Button Button Button  
Simplify your CSS with these 3 grid layout solutions
7:10
Kevin Powell
Рет қаралды 129 М.
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 698 М.
UFC 302 : Махачев VS Порье
02:54
Setanta Sports UFC
Рет қаралды 1,3 МЛН
Эффект Карбонаро и бесконечное пиво
01:00
История одного вокалиста
Рет қаралды 6 МЛН
How I prepare to meet the brothers Mbappé.. 🙈 @KylianMbappe
00:17
Celine Dept
Рет қаралды 59 МЛН
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 897 М.
Learn CSS Grid the easy way
37:04
Kevin Powell
Рет қаралды 869 М.
Learn CSS Grid in 20 Minutes
18:35
Web Dev Simplified
Рет қаралды 766 М.
Learn CSS Flexbox in easy way
9:09
Nova Designs
Рет қаралды 15 М.
Learn CSS Subgrid in 14 minutes
14:19
Slaying The Dragon
Рет қаралды 51 М.
Top 10 Javascript One Liners YOU MUST KNOW!
14:16
developedbyed
Рет қаралды 191 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 102 М.
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,1 МЛН
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,4 МЛН
wireless switch without wires part 6
0:49
DailyTech
Рет қаралды 1,2 МЛН
Mi primera placa con dios
0:12
Eyal mewing
Рет қаралды 569 М.
Задача APPLE сделать iPHONE НЕРЕМОНТОПРИГОДНЫМ
0:57