HTML 5 Introduction

View History

project image

Outlining the basic elements of HTML web pages.

This course offers foundational instruction in HTML. Topics include tag structure, file encoding, web browsers, DOCTYPEs, common HTML elements, hyperlinks, images, video, tables, forms, and sections. Additionally, we will touch base on CSS in order for students to transition to other Webcraft courses.

Start Challenge View Tasks

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

Task Discussion

Pau Company said:

Aqui mi trabajo:

Curriculum normal:

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

Curriculum Acordeón ( un poquito de JavaScrpipt)

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

on May 16, 2012, 7:39 p.m.
Vita said:

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!

on Dec. 15, 2011, 5:06 a.m.

alcinoe said:

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

on Dec. 16, 2011, 1:55 a.m. in reply to Vita

Vita said:

Thank you Elizabeth!

on Dec. 16, 2011, 4:51 a.m. in reply to alcinoe

demian said:

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

on Dec. 16, 2011, 4:13 p.m. in reply to Vita

Vita said:

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

on Dec. 19, 2011, 5:45 a.m. in reply to demian

demian said:

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. I should have made a backup copy...

Anyway, here's the screenshot:

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

demian

on Dec. 19, 2011, 10:25 a.m. in reply to Vita

Vita said:

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.

on Dec. 20, 2011, 10:29 a.m. in reply to demian

demian said:

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

on Dec. 20, 2011, 6:50 p.m. in reply to Vita

Pau Company said:

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

on April 20, 2012, 6:55 p.m. in reply to Vita

Vita said:

Thank you, very nice to read your positive feedback!

on April 21, 2012, 8:21 a.m. in reply to Pau Company
jenEliz said:

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?

on Oct. 21, 2011, 1:07 a.m.

Brylie Oxley said:

Good work

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

http://validator.w3.org/

on Oct. 28, 2011, 1:50 p.m. in reply to jenEliz

jenEliz said:

Ooh, what a nifty tool :)

Thanks!

on Oct. 28, 2011, 11:20 p.m. in reply to Brylie Oxley

altivium said:

Background red is so bad

on Nov. 7, 2011, 5:19 a.m. in reply to jenEliz

jenEliz said:

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

on Dec. 29, 2011, 5:15 a.m. in reply to jenEliz