CSS Grid - Create a RESPONSIVE DASHBOARD Layout in minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 43

  • @grvsha
    @grvsha หลายเดือนก่อน +2

    best channel as of now to understand html css. thank you creator. you are an angel for me in mastering front end development. 🙏🏻

    • @OptimisticWeb
      @OptimisticWeb  หลายเดือนก่อน

      Thank you for the kind words! I'm glad to be part of your front-end development journey. Your support means a lot! 🙏🏻✨

  • @tchoutangbankouemichelfran5386
    @tchoutangbankouemichelfran5386 2 หลายเดือนก่อน +2

    I learned so much css in just 6 mins. Pliz keep doing more stuff on css grid and responsiveness

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      Thank you! I have a few more videos lined up on the CSS grid. Stay tuned!

  • @kimailis
    @kimailis 2 หลายเดือนก่อน +6

    i hope that you would make react.js or node.js/express tutorials too because your tutorials on web design are spot on! easily understandable and well defined content!

    • @Khaladunnabi
      @Khaladunnabi 2 หลายเดือนก่อน +1

      same suggest for admin

    • @aadilmode7715
      @aadilmode7715 2 หลายเดือนก่อน +1

      U guys are dumb if u think, a very disorganised and messy javascript library like react can be simplified when the language itself is not at all simple. In my personal opinion, i dont want the admin to start putting react here and pollute the channel with react yet. You have many other channels to learn react from and also there is no such thing as a simple tutorial for react. I want this channel to deal with only pure beautiful css and javascript unlike ugly react. Because not everything can be done in react without the basics of css mastery. Go seek react from other channels and dont mess up the only channel were u get to see pure simplified useful css content.

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      @kimailis @Khaladunnabi Thanks for the suggestion! Right now, I'm focusing on plain HTML, CSS, and a sprinkle of JS to ensure the foundation is solid. Later on, we may dive into the basics of JS, and then move on to more advanced topics to serve all levels of users!

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      @@aadilmode7715 Thanks for the feedback! I agree that advanced topics can be tough to grasp without a solid foundation, for now, we're focusing on vanilla CSS and JS. Advanced topics may come later. Everyone has different preferences, and it’s important we respect each other's opinions so we can all learn together.

    • @Khaladunnabi
      @Khaladunnabi 2 หลายเดือนก่อน +1

      @@OptimisticWeb Thanks

  • @mikeeomega
    @mikeeomega 2 หลายเดือนก่อน +1

    Great video, awesome tutorial

  • @coder_astro
    @coder_astro 2 หลายเดือนก่อน +1

    I think God wanted to help me little extra that's why sent this video in my feed today. Thank you very much for this masterpiece CSS MASTER!!!

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      Thank you! I'm glad the video reached you at the right time.

  • @PicSta
    @PicSta 2 หลายเดือนก่อน +2

    Excellent tutorial on CSS Grid, OW! I like the style you teach and show all the options and possibilities. It's not just one way, take it or leave it. I hope there will be a small website demo project with CSS Grid and CSS Flex where you explain when to use Grid and when Flex. What are their pros (and cons). I'm no expert in CSS Grid and Flexbox, but everything what is like website structure (rough layout) I use CSS Grid, when it comes to arrange content inside a container/box I use flex box for its alignment. Of course, there exist different scenarios and maybe better explanations to it. I leave that to you ;-)

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Thank you so much! Glad you enjoyed the tutorial! In my opinion, CSS Grid is great for laying out the overall structure of a page or at the component level, especially when you need more control over rows and columns. Flexbox is perfect for aligning and distributing items within a container. Both have their strengths depending on the requirement! We can have a dedicated video on the topic in future.

    • @PicSta
      @PicSta 2 หลายเดือนก่อน +1

      @@OptimisticWeb yes, your thoughts don't vary from mine. Please make a dedicated video on this subject. I am pretty sure others would like to watch a video like that. It also connects previous videos with content you have explained already. Sometimes having bits and pieces is good and easy to digest, but sometimes the whole is also what you want. I hope you follow me here. Thanks in advance.

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      Sure!

  • @UmohUkpongOkon
    @UmohUkpongOkon 2 หลายเดือนก่อน +1

    Your are the best. I wish you will do tutorials on TailwindCSS and AlpineJs

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      Thank you! Currently, I’m focused on HTML and CSS to make sure the foundation is rock-solid. Any advanced topics might come later down the line.

  • @caju3761
    @caju3761 2 หลายเดือนก่อน +1

    Super!! 👍🚀🚀

  • @mr.fabian8471
    @mr.fabian8471 2 หลายเดือนก่อน +1

    Thanks

  •  2 หลายเดือนก่อน +1

    Hi, what kind of font do u use in your IDE please? Its really cool ... btw, super video!! Thanks!!!

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Thank you! The font is Fira Code.

  • @aadilmode7715
    @aadilmode7715 2 หลายเดือนก่อน +7

    Dear admin dont start react simplified tutorials or any of those ugly complicated not so straightforward framework based tutorials unless u teach as everything u know about pure beautiful heavenly css and javascript and html. U can churn out they framework based content later in the future. This channel is the only channel providing the most useful css knowledge in short clarity clean tutorials

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Thanks for the feedback!

  • @rcs2013
    @rcs2013 หลายเดือนก่อน +1

    Great video ! but what if we want to make the header, the sidbar menu and the footer fixed or sticky and let only the main content to scroll ?

    • @OptimisticWeb
      @OptimisticWeb  หลายเดือนก่อน

      Thank you! You can use position sticky as explained here - th-cam.com/video/znmdx4UZTAg/w-d-xo.html

  • @codedjango
    @codedjango 2 หลายเดือนก่อน +1

    Please do 1 video tutorial on "CSS Subgrid"

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Sure, more videos on the CSS grid are coming soon. Stay tuned!

  • @biggand8520
    @biggand8520 2 หลายเดือนก่อน +1

    Cool tutorial, thank you. I remember when grid only appeared, it was so obvious to do stuffs with flex, that I thought - what is that for? I was ignoring grids for some time… Now grid are that obvious)) Interestingly enough, would it be a time for something after grids? And what could it be? flows?) about the responsiveness, I keep doing my projects downwards - from the biggest screens to mobiles. How do you think, is there any difference?

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Thanks for sharing! I used to work with Bootstrap, which follows a mobile-first approach, so I’m quite drenched in thinking that way. Grid definitely felt like a shift at first, but now it’s an essential tool for layout design. As for what’s next after grids, maybe container queries will be the next big thing! When it comes to responsiveness, I personally stick with mobile-first, but both approaches have their own advantages. It’s all about what works best for your project!

    • @biggand8520
      @biggand8520 2 หลายเดือนก่อน +1

      I had a couple of extra minutes and did some math, so per GA data 87% of users are using mobile platforms to visit my company site, and only 13% are using desktops or tablets... I've never thought about site development from this perspective. Frankly speaking, I've never seen devs who can do both mobile and desktop views the best they can, one of them is always better. Thus, definitely, there is a point to do better the most consumed one.

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน +1

      Yes, mobile traffic is manifold these days compared to the desktop, and your GA data definitely reflects that trend. It’s true that balancing both mobile and desktop can be a challenge, but with mobile usage so dominant, focusing on creating the best experience for mobile users makes a lot of sense.

  • @grvsha
    @grvsha หลายเดือนก่อน +1

    quick question to the creator... why are you using min-block-size instead of min-height?

    • @OptimisticWeb
      @OptimisticWeb  หลายเดือนก่อน +1

      Thanks for asking! min-block-size is the logical counterpart of min-height, please check out this video to learn more about logical properties - th-cam.com/video/yZ-ue17LNpY/w-d-xo.html

  • @MaliRasko
    @MaliRasko 2 หลายเดือนก่อน +1

    why no repo (ಥ﹏ಥ)

    • @OptimisticWeb
      @OptimisticWeb  2 หลายเดือนก่อน

      The code is available at the demo link provided in the description. Thanks for watching!

    • @MaliRasko
      @MaliRasko 2 หลายเดือนก่อน +1

      @@OptimisticWeb funny.. I was lookin for it, hard. Well .. thank you, great content. Keep it simple 💪