Our Classroom Journey

After eight incredible weeks of our 2024 Mobile Web Frameworks class, I’m still amazed by what my students accomplished in our “Responsive Portfolio Website Project.” As I scroll through their final submissions, each unique portfolio tells a story not just of technical growth, but of students discovering their creative voices in the digital space.

The Project Vision

The essential question for this project was “How can we create a professional digital presence that effectively showcases our skills and unique identity to the world?” When I first introduced the project, some students were intimidated by the prospect of building a fully responsive website from scratch. Even though, they still remembered some information about HTML and CSS from a previous class. That’s exactly why I structured this project in digestible weekly sprints, each building upon the last.

Weekly Breakdown and Student Progress

Weeks 1-2: Foundation and Design
Students started with wireframes and site maps, learning the importance of planning before coding. It was wonderful watching them sketch layouts on paper, debate color schemes, and think critically about user experience. Many continued to discover their inner designers during this phase!

Weeks 3-4: HTML Structure
As we moved into coding, students learned to translate their designs into HTML. The classroom buzzed with “aha!” moments as they mastered semantic elements and proper document structure. One particularly memorable moment was when Joseph figured out how to create a navigation menu.

Weeks 5-6: CSS Styling
This is where their websites truly came alive. Students learned about Flexbox, Grid, and media queries. The most challenging part? Getting their sites to look good on both desktop and mobile with responsive web design. But watching them problem-solve and help each other was incredible.

Weeks 7-8: Refinement and Launch
The final two weeks were focused on responsive web design, testing, debugging, and adding those special touches that make a website memorable. Students incorporated smooth scrolling, hover effects, and even simple animations. The pride on their faces when showing their work to classmates was priceless.

Learning Beyond Code

What stands out most isn’t just the technical skills they gained, but the soft skills they developed:

• Problem-solving: Students learned to debug systematically and think logically
• Collaboration: Peer review sessions fostered constructive feedback and teamwork
• Time management: Weekly milestones helped them learn to pace larger projects
• Creative confidence: Each student developed their unique design aesthetic

Student Showcase

I have to highlight Samuel’s portfolio website. He has purchased a domain name and hosting service to make his portfolio website available to all.

Challenges and Growth

Of course, we faced our share of challenges. CSS positioning was a particular pain point, and more than a few students struggled with responsive breakpoints. But these struggles led to our best learning moments.

Moving Forward

This project has convinced me more than ever that hands-on, project-based learning is invaluable in Career and Technical education. Students didn’t just learn to code – they learned to create, to problem-solve, and to persist through challenges.

Next year, I plan to expand the project to include basic JavaScript functionality. Seeing how far this group came in eight weeks, I’m excited to push the boundaries even further.

Final Thoughts

To my students: I’m incredibly proud of what you’ve accomplished. You came into this project as novices and emerged as web developers. Your websites aren’t just portfolios – they’re testimonies to your growth, creativity, and determination.

Remember: every professional web developer started exactly where you did – with their first line of HTML. Keep building, keep creating, and keep pushing your boundaries.