How to make your website responsive

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

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

  • @UserHero
    @UserHero 3 หลายเดือนก่อน +56

    These types of videos are actually helpful. Please keep it up!

    • @TheCoderCoder
      @TheCoderCoder  3 หลายเดือนก่อน +4

      Really glad to hear that! Will do!

  • @aztecagames
    @aztecagames 3 หลายเดือนก่อน +19

    Good timing. I was planning to make my portfolio responsive this week!

    • @TheCoderCoder
      @TheCoderCoder  3 หลายเดือนก่อน +3

      Thanks for watching!

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

    Content shift point was so perfect. I really like it . ❤

  • @mar-flix4636
    @mar-flix4636 3 หลายเดือนก่อน +3

    Where have you been ?
    You taught me how to code in HTML during Covid time . I really appreciate you 🎉. Thank You

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

    I dont think any video is better than this one on the internet on responsiveness

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

    thankyou , i was confuse for making responsive lyouts for my website. but after seeing your video i am clear about that....😊😊

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

    you explained many usefull tricks blandly. thanks a lot 🙏❤

  • @eugeneescario484
    @eugeneescario484 3 หลายเดือนก่อน +3

    Is it possible for you to create a tutorial about CSS frameworks like Tailwind and Bootstrap, and also JavaScript frameworks like React in the future? I love how the way you teach.

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

      Thanks for your kind words! I don't consider myself a JS expert at the moment, enough to teach, but perhaps in the future!

  • @abhaypundora6841
    @abhaypundora6841 3 หลายเดือนก่อน +3

    Please continue these types of videos

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

      Thanks for watching!

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

    very good explanation thanks :) helps out a lot

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

    Just so you know, I just subscribed! Great educational content!

  • @eyeone-pc3vx
    @eyeone-pc3vx 2 หลายเดือนก่อน

    What a nice tutorial video !!

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

    I've learned a lot of new things from this video , thank youu !

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

    Another very helpfull video. I just finished up my responsive Drupal theme using media queries and lots of calc. Much like the flexbox method, but without flexbox. Your previous videos on using rem for responsive design was early enough to implement immediately, as is the part on the images in this video.
    I'm also saving this one for version two, I can definitively use grid for my footer menu.

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

      Awesome! Glad that the videos have been helpful for you!

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

    Always a big fan of you. THank you very much for this videos Jess. Really Really appriciated

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

      Thanks for watching!

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

    This video is right on time! Thank you!

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

      Hope it's helpful for you!

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

    Thank you for your content, it's really informative and helpful.

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

    Thank you for this valuable lesson.

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

    Ohh, the parent treats each child instead of forcing it to its conforms? I LOVE Flexbox!

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

    the legend is back

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

    Love your tutorials 👍 Thank you 🤓
    Btw, I set my theme in VSCode to your coder-coder theme a while back - it’s my favorite 🙌

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

      Thanks very much!

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

    THANKS MAM! YOU'RE A MIRACLE!

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

      Thanks for watching!

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

    life saver, thank you a lot

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

    so useful , thanks

  • @莊子-e3v
    @莊子-e3v 2 หลายเดือนก่อน

    perfact video, I love it good

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

    Thanks i was required this to do

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

    thanks so much. the content was helpful

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

      Glad it was helpful!

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

    How do you pull up the window on the right to test responsiveness on different screen sizes? 😅

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

    Mam can u make an video about only media queries .... U r content is very informative can u make one video on media queries plz mam ...
    Teaching was awesome

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

    Great video

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

    When will you release a new project build video on your other channel? Eagerly waiting for that

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

      should be next week!

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

    thank you, im struggling at making my website responsive ty

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

    5:32 - font size
    7:25 - img
    27:12 - grid 4-2-1

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

    Do you like using Tailwind?

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

    I like how you explain. Unfortunatelly you didn't show in this video with the topic responsive the container queries. I would like to see the explaination by you and if I like it again, I will subscribe. Now I will check out your channel first, maybe you have done such video already :)

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

    ive never seen media queries written this way, is that specific to scss or can it be done using vanilla css?

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

      Nice, thanks for watching!

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

      It's an SCSS thing, unfortunately you can't nest media queries like that with pure CSS (one reason why I still like Sass/SCSS)

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

      @@TheCoderCoder I see, ive not fully gotten myself into using sass, even though i would consider myself well experienced,i took a long sabbatical, im from back in the early days of development, i refuse to use frameworks, im familiar with the syntax but sass just throws me,i think its the nesting aspect of it and my old man brain just cant absorb it soi spend a lot of time writing "clusters" of css on a project

  • @FotoVideo-n4x
    @FotoVideo-n4x 4 วันที่ผ่านมา

    what interface generator extension used here? pls answer, i need it

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

    clamp for font-size without @media is not good solution from visual point. Better to use 2 size one with min(x,x) for pc and tablet, and one media for mobile with clamp.

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

    i was making my portfolio, just finished responsive design of it (i am beginner) , what i'v came across is that when it is about vertical responsivity, certain containers with 100vh , get blended up in each other . i was wondering if there was any solution available online but i couldn't manage to find one. any tips for for certain scenario? thanks

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

      hmm, it's hard to say without looking at the actual code. Which parts are getting blended?

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

      @@TheCoderCoder for example a container where i am introducing myself has 100vh , and i also have projects container with 100vh below it , whenever i go to my website on mobile and rotate it , they both blend up with eachother.

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

      @@existentialism_01 change box sizing, maybe?

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

      @@damjandjordjevic1994 hm, i'll try that.

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

    Don't you use tailwind css?

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

    what VS Code theme are you using?

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

      My own, called Coder Coder Dark! you can get it thru the VS Code Marketplace, also linked in the description

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

    Am Good with Django flask ruby on rails JavaScript but CSS3 not, I don't know why but am not good it

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

      There's definitely a learning curve, but just keep practicing and it should get easier over time

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

    hey, what coding program are you using? thanks

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

      I used VS Code (on the left) and Firefox on the right

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

      @@TheCoderCoder thank you!

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

    Are you able to post the code you're using in the video?

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

      Just posted it, it's linked in the description now! github.com/thecodercoder/make-website-responsive

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

    Can you make another one with Tailwind CSS please

  • @walker9904
    @walker9904 18 วันที่ผ่านมา

    God Bless you!

  • @mohamedashraf6777
    @mohamedashraf6777 26 วันที่ผ่านมา

    i use the “clamp” for responsive grid 😅😅

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

    what is the name of this site becasue there are a thousand of them

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

      It's called "Fluid Typography Calculator" and it's on a github.io page. Hope this helps!

  • @jorgemacias7052
    @jorgemacias7052 5 วันที่ผ่านมา

    21:34

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

    ❤❤❤

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

    after seeing mediatypes all laugh become cry???

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

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

    こんにちは

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

    10 years working with images overlapping when inserting them into html, and you just:
    img {max-width: 100%;}
    To all images 😭 I feel the stupid person on earth 🥺.

  • @Frosty-q9u
    @Frosty-q9u 3 หลายเดือนก่อน

    Y do u love unicorns?

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

    AI do the work

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

      It really doesn't, go and ask your AI to make your website responsive. It will fail every time.

  • @jelulululu
    @jelulululu 4 วันที่ผ่านมา

    tailwind css

  • @Extension-Hub
    @Extension-Hub 3 หลายเดือนก่อน