Apply your knowledge to build something amazing!
:information_source: Project Overview Difficulty Level: Intermediate
Estimated Time: 8-10 hours (including design and development)
Skills Practiced:
- Wireframing and Design Planning
- Advanced HTML Structure
- Complex CSS Styling and Layouts
- Responsive Web Design
- Professional Presentation Skills
This project represents the culmination of the Web-1 Front-end Design & User Experience course, combining all previously learned concepts into a comprehensive personal profile website.
flowchart LR
A[Phase 1: Design] --> B[Phase 2: Foundation]
B --> C[Phase 3: Content]
C --> D[Phase 4: Polish]
D --> E[Phase 5: Present]
A --> A1[Create Wireframes]
A --> A2[Plan User Flow]
A --> A3[Define Visual Style]
B --> B1[HTML Structure]
B --> B2[Basic CSS Setup]
B --> B3[Navigation Framework]
C --> C1[Add Content Sections]
C --> C2[Style Components]
C --> C3[Add Media Elements]
D --> D1[Responsive Design]
D --> D2[Test & Debug]
D --> D3[Performance Check]
E --> E1[Record Video]
E --> E2[Submit Project]
Design Process:
Technical Implementation:
Project Management:
Communication Skills:
:bulb: Tip [Getting Started] This project template provides you with a clean starting point. You'll build upon this foundation to create your unique profile website. Take a moment to familiarize yourself with the template structure before diving in!
Open the StackBlitz template: My Profile Template
Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.
The template provides a starting structure for your character webpage
Follow the step-by-step instructions to build your complete project
:warning: Common Setup Mistakes
- Don't skip the wireframing phase - It's tempting to jump straight into coding, but planning saves time!
- Keep your original template files - You'll need them as reference
- Test your project link - Make sure your StackBlitz project is accessible before submission
:bulb: Tip[Asset Management Best Practice] Create an organized folder structure from the start:
assets/images/ for photos and graphicsassets/icons/ for icon filesassets/documents/ for PDFs or other documents
This organization will make your project easier to maintain!To add images or other files to your project in StackBlitz:
Locate the File Explorer:
On the left side of the StackBlitz interface, you'll see the file tree (project explorer).
Add a New Folder (Optional):
assets or images folder for your files.Upload Files:
Use Your Assets:
{/* Always include descriptive alt text for accessibility */}
<img src="./assets/myphoto.jpg" alt="My Photo" />
Tip:
If you don't see the "Upload" option, you can also drag and drop files directly from your computer into the desired folder in the StackBlitz file explorer.
DO NOT DELETE the existing files in the template:
ONLY EDIT the necessary files.
Requirement for Wireframing My Profile
Expected Output for My Profile
Activity - Wireframing for My Profile Project Instructions
Before moving to code, ensure you have:
Wireframing Process:
:bulb: Tip [Wireframing Success Tips]
- Start with mobile wireframes first (mobile-first approach)
- Use simple shapes - don't worry about perfect design yet
- Label each section clearly
- Show how users navigate between sections
Foundation Setup:
{/* Example semantic HTML structure for your profile */}
<body>
<header>
<nav>
{/* Navigation menu */}
</nav>
</header>
<main>
<section id="hero">
{/* Introduction section */}
</section>
<section id="about">
{/* About me content */}
</section>
<section id="skills">
{/* Skills showcase */}
</section>
<section id="portfolio">
{/* Project highlights */}
</section>
<section id="contact">
{/* Contact information */}
</section>
</main>
<footer>
{/* Footer content */}
</footer>
</body>
Before proceeding to Part 3:
All HTML sections implemented
Basic CSS styling applied
Navigation functioning properly
Content added to all sections
Images optimized and included
Apply CSS styling for visual design
Implement content sections and layout
Add multimedia elements and interactivity
:warning: Common CSS Pitfalls
- Forgetting to link your CSS file - Double-check your
<link>tag in the HTML head- Using absolute units everywhere - Use relative units (rem, %, vw/vh) for responsive design
- Not testing on mobile - Use browser dev tools to check mobile view frequently
- Overcomplicating selectors - Keep CSS selectors simple and maintainable
/* Example responsive CSS structure */
/* Mobile-first approach */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
/* Navigation styles */
nav {
background-color: #333;
padding: 1rem;
}
/* Section spacing */
section {
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* Tablet styles */
@media (min-width: 768px) {
section {
padding: 3rem 2rem;
}
}
/* Desktop styles */
@media (min-width: 1024px) {
section {
padding: 4rem 2rem;
}
}
My Profile Project Part 2 - Code Review
Final quality checks:
Website works on mobile, tablet, and desktop
All links and navigation work correctly
Images load properly with alt text
Contact form/links are functional
No broken layouts at any screen size
Performance is optimized (images compressed)
Ensure responsive behavior across devices
Implement feedback and improvements
Finalize styling and user experience
:bulb: Tip[Polish and Refinement] This is where your project really shines! Focus on:
My Profile Project Part 3 - Code Review
Presentation readiness:
Presentation Requirements:
Recording Guidelines:
:bulb: Tip[Presentation Structure] Organize your presentation for maximum impact:
:warning: Recording Best Practices
- Test your microphone first - Do a quick test recording
- Close unnecessary applications - Prevent notifications during recording
- Use a quiet environment - Background noise is distracting
- Speak clearly and at moderate pace - Remember your audience needs to follow along
- Show, don't just tell - Navigate your website as you explain features
This project builds upon concepts from:
Having trouble? Here are common issues and solutions:
max-width instead/* Common fixes */
/* 1. Check specificity - more specific selectors win */
.nav-menu li a { /* More specific */ }
a { /* Less specific */ }
/* 2. Check for typos in class names */
/* HTML: class="nav-link" */
/* CSS: .nav-link (not .navlink or .nav_link) */
/* 3. Clear browser cache or use incognito mode */
object-fit propertyhref values with # for sectionsscroll-behavior: smooth to html elementReady to go beyond the requirements? Try these advanced features:
/* Example: Smooth hover effect for skill cards */
.skill-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
Remember: These are optional challenges to push your skills further. Focus on meeting the core requirements first!
Design Quality:
Technical Implementation:
Content Quality:
Process Documentation:
Presentation Quality:
Congratulations on reaching the final stage of your Web-1 journey! This project showcases everything you've learned about front-end development and design. Take a moment to appreciate how far you've come from your first HTML tags to building a complete, responsive website.
:bulb: Tip [Final Checklist Before Submission]
- Test your website on different devices (phone, tablet, desktop)
- Verify all links and images work correctly
- Watch your presentation video to ensure good audio/video quality
- Double-check your StackBlitz project is saved and shareable
- Prepare your wireframing documentation
Submit your completed project and presentation:
Submission Requirements:
This project is more than just an assignment - it's the beginning of your web development portfolio. Many students continue to improve and use their profile websites long after the course. You've built something meaningful that represents you in the digital world!
Good luck, and we can't wait to see your amazing work!