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

Поделиться
HTML-код
  • Опубликовано: 25 июл 2024
  • НаукаНаука

Комментарии • 52

  • @PatrickHoodDaniel
    @PatrickHoodDaniel 4 месяца назад +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 11 месяцев назад +16

    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 11 месяцев назад +2

      I'll try this 😊

    • @emmanueloyiboke
      @emmanueloyiboke 11 месяцев назад +2

      I’ll definitely try this😃

    • @carlocrighton
      @carlocrighton 10 месяцев назад

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

  • @vermaanurag137
    @vermaanurag137 11 месяцев назад

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

  • @hoiskypoisky3896
    @hoiskypoisky3896 11 месяцев назад +1

    Thank you for all the helpful tips Ed!

  • @pcost
    @pcost 11 месяцев назад +2

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

  • @developedbyed
    @developedbyed  11 месяцев назад +26

    Flex is honestly the best 👍

    • @synodox
      @synodox 11 месяцев назад +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 4 месяца назад +1

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

  • @geniusstudent8804
    @geniusstudent8804 11 месяцев назад

    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

  • @jediampm
    @jediampm 11 месяцев назад

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

  • @cristovao96
    @cristovao96 11 месяцев назад

    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 11 месяцев назад +2

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

  • @idorenyinbenson1161
    @idorenyinbenson1161 11 месяцев назад +1

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

  • @KevinDamm
    @KevinDamm 11 месяцев назад

    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.

  • @dotpenji
    @dotpenji 10 месяцев назад +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 10 месяцев назад

      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 10 месяцев назад

      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 10 месяцев назад

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

    • @monicasoriano8581
      @monicasoriano8581 10 месяцев назад

      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 10 месяцев назад

      This is straight forward video nice content keep it up

  • @abiodunhodonu1340
    @abiodunhodonu1340 11 месяцев назад

    Thank you my gorgeous tutor on the Internet. 😊

  • @taylortoast2
    @taylortoast2 11 месяцев назад

    As always thank you for the content.

  • @mjylove2
    @mjylove2 4 месяца назад

    thank you for the video!

  • @nickderaj
    @nickderaj 11 месяцев назад

    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

  • @Nikolafesb
    @Nikolafesb 11 месяцев назад +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

  • @krasavchiklite
    @krasavchiklite 11 месяцев назад

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

  • @leulwebshet9750
    @leulwebshet9750 11 месяцев назад

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

  • @saimohanatkuri9169
    @saimohanatkuri9169 10 месяцев назад

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

  • @Schisek
    @Schisek 11 месяцев назад

    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😂

  • @gangasaikumarg7393
    @gangasaikumarg7393 11 месяцев назад

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

    • @vice-108
      @vice-108 11 месяцев назад

      You mean minimap?

    • @gangasaikumarg7393
      @gangasaikumarg7393 11 месяцев назад

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

  • @darwinstar6753
    @darwinstar6753 11 месяцев назад

    please make tutorial about function in css example calc function?

  • @Agung-yk7hr
    @Agung-yk7hr 11 месяцев назад

    The best

  • @GameClips8
    @GameClips8 11 месяцев назад

    I miss you guy, been a while...

  • @atanumojumdar
    @atanumojumdar 11 месяцев назад

    💜

  • @andreschou9560
    @andreschou9560 11 месяцев назад

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

  • @GameClips8
    @GameClips8 11 месяцев назад

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

  • @gads_guy
    @gads_guy 4 месяца назад +1

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

  • @leulwebshet9750
    @leulwebshet9750 11 месяцев назад

    First

  • @killmix-plays
    @killmix-plays 11 месяцев назад

    I waiting to make you a js ecommerce

    • @bugraotken
      @bugraotken 11 месяцев назад

      Don't wait, there are 4085640855064 tutorials about it on RUclips.

    • @bugraotken
      @bugraotken 11 месяцев назад

      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.

  • @anselum540
    @anselum540 11 месяцев назад +2

    Flex users
    👇

  • @marjhuncantago9476
    @marjhuncantago9476 5 месяцев назад

    @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