How I built my first Webflow website, drawing from past experience

The Challenge

There is always a learning curve when using a new technology. While it is easy to choose familiar tools for any given job, learning is necessary in our technology-related field that evolves quickly and frequently.

Planning
Anyone who has built a website knows there is more to the process then simply building the website. Content needs to be written, graphics need to be prepped, and an overall blue-print will make the process smoother and quicker. The end result will likely be more consistent and coherent with a systematic approach.

Before signing up for Webflow, I opened up my digital notebook and started strategizing how to approach, organize, and present my portfolio. I looked to my past work, old portfolios, and the recent work I have completed. I drew inspiration from the website I built for web design business.

Learning Webflow
When learning new tech, there are bound to be situations where you want to know how to do something specific. Without anyone to ask, I find the best way to get that answer is a Google search. Over the years I've learned how to code, use specific software, and cook some delicious recipes. Google helped me get past a few Webflow roadblocks, such as how to apply a style within text (example: orange text underline) and that I couldn't add custom HTML/CSS without purchasing a plan.

Overall I found Webflow to be intuitive, as I was able to draw on my experience with HTML, CSS, and other WYSIWIG editors. I would definitely use Webflow again, especially for managing a static website.

Referencing past work and outside tools
If you always start from scratch, every project would take forever. For content, I often seek graphics I already prepared from my web design business website, BumpSetCreative.com, which was redesigned about a year ago.

I also purchase professional mockups from www.LS.graphics, to present my work in a minimalist setting, as opposed to a cluttered desk.

Finally, not only did I build SVGBackgrounds.com, but I also use it in my web projects. The homepage of this website uses a design from SVG Backgrounds.

What I learned and what I would change

While Webflow was able to accomplish everything I needed, I would make a few adjustments to my approach. The next time I use Webflow, I plan to use a better naming convention for classes. When writing in HTML and a CSS stylesheet, your memory of classes is triggered more often. But in Webflow, it's easier to forget class names and their relationships to sections and components. Therefore I would use a more literal class naming structure, such as "button_xxxxx", to help the autofill search suggest the desired classes.

Next Portfolio Example