Going from idea to finished code.
2025-03-04
Written by: Jeffrey Hammack
Understanding workflow is essential for those starting out. Reason being, understanding project structure and workflow keeps new developers on track throughout the development process. Different frameworks and programming languages have certain paradigms and workflows associated with them. This makes it very important to understand what workflow goes with what framework.
In this guide, we will break down the different steps to creating a workflow through manageable steps. We will work through: Planning and Ideation, Choosing the Right Tools and Technologies, Development, Testing and Debugging, and Deployment and Launch.
It is very important, when developing a website, for one to define the site’s purpose and target audience. This is because when building the site, user experience and expectations may not match up to the site unless the target audience has been defined and understood. The website’s purpose is contingent on the audience and their overall experience and intent.
In general, one cannot just jump directly into coding up a website. It is important to design and plan out the site before any code is ever written. Using websites like Figma or Draw.io makes it simple to plan out mockups and flow diagrams respectfully. Designing and planning out the project allows one to see mistakes or misconceptions before getting into the code. This also allows the developer to properly see the finished product before finishing building the site.
It is also important to gather content early in the development phase. This allows time for confirming lack of copyright, or time to ask for special permissions from the author. This prevents there from being any mix-ups with IP (Intellectual Property), and the like.
As far as tools are concerned, my all-time favorite code editor is Visual Studio Code, or VS Code for short. It features a plethora of extensions and plugins which makes for a great development experience. I also use (as stated on this site) Astro as my primary development framework. I prefer this over others because of its simplicity and its capacity for high-performing, easily implementable code for static sites that also features “saturating” components for interactivity.
“But Jeff, what about no-code platforms or WordPress?” I enjoy using these platforms for when I need to quickly throw together a site and don’t require a lock into a platform that I plan on using for clients who don’t ask for a fully coded-out website.
The Astro framework allows for one to both structure and implement backend code in the same file. The general workflow is simple. First, you structure using syntax like HTML as well as custom components coded using the same general setup. This component nesting allows for highly complex static sites that are highly performant.
After getting the basic structure built out, you have two options when it comes to styling. You can have the CSS directly in the same code file as the rest of the page or component, or you can store the CSS in its own global CSS file. By having the CSS in the same code file within <style> tags, one can scope (keep individual page layouts or structure) in the individual page or component.
For interactivity, you can use any framework in conjunction with the Astro framework to add “Islands” of interactivity. This allows for a small code base and easy-to-find functions. Testing on different Operating Systems and environments allows for a seamless user experience across all devices.
You can use tools like Chrome DevTools and Lighthouse to diagnose and debug issues. As well as monitor performance and site traffic. Not to mention, usability testing and user feedback is of prime importance when in the development phase. This is because the user experience has a major impact on site traffic and lead generation.
Hosting is relatively easy when it comes to self-written sites. Platforms like Netlify, Vercel, or GitHub Pages allow for quick and easy hosting and deployment options.
A final note, it is very important to monitor the build and overall site performance. This is because if the website goes down due to too much traffic or there are certain needs from the site you won’t know what’s happening.
If during your coding journey you find yourself overwhelmed or not fully understanding concepts, that’s perfectly fine. Coding is a lifelong learning journey. It’s important to make mistakes and break things to learn what not to do. As far as messing anything up with your code, things are made in ways that keep that from happening. So have fun! And take your time.
Now it’s your turn! Use the knowledge gained here to start your own small project. Not sure where to start? There is a plethora of tutorials and guides to web development and all kinds of other fields on the internet. So, learn what you can and have fun!