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

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 53

  • @Landon_Hughes
    @Landon_Hughes Рік тому +21

    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 Рік тому +2

      I'll try this 😊

    • @emmanueloyiboke
      @emmanueloyiboke Рік тому +2

      I’ll definitely try this😃

    • @carlocrighton
      @carlocrighton Рік тому

      Thanks, got an example (via a url link) I can see?

  • @developedbyed
    @developedbyed  Рік тому +28

    Flex is honestly the best 👍

    • @synodox
      @synodox Рік тому +4

      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 10 місяців тому +1

      WHOA WHOA, did i mention display:💪; cool eh

  • @PatrickHoodDaniel
    @PatrickHoodDaniel 10 місяців тому +4

    After watching this video, my brain had this "level up" moment! 🤯 EVERYBODY that does anything with CSS should watch this video!

  • @dotpenji
    @dotpenji Рік тому +8

    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 Рік тому

      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 Рік тому

      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 Рік тому

      That's right @dotpenji! Worth watching. I learned a lot from his video. Kudos!

    • @monicasoriano8581
      @monicasoriano8581 Рік тому

      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. 💻🎨

    • @ryanvalenzuela551
      @ryanvalenzuela551 Рік тому

      This is straight forward video nice content keep it up

  • @pcost
    @pcost Рік тому +2

    Ed, have been waiting for your ultimate Solid.js course for so long now 😢

  • @Stoney_Eagle
    @Stoney_Eagle Рік тому +3

    I use a nice little mnemonic: Justify FOLLOWS the direction, Align CROSSES the direction. 😉

  • @cristovao96
    @cristovao96 Рік тому

    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.

  • @idorenyinbenson1161
    @idorenyinbenson1161 Рік тому +1

    i subscribed long time ago to your channel because i like how you explain things

  • @hoiskypoisky3896
    @hoiskypoisky3896 Рік тому +1

    Thank you for all the helpful tips Ed!

  • @jediampm
    @jediampm Рік тому

    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 !!!!! :)

  • @geniusstudent8804
    @geniusstudent8804 Рік тому

    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

  • @vermaanurag137
    @vermaanurag137 Рік тому

    I have recently started watching your videos and i really like how simply you explains it.❤❤

  • @Nikolafesb
    @Nikolafesb Рік тому +1

    Are all this videos prelude to new css course? I can see you are really focused on html and css in recent videos :D

  • @KevinDamm
    @KevinDamm Рік тому

    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.

  • @xSirBaconx
    @xSirBaconx 25 днів тому

    "Where dreams are made and tears are.....cascading down the sheet" I laughed my ass off at this!

  • @Schisek
    @Schisek Рік тому

    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😂

  • @abiodunhodonu1340
    @abiodunhodonu1340 Рік тому

    Thank you my gorgeous tutor on the Internet. 😊

  • @saimohanatkuri9169
    @saimohanatkuri9169 Рік тому

    Can you tell me which vs code theme are you using in this video

  • @krasavchiklite
    @krasavchiklite Рік тому

    EDDD!!!! forget about display:flex; mate, where did you get that wallpaper??? looks awesome!!!

  • @nickderaj
    @nickderaj Рік тому

    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

  • @mjylove2
    @mjylove2 10 місяців тому

    thank you for the video!

  • @taylortoast2
    @taylortoast2 Рік тому

    As always thank you for the content.

  • @leulwebshet9750
    @leulwebshet9750 Рік тому

    Heyy Dev 😊 can you make Hasura tutorial and show us how to use Hasura Actions

  • @gangasai_kumar_G
    @gangasai_kumar_G Рік тому

    Hi can you make vscode rightside scroll bar with wide thumb nail preview of current possiton like in css

    • @vice-108
      @vice-108 Рік тому

      You mean minimap?

    • @gangasai_kumar_G
      @gangasai_kumar_G Рік тому

      ya yes is this possible to create in css js, if it is possible can you give me a code please@@vice-108

  • @gads_guy
    @gads_guy 10 місяців тому +1

    Can you please NOT use a blue background with black text?
    Otherwise, an excellent explanation. Thank you

  • @GameClips8
    @GameClips8 Рік тому

    Does this still count? I have moved on to #framer, #webflow and more...

  • @darwinstar6753
    @darwinstar6753 Рік тому

    please make tutorial about function in css example calc function?

  • @GameClips8
    @GameClips8 Рік тому

    I miss you guy, been a while...

  • @aoe2dog
    @aoe2dog Рік тому

    CSS tailwind made me forget how it was to work with stylesheets ahaha

  • @anselum540
    @anselum540 Рік тому +2

    Flex users
    👇

  • @esa9999
    @esa9999 Рік тому

    The best

  • @atanu_mojumdar
    @atanu_mojumdar Рік тому

    💜

  • @itsmepingu
    @itsmepingu Рік тому

    I waiting to make you a js ecommerce

    • @bugraotken
      @bugraotken Рік тому

      Don't wait, there are 4085640855064 tutorials about it on UA-cam.

    • @bugraotken
      @bugraotken Рік тому

      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 Рік тому

    First

  • @marjhuncantago9476
    @marjhuncantago9476 11 місяців тому

    @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