Product page semantics

A summer review project to practice HTML semantics & indentation.

⬇ Download the content

---

Details

• Approx. completion time: 2 hours
• Deliverables: 1 HTML file, images

Using the content and sketched wireframes provided, create a single HTML file that uses proper semantics to mark up the content.

The look is not important. And no CSS is needed.

Really consider the appropriate tags independent of how they look in the browser. Refer to the resources below to see if there are tags you have forgotten or didn’t realize exist to push the semantics further.

---

Checklist

• ❏ Every piece of text is wrapped in an appropriate HTML element.
• ❏ HTML semantics are carefully considered to match the purpose of the content, not the look.
• ❏ Images use appropriate code for insertion.
• ❏ HTML & CSS properly validated.
• ❏ Has lots of detailed commits.
• ❏ No empty or “Untitled” <title> tags.
• ❏ No extra, unused files in the repository.
• ❏ Folders organized properly.
• ❏ Files & folders follow naming conventions.
• ❏ Code files properly indented.
• ❏ Set up as a hosted GitHub repository with gh-pages.

---

Relevant tutorials & tools

• Hosting with GitHub Pages
• HTML semantics
• HTML indentation
• HTML semantics cheat sheet
• HTML semantics checklist
• Validators

---

Asking for help

1. Ask someone else from class if they’re available.
2. Create an issue on GitHub Issues inside your repository; tag me, @thomasjbradley, in the issue and I’ll respond there. I may not be as fast, because it’s the summer, but I’ll definitely respond.

---

Licenses & copyrights

☛ Refer the the license & copyright statement

Assets used:

• Compact Fluorescent Lightbulb by Micheal J, used under CC-BY-NC.
  Modifications: cropped, colour adjustments.
• Light The Path by IvanClow, used under CC-BY-NC.
  Modifications: cropped, background erased.
• Vintage lightbulb by ed ouimette, used under CC-BY-NC-SA.
  Modifications: cropped, rotated, reflection erased.