Responsive Web Design | 10 Basics

Sdílet
Vložit
  • čas přidán 26. 08. 2024

Komentáře • 158

  • @petitebeterougepetitebeter5928

    Holy cow, giving SPECIFIC examples while explaining or just giving a word can help understanding things sooo much faster. Thanks a lot!

    • @JesseShowalter
      @JesseShowalter  Před 3 lety +1

      Thanks so much, I’m so so glad you saw value in my video.

  • @natthedesigner
    @natthedesigner Před 5 měsíci +1

    Wow, this was so incredibly helpful. You explained everything so well and clearly. Can't wait to watch more of your tutorials!

  • @peculiarpeculiar2504
    @peculiarpeculiar2504 Před 3 lety +21

    This has given me more knowledge than my years of web design put together. Wow, I am really grateful

  • @jimmckay2337
    @jimmckay2337 Před 3 lety +3

    I am currently in a class and we are getting into responsive web design in a couple weeks. I always like to scout what information I should be expecting and I appreciate you sharing this.
    Have a good day,

  • @GraemeWoller
    @GraemeWoller Před 2 lety

    Man, it's been a while since I rode the web dev train and watching this made me remember the insane number of basic things I'd forgotten. LOLz.

  • @odedejikehinde6514
    @odedejikehinde6514 Před rokem

    Thanks you Jesse, 40seconds into your video I was already getting helping contents.
    And thanks for dropping those reference links in the description,
    your work, appreciated.

    • @odedejikehinde6514
      @odedejikehinde6514 Před rokem

      @3:54 points no. 7 you got me relieved about where to start building from - mobile first or desktop first .
      While I find it comfy to build from desktop first, then query down to Mobile, I get sort of worried this is not the best approach, Just as the popular mantra in responsiveness, "Mobile first responsiveness" ; which you kinda agreed to as well, but turns out, isn't your own personal best method of approach as well, like you stated .
      While it sounds good to me it a topic being debated on and, most would say "mobile first" , I think it still all boils down to the approach we are good with .
      This is just my personal assumption, and maybe shouldn't be taken so seriously.

  • @abhay2192
    @abhay2192 Před 2 lety +1

    Was seeking out for this video only, thanks bro!🙄👍

  • @henrythomas7112
    @henrythomas7112 Před rokem

    This is a fantastic video. It's clear and easy to understand your explanations. Thank you for providing this information.

  • @chica779
    @chica779 Před 4 lety +2

    Yay!!!! More Jesse in 2020!! 🙌🏽🙌🏽 Detailed elaboration on each of these would be a wonderful course! Happy New Year!

  • @anishbaxi
    @anishbaxi Před 3 lety +1

    Bruh, perfect explanation one needs about responsive web des. Proper examples, description everything 😍
    Lovely video 😇

    • @JesseShowalter
      @JesseShowalter  Před 3 lety

      Thanks so much for watching, Anish! Have a great week!

  • @Bajrang.707
    @Bajrang.707 Před 3 lety +3

    I also do Desktop first design. 😁
    Very informative video, thanks for it.

  • @myam754
    @myam754 Před 4 lety +2

    Thanks Jesse, learning responsive design right now and this helped a lot. Subbed!

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Yes!!! So glad I was able to help out. Welcome aboard! 🤙

  • @josephgarza5973
    @josephgarza5973 Před 2 lety

    Nice tutorial video, Jesse. Very nicely done. Thank you for your insight in web design. I used your video as s sort of introduction to the topic even though I'm certain I've read about it previously. It really helped to get a global view of what web design entails, and I must say that you are pretty darn thorough considering that this is a very general video. Looking forward to checking out your next one. Kudos for you, dude!

  • @21thTek
    @21thTek Před 3 lety +1

    Hi Jesse , excellent video. Just wanna tell you that in a well done responsive design you need to write rules for margins, padding, font size, and others so you can get a congruent final design not just scalable blocks or multiple columns to one or two ! ; ) ⭐️⭐️⭐️⭐️⭐️

  • @JR-gh8lp
    @JR-gh8lp Před 4 lety +1

    That was an amazing video- very easy to understand & great visual samples... also nice presentation & easy delivery.

  • @miskaknapek
    @miskaknapek Před 3 lety +1

    Thanks for a very good succinct video about this!
    I've done a mix of back/front development, and always forget some details here and there.
    So a nice overview yours, of responsive design, is very helpful.
    Thanks!

    • @JesseShowalter
      @JesseShowalter  Před 3 lety +1

      That’s awesome, Miska! I’m so so glad I was able to help out! Go make amazing things!! 🤘

  • @indieNik
    @indieNik Před 4 lety +10

    Hey Jesse, thank you for the tips. Very useful!
    What I'd like to know next is in what order do you use these tips or Is there any order at all?
    Also, if possible, can you do a video on website performance tuning?
    Love your vids. Keep creating! ✌🏻

    • @JesseShowalter
      @JesseShowalter  Před 4 lety +2

      No particular order, I will make a video on optimization tips

    • @indieNik
      @indieNik Před 4 lety +1

      @@JesseShowalter Thank you so much! Looking forward to it.

  • @AdityaRaj-lj5wf
    @AdityaRaj-lj5wf Před 2 lety

    I am glad for this content.

  • @extraordinarymeatbun
    @extraordinarymeatbun Před 4 lety +1

    What a great guide video! You deserve way more views for the quality of information you share!

  • @kevinarredondo9189
    @kevinarredondo9189 Před 3 lety +1

    Dude love your videos! u rock

  • @edwardtofan1800
    @edwardtofan1800 Před 4 lety +2

    Very helpful clip right there Jesse!But as always I am captivated by your energy, it is so...well I don't have a compartive term right there but you get the point. 😎🤙 I am waiting for the next episode of Jesse energic style of presenting interesting facts🤙😎❤️

    • @JesseShowalter
      @JesseShowalter  Před 4 lety +1

      Haha, thanks so much Edward for the support and kind words, I’m blessed with the best community!!

  • @primatondyaryakurniawan267

    Thank's clear and precise

  • @RameenFallschirmjager
    @RameenFallschirmjager Před 4 lety +1

    Regardless of the content I always smack the like button just for vigorous greetings in the beginning of your videos! And also I liked everything ten commandments that you mentioned in this video!

  • @SavvyChicDesign
    @SavvyChicDesign Před 3 lety +4

    This is amazing content. Thank you..

  • @k.m.arifulislam6581
    @k.m.arifulislam6581 Před 4 lety +1

    It's great to get a clear concept about Responsive Design. Thanks. It was also awesome that your hairstyle and speech delivery, really like it and definitely first chance I will copy your hairstyle! I am just done with like, comment & subscribe! Cool!

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Thanks so much for your kind words and your support!

  • @chrisboden9820
    @chrisboden9820 Před 2 lety

    Super helpful and delivered in a entertaining but informative way. Thank you !

  • @yokoso2386
    @yokoso2386 Před rokem

    Responsive design, flow, relative units of measurement ( px vh ), breakpoints, maximun and minimun value, containers or nested object, mobile or dekstop first, webvonts anf system fonts, bitmaps and vectors, make it work

  • @techwake360
    @techwake360 Před 4 lety +1

    Thanks a lot for sharing helpful information to us

  • @girlingame518
    @girlingame518 Před 4 lety +1

    love your channel , i really learn from you a lot about .

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Thanks so so much!! Get out there and make amazing things!! 🤘

  • @gonzalohernan4169
    @gonzalohernan4169 Před 3 lety +1

    awessome list and explanation, im suscribing right now

  • @ryan7773
    @ryan7773 Před 4 lety +1

    Great list, Jesse.
    Are you interested in doing a Bootstrap/Flexbox series?

    • @backendfyi
      @backendfyi Před 4 lety +2

      Ryan Brooks try tailwindcss and thank me later

  • @shadaflorida4248
    @shadaflorida4248 Před 3 lety

    super awesome video! Clear and precise!

  • @adhamelkelany
    @adhamelkelany Před 4 lety +1

    That is Superb!!!!!!!!!!!!
    Thank you for these tips.

  • @coreygriffin
    @coreygriffin Před 4 lety +1

    Awesome tips for beginners - I'll have to show this to my students!

  • @JakePomperDesign
    @JakePomperDesign Před 4 lety +2

    Dopeness! Love your content man!

  • @marcuspousette6227
    @marcuspousette6227 Před 2 lety

    Amazing video as allways Jesse!

  • @isabellading3818
    @isabellading3818 Před 4 lety +1

    Thanks for the tips, they are really helpful.

  • @hifaothman5278
    @hifaothman5278 Před 4 lety +1

    I will always like, to check the basic ,
    great contents
    Thank you,

  • @Grewal0007
    @Grewal0007 Před 4 lety +1

    Happy New Year Jesse 😊👍

  • @michaelmalalay412
    @michaelmalalay412 Před 3 lety +1

    Man I have so much to learn.

    • @JesseShowalter
      @JesseShowalter  Před 3 lety

      One day at a time, one foot in front of the other! You’ve got this!

    • @pxCode
      @pxCode Před 3 lety

      You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
      Try it out www.pxcode.io , there's tutorials on our channel as well ;)

  • @soldadopreciso
    @soldadopreciso Před 4 lety +1

    thanks pal, greetings from Ecuador.

  • @emzyd9214
    @emzyd9214 Před 4 lety +1

    Wow this is really helpful. Your awesome

  • @robertosoriano9617
    @robertosoriano9617 Před 4 lety +2

    Thank you for this really helpful video!!! Automatic like, and subscribe.

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Thanks so so much, Roberto! So glad to have you join us, get out there and make amazing things!! 🤘

  • @seantatalovich9760
    @seantatalovich9760 Před 2 lety

    If building a responsive site starting with mobile should size be 360 or 414 width? Is there a best practice?

  • @kamithpiumal4887
    @kamithpiumal4887 Před 2 lety

    thank you

  • @djangophillips7864
    @djangophillips7864 Před 7 měsíci

    Thanks for the vid... and it's "relative" not "releative"

  • @SavvyChicDesign
    @SavvyChicDesign Před 3 lety +1

    Question: Does web builders already have these principles in mind? So if I use a builder I still need to make sure these are incorporated?

  • @richardottley4611
    @richardottley4611 Před 4 lety +1

    Happy New Year Jesse 🎊🍾😊🎇.. I thought I was one of the few that starts designing a desktop version then a mobile version. Does it really matter which version you design first? 🤔🤔

  • @rehanqureshiyt
    @rehanqureshiyt Před 4 lety +1

    Just in time when I need it 🤗

  • @2GFactFinder
    @2GFactFinder Před 3 lety +1

    Great.

  • @mradulparihar5766
    @mradulparihar5766 Před 4 lety +1

    Can we use different display picture featuring on a dextop website and mobile website?

  • @xuanzhang2771
    @xuanzhang2771 Před 3 lety

    Sorry for a silly question, how do you use relative unit in design tool, i.e. Sketch, as you can only assign pixel to font? Where does the em thing come in? When handover to developers? Also, thanks for the awesome video :D

  • @ivarzammit4743
    @ivarzammit4743 Před 4 lety

    cool video. thanks for the heads up.

  • @LadanSoodmand
    @LadanSoodmand Před 3 lety

    I thought vw and vh meant vertical width, vertical height. I have a 3 column responsive (well SHOULD be) blog, and it has pixels. Should I change those over to percentages and em's and rem's?

  • @denispaverin4584
    @denispaverin4584 Před 2 lety

    Good job

  • @BonchonTheFrenchie
    @BonchonTheFrenchie Před 4 lety +1

    Great tips!

  • @musthaveV8
    @musthaveV8 Před 4 lety

    im having issues setting breakpoints for phones...the pixel dimensions of the galaxy s10 is almost identical to my screen monitor.

  • @alikhalil2863
    @alikhalil2863 Před 4 lety +1

    great video!!

  • @kartikgupta6634
    @kartikgupta6634 Před 4 lety

    This is so helpful. I'll be designing my first responsive website and this really helped. Can anybody help me with "How to define breakpoints for different platforms?". Thanks

  • @nourhanmasoud900
    @nourhanmasoud900 Před 4 lety +1

    make a video about top 10 Medium writers to follow

  • @thecubersahil6827
    @thecubersahil6827 Před 4 lety +2

    Brilliant!

  • @hani4239
    @hani4239 Před 2 lety

    I really don't know where im going wrong with my code but I find myself using a lot of Media Query break points because the website just looks very irregular every time i size it down (i started coding for PC first)

  • @mdruhulamin9132
    @mdruhulamin9132 Před 3 lety +1

    So nice

    • @mdruhulamin9132
      @mdruhulamin9132 Před 3 lety

      We re the Best Web Design Professional Expert Designer Tehran.
      Leave the design of your own website to the professional design team of Spad Company. Your website reflects the values, beliefs and identity of your business, also referred to as a virtual office. (Best Web Design Professional Expert Designer Tehran)(بهترین طراح متخصص حرفه ای طراحی وب تهران)With a professional website, your business will be available to anyone who needs your services anywhere in the world, 24 hours a day, 7 days a week. Contact us if you need professional website design.
      More information Click this Links:www.spad.co/services/website-design

    • @JesseShowalter
      @JesseShowalter  Před 3 lety

      Thanks!

  • @nikyabodigital
    @nikyabodigital Před 4 lety

    Hope this is directed to UI UX people. Because there seem to be a problem of communication between devs and ui ux.
    These people are just so against each other, the other one is the creative type that always find newer solution, one that innovates.
    while the other are the logical person that doesn't mind using the same solution to all website just to make things simpler.
    There should be a link to both of them like how left and right hemisphere connects. He should've consider more of it like, what about designs that has alot of overflows.. That's a lil bit tricky to code responsively esp if there's alot of it.

  • @darmayuda9236
    @darmayuda9236 Před 4 lety +1

    I want to make my website responsive what should i learn first flexbox or grid?

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Grid IMO

    • @bebesluckyhuman8327
      @bebesluckyhuman8327 Před 4 lety +1

      Darma Yuda Everyone is different, the rule of thumb taught to me, is that flex box is for smaller scale projects and grid is for when you get into really robust multiple page projects. Both are essential to learn and know how to use. Many frameworks incorporate flexbox into their system so having an understanding of flexbox is essential and may be considered a must by some employers. IMO both have about the same quantity of content to learn and in the long run you will need to be fluent in both.

    • @davidedwards8552
      @davidedwards8552 Před 4 lety +1

      Both! as they go hand in hand.

  • @minhhuynh3332
    @minhhuynh3332 Před 3 lety +1

    great content

  • @lensgirl
    @lensgirl Před 3 lety +3

    RIP my ears at the start

  • @vasto1
    @vasto1 Před 4 lety +1

    thx, dude!

  • @shardagovender4465
    @shardagovender4465 Před 3 lety

    Excellent !

  • @Imranhossain-rk3sy
    @Imranhossain-rk3sy Před 3 lety +1

    Thanks for sharing.
    #introduction_web_design_q

  • @arattactician5697
    @arattactician5697 Před 3 lety

    So I went to a vocational school to learn web design, yet none of these things were EVER mentioned. Why, why, WHY?!

  • @jerrygeorge180
    @jerrygeorge180 Před 2 lety

    Nice

  • @mahendramishra6638
    @mahendramishra6638 Před 4 lety +1

    Hey I wants to learn web design how can I start can you give me some ideas.

    • @laxxai
      @laxxai Před 4 lety +1

      I started learning at : teamtreehouse.com/home . They have a two week trial, these design courses serves as a foundation that I use every day as a design consultant at IBM. I really recommend these courses to get started, and after that I think it is all about just creating apps & web sites, just to practise the fundamentals of design. Also check Behance, which is basicly Instagram for designers: www.behance.net/rachidallal .
      A tool I wound recommend to create digital products would be Figma.
      I hope this helps :).

    • @mahendramishra6638
      @mahendramishra6638 Před 4 lety +1

      @@laxxai thank you so much

    • @pxCode
      @pxCode Před 3 lety

      You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
      Try it out www.pxcode.io , there's tutorials on our channel as well ;)

  • @naveenkr5992
    @naveenkr5992 Před 4 lety +1

    Anyone have a list of all HTML tags CSS properties and etc?

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Check WC3 to get all the details

    • @naveenkr5992
      @naveenkr5992 Před 4 lety

      @@JesseShowalter well I'm more confused on wc3.org

    • @pxCode
      @pxCode Před 3 lety

      You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
      Try it out www.pxcode.io , there's tutorials on our channel as well ;)

  • @dxdiagg
    @dxdiagg Před 3 lety +2

    0:37 stevewilldoit intro

  • @KG-ck9hb
    @KG-ck9hb Před 4 lety +4

    He looks like percy from The Green Mile.

  • @mhouli99ify
    @mhouli99ify Před 3 lety +2

    You are the male version of Drew Barrymore. :D

  • @sanjeetsale9242
    @sanjeetsale9242 Před 3 lety

    info video

  • @TheNamesJT
    @TheNamesJT Před 4 lety +1

    his intro song sounds familiar.....stevewilldoit?

    • @JesseShowalter
      @JesseShowalter  Před 4 lety

      Not sure, can’t remember

    • @TheNamesJT
      @TheNamesJT Před 4 lety

      @@JesseShowalter no i'm saying its familiar because the you tube channel stevewilldoit uses it i'm guessing its a copyright free use song so its widely available for all to use...its a dope song regardless just didn't know it was free use

  • @dinorapc4394
    @dinorapc4394 Před 3 lety

    Tara Mcpherson???? 👀

  • @natthedesigner
    @natthedesigner Před 5 měsíci +1

    Wow, this was so incredibly helpful. You explained everything so well and clearly. Can't wait to watch more of your tutorials!

    • @JesseShowalter
      @JesseShowalter  Před 5 měsíci

      I'm so glad! If you want a deeper dive into UI and responsive check hit my new course www.30dayui.com/