Through this workshop, I will learn how to locate, organize, edit, share, and upload files both on local and cloud-based file systems, thereby mastering the fundamental processes of digital resource management.
Work
Through this workshop, I will learn how to structure content with HTML, style it with CSS, and validate my page against W3C standards to build a valid, standards-compliant web page.
Through this workshop, I will learn by completing “play” and “work” tasks to experiment with CSS properties like display, float, and positioning, and understand how to link HTML and CSS files to grasp the fundamental characteristics and behaviors of CSS.
Through this workshop, I will learn how to add simple navigation features to my existing HTML/CSS files and build a basic microsite using block-level elements to master layout and navigation principles.
Through this workshop, I will learn how to build responsive pages using CSS floats and fluid layouts, optimize layouts for different screen sizes with media queries, and explore professional responsive grid techniques. .
Website Redesign
The Website before the redesign
The In Touch Foundation website lacks clear information hierarchy and intuitive navigation. Key content is hard to find, and weak visual structure makes the site difficult to scan. Calls-to-action like “Donate” are not prominent, which may reduce user engagement.
Redesigned website
This assignment taught me how to build a personal digital portfolio using clean, standards-compliant code. I learned to structure and present my work professionally through web design, while improving my usability and front-end development skills.
Evaluative Report
Through this project, I learned how to evaluate websites using usability testing, accessibility checks (WCAG 2.1), and code validation. I developed skills in user-centered analysis, technical review, and structured reporting. The full report is available on the University of Leeds Minerva platform.
The tools I use
Visual Studio Code
Main production tools
In this COMM1730 assignment, VSCode is used to write, debug, and manage valid HTML, CSS, and JavaScript code in accordance with module requirements, and to enhance development efficiency through its integrated terminal and extensive extensions.
Adobe Photoshop 2025
Visual effect optimization
In this COMM1730 assignment, PS (Photoshop) is used for post-processing, optimizing, and designing visual effects of images, ensuring image quality and visual consistency on the website.
Adobe Sensei
Visual effect optimization
In this COMM1730 assignment, Adobe AI leverages intelligent image generation and editing features to swiftly create and refine web visual assets, enhancing design efficiency and consistency.
Adobe Firefly
Image generation
In this COMM1730 assignment, Adobe Firefly is used to leverage generative AI to quickly create and adjust web assets such as backgrounds, patterns, and elements, enhancing design creativity and efficiency.