Idea to LAUNCHED in 7 days: Deep dive into the new Full Stack Founder Website

Brian Casel
Brian Casel
January 19th, 2024

Embarking on a new entrepreneurial venture is always an exhilarating experience.

This year, I've decided to channel my passion and expertise into a new business endeavor centered around a YouTube channel named Full Stack Founder.

One of the initial and most crucial steps in establishing any business in today's digital age is setting up a website.

I'm thrilled to share that after a dedicated week of designing, developing, and perfecting, the Full Stack Founder website has officially gone live.

Just last night, I completed the final touches and launched it into the world.

In this blog post I aim to take you behind the scenes of building the Full Stack Founder website. Check out the video above if that works better for you!

It's a comprehensive look at the tools, techniques, and creative processes that brought this project to life.

I'll guide you through every step of the journey, from the initial planning stages to the final launch.

Here’s what we’ll cover:

  1. Shipping Fast: The Art of Balancing Speed and Detail
    Dive into the balancing act of launching a website swiftly while making sure not to skip those sneaky little details that could make or break your digital home base.

  2. Crafting the Foundation: Copywriting and Site Planning
    Crafting the words that'll greet our visitors and the journey they'll take through our site. It's all about making a killer first impression and making sure nobody gets lost.

  3. Naming and Domain Acquisition
    Picking the perfect name is a big deal, and so is securing the domain name. These steps mark the project's transition from concept to reality.

  4. Design and Development: A Tailwind CSS and Figma Journey
    I roll up my sleeves for some serious design and development action. I made sure this site wasn't just functional—but reflected my brand's visual identity.

  5. Selecting Brand Colors: Tools for Efficiency
    Learn about the critical design decision of choosing brand colors. Spoiler alert: it's not just about picking favorites.

  6. Choosing a Content Management System
    Content management doesn't have to be a headache. I tell you more about why Statamic is a go-to for keeping my content in tip-top shape.

  7. Engagement and Analytics: Forms, SEO, and Tracking Traffic
    It’s all about making connections and staying smart. That means having forms for chats, making sure search engines love us, and keeping an eye on site traffic.

  8. Deployment: Staging to Live
    Follow the final steps of my website's development, from deploying to a staging server for testing to the official launch, ensuring a polished and functional site.

Shipping Fast: The Art of Balancing Speed and Detail

Before we jump into the nuts and bolts of building the Full Stack Founder website, let's chat about something crucial: finding that sweet spot between getting things done quickly and sweating the small stuff.

Creating a new site and brand from scratch is no small feat, especially when you’ve got tons of other projects that need your attention—it's like trying to bake a five-tier wedding cake in a toaster oven.

It turns into a massive distraction because while I'm neck-deep in design choices and code, I'm not making videos, engaging on social media, or sending out my weekly newsletters.

That being said, I essentially stopped working on anything else because, hey, my business needs its slice of real estate on the internet.

The goal?

Get it done yesterday. But as we all know, the devil's in the details.

As I hustled through the week, crafting this digital masterpiece, I kept bumping into those tiny, nagging tasks that seemed easy to shove off until "later."

Spoiler alert: "later" often turns into "never," and these ignored bits can end up costing you.

Take SEO, for instance.

It's not exactly a Herculean task to lay down some solid SEO groundwork, but it can be as fun as watching paint dry. And because visitors can't see SEO work when they're scrolling through your site, it's tempting to chuck it on the "I'll deal with it next month" pile.

Here's the kicker, though: procrastinating on these tasks can lead to a traffic drought on your shiny new site.

And we're not just talking a trickle—we're talking potential floodgates of visitors, leads, and customers left closed.

That's why I decided to put on my founder hat and tackle those details head-on, ensuring the site isn't just done but done right.

This meant optimizing for search engines, double-checking links, and making sure I touched on it and didn’t have to touch it again later.

As we dive into this journey together, I'll share not just the hows but also the whys behind each decision, giving you a peek into the strategic tightrope walk of moving fast without sacrificing the little things that make a big difference.

Crafting the Foundation: Copywriting and Site Planning

Alright, let's rewind to where it all began: a glaringly blank page.

That's right, the very first step was to hammer out the website copy. For this, I'm all about Notion—it's my go-to for jotting down ideas and organizing the chaos into something that resembles a sitemap and navigation plan.

And, if you ask me, this might just be the most critical part of the whole process. Why? Because those words are the spark that lights creativity.

When it comes to writing copy, especially for something as near and dear as Full Stack Founder, it's all about getting in the headspace of your reader.

I picture chatting with a younger me, someone on the brink of diving into the full stack world, just like I did.

This approach isn't just about reminiscing; it's about crafting a message that resonates, that speaks directly to someone's hopes, fears, and dreams.

This step is where the magic happens, folks. I'm laying down the value proposition, piecing together a narrative that not only captures attention but also pulls readers into my orbit.

It's about making them nod along, thinking, "Yep, that's me," and enticing them to join the community, learn more, and maybe, just maybe, grab what I'm selling down the line.

⚙️Tools used ⚙️

Naming and Domain Acquisition

So, here's a fun twist: when I first started drafting up the copy for this project, "Full Stack Founder" wasn't even on the radar.

Nope, I was flirting with a totally different name.

But as I dove deep into the words, thinking about who I was really talking to and the journey I wanted to take them on, a lightbulb went off.

Full stack designer, developer, products... Why not just wrap it all up under one big, shiny bow: Full Stack Founder? And just like that, my business had a name.

Next step? Domain hunting.

Unfortunately, dot-com was already taken. Classic, right?

I ended up going with FullStackFounder.co.

But before I got too attached to the name, I did a quick reality check: a Google search to make sure I wasn't stepping on any digital toes, and a sweep of social media to see if I could claim my new moniker across the board.

The most important thing for me was securing "Full Stack Founder" on YouTube.

Once that was in the bag, it was all systems go. Despite not snagging the dot-com domain, I knew I'd found the name that reflected my new content business.

Design and Development

Designing in HTML & CSS: Straight to Code

Next up on this whirlwind tour was tackling the design.

I decided to skip the fancy mockups and dive headfirst into the world of HTML and Tailwind CSS. Yep, just me and a plain index.html page

plain-index-html-full-stack-founder

Now, if I showed you the early stages, you'd see a much rougher version of what ended up as the final sleek site.

We're talking placeholder colors and elements as I figured out the perfect layout. It was a bit of a wild ride from start to finish, but hey, that's where the magic happens, right?

Tailwind CSS & Tailwind UI: A Designer's Best Friend

Tailwind CSS is my go-to for pretty much every site or app I lay my hands on.

Designing straight in the browser with it is like having superpowers—seriously, I’ve done a whole video on the unexpected perks of using Tailwind CSS that goes beyond just whipping up layouts at lightning speed.

And then there's Tailwind UI, a UI components library that Tailwind Labs has released. It's a treasure trove of design inspo and quick-start blocks at your fingertips.

For instance, those hero sections you see at the top of websites? Tailwind UI's got a lineup of them.

I found myself eyeing one with a darker vibe, thinking, "Yep, that's the ticket." It was the jumping-off point for what eventually morphed into a slick nighttime sky gradient, all done in CSS, no less.

Here's a look at my actual HTML for this page.

full-stack-founder-html

Now, knowing that this is not my final code base, I simply just pulled in Tailwind CSS using their CDN, and the Tailwind config I just placed right here on the page.

Obviously, in the final version of the site where I'm running Statamic and Laravel, it's all fully installed in the codebase.

What you’re seeing now is just a simple HTML page I'm trying to get up and running quickly.

It's all about making those early leaps and bounds, right?

⚙️Tools used ⚙️

Choosing Fonts: The Typeface Tale

For the fonts, I tapped into Adobe Fonts (you might remember it as Typekit), the hero behind Full Stack Founder's typography. They've got this treasure trove of fonts, making it a breeze to find the perfect fit.

My choice was Paralucent in a couple of weights for that sleek look, and Alda for the serif body text—just the right mix of modern and classic.

In the final project, these would find their home in a dedicated CSS file, but for now, they're just hanging out upfront.

⚙️ Tools used ⚙️

Icons: Bringing Life with Font Awesome

When it comes to adding a little flair to the site, Font Awesome is my go-to. It's like having a Swiss Army knife for icons—they've got everything.

From the nifty little arrows guiding your journey across the page to those recognizable social brand icons, it's all Font Awesome magic. And popping these icons into the HTML? A total breeze.

The initial page was all static HTML, a mix of final copy and placeholders, waiting for when I make them dynamic.

This setup was all about nailing down the style and spacing, making sure everything looked just right, even if it wasn't ready to hit the stage.

Initially, I wasn't sweating over the color scheme—just rolling with the default hues from Tailwind UI.

The full color palette? That came into play later, once all the pieces were starting to fit together just right.

⚙️Tools used ⚙️

Homing in on the Homepage

Pouring my heart and soul into the homepage was a no-brainer—this is where the magic happens, folks. It's the frontline, the make-or-break moment for anyone stumbling upon my slice of the internet.

Miss the mark with your headline, branding, or message, and that new visitor might just bounce back to the digital abyss, potentially forever.

That's a lot of pressure for one page, right? But it's also why nailing that first impression is key.

Plus, once you've got the homepage just right, the rest of the site starts to fall into place. It sets the stage, dictating the vibe and structure for everything that follows.

So, yeah, the homepage?

It's kind of a big deal.

Sketching Out the Logo

Logo design? Not exactly my claim to fame, but I can hack it. It just means I'm spending a bit more time than I'd like.

Picture me hunkered down for several days, tweaking and adjusting the Full Stack Founder logo.

My battlefield? Figma.

Here, amidst a sea of artboards, the logo began to take shape, starting life in a humble grayscale before getting drenched in its final colors.

figma-artboards-logo-design

The process was pretty straightforward. I played around with the idea of stacking "Full Stack" right on top of "Founder"—a little wordplay magic.

I opted for a text-based mark, no fancy icons or fluff. Just words, encased in a rectangle that's two rectangles fused together with the magic of the Union tool. Then, for a bit of depth, I added a shadow effect.

The font? That's Paralucent Condensed, keeping it in the family with the website's typeface but squeezing it just enough to make it logo-friendly. And here's a fun trick: I used a skew plugin to give those rectangles a bit of an angle, adding that dynamic touch.

When it came time to bring this logo to life on the web, SVG was the way to go. Crisp, clean, and responsive across any screen size.

But I didn't stop there. The open graph graphic was next on the list, ensuring that when shared, Full Stack Founder makes a splash on social media with a perfectly sized, eye-catching image.

Oh, and let's not forget the favicon. A mini-me of the main logo, crafted with simplicity in mind. A quick spin through a favicon generator, and voilà, a tiny but mighty emblem ready to grace browser tabs everywhere.

So, there you have it—a glimpse into the birth of a logo, from Figma fiddling to final forms. It's a small piece of the Full Stack Founder puzzle, but hey, every block counts.

⚙️ Tools used ⚙️

Selecting Brand Colors: Tools for Efficiency

Alrighty, let's talk about colors.

After setting up the site structure and sketching out the logo, I was still on the hunt for the perfect brand colors for Full Stack Founder.

My quest for color started with a dark blue, inspired by the backdrop of my videos. Since these videos and their thumbnails are the heart and soul of the website and business, I wanted everything to vibe together seamlessly.

From there, it was all about finding those complementary colors that make things like buttons and links pop, without clashing with our star player, dark blue.

Enter my dynamic duo of free tools: Coolers.co and the UI Colors app.

Coolers.co is like a digital color wizard, letting me anchor that dark blue and then generate complementary colors with a press of the space bar.

branding-colors-coolers

Once I hit the color jackpot, the UI Colors app was my next stop.

This app allows me to generate multiple shades for those colors and generates code that I can drop straight into the TailwindCSS config file when I'm defining those colors in my website.

branding-ui-colors-app

Just like that, Full Stack Founder got its coat of paint, ready to shine across the web.

⚙️ Tools used ⚙️

Choosing a Content Management System

With the creative and design phase behind us, it was time to dive into the technical side and flesh out the rest of the site, notably picking the right Content Management System (CMS).

My choice?

Statamic.

statamic-webpage-cms-full-stack-founder

I jumped on the Statamic bandwagon last year and haven't looked back since.

It's like finding that perfect middle ground where I can get my hands dirty with code, CSS, and JavaScript while still having a sleek interface for managing website content.

The Best of Both Worlds

Statamic stands out because it combines the simplicity of a static site generator with a powerful interface for content management (CMS).

This is crucial not just for me but for anyone joining the team in the future—be it an assistant, a marketing guru, or a writer.

They won't be diving into code or terminal; they need an intuitive, user-friendly platform, and Statamic delivers.

Live Site and Backend Insights

On the frontend, the site looks seamless, but the real magic happens in the backend.

Transitioning from static design to a dynamic Statamic site meant breaking the design into various partials. For instance, the homepage is a symphony of partials, each handling different sections like the hero or the header, with configurations for dark or light modes depending on the background.

Statamic’s templating system is a game-changer, allowing for such versatility. Though there's a lot more under the hood, I'll keep it light for now—but stay tuned for potential deep dives in the future.

Diving into Statamic

My Statamic setup is straightforward but mighty. With just a couple of collections (content types), the site currently features essential pages like Home, Articles, Contact, and Services. Plus, there are hidden gems like the newsletter success page, accessible only post-email submission.

Content at the Core

For a content-driven business, control over presentation is key. Each article, mirroring the creation of a new video, is meticulously planned.

Statamic’s CMS interface allows for easy article writing, embedding YouTube videos, setting featured images, and managing SEO settings—ensuring content shines across all browsers.

Statamic isn’t just a CMS; it’s the backbone of Full Stack Founder, offering the perfect blend of code-level control and user-friendly content management.

It's tailored for both the tech-savvy and the non-coders in the team, making it an indispensable tool in our digital toolkit.

⚙️ Tools used ⚙️

Engagement and Analytics: Forms, SEO, and Tracking Traffic

Showcasing Services

Alright, let's zoom in on the services page—essentially the bread and butter at launch and my first step towards a revenue stream.

Before I dive into the world of products and courses, this page is where I roll out the red carpet for my services.

We're talking everything from on-demand coaching and advising to product planning sprints and even in-depth, multi-month engagements for crafting that perfect MVP.

Post-hero section, the page breaks down into sleek callouts for each service offering.

A simple click not only takes you down to a detailed description but also closer to a "Let's talk" button. Hit that, and you're on your way to filling out a request form.

Forms: The Digital Handshake

Next up on my to-do list was setting up the forms on the site. Think forms are crucial for growing the email list, fielding inquiries, and essentially, keeping the conversation going.

I rolled up my sleeves and crafted three key forms: the general contact form found in the footer, the newsletter subscription forms that greet you on the hero and blog sidebar, and the all-important services request form.

The Setup in Statamic

Inside Statamic, crafting these forms was a breeze thanks to their blueprint system. It lets me fine-tune the fields and the entire form setup with just a few clicks.

But here's the kicker: how do I get these form submissions pinged directly to me? Statamic stores them, sure, but I needed them to jump out of the digital world and into my inbox.

Make.com to the Rescue

Instead of wrestling with email-sending services, I turned to Make.com (you might remember it as Integromat).

It's like Zapier's cousin, twice removed—perfect for setting up webhooks from Statamic and funneling those form submissions straight to my email.

Setting up a Make scenario was like piecing together a puzzle where the final picture was my inbox lighting up with new submissions.

The Workflow Magic

Here's the drill:

  1. Each form has a defined webhook that sends it to a specific scenario in Make.com

  2. Statamic sends a webhook (using the Statamic-Zapier addon) to Make.com whenever someone fills out a form.

  3. Make.com takes that info, does a little text parsing dance (so those paragraph breaks don't get lost in translation)

  4. Make.com sends an email my way

make-scenario-flow

I even set it up so the "reply-to" is the submitter's email, making it super easy to strike up a conversation right from my inbox.

Test Drive Success

And just like that, the forms on Full Stack Founder aren't just forms; they're my direct line to the outside world.

A test run showed me everything's working perfectly, from capturing what services folks are interested in, to how they stumbled upon my corner of the internet.

So there you have it, the lowdown on how I wired up the forms using Statamic and Make.com—simplifying what could have been a complex setup into something pretty straightforward.

⚙️ Tools used ⚙️

The Blog: Crafting Content That Clicks

Given that Full Stack Founder thrives on content, getting every piece just right was crucial.

First up, I ensure each article is crowned with a video, since, let's face it, video is king here. Then, I introduced a sticky sidebar—a way for readers to easily subscribe to the newsletter or bounce back to YouTube without missing a beat.

And then finally, a call to action, currently shining a spotlight on the coaching and consulting services up for grabs.

But hey, this is just the beginning.

As Full Stack Founder evolves, so will those CTAs, ready to usher in courses, communities, and whatever else we dream up. It's all about keeping the content fresh and the journey exciting.

SEO Optimizations: Setting It and (Mostly) Forgetting It

Diving into SEO might not be the flashiest part of setting up a site, but believe me, it's the backbone of getting noticed.

From the get-go, I knew I wanted to nail the SEO so I could basically set it and forget it. No one wants to circle back to tweak SEO details after the fact, right?

Enter the SEO Pro add-on, a gem from the same folks behind Statamic. This premium tool has become my go-to for ensuring Full Stack Founder is as search-engine-friendly as possible.

It's like having an SEO wizard at your fingertips, helping you set up site defaults for title tags and meta descriptions. It also lets me generate the all-important XML sitemap for Google's search console, helping Google index my site.

But the real kicker?

The granular control it offers for each page. I can zoom into the SEO tab for any page, say the homepage, and fine-tune the title and meta description to perfection.

Peek at the source code, and you'll see a beautifully optimized set of tags, from the social meta tags to the nitty-gritty of title and descriptions.

With SEO Pro, it's all about laying a solid foundation. Now, all that's left is to churn out killer content and watch as Full Stack Founder begins to climb the ranks in search results.

Analytics: The Unsung Hero of Insights

Analytics—yeah, it's one of those things that's easy to overlook, but oh-so-crucial from day one.

It's the digital crystal ball that shows who's visiting your site, what they're checking out, and for how long. Sure, setting it up might feel like a bit of a chore, but trust me, you don't want to skip it.

Now, fast forward to 2024, post-Google Analytics' classic version era.

Google Analytics 4?

Not my cup of tea. It's like they took something complex and made it... terrible and complex.

So, I've turned to simpler, more user-friendly alternatives. Plausible Analytics is my go-to. It tells me exactly what I need to know—visitor numbers, page views, engagement, without all the fluff.

Fathom is another great pick, equally straightforward. Both are perfect for keeping tabs on site performance and setting those all-important conversion goals.

It's analytics, minus the headache.

⚙️ Tools used ⚙️

Going Live: The Final Frontier

And here we are, the grand finale: deployment. The ribbon-cutting ceremony for your digital creation.

Having both a staging website and a live site is the game plan here. Because let's face it, what you’re building in your cozy local dev environment might not function or behave the same way once it's up on a server.

For hosting Full Stack Founder, I chose Digital Ocean, this is where the servers live. I use Laravel Forge to spin up and manage those servers

Statamic, the CMS that I use, is based on Laravel and Laravel Forge is one of the most popular and easy-to-use services for managing and hosting your websites and apps, or in my case Statamic.

So, Full Stack Founder is officially live!

Swing by, take a look around, and while you're there, don't forget to sign up for the free Saturday morning newsletter. It's packed with insights, ideas, and everything in between to fuel your full stack journey.

Brian Casel

Brian Casel

I'm a full stack founder who has been bootstrapping and building products and services businesses on the internet for over 15 years.

How I can help

I currently offer product strategy consulting and coaching for fellow software product founders. To learn more and check availability, click here.

Don't miss an issue

Join thousands on the journey to growing as a full stack founder. New issues sent weekly by Brian Casel.

Subscribe on YouTube

Tune in to Full Stack Founder on YouTube, where Brian creates new videos every week on design, development, products, and entrepreneurship.

Subscribe on YouTube
Full Stack Founder

Receive new issues of Full Stack Founder, sent by Brian Casel to your inbox every Saturday.

© 2024 Full Stack Founder