I am not a web designer by training, yet web design has been a recurring part of my work for nearly two decades. Building single page applications means dealing with HTML, CSS, and layout decisions whether one enjoys it or not. For a long time, I approached web design pragmatically, learning just enough to make things work, while never feeling fully in control of the result. Recently, that changed. This post is a reflection on how my relationship with web design evolved, and how artificial intelligence—combined with a better understanding of fundamentals—helped me finally bridge the gap between intention and execution.
Designing for the Web Without Ever Feeling Like a Designer
I have been building web pages for nearly twenty years, mostly on an occasional basis, yet I never considered myself a web designer. My work with single page applications meant that I had to learn enough about HTML and CSS to make pages functional, but for a long time, my understanding was superficial. I learned the basics of HTML4 and later HTML5, and picked up a few CSS properties and selectors here and there, enough to get things to appear on the screen.
Despite these efforts, layout always felt unpredictable. Margins, paddings, and alignment seemed to behave arbitrarily, and the pages rarely matched the mental designs I imagined. Often, the results looked messy or even antiquated. CSS felt like a set of rules I had to obey blindly rather than a language I could control, and that made web design a constant source of frustration.
At the same time, the web itself was evolving rapidly. Modern websites began to feature complex structures: navigation bars, hero sections, and dynamic cards. Every innovation in HTML and CSS highlighted the gap between what I wanted to create and what I could actually implement. It became clear that my limited knowledge, while sufficient to make things work, was holding me back from building modern and engaging interfaces.
Frameworks, Abstractions, and Why They Never Fully Worked
Faced with the challenges of CSS and layout, I turned to frameworks and libraries to make my pages look modern without having to master every detail. Over the years, I experimented with YUI, jQuery, Bootstrap, and, to a lesser extent, Angular Material and Skeleton. Among these, Bootstrap became my primary tool, promising ready-made components and layouts that could accelerate development.
In practice, however, frameworks often introduced their own frustrations. Bootstrap, for instance, is highly prescriptive: customizing pages was difficult, the HTML markup could be dense and puzzling, and many sites built with it ended up looking very similar. What felt like a shortcut frequently became an obstacle. Using these frameworks without deep understanding sometimes felt like trying to paint a masterpiece with a palette full of pre-mixed colors—you could get something visually correct, but it rarely matched your vision perfectly.
The tipping point came when I enrolled in an online Bootstrap course last year, hoping to finally understand the framework. Instead of explaining the rationale behind each component, the instructor simply copied markup to build pages. A single small mistake would break the layout, producing results that seemed almost magical. While the course taught me some practical tricks, it reinforced the sense that frameworks can be powerful but brittle when used without understanding.
Artificial Intelligence: Power Without Understanding Is Not Enough
Then came artificial intelligence, which promised a new way to bridge the gap between ideas and implementation. I am not a fan of vibe coding, and I have never relied on AI to write entire projects. I use it selectively—to review functions, generate test stubs, or brainstorm technology stacks—but not to replace thinking. My approach to web design remained deliberate, but AI offered a tool to help me realize my visions more efficiently.
Initially, I experimented with a workflow where I would draw a mock of a UI, upload it to an AI chatbot, and ask it to generate the HTML and CSS. The results were visually acceptable, often producing layouts that I could never have achieved on my own in such a short time. Yet the process had limits. Since CSS had evolved over the years, many of the properties generated by AI were cryptic to me, and debugging them without understanding was nearly impossible.
Whenever the outcome fell short of my expectations, I found myself relying on AI again—this time to fix its own code. It became clear that AI could accelerate design, but it could not replace understanding. The experience taught me that power without comprehension is fragile: without a solid foundation, the results can look fine but remain opaque and hard to control.
Finally Understanding CSS – Foundations That Made the Difference
The turning point in my web design journey came when I discovered a comprehensive CSS course by Future Fullstack on YouTube. Unlike previous tutorials that focused on copy-pasting code or showing isolated tricks, this course explained the concepts behind CSS in a clear, structured, and rigorous way. The instructor, coming from a mathematical background, presented the material in a logical, methodical style that resonates with an engineer’s mindset. Every lesson was designed to build understanding, not just familiarity with properties.
The course covered a wide range of essential topics that had eluded me for years. It explained specificity versus inheritance, showing why CSS sometimes behaves unpredictably. The box model was explored in depth, including margins, paddings, and layout implications. Units for fonts, spacing, and line heights were discussed with guidance on when to use one over another. I also learned how to choose harmonious color palettes for a website—primary, secondary, and gray scales—and how flexbox and grid systems underpin modern layouts. Even frameworks were presented in context, not as magic tools, so I could understand their purpose rather than rely blindly on them.
What made this course truly impactful was its emphasis on concepts over recipes. By the end, I had a solid foundation and, more importantly, the confidence to write my own CSS. For the first time, CSS stopped feeling opaque and unpredictable. I could reason about layouts, predict how changes would behave, and approach design decisions with a sense of control. It was a rare combination: technical rigor, clarity of explanation, and practical guidance that transformed the way I think about web design.
Applying CSS Knowledge – A Thoughtful Workflow With AI
Armed with a solid understanding of CSS fundamentals, I completely changed how I approach web design with AI. Gone are the days of “vibe coding” or uploading UI mocks and hoping for the best. My process now mirrors how I approach coding: iterative, deliberate, and review-based, with AI as a collaborator rather than a replacement for understanding.
For existing pages, I keep the HTML intact and work through each section one by one, refining the CSS with AI’s help. I can read and interpret the rules generated, debug issues independently, and provide precise instructions for AI to improve the design. This method gives me control over the final layout while still benefiting from AI’s speed and suggestions.
When creating new pages, such as the portal I built for skapps.ca, the workflow is slightly different. I start with a clean HTML structure, iterate on the content and layout, and then define the CSS section by section. Each iteration is reviewed and refined before moving to the next, ensuring that the page evolves in a controlled and intentional way. While this process can take several hours, the learning, the sense of achievement, and the ability to tweak the UI exactly as I envisioned are invaluable. AI accelerates the work, but the combination of my newfound CSS knowledge and a structured workflow is what makes modern, engaging web pages possible.
This experience has shown me that, when paired with understanding and intention, AI can enhance the design process rather than replace it. It has allowed me to modernize the look of my single page applications and to create a polished, interactive gallery for all my apps on skapps.ca.