The platform for creative works by Ruitong Yuan. .
This assignment site displays my design work and gathers feedback.
My Works
I became proficient in efficiently writing, debugging, and managing HTML, CSS, and JavaScript code in VSCode.
I mastered the process of gathering user feedback through testing and iterating designs based on data.
I learned to rapidly build and customize responsive web layouts using Tailwind utility classes.
Questions and answers
What did I learn in this assignment?
I mastered an efficient workflow in VSCode for HTML, CSS, and JavaScript development, experienced how Photoshop and Adobe Firefly collaborate to create and optimize web visuals, and learned to apply the WCAG 2.1 guidelines alongside Krug’s (2014) usability principles from Don’t Make Me Think, Revisited to evaluate and improve site design.
What difficulties did I face debugging interactive components?
When implementing JavaScript modals and responsive navigation, I faced broken event bindings and CSS conflicts, forcing me to use Chrome DevTools to step-through callback functions and CSS selector specificity until I located and fixed the “no-response click” and “layout shift” bugs.
How did I support my analysis with literature research?
I reviewed the HTML semantics and CSS layout chapters in Robbins’ (2012) Learning Web Design, combined them with the information-architecture principles from Nielsen’s (2000) Designing Web Usability, and consulted the W3C’s official accessibility testing resources to ensure my evaluation methods rested on a solid theoretical foundation.
How did I iterate the design based on user testing and feedback?
Across three rounds of usability testing, I logged users’ click-paths and frustration points during key tasks (e.g., making a donation), adjusted button placement and copy based on heatmaps and qualitative interview feedback, and then re-validated to ensure each iteration improved task completion rates and user satisfaction.
What did I learn by self-learning Tailwind utility classes?
I gained a deep understanding of the “atomic” design approach, learned to rapidly build responsive layouts by composing simple utility classes (e.g., p-4, flex, text-center), and mastered how to customize theme colors, spacing, and breakpoints via the tailwind.config.js file to achieve a highly reusable and consistent styling system.
What challenges did I face when learning Tailwind utility classes?
At first, I struggled with memorizing the vast number of class names—especially when adjusting typography, layout, and interaction styles simultaneously, leading to “class-name chaos.” To address this, I used the documentation’s search feature and community-recommended cheat sheets to categorize and note frequently used layout, typography, and color utilities, and leveraged VSCode’s Tailwind IntelliSense plugin for autocomplete, which greatly improved my development efficiency.
Which resources and practices did I use to reinforce my Tailwind knowledge?
I studied the official Tailwind documentation (Tailwind Labs, 2021) and followed its example projects for hands-on practice, referred to practical cases in Wathan & Schoger’s (2020) Refactoring UI, and tested my skills through online challenges (e.g., Frontend Mentor’s Tailwind exercises), deepening my understanding of utility-first design.
How did I consolidate my Tailwind utility classes knowledge by analyzing Cruip templates?
By reviewing Cruip’s official documentation and sample templates, I observed real-world uses of utility classes (such as grid layouts and custom color classes) and recreated these components in VSCode. This process deepened my understanding of configuring tailwind.config.js, and taught me how to apply Tailwind’s JIT mode for on-demand compilation and PurgeCSS for optimization, thereby systematically integrating this knowledge into my own designs.