NODE_101
Create a Semantic Portfolio Page Layout
Build a basic portfolio page using semantic tags like <header>, <main>, <section>, <article>, and <footer>.
A specialized engineering suite featuring full-stack coding challenges. Architecture, Logic, and Synthesis nodes active.
Matrix Nodes
280
Logic Level
Advanced
Status
NODE_101
Build a basic portfolio page using semantic tags like <header>, <main>, <section>, <article>, and <footer>.
NODE_102
Create a simple blog page with a main article and related posts using <article> and <section> tags.
NODE_103
Build a contact form with fields for name, email, subject, and message using proper <label> and input associations.
NODE_104
Create an FAQ section where each question can be expanded/collapsed using <details> and <summary>.
NODE_105
Build a hero section for a product with a headline, subheading, image placeholder, and call-to-action button.
NODE_106
Create a pricing section with at least three pricing plans displayed side-by-side using semantic HTML.
NODE_107
Build an image gallery with at least six images, each having a caption using <figure> and <figcaption>.
NODE_108
Build a top navigation bar that scrolls to different sections of the same page using anchor links.
NODE_109
Create a resume-style page that lists education, experience, skills, and projects using headings and lists.
NODE_110
Design the HTML structure for a multi-step form (personal info, address, review) without adding actual step logic.
NODE_111
Create a long text-based Terms & Conditions page with proper headings, paragraphs, and internal links.
NODE_112
Build a documentation-style page with a table of contents at the top linking to different sections below.
NODE_113
Create a simple 404 page with an error message, short explanation, and a link back to the homepage.
NODE_114
Build a form with labels, aria attributes where needed, and proper error message markup.
NODE_115
Create a small newsletter block with a title, short text, email input, and subscribe button.
NODE_116
Create a footer with 3–4 columns: links, social icons placeholder, and a small about text.
NODE_117
Use <dl>, <dt>, and <dd> to create a feature list that explains terms and their descriptions.
NODE_118
Create a layout where an image is on the left and text content is on the right, like a typical media object.
NODE_119
Build a table comparing at least three products with rows for features and columns for each product.
NODE_120
Create a simple page structure that shows content in two languages with proper lang attributes.