Become A Master Grid CSS In 13 Minutes

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

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

  • @lundeveloper
    @lundeveloper  8 месяцев назад +39

    If you find it interesting, don't forget to subscribe to follow the latest videos. And please suggest me what topic you would like to see a video about

    • @ReyanabidWebDev
      @ReyanabidWebDev 8 месяцев назад

      hi can you help me

    • @timothyharrison5105
      @timothyharrison5105 8 месяцев назад

      Details on Flex
      (Just to be sure that there are no hidden majic that were not covered in the previous videos)

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

      ​@@ReyanabidWebDev how can i help u bro

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

      Do a video on vs code extensions u use

    • @Jumanji_Dev
      @Jumanji_Dev 2 месяца назад

      GREAT, FUN Explanation Loved It and Already Subscribed G 💯

  • @aluexpress987
    @aluexpress987 7 месяцев назад +70

    Best css teacher i have ever seen in RUclips.

  • @cyanide5188
    @cyanide5188 6 месяцев назад +7

    never seen someone doing it better in such a simple way.

  • @psychleo6430
    @psychleo6430 6 месяцев назад +3

    Found your channel just 2 days ago. Just cant get over it how much I have to learn and its all looking amazing and fun thanks to you.

  • @Manju_8102
    @Manju_8102 13 дней назад +1

    Bestt videoo!
    You're the one who teaches how to change the place of the grid-items .thank you so muchhhhh!!!!!

  • @vishalkumarchoudhary8497
    @vishalkumarchoudhary8497 7 месяцев назад +28

    Mr.Beast Grid Known very well nd great tutor too!!

  • @reloaddabeat5158
    @reloaddabeat5158 2 месяца назад +1

    You explained this so well, everyone else is explaining it like a maths lecture, you've got a new subscriber

  • @Plotwist320
    @Plotwist320 2 месяца назад +1

    I highly recommend reviewing it the next day after learning. I noticed that this helped me catch misunderstandings and remember things I had completely forgotten.

  • @NejcHawaii
    @NejcHawaii 10 дней назад

    I watched many videos to understand why Grid and video are game changers. Thank you!

  • @okon1624
    @okon1624 6 месяцев назад +1

    I feel like congratulating myself for clicking on this video, because i almost ignore the video, but surprisingly this is the best grid video have ever watched, even know more gird properties than before.
    Thanks so much for this video.

  • @mayurgdv7511
    @mayurgdv7511 15 часов назад

    💯 helpful to revisions and first time learning. Thank you bhai 🙏😄

  • @neon_playzz9888
    @neon_playzz9888 5 месяцев назад +2

    Thank you very much, you are the most interesting individual who teaches CSS this way, don't stop uploading, i enjoy your content.

  • @Tyler-l9z4m
    @Tyler-l9z4m Месяц назад +1

    you explained better than my teacher. I wish it pays back one day. Thanks!😀

  • @AS-rg9ly
    @AS-rg9ly 8 месяцев назад +8

    Awesome video! Auto-fill is a definite game-changer

    • @lundeveloper
      @lundeveloper  8 месяцев назад +2

      That's right, thank you 😊

    • @PicSta
      @PicSta 7 месяцев назад +3

      I prefer auto-fit instead of auto-fill to fit into its container size. Both values have their niche to be used, but in most cases the auto-fit value is the better choice. This can also be combined with a minmax() function for even more precise control.

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

    Best video on grid I have ever seen. You are the best teacher.🖤🖤

  • @matheussantosdasilva7084
    @matheussantosdasilva7084 Месяц назад

    Thank you master, it's always good to learn from those who want to teach.

  • @ssygon2
    @ssygon2 7 месяцев назад

    🤯grid-template-areas more visual, than having to calculate each item! Awesome!

  • @denisdjota8056
    @denisdjota8056 6 месяцев назад

    I'm your fan, congratulations on your professionalism and for sharing your wealth of knowledge. I will watch all your videos!

  • @SurajKarayat
    @SurajKarayat 2 месяца назад

    Simplest way of explaining..... Love the way.❤

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

    i was here from the start like 9-10k subscribers. everytime i watched your video i thought this creator deserves all the subscribers because how good the content is. glad to see you are almost you now have 106k subs. congratulation bro.

  • @abdu1989-l2v
    @abdu1989-l2v 4 месяца назад

    Amazing video, I like the way of your teaching it's fast at the same time its easy to understand. before this video it was hard to me to understand grid, but now I started knowing grid Thanks to you.

  • @designordu159
    @designordu159 3 месяца назад

    tbh! I've had issues with grid B4 this video, I auto subscribed..thanks a lot❤️❤️

  • @tiagoae
    @tiagoae 3 месяца назад

    the best explanation i have seen, thank you man!!

  • @samefrequency20
    @samefrequency20 2 месяца назад

    Cảm ơn LunDev nhé video dễ hiểu nhất từ trước đến giờ mình từng xem.

  • @umairahmed2657
    @umairahmed2657 2 месяца назад

    Very good and simple method of teaching such complex properties of CSS, impressive, kindly share me link of the code use in this video

  • @jd54541
    @jd54541 25 дней назад

    This is very helpful, thanks heaps! 💪🏼

  • @SatyaPrakash-lm7rh
    @SatyaPrakash-lm7rh 4 месяца назад

    This video is so good that I started crying with joy. 😭❤

  • @orc_song
    @orc_song 8 месяцев назад +1

    Man....thank u soo much you sharpen my grid knowledge.

  • @renrenklein_th
    @renrenklein_th 7 месяцев назад

    Just stumbling across your channel and loving the teaching method only thing I would change is I always try to use % when giving sizes so that the webpage is easily resizable if everything is just random px sizes it does make for some headaches in bigger projects.
    But other then that love the content ^_^

  • @shawnstorr10
    @shawnstorr10 4 дня назад

    I love the way you teach alot alot!

  • @itsme_koii
    @itsme_koii Месяц назад

    for anyone doesnt know how to see the gridlines. go to dev tools (f12), go to layout (it is in the same option row with the style option), then check the options you want to display

  • @MohdMusrat001
    @MohdMusrat001 6 месяцев назад

    I love your teaching skills and I think you are the best for css and front end designing❤❤❤

  • @PurnachandraBandaru-e4c
    @PurnachandraBandaru-e4c 3 месяца назад

    What an explanation bro. Too good 🔥🔥🔥

  • @Wako_san91
    @Wako_san91 3 месяца назад

    Couldn't we use methods like minmax, calc and clamp instead of media queries? Would love a deep dive on that cos you're very good at explaining things in ways that make sense right away 👏🏾

  • @FABRIGS015
    @FABRIGS015 7 месяцев назад

    no cap you're the best css teacher ever

  • @ZivKoHai
    @ZivKoHai 7 месяцев назад

    hands down this is the best explanation ive seen and your voice is so similar to mr beast

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

    concise and simple, love the sound effects..

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

      I hate them

  • @YousufAli-b2z
    @YousufAli-b2z Месяц назад

    Absolutely amazing explanation. From which world you coming from bro.

  • @TonyStark-24X
    @TonyStark-24X 4 месяца назад +2

    To get the grid lines with numbers : Open Inspect window, in the bottom right corner you will find a Layout tab where you can select the Grid overlays checkbox

    • @Hillgrov
      @Hillgrov 3 месяца назад

      I've looked everywhere (besides where ever it is you're saying it is).. I can't find it.

    • @TonyStark-24X
      @TonyStark-24X 3 месяца назад +1

      @@Hillgrov maybe you are not worthy

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

    You explained well, and nothing new that i learned (but im also studying Applied Computer Science at uni). That is why I noticed that youre working with pixels instead of rem or %.
    There are many noobs that watch your videos and they have no clue why working with pixels is VERY BAD practice. When you work with pixels, you should always disclaim that the use of pixels in 99,99% of cases is bad but you use it now for ease of use. If you said that in your video at the very start, this video would have been 100% educationally correct instead 90%.
    In any case, it was a nice to see how you use the grid-templ-area. I didnt use enough space between the dots which makes my grid messy. I will change that from now on.

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

      and you should explain why rem is a better choice (because of the noobs reading the comments)

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

      @@danholm99 I dont need to do anything. Its not my job to educate people, otherwise I would have started my own channel or be a teacher in some form.
      I already helped noobs enough by stating that using pixels is very bad practice. The noob student should do their own research. Just like every programmer has done a billion times. You guys are not babies, and not everything should be given with the golden spoon in your mouth. There are enough resources to educate yourself, cuz hey.... thats what youre trying to do when looking up tutorials online, right....??!
      Good luck.

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

      @@jeremygl1569 And good luck to you 😄

  • @JoergSteinhauer
    @JoergSteinhauer 5 месяцев назад +1

    Great and simple explanation, love it!
    But:
    - what about "mobile" first? Its better to go with "min-width" instead "max-width" in media queries
    - I'm missing in-deepth expanations about "Special Units & Functions" like: min-content, max-content, fit-content, minmax, auto-fill, auto fit.
    - Also subgrid and masonry topics are quite interesting but complex
    --> maybe some input for your next video ;)

  • @allenarcher2477
    @allenarcher2477 6 месяцев назад +1

    "I've watched a few videos on the subject as a newbie programmer, and this is by far the best example I've seen for simplifying grid layout. One small tip: consider adding slightly longer pauses after demonstrating examples to give viewers more time to process the information. Thanks for the tutorial! Because of it, I've set up a killer-looking VS Code IDE and have a much better grasp of grid layout. Keep up the great work!"

  • @alexcostal3749
    @alexcostal3749 7 месяцев назад +1

    That's one of the best grid tutorial ☺️

    • @lundeveloper
      @lundeveloper  7 месяцев назад +1

      Wow, thank you so much 😍😍

  • @jadedanielle7151
    @jadedanielle7151 9 дней назад

    I have aa short attention span and the sound effects just keeps me entertained lol

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 7 месяцев назад

    why this channel was hidden from me till now, I am so happy that I am finally among chosen ones

  • @abcdabcd8605
    @abcdabcd8605 8 месяцев назад +1

    5:11 amazing explanation!!

  • @siddharth7994
    @siddharth7994 7 месяцев назад

    Hello Bro Your Videos on CSS are Excellent, I want yo ask that can you make the playlist on advanced CSS properties,
    I want to explore it more.. please

    • @lundeveloper
      @lundeveloper  7 месяцев назад +1

      Hi, I created a CSS tutorial playlist, you can check it out

  • @Trendi_Vibes
    @Trendi_Vibes Месяц назад

    Please make an master css course video with including this kind of awesome content 👌

  • @clarkcatle6720
    @clarkcatle6720 7 месяцев назад

    Dang bro, your vid is much more understandable than my college prof, keep up❤

  • @erikvanzanen
    @erikvanzanen 7 месяцев назад +1

    This makes me wonder to drop Flexbox o0 but I also feel that Grid is preferred more for like the examples of the chairs; when you have more then lets say 5 items or you want to define a specific designed layout.

    • @lundeveloper
      @lundeveloper  7 месяцев назад +1

      I created a video instructing people when to use grid and when to use flexbox, you can check it out.

  • @CreativeFull
    @CreativeFull 3 месяца назад

    Very nice, loved this video

  • @dearpromax
    @dearpromax 6 месяцев назад

    Sir kindly make one more video on Grid layout and please prefer a small grid Based project ❤

  • @Lilbony-g8b
    @Lilbony-g8b 3 месяца назад

    The best way ever thank you

  • @ranesourav
    @ranesourav 7 месяцев назад +2

    Great video
    How do you have the dotted lines, the blue shade and section numbers highlighted on the divs ?

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

      from browser dev tools, go to html where grid is located, there you can see grid tag on right side of element, click on it and you got that grid highlighter

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

    again and again great content

  • @gaming4life781
    @gaming4life781 3 месяца назад +1

    Bro, I was reluctant to subscribe to your channel but with this video I can't take it anymore

  • @CristianDAgostino-h6k
    @CristianDAgostino-h6k 22 дня назад

    this seems to be illegal to have and to watch, i'm yours, instant subrscribed

  • @abcdabcd8605
    @abcdabcd8605 8 месяцев назад +1

    Definitely make videos on CSS positions(relative, absolute)

  • @Auryo-7
    @Auryo-7 2 месяца назад

    TANKS YOU, really you juste saved my ass for a work i have to deliver for friday

  • @Tzitzemine
    @Tzitzemine 5 месяцев назад +4

    The red outline and the coordinates on the left, how did they get displayed? Is that a VSCode plugin for liveserver or something different?

  • @abcdabcd8605
    @abcdabcd8605 8 месяцев назад +1

    Awesome explanation mate!

  • @amirmumtazsiregar6394
    @amirmumtazsiregar6394 8 месяцев назад

    Can you make the adding cart with php and login account? Your explanation is awesome I just understand the grid and flex just with your video, hopefully can understand the adding cart with php too haha

  • @SlamPeaceful
    @SlamPeaceful 7 месяцев назад

    @lundeveloper I'm over the moon when I see your videos, please continue, great job 🎉

    • @lundeveloper
      @lundeveloper  7 месяцев назад +1

      Thank you so much 😍😍😍😍

    • @SlamPeaceful
      @SlamPeaceful 7 месяцев назад

      @@lundeveloper could I ask you for to explain the 3d design if you have a time, i think it's popular now, what do you think for that, thanks too much to listen my words

  • @ryosynys5745
    @ryosynys5745 7 месяцев назад

    very important for me, thanks dude

  • @KingTony-v7j
    @KingTony-v7j 3 месяца назад

    Incredible 😲

  • @comminatinmarkitingdealwit5614
    @comminatinmarkitingdealwit5614 21 день назад

    super fun and consises thanks

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

    Dude your videos are really amazing and informative, but i just wanna suggest that the music used in the video is little unpleasant to me, they are unexpected and pretty loud and rough. Can you please try little sound variation in your video?

  • @mahmoud-mj3yw
    @mahmoud-mj3yw 5 месяцев назад

    Nice work man

  • @otitologos
    @otitologos 25 дней назад

    I'm positive using the word quadrilateral made you feel smarter!

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

    don’t mind the AI voice comments and keep up the good work, your videos are amazing! 😁

  • @lx9364
    @lx9364 7 месяцев назад

    Thank you Mr.Beast this tutorial was very comprehensive

  • @Programming-Fun-With-Hima
    @Programming-Fun-With-Hima 7 месяцев назад

    You're just extraordinary ❤🎉🎉❤❤

  • @aao_web_developer
    @aao_web_developer 3 месяца назад

    amazing ✨✨

  • @AdamChou-mu3ow
    @AdamChou-mu3ow 4 месяца назад

    Amazing 🤩

  • @nohandletho
    @nohandletho 5 дней назад

    Loved it

  • @donydeltadtad7311
    @donydeltadtad7311 7 месяцев назад

    i like every each content it is very knowledgeable

    • @lundeveloper
      @lundeveloper  7 месяцев назад

      Thank you so much bro 😍

  • @CodeWithAvatar
    @CodeWithAvatar 2 месяца назад +1

    Hey lun, I have one question, so what's the difference between auto and 1fr?

  • @Basma-ur4jr
    @Basma-ur4jr 4 месяца назад

    i understand grid ....finallyyyyyy

  • @MG-wx8yx
    @MG-wx8yx 3 месяца назад +4

    The dramatic music is so dramatic, and I love it.

  • @logic-rameshwar
    @logic-rameshwar 8 месяцев назад +1

    Awesome bro can you also create the same for flex box

  • @PLATO-en5kp
    @PLATO-en5kp 7 месяцев назад +1

    Thank you ❤🎉🎉

  • @mazinshakeel9553
    @mazinshakeel9553 7 месяцев назад

    Great Tutorial👍🏻

  • @TIKTOK-qd3rw
    @TIKTOK-qd3rw 3 месяца назад

    Classic Teacher

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

    perfectly explain 100%

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

    Brother can u do a video on the extentions u use in vs code..please 🤔

  • @sanketchaudhary3344
    @sanketchaudhary3344 7 месяцев назад

    Yo cool video, hows your console showing those measurements?

    • @lundeveloper
      @lundeveloper  7 месяцев назад

      This is a devtool, it is available on most browsers

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

    Could you please explain how your output displays the layout of your code with borders and background colors as you write it? Is there any extension you use for that?

  • @juanantonionavarrojimenez2966
    @juanantonionavarrojimenez2966 8 месяцев назад

    Great video. Thank you very much.

  • @Cutie-Kush
    @Cutie-Kush 11 дней назад

    the way you got realtime visible grids in the dev tools, is that a feature or you edited it using vfx ?

  • @-Barny
    @-Barny 7 месяцев назад

    Can I tell you something? I love you ❤😂
    Maybe for you, it's nothing but for a person like me who is just learning it's a lot. Thank you

  • @endlacer
    @endlacer 7 месяцев назад +2

    very good, but maybe reduce the usage of these sound effects.. :)

  • @DavidGutierrez-dj2kk
    @DavidGutierrez-dj2kk 6 месяцев назад

    Great Video! I am ditching flex.

  • @Jjjnmkkmkkk
    @Jjjnmkkmkkk 6 месяцев назад

    Bro always make your videos with explanations

  • @CodewithJDi
    @CodewithJDi 7 месяцев назад

    Thanks Lun bro😍😋😁

  • @itsEasy-Bro
    @itsEasy-Bro 18 дней назад

    this is the best

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

    How was the live server showing in this css friendly manner?

  • @xbiohazardx7312
    @xbiohazardx7312 27 дней назад

    Better than the most of video

  • @codedjango
    @codedjango 6 месяцев назад

    Nice...Most youtubers here use auto-fit instead of auto-fill....whats your take on this?

  • @jcjiron
    @jcjiron 7 месяцев назад

    Amigo, gracias, eres una chulada jaja!

  • @israx2
    @israx2 7 месяцев назад

    Pufff! you are a beast bro! .... a beer for u.