How I learned to code websites as a graphic designer
My journey from trial and error with no-code editors, to learning HTML, CSS and JavaScript with the assistance of online resources and AI.
Like many UI and UX designers, one of my biggest sources of inspiration is Awwwards. Whether flying through immersive 3D worlds or scrolling beautifully designed corporate sites with advanced functionality and animation, the websites on show demonstrate a level of craftsmanship that all designers would aspire to create. They set the benchmark for what is possible within the industry, and no longer do they require powerful machines or hours of your time waiting for things to load. They’re usable, creative, and unique, immersing users and leaving lasting impressions.
With dreams of creating websites way beyond my narrow capabilities, there I was — a designer with ZERO coding experience and just a handful of websites with my name on them, being only as good as what our development team could build. Like me, you might have been lucky to work with some of the best back-end developers around, but on the other hand, their front-end skills may have left your final products falling short in terms of design and user experience. This can be frustrating when you know the potential of your work and the end products aren’t quite cutting it. I knew I wanted to learn to code, combining my design background with the technical skills required to build websites to the level I was striving for. The question for me was, where do I begin?
Getting started with no-code editors
A few years back I was tasked with building my first website for a client using WordPress as the agency I was working for was looking for more efficient ways to get website projects over the line. I designed the prototype using Adobe XD and began searching for a theme that had a bunch of templated elements that could work with my design.
Now, the problem with being a designer is that we’re protective over our designs. We want the finished article to look and function exactly how we envisaged. We’re perfectionists and a developer’s worst nightmare. We imagined that working with page builders would mean we could produce websites that stay true to our original designs and we wouldn’t drive our developers mad with a never-ending list of amends. The truth with templates is that they’re designed to work for the masses and are far from being bespoke, and when building websites that cater to a brand’s unique identity and requirements, we often need to design elements that look and function in a certain way. For a theme to stock elements for each and every unique scenario would simply be impossible.
Not wanting to skimp on my original designs, I started exploring custom code features where I could work with our developers to inject snippets of HTML, CSS and JavaScript wherever we needed bespoke features or designs that the theme didn’t cater for. The custom-coded elements weren’t always working as we envisaged and time was running low, so we compromised. We tweaked our designs, found a working solution and got the project over the line to a happy client.
It was an eye-opener to the limitations of working with page builders. If like me, you want to deliver websites with fully bespoke functionality and design, they can be an enemy rather than a friend. The client was happy with the outcome but I was left wanting a higher standard from the work that I had produced — a project that I would be proud to stick my name on.
Learning HTML and CSS
Working with WordPress, I remember implementing a built-in Flickity slider to showcase a carousel of team members on a client’s web page. It was functioning poorly on mobile compared to a flawless example featured on Flickity’s website. This type of issue is a lot more common than you might think. Following 5-star theme reviews, you’d be forgiven for thinking that you’d be working with flawless design and functionality. In reality, the web is constantly evolving, meaning themes and their back-end code can often become outdated. This was the issue we were facing with the specific theme we were using having improper/outdated code. I decided to add the plugin manually using the code supplied on their official website and the problem was quickly resolved.
Seeing how straightforward the process of implementing the slider turned out to be, and with the ability to customise further than what was capable with the theme’s in-built tools, I began to dig deeper in learning how to create brand new layouts that our chosen themes didn’t allow, as well as custom navigations, video light boxes, and more. By asking the necessary questions through Google search I was able to find articles on W3Schools, Stack Overflow, and examples on CodePen that could be tweaked to suit my designs while learning HTML and CSS on the job. Our back-end team could then implement JavaScript wherever required with varying degrees of success.
Ditching page builders and shifting to code editors
Since moving into the world of freelance design, I’ve had a lot more time for personal skillset development. Through finding articles online, I’ve learned how to set up and create web projects in Visual Studio Code (a free code editor) to break free from the constant bugs and limitations of no-code page builders and gain full control over how my websites looked and functioned. This felt like a big step forward — In my eyes, I’d finally started to become a front-end developer, albeit a total novice.
Learning HTML and CSS, then transferring that knowledge into working solutions in VSCode wasn’t easy. I had to learn the basics through trial and error, finding all the necessary resources online with limited knowledge of the right questions to ask. I didn’t feel I had the time to sit down and take courses that could present me with outdated or redundant information that I might never use. For me, learning on the job was faster, finding solutions for things that I needed at the time and could learn from.
Advanced learning with AI
When I learned about ChatGPT, I was getting pretty comfortable with HTML and CSS. I was, however, limited to building websites with very basic functionality and hadn’t a clue about JavaScript beyond manually adding plugins like Flickity or GSAP (a JavaScript animation library).
When I asked ChatGPT to help write me some code for a page preloader, my mind was blown. There I was, spending hours searching for solutions through Google when ChatGPT could provide the code I needed in seconds. Inevitably, there were still some minor bugs but by detailing the issues I was having, ChatGPT could rapidly generate a new snippet of code that I could try until I got what I was looking for.
Almost anyone can do it. To begin with, you only need patience, persistence and a brain capable of asking the necessary questions. But here’s where my process might differ — I didn’t just copy and paste the code and be done with it. I wanted to learn from it and eventually write the code for myself. ChatGPT would give detailed explanations as to how things worked when presenting the code but if I still didn’t understand, I would ask again and again until it made sense. In a sense, working in this way meant that I could use AI as my very own personal tutor. I still may not be able to write Javascript, but I can understand it to a reasonable degree. Scanning the code for potential issues, I will either manually make the necessary changes myself, or relay my suggestions for ChatGPT to find solutions, significantly speeding up the overall process.
Where I’m at today and suggestions for people wanting to follow the same path
Trusting the process, I now have a single-page portfolio website presenting my design work in all its glory — Mouseover animations, parallax gallery, dark/light-mode themes, and engaging transitions. It might not be the best website out there or to everybody’s taste but to me, it’s unique, memorable, fits my brand identity and it’s something I can be proud of. I will be building out more pages and refining things for phase 2 but truthfully, I’m exhausted. Getting it all to work was a real test of patience. Seeing how far I could push it and showcase advanced features that would stand out took a lot of back and forth but the process enabled me to learn things I otherwise wouldn’t. Without AI, I would still be stuck building basic websites and putting off signing up for courses in HTML, CSS and JavaScript that would have consumed more time than I had to give.
If you’re a designer like me or simply looking to start building websites, I would still encourage you to start your journey with no-code builders to get a taste of how websites work. They work in strange ways and there’s no one-size-fits-all solution. You’ll find it’s not as straightforward as designing prototypes in XD or Figma, that’s for certain. Once you get comfortable, you can experiment with custom-code features to add bespoke elements or fine-tune your pages beyond the builder’s editing capabilities. I’d recommend jumping straight in with ChatGPT or another AI coding tool when you do so rather than taking hours as I did searching for the code you need. If you’re then left wanting to dig deeper into front-end development, you can download Visual Studio Code or another code editor of your choice, asking AI to help you get set up and start building out your first bespoke web project.
Final note
After what I’ve learned, I now finding coding websites from scratch far quicker and easier than building with no-code page builders or templates. They’re never really ‘no-code’ for me anyway. Coding from the ground up allows me to develop websites closer to my original designs. The websites are much faster, bug-free and the options for hosting are far broader without needing to pay for dedicated WordPress hosting or other no-code subscriptions.
The journey from designer to front-end developer has been a challenge (and there’s still a long long way to go) but for me, it has been undoubtedly rewarding, learning highly valuable skills and giving me the necessary tools to bring my designs to life with the precision I strive for.
Written by Charles Tostevin, Founder of Charles Collective — A digital graphic design studio based in Guernsey.
