Responsive design made straightforward



Conquering Responsive Layouts: https://programs.kevinpowell.co/conquering-responsive-layouts

Creating responsive websites generally is a little bit of a ache within the butt at occasions, however should you take it from a sure method, you may make your life quite a bit simpler

/// Hyperlinks
Em vs Rem: https://youtu.be/_-aDOAMmDHI
min(), max(), and clamp(): https://youtu.be/U9VF-4euyRo
exploring hole: https://youtu.be/VvqyUUROmJw

GitHub Repo: https://github.com/kevin-powell/responsive-made-easy

Zell’s take a look at media queries with em: https://zellwk.com/weblog/media-query-units/

/// Timestamps:
00:00 – Introduction
01:27 – Beginning the mission
11:21 – Establishing the customized properties
14:56 – Fundamental styling
24:08 – Beginning the format
33:03 – Including complexity

#css

Due to Vlogbrothers for his or her sponsorship of this video!

Come hang around with different dev’s in my Discord Neighborhood
💬 https://discord.gg/nTYCvrK

Hold updated with every little thing I am as much as
✉ https://www.kevinpowell.co/publication

Assist help my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/programs
👕 Purchase a shirt: https://teespring.com/shops/making-the-internet-awesome
💖 Assist me on Patreon: https://www.patreon.com/kevinpowell

My editor: VS Code – https://code.visualstudio.com/

I am on another locations on the web too!

If you would like a behind the scenes and previews of what is arising on my YouTube channel, be certain that to observe me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

And no matter you do, remember to maintain on making your nook of the web just a bit bit extra superior!

source

47 thoughts on “Responsive design made straightforward”

  1. I just learned more css tips in this video than in most of the other videos that I've watched combined. The simplification, the focus on why/when to use them.. was all so helpful.

    Also the amount of times I was legitimately excited about the thing I just learned tells me that (1) I'm as nerdy as I thought I was, (2) I'm working on the right career. New subscriber!

    Reply
  2. After delving into react and some backend tech, I wanted to go back and revisit the basics of responsive design. This simple yet powerful explanation and example gave me so many great bullet points that I completely overlooked before. Fundamentals are key, thanks for the content Kevin!

    Reply
  3. I can say you're just awesome! it's been 2 years and I thought you gonna use old-school designing methods, but your channel is always updated to the changes which makes you awesome!

    Keep going awesome, from Egypt.

    Reply
  4. Your keyboard is loudy, yes, but it's impossible for me to stop enjoying your magnificent classes! What I like most is the insights you give us when you are designing a web site. That's what a true teacher does. Congratulations! I hope you don't soon get weary of this great channel ;D

    Reply
  5. This feels like the example is too easy, too simple. That's certainly one way to make responsive design easy, I suppose… but I really would have liked to see exploration of a more complex design and addressing the challenges in implementing that design. A two column design isn't hard at all, because you just wrap it into one column when there's not enough space. Especially when the columns are equal width.

    Reply
  6. I am going to go ahead and like this video 5 seconds in because I know it is going to help me, and I like Kevin and his style. I literally just prayed, God, please let me finish this project so I can work on something else! Kevin to the rescue! lol

    Reply
  7. Is there CSS code for making adjustments in landscape mode? I use Elementor (I'm new to web design and am learning CSS to use when needed) and the site looks good on mobile in portrait mode, but looks bad in landscape mode. Thanks to Kevin or anybody who knows how to fix this!!

    Reply
  8. Hey! Thanks for this amazing video! I'm learning web dev on my own and your videos have helped me learn and understand a lot of things. I also use live server in VS code but when I open html, it opens in google chrome. I also have firefox installed on my mac. I watched also your video about using firefox web dev tools. May I ask how to switch to firefox when using liveserver. Thanks for the help!

    Reply
  9. Kevin, the only thing I have to say is I wish I'd have found your channel sooner! The way you explain CSS makes it so easy to understand. You take your time to explain what you're doing and why, and for someone that is more of a visual learner it really helps. Thank you for your hard work and the great videos and tuts!

    Reply

Leave a Comment