CASE STUDY / WEB CODING
OVERVIEW | About the Project
Design a mobile-first, responsive portfolio website showcasing 1-2 key projects.
Use Visual Studio Code to write page coding.
Create CSS animation to demonstrate ability.
Utilize GitHub for version control and to track coding changes efficiently.
CHALLENGE | Purpose of Project
While it may not seem like a significant issue, I had already invested a substantial amount of time in the development and redesign of a website that had served me well over the years. Now, I was confronted with the daunting task of creating a new, hand-coded version. I didn't know where to start! However, I soon realized that this project provided an opportunity to deconstruct and gain a deeper understanding of the structure of my current website.
Visual Studio Code
Phase One: Rapid Prototyping
To streamline this project, I needed to condense my existing design. Leveraging my well-established branding, I aimed to replicate the visual identity of my previous site. This provided insights into column layouts, header layering, and section structuring. I initiated my project by organizing files and including high and low-resolution assets required for the site.
Phase Two: Building the Foundation
With HTML, I constructed the main pages—
WHAT I LEARNED
This phase emphasized the importance of solid section structuring, organization, comprehensive note-taking, and adherence to proper syntax.
Phase Three: Creating
Following the skeletal structure, I applied external stylesheets to craft the site's visual aesthetics.
WHAT I LEARNED
This lesson underscored the significance of clear note-taking, logical class and ID naming conventions, media queries, and the fundamentals of mobile-first design. Chrome's developer tools proved invaluable for real-time debugging.
REVIEW | Completing the Project
I conducted usability testing with five participants, who navigated through four scenarios: evaluating the homepage, exploring a project, downloading the resume, and contacting the designer. I rated feedback based on Jakob Nielsen's Severity Rating Scale, addressing critical issues immediately and devising a plan for less severe ones.
Accessibility and Browser Compatibility Testing
Prior to testing browser compatibility, all code was validated using:
HTML Hint (extension)
Standard JS (extension
After cleaning up minor coding errors, the site underwent accessibility and cross-browser compatibility testing in popular browsers (Safari, Chrome, Firefox, IE Edge) across mobile, tablet, and desktop viewports. Given the simplicity of the site, it's no surprise that all tests yielded successful results.