CASE STUDY / WEB CODING
OVERVIEW | About the Project
I'm #BeingMikistarr, an experienced graphic designer and digital marketer with over a decade of experience. In 2023, I embarked on a journey to expand my skill set by completing CareerFoundry's UX Design bootcamp, where I conceptualized two apps and documented my experience on this very portfolio site. As a benefit of my program I was able to enroll in a frontend web development specialization, challenging me to create a new responsive portfolio website to showcase my coding skills using HTML5, CSS3, and JavaScript.
Objectives
-
Design a mobile-first, responsive portfolio website showcasing 1-2 key projects.
-
Use Visual Studio Code to write page coding.
-
Implement a dynamic navigation system using JavaScript for mobile devices.
-
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.
TOOLS LEARNED
LANGUAGES LEARNED
Visual Studio Code
Github Desktop
Github Online
Javascript
HTML
CSS
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—
-
Index
-
About
-
Pre-Interview
WHAT I LEARNED
This phase emphasized the importance of solid section structuring, organization, comprehensive note-taking, and adherence to proper syntax.
Phase Three: Creating
the Look
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
With a functional foundation and branding elements in place, I delved into JavaScript to develop a mobile-friendly hamburger menu and implemented modals to enhance user interactivity.
Usability Testing
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:
-
WC3 Validator
-
Stylelint (extension)
-
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.
