Use Semantic markup to create a portfolio for yourself. Eventually you will style and publish your portfolio. In this assignment you will create the general content of the portfolio and mark it up semantically.
Remember: Semantic HTML isn't about making a web page look good. That's what CSS is for (and we'll get to that later). Aim to design a page that is perfectly understandable to a visually impaired person, or a robot (such as a Google web crawler).
The deliverable is a web page. If you don't want to create a portfolio you can create a web page for something else.
Important! To complete this assignment you need to have something to markup. You should write the content first before adding the markup!. Think about what each element is and how the markup will add semantic meaning to that element.
Markup is the foundation of all web projects. To be an expert web developer you should have strong understanding of HTML.
Semantic markup is a deeper and more careful look at how you choose the tags you use and what those tags say about the content they are applied to. Good sementics creates better SEO and stronger base foundation for your web applications.
This assignment must be submitted through Gradescope.
- Create an
index.htmlfile - Write the content of your portfolio include the following:
- Name and Tag Line
- List of your skills
- About you section
- Short but not too short. Tells us what you want us to know about you.
- Can include your education and other experience
- Include a picture (mark this up with the figure tag)
- Online presence, include links to:
- GitHub
- Other social media Instagram, FB, etc.
Mark up your content. Use the following tags. Besides writing the tags into your page, use them correctly! Read about the purpose of each tag. Ask yourself about what this tag says about the content it displays. Your most important goal for this assignment is to use the tags correctly.
Stretch goals! If you want to do more or the items listed above are too easy or familiar include these tags:
If you have experience making web pages or find this assignment too easy try these.
- Pay really close attention to the tags used. If you used a lot of div tags you should look at the tag list above and use those instead.
- Try marking up these pages for practice. Pay close attention to semantics and syntax.
- Markup a second or third page for practice.
To help you complete this assignment, the following videos will walk you through creating a basic portfolio and adding semantic HTML tags:
https://www.youtube.com/embed/wTxHYtNVrEw
https://www.youtube.com/embed/BoSkgteRoKg
This project is about markup. It's not about what it looks like its about the markup and structure!
Why not style it? The web is built on the concept of separation of concerns. This divides the coding process into three areas with a language for each.
- Markup and structure: HTML
- Style and presentation: CSS
- Logic interaction: JavaScript
In this assignment I want you to focus on the markup and structure of your documents. Do this to develop a deep understanding of the purpose and usage of the HTML language.
You must submit your index.html to Gradescope. Find the assignment in your list of assignments for the class. When submitting your assignment, select the Upload option, and add the index.html file for submitting.
Check GradScope for dates
Your assignment will be graded according to the following rubric:
| Score | Rating | Program Correctness | Code Quality |
|---|---|---|---|
| 1 | Needs Improvement | Required sections of submission are largely missing or not functional. | Code is messy and hard to follow. Indentation is not properly used. |
| 2 | Basic | Most of the content is present, but some may be missing or use tags incorrectly. | Some of the code is messy and hard to follow. Code includes TODOs. |
| 3 | Proficient | All of the page content is present and demonstrates clear mastery of the concepts presented. | Code is clear and easy to follow. Submitted code does not include TODOs. |
| 4 | Advanced | Stretch challenges are complete and demonstrate an advanced understanding of the concepts presented. | N/A |