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

Background:

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.

Tasks:

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.

SOLUTION : COMING SOON

Follow us on youtube