HTML Email Template - Mobile Friendly Layout with HTML & CSS

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

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

  • @w3newbie
    @w3newbie  11 месяцев назад

    Hey guys, I've just released my completely new and updated "HTML Email Mastery Course" for 2024 with the latest HTML Email concepts. I'm excited to release it, this is the best course I've ever made. Check it out here:
    ➢ w3newbie.com/email-course/ (coupon link for Udemy)

  • @kolyxix
    @kolyxix 2 года назад +4

    Hands down, this is the best tutorial that I have come across on how to build HTML email. Easily to follow along and practice. Great quality explanation from start to finish. Job well done. Magnicient

  • @michaelcampbell9967
    @michaelcampbell9967 3 года назад +3

    Really enjoyed your course. Very easy to follow and was not overly complicated. Look forward to seeing other courses you may have.

  • @vugarbakhshalizade2826
    @vugarbakhshalizade2826 2 года назад +1

    Great tutorial! Thank you for this.

  • @viralworld955
    @viralworld955 3 года назад +1

    You deserve 2 million likes

  • @juan-pablobotero4609
    @juan-pablobotero4609 4 года назад +2

    WOW! Nice template, well explained, and an amazing teacher. Thanks for creating these videos :)

  • @digigoliath
    @digigoliath 4 года назад +1

    Cool. More used to Flexbox & CSS Grid but interesting to see the use of Table to layout the page elements. TQVM!!

    • @w3newbie
      @w3newbie  4 года назад +5

      Thanks! HTML tables are recommended for email development but not recommended for web pages. I hope to release a new video on a pure CSS website design soon though. :)

    • @digigoliath
      @digigoliath 4 года назад

      @@w3newbie Wonderful. Looking forward to it.

  • @monishan1943
    @monishan1943 3 года назад +1

    Wow superb sir nice explanation 😊😁😊😁

  • @mamunraj6265
    @mamunraj6265 4 года назад +1

    it's very helpful only for beginner. thank you so much

  • @anjali-vf2tz
    @anjali-vf2tz 3 года назад

    Very good explanation 👍

  • @romuloalves9349
    @romuloalves9349 4 года назад +3

    Ótimo vídeo parabéns ✌.

  • @cubedev4838
    @cubedev4838 3 года назад +2

    Okay, how do we intergrate this template in our email so client see this when they open up their emaill??

  • @ujjainunique
    @ujjainunique 2 года назад

    Hi, I am working on email marketing campaign and I am unable to find descriptive title in my email. So do we need tag for email clients? What happens if we ignore this tag?
    Please reply.
    Thanks

  • @MovieTrailersHD2
    @MovieTrailersHD2 3 года назад +1

    adding style on head, is this possible across email clients and email provider like gmail and yahoo?

    • @w3newbie
      @w3newbie  3 года назад

      Yes but for best results see the end of the tutorial where an inliner tool is used (with Litmus Putmail) for best rendering. There are plenty of CSS inliner tools on the web.

  • @w3newbie
    @w3newbie  3 года назад

    Hey guys, do to the success of some of the HTML Email videos on this channel, I have also made a new channel that will only be HTML Email and Email Marketing content. If you wish to check it out and subscriber, here is a link :) ruclips.net/channel/UCZWoe3ezD_dZTZgQnDyBgFQ

  • @WilliamWeekesJr
    @WilliamWeekesJr Год назад

    Hey, great email content - I had a question though, what does one do when you have a two-column layout and one part of that column is 30% and the other is 70%. how can I do that using what you have shown us? Thanks again.

  • @nareshpanwar992
    @nareshpanwar992 3 года назад +1

    i have designed the template using simple html and css in which i have used media query too but i am having problem when i am sending it as an email template on Gmail and Outlook to... The design get dissorted every time i try to send it. Please help.

    • @w3newbie
      @w3newbie  3 года назад

      Please stay tuned for the end of the video, using the test email you can inline the CSS for best practice. These responsive tables are not meant for Outlook without conditional statements.

  • @chriskneller
    @chriskneller 3 года назад

    Hi, seems like a random question, but when styling the width of an image, you did it like this: "width="300" style="max-width: 100%; padding-bottom: 40px"" Is it possible to swap it around so it's: "width="100%" style="max-width:300px; padding bottom:40px"?

  • @kavyakashyap8210
    @kavyakashyap8210 2 года назад

    hey ! i am beginner. could you please tell me that how background clip property is working under email. as in web page that looks perfect. but when i send the test email then the images is outside the text. please tell me that it can be possible l

  • @tonytony-fc6gq
    @tonytony-fc6gq 3 года назад

    AMAZING VIDEOS , real tutorials showing HOW and WHY, what is the software RWD your using for checking the mobile responsive ???
    AND i have your course on udemy GREAT COURSE

  • @PangeaPrime
    @PangeaPrime 3 года назад

    Would this lead me to work if I start doing email templates

    • @w3newbie
      @w3newbie  3 года назад

      It could potentially, I have since made a new channel and website specifically about HTML Email because there are a lot of people interested in the topic! Please check it out as you will learn from the website pages and videos too:
      ruclips.net/channel/UCZWoe3ezD_dZTZgQnDyBgFQ

  • @pankajnaik1069
    @pankajnaik1069 4 года назад

    Nice video. I have uploaded the images on ImgBB and used the live links, but the links are not active yet. Does it take time to host the images?

    • @w3newbie
      @w3newbie  4 года назад +1

      Hi Pankaj, it shouldn't take any time for the images to be available for your emails so that is strange. There are several options for the type of image links though, perhaps you aren't using the live type.

  • @patrickdansey3984
    @patrickdansey3984 3 года назад

    Hey buddy. Do you have a video or a course that goes into HTML Email sending programs? I have spent the last 3 months learning HTML & CSS to build a responsive website using media queries so I am probably half way to being able to produce HTML emails but that is using Visual Studio Code. I would like to learn how to send the HTML Emails professionally. Like.. what programs are used to send the HTML Email and do they have built in code editors etc? I have never done it before so this next step is all new to me. Please refer me to a video or one of your courses if you have one. Much appreciated! :)

  • @kaycampbell364
    @kaycampbell364 4 года назад

    bought your course how do you send template with gmail and how do you code unsubscribe option

    • @THEANSWERGUY13
      @THEANSWERGUY13 4 года назад +2

      the unsubscribe links are usually provided by the ESP you are using when creating the email campaign whether that would be Omeda or something like sales force marketing cloud's emails studio.

  • @thomasfields2082
    @thomasfields2082 4 года назад

    Can any one tell me why my anchor tag on the initial image shows up as a white line underneath the first image?

  • @siddhant2002
    @siddhant2002 3 года назад

    Can i use div instead of tabla ?

    • @w3newbie
      @w3newbie  3 года назад

      You'll have to use tables for email clients to render the HTML properly with multiple columns.

  • @WorkingInahanDiaries
    @WorkingInahanDiaries 4 года назад

    Is there a way to rename the subject of the email when the recipient sees it in the inbox?

  • @mamunraj6265
    @mamunraj6265 4 года назад

    Basic coding of each of your tutorials.
    There is no advanced coding or discussion like teaching newcomers. Please create Advanced HTML Template Tutorial.

    • @w3newbie
      @w3newbie  4 года назад

      If you're ready for more advanced content than the videos here on RUclips, my HTML Email course link is in the video description :)