How to make your website responsive

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

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

  • @AhmedQwbad
    @AhmedQwbad Месяц назад +39

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

    • @TheCoderCoder
      @TheCoderCoder  Месяц назад +4

      Really glad to hear that! Will do!

  • @aztecagames
    @aztecagames Месяц назад +15

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

  • @BLACKWIZX
    @BLACKWIZX 21 день назад +1

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

  • @mar-flix4636
    @mar-flix4636 Месяц назад +2

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

  • @muhammadshariq5862
    @muhammadshariq5862 Месяц назад +1

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

  • @enenotowitch628
    @enenotowitch628 18 дней назад +1

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

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

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

  • @eugeneescario484
    @eugeneescario484 Месяц назад +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  Месяц назад

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

  • @mohammadrezaalirezaei5892
    @mohammadrezaalirezaei5892 Месяц назад +2

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

  • @abhaypundora6841
    @abhaypundora6841 Месяц назад +3

    Please continue these types of videos

  • @eyeone-pc3vx
    @eyeone-pc3vx 6 дней назад

    What a nice tutorial video !!

  • @AlThePal78
    @AlThePal78 Месяц назад +1

    very good explanation thanks :) helps out a lot

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

    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  Месяц назад +1

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

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

    thank you, im struggling at making my website responsive ty

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

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

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

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

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

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

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

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

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

    This video is right on time! Thank you!

  • @ROYALGRAPHICS_yt
    @ROYALGRAPHICS_yt 20 дней назад

    thanks so much. the content was helpful

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

    THANKS MAM! YOU'RE A MIRACLE!

  • @abdulahadehsan9977
    @abdulahadehsan9977 Месяц назад +2

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

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

    the legend is back

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

    life saver, thank you a lot

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

    Thanks i was required this to do

  • @莊子-e3v
    @莊子-e3v 21 день назад

    perfact video, I love it good

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

    so useful , thanks

  • @chestoehh
    @chestoehh 26 дней назад

    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 :)

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

    Great video

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

    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.

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

    Can you make another one with Tailwind CSS please

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

    Do you like using Tailwind?

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

    Don't you use tailwind css?

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

    hey, what coding program are you using? thanks

    • @TheCoderCoder
      @TheCoderCoder  Месяц назад +1

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

    • @PrivateOnly007
      @PrivateOnly007 29 дней назад

      @@TheCoderCoder thank you!

  • @UrAveragePlayer0
    @UrAveragePlayer0 6 дней назад

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

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

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

  • @blackcoder2510
    @blackcoder2510 Месяц назад +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  Месяц назад

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

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

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

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

      Nice, thanks for watching!

    • @TheCoderCoder
      @TheCoderCoder  Месяц назад +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 Месяц назад

      @@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

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

    what VS Code theme are you using?

    • @TheCoderCoder
      @TheCoderCoder  Месяц назад +1

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

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

    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  Месяц назад

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

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

      @@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 Месяц назад

      @@existentialism_01 change box sizing, maybe?

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

      @@damjandjordjevic1994 hm, i'll try that.

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

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

    ❤❤❤

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

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

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

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

  • @iamgourav6256
    @iamgourav6256 19 дней назад

    こんにちは

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

    after seeing mediatypes all laugh become cry???

  • @TonyMontana-ji7om
    @TonyMontana-ji7om Месяц назад

    25:56 if second row 2 card I want to centre to the first row it this possible with grid layout ...??
    C C C
    C C
    Like this

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

      unfortunately not-- you can do this with flexbox though!

    • @TonyMontana-ji7om
      @TonyMontana-ji7om Месяц назад

      @@TheCoderCoder okay thank you

  • @Frosty-q9u
    @Frosty-q9u Месяц назад

    Y do u love unicorns?

  • @wayneshen5201
    @wayneshen5201 Месяц назад +1

    AI do the work

    • @noliimitmm
      @noliimitmm 23 дня назад

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

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