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.
- 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.
- Design a table that outlines Alex's skills and competencies.
- Create a nested table within the skills table to show proficiency levels.
- 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.