Case Study Question: Personal Portfolio Website

Case Study Question: Personal Portfolio Website

This is for our students taking our fullstack web development course

REQUIREMENT: You have to complete the HTML Section of the course



You are a freelance web developer tasked with creating a personal portfolio website for a graphic designer named Alex. Alex wants a simple yet elegant website that showcases their work, provides information about their skills, and allows potential clients to contact them.


Website Structure and Skeleton:

  • Create the basic structure of the HTML document, ensuring all necessary tags are included.
  • Use comments to label each section of the website.

Text Content and Formatting:

  • Add a header with Alex's name and a tagline.
  • Include a biography section that uses various text formatting tags to highlight important information.

Navigation and Links:

  • Implement an internal navigation system that allows users to jump to different sections of the website (e.g., Work, About, Contact).
  • Use hyperlinking to link to Alex’s social media profiles.

Visual Elements:

  • Insert images of Alex's graphic design work within a gallery section.
  • Utilize emojis to add a friendly touch to the 'About' section.
  • Employ font-based icons (FontAwesome) to enhance the visual appeal of the contact information.

Professionalism and Branding:

  • Use SVG to create a unique logo for Alex’s branding on the header.
  • Incorporate a favicon that represents Alex's brand.

Content Organization:

  • Design a table that outlines Alex's skills and competencies.
  • Create a nested table within the skills table to show proficiency levels.

Client Engagement:

  • Construct an HTML form that allows visitors to send messages to Alex. This form should collect the visitor's name, email, and message.
  • Make sure the form includes all relevant form structures such as labels, input fields, and a submit button.

Advanced HTML 5 Usage:

  • Implement any HTML 5 common elements you see fit to enhance the user experience.
  • Ensure the website is ready to be deployed and viewed across different browsers.


Follow us on youtube

Masynctech Coding School

Article by Masynctech Coding School

Published 10 Nov 2023