This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Hello World


Write a basic HTML document

This task is going to introduce you to writing a basic html document. But you'll do it on paper, using a pen, for fifteen minutes. Think of this challenge as the Webmaking 101 equivalent of wax on, wax off (from the original Karate Kid film).

You're going to keep doing this until (hopefully) you can do it without making any mistakes and (ideally) by memory. It's important to be able to do this because this basic html document will form the basis for (almost) every html document you write in the future.
 
Below is the code that you're going to write out by hand. Be sure to copy it verbatim. Every quote, space, capitalisation and indentation is important. When you start writing more complex HTML & CSS you'll see why ;)You can be creative with your Hello World and include your name and a personal message.
 
<!DOCTYPE html>
        <meta charset="utf-8">
        <title> Hello World by Susie Creamcheese</title>
    </head>
 <body>

        <h1> Hello World by Susie Creamcheese</h1>
            This code is written by hand. How awesome am I?
        </p>
    </body>
</html>
 
If you make a small mistake that's ok, but if you make a big mistake then start again. If you manage to get to the end without making a mistake in under fifteen minutes, then start again, but this time doing it from memory.
 
At the end of the fifteen minutes you should have got through a few pages or sheets of paper and have something that resembles the above code.

Task Discussion


  • equinox said:

    html hand is gr8

    on Feb. 22, 2015, 3:50 p.m.
  • litlsuzzy said:

    on Jan. 27, 2015, 7:53 p.m.
  • Auden said:

    See code below: 

    on Jan. 14, 2015, 9:48 p.m.
  • Ashish Gautam Karn said:

    My hand written code for @hello world@ in html, got it worked in 2nd time... My hand written code for hello world in html...

    on Aug. 31, 2014, 11:24 a.m.
  • Pachelbel117 said:

    Third try.

    on Aug. 2, 2014, 12:41 a.m.
  • Eddie said:

    THIS IS MY HAND WORK TRULY

    on July 12, 2014, 10:35 a.m.
  • Kyle said:

    Here is my hand written code, took me two tries. I had it right the first time, but thought I should clean it up a little bit...still pretty sloppy hand writing, but oh well. Think the hardest part was training my brain to write in lower case, since I usually write in all caps.

     

    Now, I was a little confused when doing this course. I have been writing basic code for about a year now, and the way I learned is a little different, not much, just with the indenting. I don't know if that really matters, but I would like an opinion from fellow users! Blow is an example of how I would normally right this code. Thanks!

     

    on July 8, 2014, 3:22 p.m.

    <spark!> said:

    Your computer generated code is correct and the p2pu staff made a simple indentation mistake while typing the code. All opening and closing tags must have the same indentation. Although it will work it will cause errors in other areas later in the code and may cause your code to be impossible to read.

    on Oct. 14, 2014, 9:44 p.m. in reply to Kyle
  • Priscila D' Muran said:

    Hi!

    3 attempts.. the 3rd all by memory.. =)

    It was fun.. ^^

    on July 2, 2014, 6:33 p.m.
  • JennyC said:

    on June 29, 2014, 4:05 p.m.
  • Ilya said:

    3 attempts. No cam or scanner by the way :\

    on June 20, 2014, 3:49 a.m.
  • Dscherer21 said:

    Took Me about 4 tries, but I finally got it.

    on June 5, 2014, 1:22 a.m.
  • Joy Jackson said:

    Writing HTML by HandI am lucky to have a lot of experience with basic html, so this was a relatively easy challenge for me. I have to say, I have not written code by hand in many years, so using a pen instead of a keyboard felt a bit wonky!

    on June 3, 2014, 11:57 a.m.

    Kyle said:

    Hey Joy,

     

    I was looking for this post, and you mentioned you have a lot of experience with writing html. Could you look over the two examples on my post. I am a little confused on the spacing and indentations of tags when writing. I was taught a different way than this course shows how it's done. I guess, does it really matter how the spacing and indentations are done, or is it just user preference? Thanks a lot!

     

    http://forecheckdesign.wordpress.com/

    on July 8, 2014, 3:43 p.m. in reply to Joy Jackson

    Joy Jackson said:

    Kyle -- I have found that keeping my indents clean and my code in order as much as possible makes it easier for me to make changes along the way. Once you get going and adding lots of
    tags and CSS elements, the indents really help you keep track of code inside of code and help to ensure that you have closed everything. When you start out it seems kind of silly, but once you get going you will be glad you made it a habit. Today I am working on a web page in a responsive design. I have so many blocks on the page that hold different information that I can have 5 to 7
    tags -- the indents help me make sure I close them all....
    Example....
    I hope that helps!!!!
    on July 8, 2014, 4:02 p.m. in reply to Kyle
  • David K. Besah said:

    I'm doing it again. I hope to be successful this time.

    on June 2, 2014, 9:55 p.m.
  • OFORI said:

    on April 26, 2014, 6:31 p.m.
  • Rey said:

    It took me 9 revisions before I got the written codes by memory without mistakes. Visit my blog to comment. It is much appreciate. thank you..

    You can visit my blog and have a look at it.

    on March 29, 2014, 8:27 a.m.
  • oPartyInMyPants said:

    Boom!

    on March 24, 2014, 7:27 p.m.
  • riatha1982 said:

    on March 23, 2014, 9:23 p.m.