HTML Crash Course In 30 Minutes

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

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

  • @codeSTACKr
    @codeSTACKr  5 ปีที่แล้ว +23

    Thanks for all of the support!! Continuing the Web Development 2019 Series. Here's the Beginners Guide to HTML.
    Check out my Beginners Guide to CSS next: th-cam.com/video/Tfjd5yzCaxk/w-d-xo.html
    Timestamps: (Clickable)
    00:05 - Preface
    00:47 - Code Editors
    01:12 - What is HTML?
    01:53 - Basic Template / Tags Explained
    05:43 - Inline vs Block Level Elements
    06:05 - Headings
    07:22 - Paragraphs
    08:45 - Inline text formatting
    10:16 - Division and Span Tags
    11:55 - Horizontal Rules
    12:05 - Attributes
    13:20 - Images
    14:22 - Anchor Tags
    17:01 - Lists
    18:28 - Tables
    22:36 - Forms
    29:57 - Buttons
    30:13 - General Guidelines
    31:37 - Commenting
    34:02 - Styles
    36:13 - Outro
    📚 My Favorite Web Design Books 📚
    Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)
    amzn.to/2JaiCL8

  • @MahmoudAhmed92
    @MahmoudAhmed92 3 ปีที่แล้ว +3

    Most Badass HTML tutorial. You da man!

  • @mimimi2787
    @mimimi2787 5 ปีที่แล้ว +78

    You're great at explaining! Short and simple, I wish you best with your youtube career and I hope we get more videos soon :).

    • @codeSTACKr
      @codeSTACKr  5 ปีที่แล้ว +7

      I really appreciate that. Thank you for your support! More content on the way..

  • @thesoucrux9636
    @thesoucrux9636 4 ปีที่แล้ว +62

    Few people who did not know how to operate the computer mistakenly pressed the dislike button.
    Please a video on "How to click the like button"

    • @Hsa008
      @Hsa008 4 ปีที่แล้ว +2

      Loser theres only 13 dislikes

  • @RyanLawlorSr
    @RyanLawlorSr 4 ปีที่แล้ว +8

    Just completed start to finish, in under 40 minutes, do to stopping and having to go back for a few things. this was by far the most concise and clearly explained video I have come across yet. Signed up at your Patreon as well. Working on the beginners CSS class soon. Thanks for this man!

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      Thank you!! I really appreciate it!

  • @maba9307
    @maba9307 4 ปีที่แล้ว +18

    Very well done, no unnecessary talking, straight to the point! Love it. Gave me a great overview as I am not in web development but at least have to get the Gist of it

  • @slenderpacman
    @slenderpacman 4 ปีที่แล้ว +7

    Best video I've seen on YT concerning HTML!
    You tell us everything shortly, no crap talking and easy to understand! Props on you, great vid!

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      Glad you liked it!

  • @lonthroop
    @lonthroop 4 ปีที่แล้ว +4

    This a much better progression in teaching html than anything I've seen yet, including W3 schools, UDEMY, and even my college courses. I'm definitely in as a subscriber. Keep making these great teaching videos.

  • @gillbert8073
    @gillbert8073 4 ปีที่แล้ว +16

    God bless you for adding subtitle. I'm not a native english speaker so sometimes it is difficult to understand some words or phrases.

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +2

      You're welcome 😊

  • @BrianWaltmans
    @BrianWaltmans 3 ปีที่แล้ว +4

    Couldn't have imagined a better tutorial, can't wait to get started on the CSS crash course!

  • @SaeedKhan-op3by
    @SaeedKhan-op3by 3 ปีที่แล้ว +1

    I watched this three times and each time i learned what does what and most importantly, the third time at the end when you did the background black and font white.
    I actually understood that and now i can even do it myself

  • @Rakshit.Pahuja
    @Rakshit.Pahuja 4 ปีที่แล้ว +71

    Legends will watch this vedeo in 2x speed and learn HTML in 15 min

  • @cat8594
    @cat8594 2 ปีที่แล้ว +1

    Very well done! I was trying to learn code with some website and man was it tedious having me copy and paste stuff around.
    But, this video was so helpful, told me what everything did and showed examples! I've got about five pages of notes from this video, definitely going on to the CSS video next!

  • @RobertoJ3rd
    @RobertoJ3rd 4 ปีที่แล้ว +10

    You have a great way of teaching and so easy to follow. I'm thankful for your time in putting together all the videos for beginners.

  • @wiseman2732
    @wiseman2732 ปีที่แล้ว +3

    Million times better than university lectures 🙏👍

  • @ColdFuse96
    @ColdFuse96 3 ปีที่แล้ว +3

    This is a great video! I'm going into web development, which is primarily going to teach us HTML5 and CSS, and both of your videos on the subjects gave me a great foundation to go off of!!!

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว

      Glad it was helpful!

  • @PrinceKumar-hh6yn
    @PrinceKumar-hh6yn ปีที่แล้ว

    4 years ND still fresh. Thanks for the amazingly concise Tutorial

  • @noahollington9946
    @noahollington9946 2 ปีที่แล้ว +2

    Thanks so much for making this! I needed a quick intro to cover the basics.
    And you're really good at explaining things, so keep it up :)

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

    Any idea on how to split my screen for live server on vscode? Thanks everyone 🙏🙏.

  • @jeffpaq
    @jeffpaq 4 ปีที่แล้ว +3

    Love the VS Code keyboard shortcuts! Very helpful!

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      Glad it was helpful!

  • @night_traffic
    @night_traffic 2 ปีที่แล้ว +1

    Helped a lot. The only html video i understood. Thanks a lot.

  • @chinmaypatil2210
    @chinmaypatil2210 4 ปีที่แล้ว +3

    Great Work!!No nonsense straight to point in a simple way.Thanks a lot sir.
    Hope your channel grows fast!!

  • @Aven115
    @Aven115 5 ปีที่แล้ว +1

    I am shocked about how good you are at explaining the whole concepts. I had a class about web development last year and its really cool to refresh these concepts. Keep going dude, you just won a new sub!! :D

    • @codeSTACKr
      @codeSTACKr  5 ปีที่แล้ว +1

      Thank you so much! I really appreciate the feedback.

    • @Aven115
      @Aven115 5 ปีที่แล้ว +1

      @@codeSTACKr I was thinking of getting started in web development and this really boosted my hunger for learning more

    • @codeSTACKr
      @codeSTACKr  5 ปีที่แล้ว +1

      @@Aven115 Awesome! Don't give up!

  • @datpham31415
    @datpham31415 3 ปีที่แล้ว +1

    Thank you, I tried to find some more tags in HTML after I learnt the basic ones.

  • @gerharddewit4872
    @gerharddewit4872 4 ปีที่แล้ว +1

    I'm a Newbie in learning web dev. I watched some of your videos and wow! You explain well in all the ones I watched. Subscribed👍. Thanks for making it. Your channel is definitely one of my top resources on web dev now 🙂.

  • @skrrt-
    @skrrt- 3 ปีที่แล้ว +1

    Can someone help me? So I am at the part where you put the lists and after I followed every step the list in purple and when I click on it it goes into the website from the image I added everything that the video said but can't fix it?

  • @irisquach7592
    @irisquach7592 5 ปีที่แล้ว +2

    Thanks for your video. Great to show more videos on Project base from time to time.
    We get chances to learn. You are excellent!

  • @ondrejsvorc8175
    @ondrejsvorc8175 4 ปีที่แล้ว +2

    One of the best explanation skills I have ever seen on TH-cam! Thanks for everything! Keep it up! :)

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      You're very welcome!

    • @tausiftaha12
      @tausiftaha12 4 ปีที่แล้ว +1

      @@codeSTACKr can you do a video on vscode shortcuts?

    • @skrrt-
      @skrrt- 3 ปีที่แล้ว

      tausiftaha12 they are all on the website so you don't need him to make a video go to his 6 minute video on vs code and it will show you how to get the shortcuts

  • @georgy3136
    @georgy3136 ปีที่แล้ว +1

    Thank you so much for this! You got yourself a new subscriber.

  • @ritika2563
    @ritika2563 4 ปีที่แล้ว +1

    I am soo grateful to you for the shortcut u have told. 6:18. these are the things I need to learn which I get to learn nowhere.. god bless you, mate ! ✨🙏

  • @datpham31415
    @datpham31415 3 ปีที่แล้ว +1

    should I follow along from your oldest videos to the latest ones or follow the Web Development Playlist that you created ?

  • @strawberryyogurt0
    @strawberryyogurt0 4 ปีที่แล้ว +1

    @15:27 ... is the word ‘blank’ in target=‘_blank’ just convention because I can substitute blank or _blank for any word and it opens up a new tab. Example target=‘newtab’ / target=‘yellow’ / target=‘christmasmorning’ ... they all open up a new tab.

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      target refers to a frame or window. The name you enter would be the name of another frame or window that is open. If the named window is not there then the browser will open a new referenced window with the name entered. "_blank" is a reserved name which targets a new, unnamed window.

    • @skrrt-
      @skrrt- 3 ปีที่แล้ว +1

      @@codeSTACKr Can you help me? After I add the image and then add a link to it the text under it is just attached to the link like it's purple and a link I don't want that just want text

  • @swapnilkawade2286
    @swapnilkawade2286 4 ปีที่แล้ว +1

    Amazing Video. Short & Precise! Thank you for sharing the VSCode Shortcuts. Moving over to the CSS vid now. Keep up the content.

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      Thank you! Glad it was helpful.

  • @silviojava96
    @silviojava96 5 ปีที่แล้ว +2

    Man, all your content is easy to learn.... Thanks!!!

  • @samuelbhatti878
    @samuelbhatti878 3 ปีที่แล้ว +1

    Thanks for wonderful explanation. It is right to the point without too much talk. All the best!!!

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว

      You are welcome!

  • @waterbron3480
    @waterbron3480 3 ปีที่แล้ว +1

    This couldn't be more clear, thank you

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว

      Glad it was helpful!

  • @justinebustillon5526
    @justinebustillon5526 4 ปีที่แล้ว +1

    I love it how clear you explained HTML for the beginners bro. Amazing!

  • @meliVinelli333
    @meliVinelli333 4 ปีที่แล้ว +2

    Thank you so much. This video is hands down the most helpful I’ve come across about html 🙌🏽

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      Glad it was helpful!

    • @mobilecowcamp
      @mobilecowcamp 4 ปีที่แล้ว

      This person said exactly what I would have said. Thanks for the video and I'm looking forward to watching more.

  • @leeellison9916
    @leeellison9916 4 ปีที่แล้ว +1

    Really good intro and at a quick pace too... excellent !

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      Glad you like it!

  • @justingarrity2008
    @justingarrity2008 4 ปีที่แล้ว

    love the video, but wonder how you open the browser at 2:39 in the video

  • @chulatskywalker
    @chulatskywalker 4 ปีที่แล้ว

    So so much for me too learn in this 30min video 👍🏻. Im a complete beginner with zero knowledge, so this is so helpful, thanks.

  • @jayantsharma2669
    @jayantsharma2669 3 ปีที่แล้ว +1

    Straight on point. Very well explained...

  • @pratyushkumar7997
    @pratyushkumar7997 3 ปีที่แล้ว +1

    so wonderfully taught ! I m so grateful. keep the good work on.

  • @TheBestTru
    @TheBestTru 3 ปีที่แล้ว +1

    Great video, was not too slow or too fast! Explained perfectly

  • @connorgaughan9117
    @connorgaughan9117 4 ปีที่แล้ว +1

    Awesome 😎 I would say Ctrl forward slash to comment code rather than question mark

  • @sivabalanj
    @sivabalanj 4 ปีที่แล้ว +1

    2:40 how do i make live server open google chrome like that and resize the vs code at the same time?
    that would be super helpful...cause it always opens in full window and ill have to use alt+tab to move around....its not a problem....but i would just like to know....i feel like it would help me when we r building it for mobile devices as well....

    • @ALIschannel3
      @ALIschannel3 4 ปีที่แล้ว +1

      If I understood your question then its really easy to be solved
      Just minimize the VS window and resize them to take the left half of your screen and the browser window to take the right half of the screen then you don't have to click Alt+Tab I guess

    • @sivabalanj
      @sivabalanj 4 ปีที่แล้ว

      @@ALIschannel3 😐......ok....(-_-)

  • @zarez123
    @zarez123 4 ปีที่แล้ว +1

    Great tutorial, one of the best I have found. Keep it going. Thanks

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

    Thank you so much for your lesson!

  • @filip_g
    @filip_g 4 ปีที่แล้ว +4

    Thank you, that was very helpful. I will be recommending you to the higher-ups in YouTueb to get you promoted. Good luck and much love.

  • @Hadzzi47
    @Hadzzi47 ปีที่แล้ว

    Really helpful for a beginner like myself!

  • @amitendradiwakar636
    @amitendradiwakar636 2 ปีที่แล้ว

    Screen should be zoomed out so people can see the video in low quality so that it can save data and video is good .

  • @Azertuiopnbvcxwmlkjh
    @Azertuiopnbvcxwmlkjh 4 ปีที่แล้ว +1

    Great crash course! Nice complement to freeCodeCamp's responsive web design certification.
    You sir deserve more subscribers!

    • @mrcode8175
      @mrcode8175 4 ปีที่แล้ว

      th-cam.com/channels/8rqlzx8SoKEqar3LbhNczQ.html

  • @Luanburallinutri
    @Luanburallinutri 2 ปีที่แล้ว

    Thanks for the help, great video and explication! Hi from brazil!

  • @annoyingruss5453
    @annoyingruss5453 5 ปีที่แล้ว +3

    How about the HTML 5 semantic tags?

  • @7cn.i
    @7cn.i 5 ปีที่แล้ว +1

    Short and simple وو Awesome Video
    thanks alot

  • @wz5445
    @wz5445 4 ปีที่แล้ว +1

    Thank you so much! This is really helpful!!

  • @sudanmoheen7228
    @sudanmoheen7228 3 ปีที่แล้ว +1

    perfect to the point

  • @umairkhan4095
    @umairkhan4095 3 ปีที่แล้ว +1

    Best teacher found on the internet :)

  • @DukeMgmbh
    @DukeMgmbh 5 ปีที่แล้ว +2

    Awesome Video. Keep up the great work. I learned a lot.

    • @codeSTACKr
      @codeSTACKr  5 ปีที่แล้ว

      Thank you for your support!

  • @maviswiggins8589
    @maviswiggins8589 4 ปีที่แล้ว

    You are great a explaining Web Dev. I love all of your videos because they are easy to follow. Good job! By the way there was a part in the video where you added a meta tag and 3 meta tags appears. Can you share how 3 appeared, when I tried I was only able enter 1 meta tag?

  • @raptros2
    @raptros2 4 ปีที่แล้ว +2

    Thank you so much!

  • @bhaswatiroy1433
    @bhaswatiroy1433 3 ปีที่แล้ว

    Awesome Short and compact video

  • @viniciusm.m.7822
    @viniciusm.m.7822 3 ปีที่แล้ว +1

    Thanks, dude!!!!
    God bless you!

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว +1

      You're welcome!

  • @zideoui
    @zideoui 3 ปีที่แล้ว +1

    simple and effective! Thank you x

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว

      Glad it was helpful!

  • @mokyol3697
    @mokyol3697 4 ปีที่แล้ว +1

    Thanks for good explanation.

  • @eiko5701
    @eiko5701 3 ปีที่แล้ว +1

    could we get a new tutorial for html and css or are these still relevent because im just starting to learn all of this

    • @codeSTACKr
      @codeSTACKr  3 ปีที่แล้ว

      They are still relevant 😁

  • @ogomotojin
    @ogomotojin 2 ปีที่แล้ว

    Hey, codeSTACKr. Great video! Thanks for providing this course.
    Quick question - how is your cursor moving so fast? Is this something you changed in the settings or a matter of your hardware (ex. keyboard)?

  • @d.p.423
    @d.p.423 2 ปีที่แล้ว

    came to discover this channel after seeing a video from @ForrestKnight and, so far, it's been great.. two things as I'm trying to reproduce your code. First, the text on my side appears as some sort of purplish colour, not black. Second, as I click on the "cars" dropbox, it doesn't keep opened if I release the mouse's left button (thus it doesn't allow me to select neither volvo nor audi). same applies to the "first name here" box..I need to keep the mouse's left button clicked as I write.. any hints?

  • @دانشبینش
    @دانشبینش ปีที่แล้ว +1

    perfect man!

  • @rhomiezhomeboy8270
    @rhomiezhomeboy8270 4 ปีที่แล้ว +1

    You always have a great tutorials🙏🙏🙏thank you so much

  • @biswajeetgoswami6681
    @biswajeetgoswami6681 4 ปีที่แล้ว +1

    awesome tutorials man. Thank you sooo much.

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      Glad you like them!

  • @ronniewilliams6037
    @ronniewilliams6037 2 ปีที่แล้ว

    Hello, trying to find out why my checkboxes show as extra-long text boxes instead of a normal check box?

  • @LenaMellow
    @LenaMellow 3 ปีที่แล้ว

    How did you open it in the browser? I did download that extension you mentioned but I can’t get it to work. Flummoxed at step one!

  • @zelenimonter4901
    @zelenimonter4901 2 ปีที่แล้ว

    great to sum up knowledge 👌👍

  • @alireza2295
    @alireza2295 4 ปีที่แล้ว +1

    Thanks, man. Very useful.

  • @andyedser7076
    @andyedser7076 4 ปีที่แล้ว +1

    Hi! Your videos are unreal and have really helped me. Would you recommend writing an entire site in HTML before making it look good in CSS? Or is this just never going to be ideal?

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      It will never look good with just HTML. I would suggest understanding the very basics of HTML then start learning CSS along with continuing to learn more about HTML. HTML and CSS go hand in hand. And thank you!

  • @tyabmohammad6485
    @tyabmohammad6485 4 ปีที่แล้ว

    How do you open the live browser? I installed it from the previous video

  • @jagsproduction
    @jagsproduction 3 ปีที่แล้ว +1

    WELL EXPLAINED SIR♥️🙌

  • @pepi8433
    @pepi8433 2 ปีที่แล้ว

    Codeacamedy use instead of

  • @khanhnguyenquang9539
    @khanhnguyenquang9539 4 ปีที่แล้ว +1

    Thanks for all, This video is so helpful!

  • @blueandbanana
    @blueandbanana 4 ปีที่แล้ว

    I’m looking at this video on my phone. I can’t see anything. Can you? I will review this video on my laptop or iPad. Thank you!

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

    Better than 4 hours paid course!

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

      Thank you!

  • @greatscott36
    @greatscott36 ปีที่แล้ว

    Is there a reason why i dont get the 3rd line? do I have something missing? cuz when i press the run it also doesn't pop a page up with what im doing, just starting and kinda confused, appreciate the help :)

  • @WitoonThreamthakanpon
    @WitoonThreamthakanpon 5 ปีที่แล้ว +2

    So clear and so advantage for beginners. Thank you so much for good knowledge.

  • @ismaeil4233
    @ismaeil4233 3 ปีที่แล้ว

    Greate stuff!
    Would you please show me how to download the code. I couldn’t find it.

  • @chetansoni8620
    @chetansoni8620 4 ปีที่แล้ว +1

    Thanks for making this video it helps a lot.

  • @SkullKrish
    @SkullKrish 3 ปีที่แล้ว +1

    Thank you so much it helped me a lot

  • @gracehu3031
    @gracehu3031 2 ปีที่แล้ว

    Thank you this was very helpful!!:D

  • @uhmThing
    @uhmThing 3 ปีที่แล้ว

    From an inclusivity standpoint leaving the alt text empty even for decorative pictures feels a bit off? Otherwise loved the information in this video, very helpful!

    • @pepi8433
      @pepi8433 2 ปีที่แล้ว

      what you mean bit off?

  • @tajhacker
    @tajhacker 4 ปีที่แล้ว +1

    Thanks buddy help a lot

  • @riponroy116
    @riponroy116 4 ปีที่แล้ว +1

    if possible then please make a basic project tutorial

  • @schatzo96
    @schatzo96 4 ปีที่แล้ว +1

    Nice video. Why doesent this channel have more views? Its so helpful :)

  • @tisurmaster
    @tisurmaster 4 ปีที่แล้ว

    Any video suggestion on semantic responsive html?

  • @brunadahm7403
    @brunadahm7403 4 ปีที่แล้ว +1

    Really good. Thank you so much.

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      Glad you liked it!

  • @rohan6950
    @rohan6950 2 ปีที่แล้ว

    Thank you so much ❤️

  • @iliassuvanov6690
    @iliassuvanov6690 4 ปีที่แล้ว +1

    Thanks man!

  • @ronniewilliams6037
    @ronniewilliams6037 2 ปีที่แล้ว

    I am using VSC?

  • @mithunbarua7537
    @mithunbarua7537 4 ปีที่แล้ว +1

    I just start to learn. Thank you

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว +1

      You got this!

    • @mithunbarua7537
      @mithunbarua7537 4 ปีที่แล้ว +1

      I did some basic classes on html which were in Bangla. before watching your video, doing some html class help me a lot to understand your classes.
      plzz make more video on css.
      Thanks 😍😍😍

  • @МаринаМакурина-э9ь
    @МаринаМакурина-э9ь 3 ปีที่แล้ว +1

    Thank you!

  • @zurielsanchez6209
    @zurielsanchez6209 4 ปีที่แล้ว

    Hi, Im just starting to learn coding and in this tutorial I was wondering why on your h1 is bold and in is not, but on mine both are automatically bold. Hope you can help. thanks

    • @codeSTACKr
      @codeSTACKr  4 ปีที่แล้ว

      Sorry, I'm not sure why that would be. What browser are you using? tags should definitely not be bold..

    • @zurielsanchez6209
      @zurielsanchez6209 4 ปีที่แล้ว

      @@codeSTACKr Im using google and its the same if i use sublime text. Thanks for answering anyways.

    • @pepi8433
      @pepi8433 2 ปีที่แล้ว

      @@zurielsanchez6209 why you going to ask if you didnt want any solution to your issue? stop asking for the sake of asking