// HTML & CSS Development Projects

Projects Goals

This project aimed to:
✅ Build a fully accessible registration form in HTML & CSS according to WCAG standards.
✅ Ensure semantic structure, proper labeling, and screen-reader compatibility.
✅ Improve my understanding of web accessibility and front-end development.
✅ Develop my VOCO Portfolio website, showcasing my UX/UI work and technical expertise.

Key Achievements and Milestones

watch closer
watch closer
watch closer

🔹1. Saluc Accessibility Project: HTML & CSS Registration Form (22.01.2024 – 26.01.2024)

  Created a fully accessible registration form from scratch.
Ensured all elements used semantic HTML (, , ).
Improved form usability by ensuring correct label associations and keyboard navigation.
Conducted browser testing with DevTools Lighthouse for WCAG compliance.
Fixed alt-text issues and improved contrast ratios for readability.

🛠 Technologies used:
HTML, CSS, JavaScript
VS Code (for development)
GitHub (repository & deployment)
Google Lighthouse & WAVE WebAIM (accessibility testing)

💡 Outcome: A clean, fully functional form that meets accessibility and usability standards.
Improved skills in writing semantic, accessible HTML & CSS.
Gained insights into real-world accessibility challenges.

2. VOCO Portfolio Website (2024)

Designed and built my personal portfolio website to showcase my UX/UI projects.
Used HTML, CSS, and JavaScript for a custom front-end design.
Ensured fully responsive layout for desktop & mobile users.
Added project pages for each major UX/UI case study.
Integrated a GitHub repository for version control.

🛠 Technologies used:
HTML, CSS, JavaScript GitHub Pages (for hosting)
Figma & Whimsical (for design and structure planning)
VS Code (for development)

💡 Outcome: A modern, structured portfolio that I can share with potential employers and clients.
Gained experience in personal branding, project presentation, and technical SEO.
Learned how to optimize CSS for better performance.

Activities and Technical Skills Gained

Through these projects, I strengthened my skills in:
💡 HTML & CSS Development – Writing clean, accessible code.
📊 Web Performance Optimization – Ensuring fast load times & proper semantic structure.
♿ Accessibility Compliance – Implementing ARIA attributes, form labels, and color contrast.
🔍 Technical Debugging – Using DevTools, Lighthouse, and WCAG guidelines.
📐 Responsive Web Design – Ensuring mobile-friendly layouts.

Challenges & Lessons Learned

🔸 Strict Accessibility Standards: Ensuring 100% compliance required multiple iterations and testing.
🔸 Learning GitHub for Portfolio Deployment: Setting up a personal site with GitHub Pages was a new experience.
🔸 Fine-Tuning Visual Design: Ensuring the right balance between aesthetics and usability in my portfolio.
🔸 CSS Performance Optimization: Making the site lightweight and fast-loading.

Outcomes and Professional Growth

✔ Successfully built a fully accessible registration form that meets WCAG 2.1 guidelines.
✔ Created a professional portfolio website to showcase my work in UX/UI and front-end development.
✔ Gained confidence in working with GitHub, semantic HTML, and accessibility standards.
✔ Developed a deeper understanding of responsive web design principles.

Future Learning Goals

🔹 Explore Advanced CSS Techniques – Using CSS Grid, Flexbox, and animations more efficiently.
🔹 Expand Portfolio Features – Adding a blog section and case studies with interactive elements.
🔹 Master SEO Optimization – Improving technical SEO and structured data implementation.

Final Thoughts

These projects were key milestones in my web development journey, allowing me to apply HTML, CSS, and accessibility knowledge in real-world scenarios. Building the registration form taught me the importance of accessibility, while creating my portfolio website helped me refine my front-end and design skills.

Ursula Muts (Visnapuu)

development portfolio for Voco