HTML 5 Tutorial

HTML 5 Tutorial


Hello Internet and welcome to my HTML5 tutorial in this one tutorial i’m gonna cover pretty much everything there is about HTML5 plus i’m also going to cover a little bit on PHP, javascript and stylesheet so it’s a true completly tutorial It’s going to be a real long video so i’ll provide links to all the individual parts covered in this tutorial in the description underneath the video and i have alot to do so let’s get in to it So okay i have a really simple layout here on the left side on the screen i have a text editor over here on the right side of the screen i have google chrome and im going to be bouncing back and forth to show you everything here Now to start off in html 5 document you’re going to have a bracket and exclamation point and doctype and this is a HD video so feel free to watch it full screen.

100 Comments

  1. Thank you so much for all of your videos you've made for us. Really appreciate it. It will be great if you could get time and made tutorial for """""""""""PSD TO HTML conversion""""""""""" Thanks Again.

  2. I enjoyed watching this video. I know some programming (beginner level) but this has opened up doors to what other functions HTML and JavaScript can do. Thanks for the video!

    One question. What would you recommend when starting a new task? Where should I start?

  3. <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    background-color:lightblue;
    }
    p{
    color:darkblue;
    text-align:centre;
    font-family:Times
    font-size:60px;
    }
    </style>
    </head>
    <script>
    function myfunction() {
    var x = document.getElementById("demo");
    x.style.display="block";
    x.style.color="lightgreen";
    x.style.fontFamily = "ComicSansMS";
    x.style.fontSize = "125px";
    x.innerHTML="Javascript is the best";
    }
    function myotherfunction() {
    var y=document.getElementById("lol");
    y.style.display="block";
    y.style.color="violet";
    y.style.fontFamily="Zapfino";
    y.style.fontSize="60px";
    y.innerHTML="there are 3 types of people in this world,people who are good at maths,and people who aren't";
    }
    function joke() {
    var j = document.getElementById("lol");
    j.style.display="block";
    j.style.fontSize="300px";
    j.style.fontFamily="Zapfino";
    j.style.color="violet";
    j.innerHTML="you";
    alert("you")
    }

    </script>
    <body>
    <p>click <a href="https://scratch.mit.edu/users/CaptainSparten6"> here </a>to go to my scratch profile</p>
    <p id="lol" style="display:none">Niteesh is the best</p>
    <marquee>press the buttons!</marquee>
    <p id="demo">JavaScript(MADE BY NITEESH)</p>
    <button type="button"onclick='document.getElementById("demo").style.fontSize="100px"'>Enlarge</button>
    <button type="button"onclick='document.getElementById("demo").style.fontSize="40px"'>Shrink</button>
    <button type="button"onclick='document.getElementById("demo").style.color="yellow"'>Yellow</button>
    <button type="button"onclick='document.getElementById("demo").style.color="darkblue"'>Blue</button>
    <button type="button"onclick='document.getElementById("demo").style.display="none"'>Hide</button>
    <button type="button"onclick='document.getElementById("demo").style.display="block"'>Show</button>
    <button type="button"onclick='document.getElementById("demo").style.color="purple"'>Purple</button>
    <button type="button"onclick=myfunction()>Show,Enlarge,change font,change text and change color all at once</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Times"'>Change font to Times</button><button type="button"onclick='document.getElementById("demo").style.fontFamily="ComicSansMS"'>Change font to ComicSansMS</button>
    <button type ="button"onclick='document.getElementById("demo").innerHTML="Thanks JavaScript"'>Change text</button>
    <button type="button"onclick='document.getElementById("demo").innerHTML="JavaScript(MADE BY NITEESH)"'>Change text back</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Menlo"'>Change font to Menlo</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="American Typewriter"'>Change font to American Typewriter</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Avenir Next Condensed"'>Change font to Avenir Next Condensed</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Luminari"'>The best font ever!(Luminari)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Savoye LET"'>Another great font(Savoye LET)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Courier New"'>Change font to Courier New</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Marker Felt "'>Change font to Marker Felt</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Didot"'>Change font to Didot</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Noteworthy"'>Change to a "Noteworthy"font(XD puns for days).</button>
    <button type="button"onclick='document.getElementById("demo").style.color="lightgreen"'>Change color to light green</button>
    <button type="button"onclick='document.getElementById("demo").style.color="darkgreen"'>Change color to darkgreen</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Superclarendon"'>Change font to superclarendon(lol wut)</button>
    <button type="button"onclick='document.getElementById("demo").style.color="violet"'>Change color to violet(it look like pink tho)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Zapfino"'>Change font to Zapfino</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Futura"'>Change font to Futura</button>
    <button type="button"onclick='document.getElementById("lol").style.display="block"'>Show additional text</button>
    <button type="button"onclick='document.getElementById("lol").style.display="none"'>Hide additional text</button>
    <button type="button"onclick=myotherfunction()>Change everything about the additional text</button>
    <button type="button"onclick='document.getElementById("lol").style.fontSize="20px"'>Shrink additional text</button>
    <button type="button"onclick='document.getElementById("lol").innerHTML="Niteesh is the best"'>Change additional text back</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Futura"'>Change additional text font to Futura</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Luminari"'>Change additional text fnt to Luminari</button>
    <button type="button"onclick='document.getElementById("lol").style.color="darkblue"'>Change additional text color to dark blue</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Zapfino"'>Change additional text font to Zapfino</button>
    <button type="button"onclick='document.getElementById("lol").innerHTML="There are 3 types of people in this world,people who are good at maths,and people who arent"'>Change additional text text(Exploding Head on Google Android 8.0)</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Menlo"'>Change additional text font to Menlo
    <button type="button"onclick='document.getElementById("lol").style.color="darkgreen"'>Change additional text color to dark green</button>
    <button type="button"onclick='document.getElementById("lol").style.color="purple"'>Change additional text color to purple</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Didot"'>change additional text font to Didot</button>
    <button type="button"onclick='document.getElementById("lol").style.color="violet"'>Change additional text font to violet(it looks like pink)</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Savoye LET"'>Change additional text font to Savoye LET</button>
    <button type="button"onclick=alert("memes")>One does not simply….</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Trebuchet MS"'>Change additional text font to Trebuchet MS</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Trebuchet MS"'>Change font to Trebuchet MS</button>
    <button type="button"onclick=joke()>Let the additional text tell you a joke</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Superclarendon"'>Change additional text font to superman</button>
    </body>
    </html>

    rate my html from 1-10(by the way,i'm only 10 years old)

  4. I was wondering if i should go by the cheat sheet first and then actually go with the video, would that be useful regarding that I am a beginner?

  5. Thanks a lot Derek..! Your videos are like guide to what actually could be done once you get the hang of php,html5,jscript etc..But really fun to watch your tutorials. Thanks again

  6. None of these videos are beginner friendly and that should be explained beforehand. All of this requires some prior knowledge to fully understand what is happening.

  7. This is awesome! I watched the whole video, I came in with very little knowledge and now I know a whole bunch. I will have to watch this again and try out some of these tips and tricks!!!

  8. I did watch the all thing. Like all your tutorials, this is an excellent crash course. Just enough to start one up. Please keep on the great work. Best regards. P.s. Do you intend to do anything on jqueryui?

  9. this is so good! I watch bob on chanel 9, he is talking and talking on and on only to explan his design process. Bob I am sorry… you C# and .Net viedo is great but not this

  10. Free Programming Book & Video Lectures Unlimited free Books, including Computer Programming, Software, Circuits etc. Best collection of free books
    http://www.programming-book.com/

  11. Hi Derek I expected something like data-target , data-value , progress data .. data wow .. I don't understand anything from this data y not cover this's attributes .. I hope y do it tutorial in one video to explain this's stuff . Thank you for you teach me .. my master ..

  12. Hi Teacher Derek!! I have got a question which really puts me into confusion all the time. It is "" How am I be able to understand codes interpretation please or namely, I want to understand seriously to learn meaning of codes in programming simply at the beginning? To make my question simpler, a simple example: Could you please explain this code to me? example: <script>document.createElement("newP")</script> What does this mean exactly? Just please give me such a good answer that it helps me learn and understand further programming code writing easily a bit at least and not getting crazy :(((!! hope my question is clear :)) .I believe you will be helping with this question. Therefore I am sharing my problem with you. Thank you.

  13. Hello Derek, it seems that at 14:20 the parameter "alt" is deprecated or does not work anymore. I changed to "title" like in the "definition"-Tag and it worked 😉

  14. I watched everything, Brilliantly done, thanks very much.
    wish you do a full project with step by step guide.
    but this more than enough

  15. I think this tutorial will be very helpfull to anyone just starting on HTML and CSS https://www.youtube.com/watch?v=TyQMAY5Z6Fs very good tutorials, helped me a lot.

  16. it's amazing how "every single second" of your tutorial videos is informative and has something to say. thanks a lot for valuing viewers time and producing high quality content

  17. pretty knowledgeable video indeed, however with begin of video i just couldn't realize it would be that informative that can take me from level of unawareness to quite familiarized to the html5 & associated part needed to design a web app .

  18. U can call this whatever u want, except a tutorial. Even tho I had basic knowledge I coud hardly keep up with everything. You are just throwing things with no explaining to where they come from or why is even there. Even from the very start you rush switching windows and throwing URLs like it's normal but u already have them preset and you give no info about that. Newcomers will just shut this off after 30 seconds

  19. its going to be hard for a beginning to learn from you.. one too first, secondly you do too much without showing what a particular example you are trying to do will look like without showing it first.

  20. I read somewhere that the <b></b> will be permanently taken out soon and it explained that people should only use <strong></strong> in HTML5 for making text bold.
    as some agency thats incharge of making HTML5 will no longer support the old bold <b></b>

  21. Thank you Derek awesome video, but this video is not for complite begginers. I had to go and learn some basics to understand everything you presented in here.

  22. The greatest tutorial. Thanks a lot! Tbh I already know html, css, js, Php but you helped me to recall everything I forgot

  23. Your amazing Derek…. This course is really cool to start with HTML 5….. And Provides great ideas.

  24. Hi Derek, just finished watching the video and it's amazing you pretty much covered just about everything there's to cover, thanks for the video, keep em coming
    Cheers from Argentina

  25. i came to html5 i knew javascript for me it was just refresh. but people on beginner level will have hard problem to understand java script part

  26. I'm going in for a coding interview so this was a good refresher video, however, for the average beginner developer I think it might have been to fast to follow.

  27. Thank you for the HTML 5 video. This second time i did manage to watch the whole thing, but did not pick up everything. Informative but fast. Can i download the tutorial anywhere? Some use bracket and some use sublime. I did not get what you where using?
    I would like a software that can divide the screen in half, so i can see production as i am coding or writing since HTML is not a coding language Can you recommend something? if an update for 2018 is coming up please notify me. Thanks again. Mehran Gerami in San Diego.

  28. I am going to book mark this video and use it as a reference when ever I need something (for example canvas). Very good!

  29. Hello, amazing tutorial as usual! And from what I could tell you were running your html files off a local server. Do you have instructions on how to do that?

  30. I am so glad I found this video. Your delivery is easy to follow. Your examples are great for reference. Thanks for making a potentially confusing subject easy to follow.

  31. I thought I knew HTML pretty well and came here to refresh my memory, but this is mind-blowing! There are so many small things you can do to really demonstrate your flair with the language that I had no idea even existed. I'll have to chew on this video a few more times before I completely grasp most of it. Many thanks for the excellent content.

  32. i actually have couple of months of experiences with html already but im watching this to polish my skills to perfection because i haven't put much effort the whole time in school. its the march holidays right now 😛

  33. Awesome tutorial, learned a lot, but some of the javascript was a bit flaky for me. Couldn't get the text to change colour when clicked or the geolocation working. All else was fine. Sometimes it's good to just get things done. This tutorial is brilliant.

  34. I watched the whole thing and am planning on making my own website but WOW how much HTML has changed. The last time I made a website it was in html 1.0 so yea lol a LOT to learn.

  35. Learn in One Videos for Every Programming Language
    Subscribe to Bookmark them: http://bit.ly/2FWQZTx
    C++ : https://youtu.be/Rub-JsjMhWY
    Python : https://youtu.be/N4mEzFDjqtA
    Java : https://youtu.be/n-xAqcBCws4
    PHP : https://youtu.be/7TF00hJI78Y
    MySQL : https://youtu.be/yPu6qV5byu4
    JavaScript : https://youtu.be/fju9ii8YsGs
    C# : https://youtu.be/lisiwUZJXqQ
    HTML5 : https://youtu.be/kDyJN7qQETA
    CSS3 : https://youtu.be/CUxH_rWSI1k
    JQuery : https://youtu.be/BWXggB-T1jQ
    TypeScript : https://youtu.be/-PR_XqW9JJU
    ECMAScript : https://youtu.be/Jakoi0G8lBg
    Swift : https://youtu.be/dKaojOZ-az8
    R : https://youtu.be/s3FozVfd7q4
    Haskell : https://youtu.be/02_H3LjqMr8
    Handlebars : https://youtu.be/4HuAnM6b2d8
    Bootstrap : https://youtu.be/gqOEoUR5RHg
    Rust : https://youtu.be/U1EFgCNLDB8
    Matlab : https://youtu.be/NSSTkkKRabI
    Arduino : https://youtu.be/QO_Jlz1qpDw
    Crystal : https://youtu.be/DxFP-Wjqtsc
    Emacs : https://youtu.be/Iagbv974GlQ
    Clojure : https://youtu.be/ciGyHkDuPAE
    Shell : https://youtu.be/hwrnmQumtPw
    Perl : https://youtu.be/WEghIXs8F6c
    Perl6 : https://youtu.be/l0zPwhgWTgM
    Elixir : https://youtu.be/pBNOavRoNL0
    D : https://youtu.be/rwZFTnf9bDU
    Fortran : https://youtu.be/__2UgFNYgf8
    LaTeX : https://youtu.be/VhmkLrOjLsw
    F# : https://youtu.be/c7eNDJN758U
    Kotlin : https://youtu.be/H_oGi8uuDpA
    Erlang : https://youtu.be/IEhwc2q1zG4
    Groovy : https://youtu.be/B98jc8hdu9g
    Scala : https://youtu.be/DzFt0YkZo8M
    Lua : https://youtu.be/iMacxZQMPXs
    Ruby : https://youtu.be/Dji9ALCgfpM
    Go : https://youtu.be/CF9S4QZuV30
    Objective C : https://youtu.be/5esQqZIJ83g
    Prolog : https://youtu.be/SykxWpFwMGs
    LISP : https://youtu.be/ymSq4wHrqyU
    Express : https://youtu.be/xDCKcNBFsuI
    Jade : https://youtu.be/l5AXcXAP4r8
    Sass : https://youtu.be/wz3kElLbEHE

  36. For those who are watching in mobile

    00:32 DOCTYPE HTML URL

    01:52 HEAD META CHARSET REDIRECT

    03:14 DESCRIPTION KEYWORDS ROBOTS

    04:45 SCRIPT BASE LINK STYLESHEET

    05:45 ICONS TITLE

    06:42 VALIDATE HTML5

    07:15 BODY ONLOAD DIV WRAPPER

    08:16 NOSCRIPT H1 P BR HR

    09:23 BLOCKQUOTE CITE Q

    10:14 PRE CODE

    11:21 JavaScript :

    onclick getElementsByTagName innerHTML HexCode

    13:44 IMG ID SRC ALT WIDTH HEIGHT

    14:36 B STRONG EM I

    15:10 SMALL INS DEL SAMP

    15:30 ABBR TITLE DFN KBD

    16:49 Character Entities

    17:35 SUP SUB BDO RUBY RT

    18:29 LINKS A HREF

    19:01 Link Active States CSS

    20:06 CSS background IDs margin

    21:12 Linking within Page

    22:43 mailto

    23:04 JavaScript :

    Execute onclick toggle visibility

    24:53 Making Image Maps with GIMP

    27:15 OBJECT DATA TYPE PARAM Embedding

    28:50 Everything you can embed

    29:11 IFRAME

    29:32 EMBED Flash Plugins

    30:05 AUDIO

    30:36 VIDEO

    30:55 HEADER

    31:42 NAV Navigation

    32:02 MAIN SECTION ARTICLE ASIDE

    33:55 ORDERED & UNORDERED LISTS OL UL

    35:36 CSS :

    float display padding # text-decoration

    38:09 DEFINITION LISTS DL DD DT

    39:19 list-style-type for lists

    39:56 ORDERED LIST TYPES

    40:58 TABLES :

    caption thead tr td colspan tfoot tbody

    43:51 FOOTER ADDRESS SMALL

    44:38 FORMS & PHP GET POST

    45:10 Processing Forms with PHP

    45:44 INPUT TAGS

    47:51 TEXTAREA

    48:29 FIELDSET LEGEND

    48:49 CHECKBOX

    49:18 RADIO BUTTONS

    49:55 SELECT BOX OPTION OPTGROUP

    51:02 HIDDEN

    51:20 UPLOAD FILES

    51:37 IMAGE BUTTON

    51:59 CANVAS & JavaScript

    1:05:14 JavaScript :

Leave a Reply

Your email address will not be published.


*