HTML 5 Introduction

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

Task Navigation 

Mid-Term: Create a Personal Bio or Resume

Lets put together the knowledge of HTML that we have gained so far. For this task, use the previous tasks as a fundation to construct a personal resume using HTML. Your resume or bio page should contain most or all of the following elements:

  • DOCTYPE
  • <html>
  • <head>
  • <body>
  • <h1>, <h2>, <h3>, etc.
  • <p>
  • <img>
  • <strong>, <b> (How should these be used?)
  • <ul>, <li>
  • <table>, <tr>, <td>
  • <address>

Optional tags include:

  • <audio>
  • <video>
  • <aside>
  • <blockquote>
  • Any of the other tags mentioned during the first tasks.

Once your page is complete, be sure to check your markup using the W3C Markup Validation Tool.

Post a link to your validated HTML page on the discussion area for this task.

Be sure to give feedback to fellow learners so that we can learn from each other smiley

Task Discussion


  • EcologicalHumanist   Jan. 11, 2014, 6:44 a.m.

    https://dl.dropboxusercontent.com/u/3367612/Chad_A_Hines/index.html

     

    Here it is --code is validated.

  • bryanwoodsmall   July 6, 2013, 5:06 p.m.

    My resume:

    http://makefriendswithalgebra.com/resume1.html

    It is a little rough.  Only used a few things that have not been covered yet.  This exercise helped me get more familiar with HTML5 and CSS.

    Here is a link to the validation:

    http://validator.w3.org/check?uri=http%3A%2F%2Fmakefriendswithalgebra.com%2Fresume1.html&charset=%28detect+automatically%29&doctype=Inline&group=0

    It shows a couple of errors, but they seem to be caused by some anlalytics code put in there by my website hosting company.

  • MisterMitchell   July 3, 2013, 1:39 a.m.

    Here is my validation: http://validator.w3.org/check?uri=http%3A%2F%2Fmister-mitchell.com%2Fresume%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

     

    Here is the link to my resume page. I had a lot of fun with this. I used some javascript that doesn't make a lot of sense to me yet, but using it and seeing it in action will help me to acclimate to it easier I think. Any feedback is appreciated! Thank you!

    mister-mitchell.com.resume

  • bryanwoodsmall   July 6, 2013, 5:20 p.m.
    In Reply To:   MisterMitchell   July 3, 2013, 1:39 a.m.

    Looks really sharp.  I will probably look at the source to get some ideas to make mine better.

  • Cinder   May 22, 2013, 4:05 p.m.

    Here's a link to the validation: http://validator.w3.org/check?uri=http%3A%2F%2Fhtmlpad.org%2FBioPage%2F

    Here's a link to the bio page: http://htmlpad.org/BioPage/

    If anyone could give me any advice on centering the bullets and the picture, that would be great. For the bullets, I tried "text-align: center;", and for the picture, I tried "text-align: center;", which I figured would be wrong.

  • zoki   April 22, 2013, 8:30 a.m.

    Aquí dejo un poquito de mí:

    http://liveweave.com/Llffdy

     

    Según http://validator.w3.org/check:

    This document was successfully checked as HTML5!

     

    Sólo me sale un warning: Line 43, Column 69: The cite attribute on the blockquote element is not supported by browsers yet.

  • Deiren   Feb. 3, 2013, 10:36 a.m.

    Based on Vita's structure below - thanks, nice job - wanted to try out some of the css3 styles she used - incorporated some other elements like <video>....

    https://thimble.webmaker.org/p/f5w0

  • JoshM   May 17, 2012, 10:40 p.m.

    boom. Not sure about the black-on-red, but it's like my school colors. I like it!

    http://htmlpad.org/p2puresumemclucas/

  • Pau Company   May 16, 2012, 7:39 p.m.

    Aqui mi trabajo:

     

    Curriculum normal:

     

    http://paucompany.es/ejercicioshtml5/curriculum.html

     

    Curriculum Acordeón ( un poquito de JavaScrpipt)

    http://paucompany.es/ejercicioshtml5/curriculumacordeon.html

  • Vita   Dec. 15, 2011, 5:06 a.m.

    Ok... So after a bit of struggles muggles I have finished it, a resume for imaginary person - John Doe... Check it out and tell me what you think:

    http://dl.dropbox.com/u/18761433/HTML5Course/resume.html

    P.S.  I have checked it also through W3C Markup Validator and it seems it validates as HTML5... Nice!

  • alcinoe   Dec. 16, 2011, 1:55 a.m.
    In Reply To:   Vita   Dec. 15, 2011, 5:06 a.m.

    It looks great, Vita. The code looks very clean and you managed to use so many different elements!

  • Vita   Dec. 16, 2011, 4:51 a.m.
    In Reply To:   alcinoe   Dec. 16, 2011, 1:55 a.m.

    Thank you Elizabeth! wink

  • Anonym   Dec. 16, 2011, 4:13 p.m.
    In Reply To:   Vita   Dec. 15, 2011, 5:06 a.m.

    Good job.

    I want to add just a small comment though.  The small box on the left hand side is chopped off a bit on the right.  I attached a screenshot of your page:

    http://dl.dropbox.com/u/49688808/vita.png

    (I use Firefox 8.0.)

    Best,

    Demian

  • Vita   Dec. 19, 2011, 5:45 a.m.
    In Reply To:   Anonym   Dec. 16, 2011, 4:13 p.m.

    Thanks Demian.

    For some reason I am not able to access your screenshot http://dl.dropbox.com/u/49688808/vita.png, however I checked the page on FF8 but didn't find any error, can you please check the Dropbox and post the screenshot again?

    Thank you,

    Vita

  • Anonym   Dec. 19, 2011, 10:25 a.m.
    In Reply To:   Vita   Dec. 19, 2011, 5:45 a.m.

    I deleted it from my dropbox, because I'm running very low on memory space on my pc.  I have to re-partition my laptop to make more room.  The other day I was cleaning up my system in an attempt to create more memory space and deleted many files (a couple of thousands) accidentaly.  My system is running without any trouble so far, but I lost most of my html files.  crying   I should have made a backup copy...

    Anyway, here's the screenshot:

    http://dl.dropbox.com/u/49688808/vita.png

    demian

  • Vita   Dec. 20, 2011, 10:29 a.m.
    In Reply To:   Anonym   Dec. 19, 2011, 10:25 a.m.

    I am really sorry to hear about your lost files, I can imagine how frustraiting it can be at times and good luck with making the backup in the future...

    Anyway, thank you for your feedback and screenshot, it was really helpful coz I don't have none of the Linux OS to check my work on. At the beginning I was quite confused not being able to understand what was the error until I realized a simple thing - the box on the top left corner is actualy a simple table, and simple table is as wide as is the text inside it. The font on your screenshot looks bolder and that means it takes more space, and that means that the table is streched a bit wider. So, what I did... I just made the whole page a bit wider to leave more space for the table, so sily. Maybe I could find another solution without changing the whole page, but I am not a very big fan of tables and not using them so often, in this case wanted to play a bit and look where it got me...

    Thanks Demian, I hope you'll check my page again and give me your feedback one more time, I will appreciate it..!!! 

    Vita.

  • Anonym   Dec. 20, 2011, 6:50 p.m.
    In Reply To:   Vita   Dec. 20, 2011, 10:29 a.m.

    Hey Vita,

    Your new page looks good; no overwrapping.  I'm not an experienced web developer, so my knowledge is very limited, but the easiest way to ensure that a web page works for all browsers, I think, is to use the flexible box model (setting width 100%).  For example, in your case, you can put the education, additional knowledge, and languages in a flexible box floating on the right side, and all stuff on the left you can put it in another box (fixed).  I think that the fixed box model is going to be outdated, and that flexible box model will become mainstream eventually.

    You are taking CSS Bliss & Beyond, aren't you?  They have a list of really good sites for CSS3 and updates.  If you haven't checked them out, I want to encourage you to do so.  The flexible box model is one of the newest stuff that was introduced this year.

    In any case, I hope seasoned web coders in this course would give you better advise.

    Demian

  • Pau Company   April 20, 2012, 6:55 p.m.
    In Reply To:   Vita   Dec. 15, 2011, 5:06 a.m.

     

    Estupendo trabajo, te felicito, los colores, el maquetado, todo en general esta muy bien. Te doy utra medalla

     

    Great work, congratulations, colors, layout, everything in general is very good. I give youanother medal

  • Vita   April 21, 2012, 8:21 a.m.
    In Reply To:   Pau Company   April 20, 2012, 6:55 p.m.

    Thank you, very nice to read your positive feedback! smiley

  • jenEliz   Oct. 21, 2011, 1:07 a.m.

    David Ader's Resume

    Here you will find a resume I made for my friend using much of what we learned and a bit of CSS thrown in. Suggestions?

  • Brylie Oxley   Oct. 28, 2011, 1:50 p.m.
    In Reply To:   jenEliz   Oct. 21, 2011, 1:07 a.m.

    Good work smiley

    Make sure to run your page through the W3C Markup Validator.

    http://validator.w3.org/

  • jenEliz   Oct. 28, 2011, 11:20 p.m.
    In Reply To:   Brylie Oxley   Oct. 28, 2011, 1:50 p.m.

    Ooh, what a nifty tool :)

     

    Thanks!

  • altivium   Nov. 7, 2011, 5:19 a.m.
    In Reply To:   jenEliz   Oct. 21, 2011, 1:07 a.m.

    Background red is so bad

  • jenEliz   Dec. 29, 2011, 5:15 a.m.
    In Reply To:   jenEliz   Oct. 21, 2011, 1:07 a.m.

    Appologies, I'm making constant updates to the site (which, as of this posting, is in complete dissaray)!  Will update with a stable product!