How to Align Image and Text Side by Side with HTML & CSS | frontendDUDE

Поділитися
Вставка
  • Опубліковано 15 жов 2024

КОМЕНТАРІ • 80

  • @kingbacon2937
    @kingbacon2937 Рік тому +8

    This video really helped a lot! I'm pretty new to HTML and CSS, and you constantly showing the result of the code taught me what the code did, unlike others who just threw runes in my face. Thanks!

    • @frontdude
      @frontdude  Рік тому

      Thankyou Very much, it means a lot😍🙌

  • @mohdsaad1588
    @mohdsaad1588 2 роки тому +4

    The music kept me in the video till the end even though i randomly clicked on it n knew how to actually do it as it is quite simple for an experienced person. Really luved the background music.

    • @frontdude
      @frontdude  2 роки тому +1

      Absolutely, this music is incredible brother😍

    • @mohdsaad1588
      @mohdsaad1588 2 роки тому +1

      @@frontdudeWhere did u get it from? I am listening this in the loop n not getting over with it.

    • @frontdude
      @frontdude  2 роки тому +1

      @@mohdsaad1588 it's forrest lulabay, you can find on google, amazing category of music..

    • @mohdsaad1588
      @mohdsaad1588 2 роки тому

      @@frontdude Thax buddy! Really appreciate ur choice of music.

  • @WillBeShorts-p2e
    @WillBeShorts-p2e Рік тому +2

    Thanku bro ❤❤ easy to understand for me and any beginner......

    • @frontdude
      @frontdude  Рік тому

      Keep it up dude🤘, best wishes

  • @emmabelletallman9168
    @emmabelletallman9168 2 роки тому +2

    I used this video for my web design class, thanks

    • @frontdude
      @frontdude  2 роки тому

      Most welcome Emmabelle, keep going, all the very best💥✨

  • @aryanpatel8140
    @aryanpatel8140 Рік тому +2

    Thanks a lot brother
    I am fairly new to html and css
    This video really helped me a lot
    After watching a lot kf videos who directly show the result at the end, this method really helps a lot❤❤❤❤

    • @frontdude
      @frontdude  Рік тому

      Your feedback means a lot to me Aryan.
      Thanks♥️

  • @dmm6671
    @dmm6671 Рік тому +2

    Thank you verry much , I m new to css and that helped a lot, keep up the good work

    • @frontdude
      @frontdude  Рік тому

      Thankyou for such valuable comment, & Welcome, I'm happy that it helped you. I keep uploading CSS & Javascript videos, you can subscribe.
      Have great day❤

  • @kaeriq
    @kaeriq Рік тому +3

    why is after the image? i don't understand how can end and only after that ends . HELP

    • @frontdude
      @frontdude  Рік тому +1

      Hi Karina, Thank you for asking, I would love to solve your query..
      is ending after img so that we can align para and image in same line with same heights (to reduce extra css) otherwise p and img will have different heights (we would need extra css line, line-height for that).
      And you are talking about is with text class, we only need it where text ends.
      And we need to make container responsive if we did it with simple html way css would have gotten complicated and lengthy.

    • @frontdude
      @frontdude  Рік тому

      Hope it cleared your doubt, please feel free to ask anything else..
      Good day😊

    • @Naam_meinKyaRkhaHn
      @Naam_meinKyaRkhaHn Рік тому

      In my case it is showing errors

  • @mrkhan5138
    @mrkhan5138 2 роки тому +6

    Why do you have the image and the text wrapped in a ?

    • @frontdude
      @frontdude  2 роки тому +4

      text has to be wrapped in since its paragraph, and image is inside tag to reduce extra lines of css, and to align image along with (mid) text.
      Hope this cleared your doubt..❤

    • @mrkhan5138
      @mrkhan5138 2 роки тому

      @@frontdude thanks this was helpful

    • @thomasjackson5580
      @thomasjackson5580 2 роки тому

      Monahan newer
      Msjw2jsnsnsna.sn .s

    • @ifrahsami9555
      @ifrahsami9555 Рік тому

      What if we not close the img in p tag?

  • @anji-t9t
    @anji-t9t Рік тому +1

    is there a way to put the image in the left side of the text instead?

    • @frontdude
      @frontdude  Рік тому +1

      Ofcourse there is, right now img tag is after , so put it before it, see of it works or not, and remind me if it did or didn't.

  • @vasudevan2917
    @vasudevan2917 Рік тому +1

    Why you use margin 10 rem auto. Can you explain

    • @frontdude
      @frontdude  Рік тому

      Okay Sure Vasu, 10rem is margin on top and bottom, whereas auto is equally divided margin (left and right)....so that we can align div in center of section.
      Hope it helps you.. please let me know if you need anything else..
      Have a great day😊🎉

  • @iliashterev38
    @iliashterev38 Рік тому +1

    First of all - Thank you for your time and efforts to bring knowledge for free.
    Not a big expert but I think you have incorrect opened and closed tags. Starting with the div class text (lets disregard the H1-it is OK), then you open the P tag, then you close the div tag before the P tag ??!!
    Thank you.

    • @frontdude
      @frontdude  Рік тому +2

      Welcome🤗, Yes I know it's not traditional approach, but thankfully it's working for people...
      And, I am still not an expert, just learning and sharpening my skill.
      Thanks for your critical advice sir🙏 really appreciate.
      Have great day👋

  • @ougininja8412
    @ougininja8412 2 роки тому +2

    thank you for solving my problem

    • @frontdude
      @frontdude  2 роки тому

      welcome brother, keep going...❤❤

  • @mouaddiyani9286
    @mouaddiyani9286 2 роки тому +2

    This video really helped me. Thank you very much!

    • @frontdude
      @frontdude  2 роки тому +1

      Welcome Mouad❤consider subscribing please and share it.

  • @daniyals9053
    @daniyals9053 5 місяців тому +1

    The problem is the text in on image.What should i do?

    • @frontdude
      @frontdude  5 місяців тому

      DM me on Twitter (link in description)...I'll help u out...

  • @moaaatekita8827
    @moaaatekita8827 Рік тому +1

    What is tune played in background it is so gooodd please reply with link please please

    • @frontdude
      @frontdude  Рік тому +1

      Of course my brother🙌, just google, "forest lullaby pixabay".........It would be great if you like and subscribe...
      Have a great day✨🤝

    • @moaaatekita8827
      @moaaatekita8827 Рік тому

      @@frontdude done

    • @moaaatekita8827
      @moaaatekita8827 Рік тому

      @@frontdude arigato

  • @juliusdanielcabico413
    @juliusdanielcabico413 2 роки тому +1

    Why cant I manipulate my imagee, i put it inside a

    • @frontdude
      @frontdude  2 роки тому +1

      if you want to manipulate image you can do it directly in css by using img property

    • @frontdude
      @frontdude  2 роки тому

      can you be more specific!! btw, loved your music❤

  • @antonyyg
    @antonyyg 2 роки тому +2

    Very useful video! Thank you!!

    • @frontdude
      @frontdude  2 роки тому +1

      Welcome❤❤ your words are encouraging, thank you...

  • @SosukeAizen-s3c
    @SosukeAizen-s3c 9 місяців тому +1

    How to make responsive for this?

    • @frontdude
      @frontdude  9 місяців тому

      Shall I make a video about same for you? Please let me know...

  • @helenatro1569
    @helenatro1569 2 роки тому +1

    How can I change the opacity of the background?

    • @frontdude
      @frontdude  2 роки тому +1

      you can add opacity: whatever you need; in your css file in that div.
      😉

    • @helenatro1569
      @helenatro1569 2 роки тому

      @@frontdude Thank You

  • @Gabriel-xp8ep
    @Gabriel-xp8ep 2 роки тому +2

    Hi! thanks for the video, really helped me with my project! Also i really loved the song, could you tell it´s name? Thanks a lot!

    • @frontdude
      @frontdude  2 роки тому

      I'm grateful that my work has helped you, thankyou very much, And audio in bg is Forrest Lullabay, Good day😉❤

    • @Gabriel-xp8ep
      @Gabriel-xp8ep 2 роки тому

      @@frontdude yay you answered!! thanks again! all the success to you!!! 😄❤

  • @afolabiboluwatife5077
    @afolabiboluwatife5077 Рік тому +1

    did the exact thing but my pic is nit moving and other help

    • @frontdude
      @frontdude  Рік тому

      Hi Afolabi,
      Can you please share that code segment!

    • @afolabiboluwatife5077
      @afolabiboluwatife5077 Рік тому +1

      @@frontdude sorry i am replying late.
      so i had done a big mistake in my css but your video did help me a lot

    • @frontdude
      @frontdude  Рік тому

      No problem Afolabi,
      Welcome🤩, and have great day💕

  • @shielajaneodero133
    @shielajaneodero133 2 роки тому +1

    How to move image from right to left?

    • @frontdude
      @frontdude  2 роки тому

      change img position before h1 tag and give img line height to give it bring it in middle...

  • @csd1447
    @csd1447 2 роки тому +1

    That good👍 lage raho!

  • @sujanikhan7612
    @sujanikhan7612 2 місяці тому +1

    I dont understand why in tutorial video they give music its so irritating

    • @frontdude
      @frontdude  2 місяці тому

      but everyone are liking it!!🤷‍♂

  • @alexiswilliams859
    @alexiswilliams859 2 роки тому +2

    Addisyn. I Love

    • @frontdude
      @frontdude  2 роки тому

      Thank you very much, don't forget to subscribe brother ❤️

  • @weblaunchindia
    @weblaunchindia 2 роки тому +1

    Thank you

    • @frontdude
      @frontdude  2 роки тому

      You're welcome, this thankyou means a lot❤🙌

  • @user-am3.rvloger
    @user-am3.rvloger Рік тому +1

    Thanks bro 🙏 🩷

    • @frontdude
      @frontdude  Рік тому

      Welcome🙏...I'm happy that it helped you...Have a great day👋🤝

  • @syediqbalahmed3176
    @syediqbalahmed3176 2 роки тому +1

    *_vulu ... uku ..._*

    • @frontdude
      @frontdude  2 роки тому

      Thank you very much Syed, but what does it mean??

  • @g_arm_
    @g_arm_ 2 роки тому +1

    is it so hard to do a voice over?? so annoyed by all these videos with no explanation and random music

    • @frontdude
      @frontdude  2 роки тому +1

      Got it sir... actually I am thinking but kinda holding myself back. But I am sure I will start uploading videos with voiceover.... thankyou soo much for reminding...
      Btw, you skateboarding videos are incredibly amazing 🤩 stay in touch❤️

    • @g_arm_
      @g_arm_ 2 роки тому +1

      @@frontdude thank you, really appreciate it! And I didn’t want to be mean, I just went through a lot of videos w/out voiceover on yt that were hard to understand, so my frustration caught up with me. But your code helped me, thanks for that too.

    • @frontdude
      @frontdude  2 роки тому +1

      @@g_arm_It's okay brother, I can totally understand, if you need any help you can connect with me on twitter, I'll try my best to clear any of your doubt personally...
      Have good day brother😉🤙

  • @Reis.507
    @Reis.507 Рік тому +1

    after watching it and still not working, i went to my equivalent to his .section, and put:
    .section{
    justify-content: space-evenly;
    }

    • @frontdude
      @frontdude  Рік тому

      Are you on twitter? I want to see your code?

  • @_Qw3rty
    @_Qw3rty Рік тому +1

    Does this only work on !DOCTYPE html? I cant get it to work :(

    • @frontdude
      @frontdude  Рік тому

      Yes, and where are you trying?