A portfolio that highlights core skills in HTML, CSS, and WordPress, demonstrated through a range of web development projects.
IT326 — Web Systems & Technologies · INF3F
Five Foundational Modules
Each activity explores a core concept of web development — from raw HTML structure to image embedding. Click any card to explore its exercises.
Introduction to HTML document structure, tags, elements, and the foundations of web markup language.
Working with headings, paragraphs, lists, and inline text elements to structure readable web content.
Applying bold, italic, underline, and semantic HTML5 tags to enhance document readability.
Creating internal and external hyperlinks, anchor tags, mailto links, and navigational structures.
Embedding images with alt text, sizing, floating, and integrating media elements into HTML pages.
Activity 01 / HTML Basics
HTML Foundations
Six exercises covering the essential building blocks of HTML — from printing text to creating input fields.
Printing my name to the screen using an <h1> tag inside the body.
Printing numbers 1 to 10 using individual <p> tags.
Creating a basic webpage with a title and an h1 heading.
Displaying when the webpage was created using an h2 heading.
Adding a text input field below a paragraph prompt.
Using the head element and a text input together on the page.
Activity 02 / Text Exercises
Text Exercises
Six exercises exploring text styling — from colors and fonts to heading sizes and rich text formatting.
Printing my name in green color using inline CSS style on a <p> tag.
Printing numbers 1 to 10 each in a different color using <span> with inline styles.
Applying the Tahoma font to a paragraph using an internal CSS class.
Displaying five sentences each in a different font family: Arial, Times New Roman, Verdana, Courier New, and Georgia.
Writing a book description using <strong>, <u>, <b>, and <i> tags to emphasize key words.
Printing each letter of my name using different heading tags (h1–h6) to show size variation.
Activity 03 / Text Formatting
Text Formatting
Eleven exercises covering superscripts, subscripts, lists, preformatted text, del/ins tags, definition lists, address tags, and abbreviations.
Using <sup> to display squared numbers (1² to 20²) with results.
Displaying unalphabetized and alphabetized names using <sub> for numbering.
Indenting paragraphs with and using <b><i> for emphasis on key words.
Creating a Top 5 Favorite Movies ordered list and a Shopping List unordered list.
Writing a paragraph about college life under an h1 heading with a full-width horizontal rule divider.
Using the <pre> tag to preserve whitespace and display preformatted text exactly as typed.
A second version of the College Life paragraph with different content under the same heading and HR layout.
Using <del> for strikethrough (deleted) text and <ins> for underlined (inserted) replacement text.
Creating a definition list with <dl>, <dt>, and <dd> for tech terms like Python, API, Database.
Displaying a sender’s address (left) and receiver’s address (centered) using the <address> tag.
Using <abbr> with title attributes to define tech acronyms like HTML, CSS, JS, WWW, IP, URL, CPU, RAM, ROM, GIF.
Activity 04 / HTML Links
HTML Links
Five exercises covering external links, target attributes, in-page anchor navigation, and jump-to-top/bottom techniques.
Creating a linked list of popular search engines using <ul> and <a href> tags with target=’_blank’ to open in a new tab.
Building a list of external website links (Apple, Netflix, Amazon, NYT, Spotify) that open in a new browser tab.
Using an anchor link with href=’#bottom’ to jump the user to the bottom section of the same page.
Placing a ‘Back to the Top’ link at the bottom of the page that jumps back to the top using an id anchor.
Combining both jump-to-bottom and back-to-top anchor links on the same page for full in-page navigation.
Activity 05 / Image Exercises
Image Exercises
Four exercises exploring image embedding — from multiple images with alt text, to bordered images, clickable image links, and self-linking images.
Embedding five labeled images (Dream Job, Praying, Savings, Netflix, Victory Achieved) with width=’200′ and descriptive alt text.
Displaying an image with a fixed width and height of 200px and a 2px solid black CSS border applied via inline style.
Wrapping an <img> tag inside an <a href> tag so clicking the Google logo opens the Google search engine in a new tab.
Making an image act as its own link — clicking it opens the full-size version of the image in a new browser tab.
Built for Learning
This portfolio is a compiled midterm requirement for IT326 — Web Systems & Technologies. Each activity builds progressively toward a complete mastery of web fundamentals through hands-on exercises.
↑ Back to Top