HTML Crash Course In 30 Minutes

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

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

  • @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: ruclips.net/video/Tfjd5yzCaxk/видео.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

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

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

    Most Badass HTML tutorial. You da man!

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

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

  • @Rakshit.Pahuja
    @Rakshit.Pahuja 4 года назад +71

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

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

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

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

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

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

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

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

    Million times better than university lectures 🙏👍

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

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

  • @PrinceKumar-hh6yn
    @PrinceKumar-hh6yn Год назад

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

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

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

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

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

  • @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 🙂.

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

    Love the VS Code keyboard shortcuts! Very helpful!

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

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

  • @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- 4 года назад +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

  • @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....(-_-)

  • @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 ! ✨🙏

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

    One of the best explanation skills I have ever seen on RUclips! 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- 4 года назад

      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

  • @skrrt-
    @skrrt- 4 года назад +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!

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

  • @octagonmixltd
    @octagonmixltd 8 месяцев назад +1

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

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

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

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

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

  • @georgy3136
    @georgy3136 Год назад +1

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

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

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

    This couldn't be more clear, thank you

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

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

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

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

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

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

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

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

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

      ruclips.net/channel/UC8rqlzx8SoKEqar3LbhNczQ

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

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

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

    Best teacher found on the internet :)

  • @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)?

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

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

  • @annoyingruss5453
    @annoyingruss5453 5 лет назад +3

    How about the HTML 5 semantic tags?

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

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

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

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

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

    Straight on point. Very well explained...

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

    Really helpful for a beginner like myself!

  • @annafrankenstein85
    @annafrankenstein85 10 месяцев назад +1

    Thank you so much for your lesson!

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

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

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

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

    perfect to the point

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

    Thank you so much!

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

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

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

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

    Awesome Short and compact video

  • @7cn.i
    @7cn.i 5 лет назад +1

    Short and simple وو Awesome Video
    thanks alot

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

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

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

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

    WELL EXPLAINED SIR♥️🙌

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

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

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

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

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

  • @DukeMgmbh
    @DukeMgmbh 5 лет назад +2

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

    • @codeSTACKr
      @codeSTACKr  5 лет назад

      Thank you for your support!

  • @viniciusm.m.7822
    @viniciusm.m.7822 3 года назад +1

    Thanks, dude!!!!
    God bless you!

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

    Thank you so much! This is really helpful!!

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

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

  • @دانشبینش
    @دانشبینش Год назад +1

    perfect man!

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

    Thanks for good explanation.

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

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

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

    Codeacamedy use instead of

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

    Thanks buddy help a lot

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

    Thank you so much it helped me a lot

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

    great to sum up knowledge 👌👍

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

    Any video suggestion on semantic responsive html?

  • @naeempersonal
    @naeempersonal 9 месяцев назад +1

    Better than 4 hours paid course!

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

    simple and effective! Thank you x

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

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

    there are videos named html for beginners like 1+ hrs long and still they shit af. my man only got 36min video and its full of content. like your teaching speed.

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

    I am using VSC?

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

    if possible then please make a basic project tutorial

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

    awesome tutorials man. Thank you sooo much.

  • @alireza2295
    @alireza2295 5 лет назад +1

    Thanks, man. Very useful.

  • @Ali-lb2cg
    @Ali-lb2cg 5 лет назад +1

    your method of teaching is awesome. plz explain meta tag http-equiv. I got no proper explanation to it

    • @codeSTACKr
      @codeSTACKr  5 лет назад

      The meta tag http-equiv is generally only used for Microsoft IE compatibility.
      Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether.
      The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.

    • @Ali-lb2cg
      @Ali-lb2cg 5 лет назад

      @@codeSTACKr tnx :)

  • @35-marks-makers30
    @35-marks-makers30 4 года назад

    @codeSTACKr.. do you have the link for this code/html to keep it for us for quick reference ??

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

      Yes, link is in the video description :)

  • @iliassuvanov6690
    @iliassuvanov6690 5 лет назад +1

    Thanks man!

  • @arunaagt8229
    @arunaagt8229 5 лет назад +2

    Astonishingly Awesome ✨👍👍👍

    • @codeSTACKr
      @codeSTACKr  5 лет назад

      Thank you!

    • @arunaagt8229
      @arunaagt8229 5 лет назад

      @@codeSTACKr how to run my first html!??

    • @codeSTACKr
      @codeSTACKr  5 лет назад

      @@arunaagt8229 If you are using VS Code you can use the Live Server extension to see your HTML. Check out my VS Code videos to see how to set that up. If you are trying to deploy check out my cPanel video.

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

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

    Thanks for all, This video is so helpful!

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

    Really good. Thank you so much.

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

    Thank you so much ❤️

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

    Thanks for making this video it helps a lot.