Bilal Ali — Technical Work

01 — Technical skills

What I worked with every day.

Below are some of the key technologies I applied across every client project at EXB. Not just listed on a resume, but utilized in actual application to build a client's site.

Development

HTML5 · CSS3 · JavaScript (ES6+)

Semantic HTML was the foundation of every site I built. It builds the structural integrity of your site. CSS flexbox and grid provide the layout, and vanilla JavaScript provides interactivity through DOM manipulation.

Day to day: Building semantic mark-up, building responsive layouts, managing form validation and events in vanilla JavaScript without frameworks.

Responsive

Mobile-first development

All client sites were built with a mobile-first approach. Starting from the smallest screen width possible and scaling up to progressively larger widths utilizing media queries with min-width breakpoints.

In practice: Breakpoints established at 480px, 768px, and 1024px. Single-column layouts expanded to multi-column grids as screen width grew.

Compatibility

Cross-browser testing

Consistency across multiple browsers was critical. Ensuring a site looks and functions consistently across Chrome, Firefox, Safari, and Edge requires intentional testing and targeted fixes, particularly with CSS rendering differences.

In practice: Browser DevTools for inspection, CSS resets to establish consistency, vendor prefixes like -webkit-, and fallback styles where necessary.

Collaboration

Pixel-perfect implementation

Worked closely with designers to take wireframes and mockups and translate them into fully functioning web pages that match layout, spacing, and typography precisely.

In practice: Regular design reviews with designers, utilizing browser zoom and DevTools rulers to confirm that spacing was accurate.

02 — How I work

My development process, start to finish.

Every client site delivered at EXB follows this exact workflow: from receipt of design to delivery of a live, tested site.

01

Review design files before writing any code

Prior to coding any functionality, I thoroughly reviewed the design files to understand the designer's intent regarding layout, spacing, typography, and interactive behaviour. Identifying any ambiguity early saves both myself and the designer a great deal of time later.
Collaboration
02

Structure before style

Using the proper HTML elements (headings, sections, nav, article) creates an accessible site that is much easier to maintain consistent styling across, and one that search engines can crawl and index properly.
HTML5
03

Write CSS mobile-first, then scale up

Writing CSS for the smallest viewport first and then adding media queries for larger viewports. Doing so eliminates the issue of mobile layouts being broken by attempting to override desktop styling.
CSS3 · Responsive
04

Add dynamic behaviour with JavaScript

Navigation menus, form validation, scroll effects, and any behaviours requested by clients. Keeping JavaScript lean and focused on what needs to be accomplished minimizes unnecessary dependency chains.
JavaScript (ES6+)
05

Test across browsers and devices

Simulating different screen sizes using browser DevTools and testing directly within Chrome, Firefox, and Safari. Resolving any rendering inconsistencies prior to client viewing.
QA
06

Optimize, commit, and deliver

Compressing images, minifying CSS and JS, removing unused code. Committing everything via Git with descriptive messages and delivering to the client for review.
Performance · Git

03 — Performance optimization

Making sites fast.

Page speed impacts whether users stay or leave. These were my go-to methods on every project at EXB.

Images

Compression before upload

Uncompressed image files are typically the number one reason sites are slow. All image assets were compressed prior to upload, resulting in reduced file size without any quality loss.

Tools: TinyPNG and Squoosh, typically reducing PNG/JPG files by 50–80%. WebP format utilized whenever browser support was available.

Loading

Lazy loading

Lazy loading deferred image loads below the fold until the user scrolls close by. Significantly reduces initial page load time without affecting what the user sees first.

Implementation: Native HTML loading="lazy" attribute on img tags. Easy to implement with significant impact on perceived performance.

Code

Minification

Reducing whitespace, comments, etc. from CSS and JS files reduces their size, resulting in faster downloads for users on each page load.

In practice: Applied compression to CSS and JS files prior to delivery. Most effective on larger stylesheets.

Debugging

DevTools auditing

Whenever a site felt slow, the first step was always the browser Network tab. It shows exactly which files are largest and which requests are slowest. Makes the fix obvious.

Process: Network tab → sort by size → identify heaviest assets → apply targeted fix → retest. Lighthouse for full audit score.

04 — Problem solving

Issues I ran into and how I resolved them.

Unexpected problems were always discovered during real projects. This is how I approached them.

Problem

A layout appeared correct in Chrome but was completely broken in Safari — specifically a flex container was collapsing and the navigation was misaligned on iOS devices.

Resolution

Opened Safari DevTools to inspect computed styles. Identified a missing -webkit- vendor prefix on a flex property. Added the prefix, retested across all browsers, verified consistent rendering.

Problem

A client's contact form would no longer submit after a content update. The visual layout looked fine but nothing happened when the submit button was clicked.

Resolution

DevTools Console showed a JS error referencing a function that no longer existed after the content update. Tracked down a problematic element ID change in the new content. Corrected the reference. Validated contact forms were now completing correctly.

Problem

Clients reported homepages were loading sluggishly even on reasonable mobile connections.

Resolution

Network tab audit showed hero images loaded uncompressed at over 3MB each. Compressed to under 200KB using Squoosh, added loading="lazy" to below-fold images. Load times dropped substantially.

Regardless of bug type, my approach is always the same: open DevTools first, read what the browser is telling me, then work backwards from there.

My Personal Debugging Approach

05 — Version control

Working with Git.

Git provided version control for every project at EXB. Clear version control allows for collaborative safety. Rolling back mistakes easily and maintaining a complete history of every change made to a live client site.

git branch feature

develop

git add .

git commit -m "..."

git push

review

merge → main

Why it matters on live sites

A mistake on a client site can go public instantaneously. Git means every change made is documented and rolling back to a previous working state is always possible. No change is ever truly irreversible.

Commit discipline

Each commit had a clearly described message. Not just "update" but something specific like "fix mobile nav overflow under 380px." This provides actual value and usefulness when reading through project history.

06 — Summary

Skills and where they apply.

A summary of what I built at EXB and how each skill applies to the work ahead.

Skill	Experience at EXB	Relevance
HTML5 / CSS3 / JS	Used daily across multiple client projects	Building and updating client-facing web tools
Mobile-first	Applied on every project from 320px up	Sites that work on every device, every user
Performance	Compression, lazy loading, minification on real sites	Fast, efficient client deliverables
Cross-browser	Tested and fixed across Chrome, Firefox, Safari, Edge	Consistent experience for all users
Git / GitHub	Version control on all projects	Safe, trackable deployment of changes
Debugging	DevTools-first approach to diagnosing issues	Maintaining and improving existing sites
Designer collaboration	Wireframes to pixel-perfect builds	Working within a team on client deliverables

Currently studying

Building responsive websites for real clients.

What I worked with every day.

My development process, start to finish.

Making sites fast.

Issues I ran into and how I resolved them.

Working with Git.

Skills and where they apply.