MIS 2201 - Semester Project
Personal Website & Online Resume
Build Your Professional Digital Presence
Project Overview
The semester project is a comprehensive website development experience that spans the entire course. You'll design and build your personal website that serves as your online resume and professional portfolio, using HTML, CSS, and JavaScript to create an engaging digital presence that showcases who you are and your career aspirations.
Technical Skills
Learn HTML, CSS, JavaScript, and modern web development practices
Personal Branding
Create your professional online presence and digital portfolio
Creative Design
Develop design thinking and user experience principles
Project Phases
Phase 1: Personal Website & Online Resume
Project Overview
Build your personal website that serves as your online resume and professional portfolio. This website will tell visitors who you are, showcase your interests, and demonstrate your qualifications for future opportunities.
Timeline & Milestones
- Start: Week 7 (Oct 7)
- Due: Oct 28, 11:59 PM
- Progress Quizzes: Sep 23, Oct 7, Oct 14, Oct 21
Team Collaboration
- UMD Marketing Video (Group Work)
- Interactive Game (Team Project)
- Shared Resources Allowed
Required Pages & Content:
1. Home Page
- • Professional headshot/picture of yourself
- • Two hobby summaries with accompanying pictures
- • Short welcome video for visitors (introduce yourself)
- • Professional introduction and overview
2. Hobbies Page
- • Detailed descriptions of your hobbies and favorite activities
- • Minimum of three pictures showcasing your interests
- • Personal stories and experiences related to your hobbies
- • Why these activities are important to you
3. Discover Page (UMD & Duluth)
- • Why you chose University of Minnesota Duluth
- • What you like about Duluth and the surrounding area
- • 30-second UMD marketing video (Group work - entire team can use same video)
- • Personal experiences and campus highlights
4. Resume Page
- • Web-formatted version of your professional resume
- • Download button for PDF version of resume
- • Education, experience, skills, and achievements
- • Professional formatting and presentation
5. Career Interests Section
- • Two companies you're interested in working for
- • Complete contact information for each company
- • Detailed explanation of why you like that job/internship opportunity
- • What makes you qualified for these positions
- • How your skills and interests align with their needs
6. Interactive Game Page
- • Interactive page featuring a web-based game
- • Team project - entire team creates one game together
- • All team members can use the same game on their websites
- • Game should be engaging and demonstrate JavaScript skills
Technical Requirements
- • HTML5 semantic structure for all pages
- • CSS styling with consistent design theme
- • Responsive design for mobile and desktop
- • Navigation menu linking all pages
- • Professional color scheme and typography
- • Optimized images and media files
- • Clean, organized code structure
- • Cross-browser compatibility
Phase 2: Team Business Website Project
Project Overview
Team Collaboration: The entire team works together to build or refresh a real business website. This shifts from individual personal websites to collaborative professional web development for an actual business.
Timeline & Focus
- Start: After Phase 1 completion
- Due: Nov 11, 11:59 PM
- Team collaboration required
Key Question
"Will I be able to present the website I build to a decision maker in that company?"
If yes → Green light!
Business Selection Criteria:
Preferred: Connected Businesses
- Current/Former Workplace: Company you work for or have worked for previously
- Family/Relative Business: Business owned or operated by family members or relatives
- Your Startup: New business you are starting or planning to start
- Network Connections: Business through personal or professional connections
Business Requirements
- Genuine Business: Must be a real, currently operating business or legitimate startup
- Website Status: Business doesn't need to currently have a website (you can create their first one!)
- Presentation Opportunity: You must be able to present your work to a decision maker
- Business Permission: Have approval from the business to work on their website
Backup Option: Instructor-Provided List
If you don't have a business connection or aren't interested in a particular business, the instructor will provide a list of local companies whose websites you can work on.
Phase 2 Project Goals:
Primary Objectives
- Improve/create the online experience
- Functionality is a must
- Great design is a plus
- Team collaboration and coordination
Technical Focus Areas
- Responsive design for all devices
- Performance optimization
- SEO best practices
- Accessibility improvements
Deliverables & Expectations
- • Fully functional business website
- • Professional design and user experience
- • Contact forms and business information
- • Mobile-responsive design
- • Team collaboration documentation
- • Business presentation preparation
- • Performance and accessibility testing
- • Final project presentation to business
Real-World Impact
This phase provides authentic professional experience by working with real businesses. You'll gain experience in client communication, business requirements gathering, and delivering professional web solutions that can make a genuine impact on a business's online presence.
Progress Tracking & Quizzes
Progress quizzes focus on demonstrating your actual development work through screenshots, code samples, and personal reflections. These assessments prove you're making real progress and help you reflect on your professional online presence.
Progress Quiz Schedule
Online presence comfort • VS Code structure • Resume research
Homepage screenshots • CSS code • Design reflection
JavaScript demo • Content pages • Company research
Full website tour • Team collaboration • Professional reflection
Progress Documentation Requirements
- Code Evidence: VS Code screenshots showing project structure and implementation
- Website Screenshots: Desktop and mobile views of your pages as they develop
- Functionality Demos: Screenshots or recordings of interactive features working
- Personal Reflections: Written responses about your comfort with online presence and professional goals
- Team Collaboration: Evidence of shared UMD video and interactive game integration
Technical Requirements
HTML Requirements
- • Semantic HTML5 elements
- • Proper document structure
- • Valid and accessible markup
- • Multiple interconnected pages
- • Forms with appropriate input types
- • Meta tags for SEO
CSS Requirements
- • External stylesheet organization
- • Responsive design with media queries
- • Flexbox and/or Grid layouts
- • Custom color schemes and typography
- • Hover effects and transitions
- • Cross-browser compatibility
JavaScript Requirements
- • Interactive elements and events
- • Form validation and feedback
- • Dynamic content manipulation
- • Basic animations or effects
- • User experience enhancements
- • Clean, commented code
Personal Branding & Career Development
Your personal website serves as your digital business card and professional portfolio. Focus on presenting yourself authentically while demonstrating your technical skills and career aspirations.
Career Interest Research
Research and identify two companies where you'd like to work. This demonstrates career planning and professional awareness.
- Company Research: Include complete contact information, company mission, and recent news
- Personal Interest: Explain why you're drawn to each company and specific roles
- Qualifications Match: Detail how your skills, education, and experience align with their needs
- Future Goals: Describe how working there fits into your career trajectory
Personal Branding Tips
- Professional Photos: Use high-quality, professional-looking images throughout your site
- Consistent Design: Maintain a cohesive color scheme and style across all pages
- Authentic Voice: Write in your own voice while maintaining professionalism
- Mobile-Friendly: Ensure your site looks great on all devices
- SEO Basics: Use appropriate page titles and meta descriptions
Team Collaboration Elements
UMD Marketing Video (Group Project)
- • Create a 30-second promotional video about UMD
- • Highlight campus life, academics, and opportunities
- • All team members can use the same video
- • Consider interviewing students, showing campus scenes
Interactive Game (Team Project)
- • Develop one game that all team members can use
- • Should demonstrate JavaScript programming skills
- • Consider trivia, puzzles, or simple arcade-style games
- • Make it engaging and relevant to your audience
Support & Resources
Video Tutorials & Guides
- Comprehensive video tutorials for each project phase
- Step-by-step HTML, CSS, and JavaScript demonstrations
- Troubleshooting common issues and debugging techniques
- Best practices for web development and design
Getting Help
- Office hours for one-on-one project assistance
- Canvas discussion forums for peer collaboration
- Email support for technical questions
- Alternative project options for different skill levels
Success Tips
- • Start early and work consistently
- • Plan your website structure before coding
- • Test your website on different devices and browsers
- • Keep your code organized and well-commented
- • Use version control to track your progress
- • Seek feedback early and often
- • Focus on user experience and accessibility
- • Document your design decisions and learning
Grading Criteria
Phase 1: Personal Website & Online Resume (100 points - 10%)
| Criteria | Weight | Description |
|---|---|---|
| Technical Implementation | 40% | HTML5 semantic structure, CSS styling, JavaScript interactivity, responsive design |
| Personal Content & Branding | 30% | Professional presentation, resume content, hobby descriptions, career interests research |
| Design & User Experience | 20% | Visual appeal, navigation, color scheme, typography, mobile responsiveness |
Phase 2: Team Business Website Project (50 points - 5%)
| Criteria | Weight | Description |
|---|---|---|
| Technical Implementation | 40% | Professional website functionality, performance optimization, cross-browser compatibility |
| Business Focus & Content | 30% | Relevant business content, professional presentation, client requirements fulfillment |
| Team Collaboration | 30% | Effective teamwork, communication, project coordination, shared responsibility |