146 lines
10 KiB
HTML
146 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
||
<title>percolating ideas: my web dev adventure | d@n tech</title>
|
||
<meta name="generator" content="Jekyll v4.3.4" />
|
||
<meta property="og:title" content="percolating ideas: my web dev adventure" />
|
||
<meta name="author" content="dustin newkirk" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="Creating a website is more than just coding; it’s about having a vision and bringing it to life. Recently, I embarked on an exciting web development adventure that was both personally and professionally fulfilling. Over the course of two weeks, I built a website for my friend, a dedicated mental health counselor, using HTML, CSS, Bootstrap, and PHP. Here’s a glimpse into my journey, from the initial brainstorming sessions to the final launch, and everything in between." />
|
||
<meta property="og:description" content="Creating a website is more than just coding; it’s about having a vision and bringing it to life. Recently, I embarked on an exciting web development adventure that was both personally and professionally fulfilling. Over the course of two weeks, I built a website for my friend, a dedicated mental health counselor, using HTML, CSS, Bootstrap, and PHP. Here’s a glimpse into my journey, from the initial brainstorming sessions to the final launch, and everything in between." />
|
||
<link rel="canonical" href="https://dustin.coffee/tech/2025/02/19/percolating-ideas-my-web-dev-adventure.html" />
|
||
<meta property="og:url" content="https://dustin.coffee/tech/2025/02/19/percolating-ideas-my-web-dev-adventure.html" />
|
||
<meta property="og:site_name" content="d@n tech" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2025-02-19T00:00:00-05:00" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta property="twitter:title" content="percolating ideas: my web dev adventure" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"dustin newkirk"},"dateModified":"2025-02-19T00:00:00-05:00","datePublished":"2025-02-19T00:00:00-05:00","description":"Creating a website is more than just coding; it’s about having a vision and bringing it to life. Recently, I embarked on an exciting web development adventure that was both personally and professionally fulfilling. Over the course of two weeks, I built a website for my friend, a dedicated mental health counselor, using HTML, CSS, Bootstrap, and PHP. Here’s a glimpse into my journey, from the initial brainstorming sessions to the final launch, and everything in between.","headline":"percolating ideas: my web dev adventure","mainEntityOfPage":{"@type":"WebPage","@id":"https://dustin.coffee/tech/2025/02/19/percolating-ideas-my-web-dev-adventure.html"},"url":"https://dustin.coffee/tech/2025/02/19/percolating-ideas-my-web-dev-adventure.html"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
|
||
<meta name="keywords" content="" />
|
||
|
||
<meta name="google-adsense-account" content="ca-pub-5033279084799102">
|
||
<link rel="shortcut icon" href="/assets/logos/dn-tech-favicon-color.png" />
|
||
<link rel="apple-touch-icon" href="/assets/logos/logo-color.png"/>
|
||
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
|
||
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />
|
||
<script src="/assets/js/prism.js"></script>
|
||
|
||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5033279084799102"
|
||
crossorigin="anonymous"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrapper">
|
||
<header class="wrapper-header">
|
||
<div class="header">
|
||
<h1>d@n tech</h1>
|
||
<br>
|
||
<h5><i>Caffinated Tech Insights</i></h5>
|
||
<br>
|
||
<nav>
|
||
|
||
<a href="/">About & Contact</a>
|
||
|
||
<a href="/posts">Posts</a>
|
||
|
||
<a href="/categories/">Categories</a>
|
||
|
||
<a href="/resume">Resume</a>
|
||
|
||
</nav>
|
||
<hr>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<main class="wrapper-main">
|
||
<div class="main-content">
|
||
<div class="post-info">
|
||
<h2>percolating ideas: my web dev adventure</h2>
|
||
<p>19 Feb 2025 - </p>
|
||
</div>
|
||
|
||
<div class="post-content">
|
||
<p>Creating a website is more than just coding; it’s about having a vision and bringing it to life. Recently, I embarked on an exciting web development adventure that was both personally and professionally fulfilling. Over the course of two weeks, I built a website for my friend, a dedicated mental health counselor, using HTML, CSS, Bootstrap, and PHP. Here’s a glimpse into my journey, from the initial brainstorming sessions to the final launch, and everything in between.</p>
|
||
|
||
<h2 id="the-inspiration-behind-the-website">The Inspiration Behind the Website</h2>
|
||
|
||
<p>The foundation of this project was rooted in a profound purpose: to help my friend connect with individuals seeking mental health support. She had a clear vision for her website—a space that not only highlighted her counseling services but also provided resources, insights, and a sense of community. Understanding this, I was eager to turn her vision into a reality.</p>
|
||
|
||
<h2 id="planning-and-design-laying-the-groundwork">Planning and Design: Laying the Groundwork</h2>
|
||
|
||
<p>Every great project begins with a solid plan. We kicked things off with brainstorming sessions where my friend shared her ideas about the website’s content and structure. Together, we outlined the key pages:</p>
|
||
|
||
<ul>
|
||
<li><strong>About Page</strong>: An introduction to my friend’s background and her approach to mental health counseling.</li>
|
||
<li><strong>Services Offered</strong>: Detailed descriptions of the different counseling options available.</li>
|
||
<li><strong>Resource Hub</strong>: A curated collection of articles, tips, and links to support mental well-being.</li>
|
||
<li><strong>Contact Form</strong>: An easy-to-use form for potential clients to get in touch.</li>
|
||
</ul>
|
||
|
||
<p>Using Bootstrap allowed me to create a responsive and visually appealing layout. The emphasis was on clarity and accessibility, ensuring that visitors could find what they needed without hassle.</p>
|
||
|
||
<h2 id="development-process-turning-ideas-into-reality">Development Process: Turning Ideas into Reality</h2>
|
||
|
||
<p>My two-week development timeline was packed with creativity and learning. Here are some highlights from this adventure:</p>
|
||
|
||
<h3 id="week-1-structuring-the-site">Week 1: Structuring the Site</h3>
|
||
|
||
<p>In the first week, I focused on the website’s foundational structure, employing HTML to set up content organization. CSS came next, allowing me to craft the aesthetic that matched my friend’s compassionate and professional tone. Bootstrap was instrumental during this phase, enabling a swift transition to a mobile-friendly design that adapts to various screen sizes.</p>
|
||
|
||
<h3 id="week-2-bringing-functionality-to-life">Week 2: Bringing Functionality to Life</h3>
|
||
|
||
<p>With the structure in place, I sprinted into the second week, where I added PHP functionality for the contact form. This important feature would allow prospective clients to reach out without the hassle of dealing with their email accounts—a small yet significant convenience.</p>
|
||
|
||
<h3 id="version-control-keeping-track-with-github">Version Control: Keeping Track with GitHub</h3>
|
||
|
||
<p>Track changes was a breeze thanks to GitHub. Every implementation and tweak was logged in the repository, which not only helped streamline development but also made it easier to involve my friend in the feedback loop. Iteration and collaboration became the backbone of our process, ensuring the final product was truly reflective of her vision.</p>
|
||
|
||
<h2 id="hosting-and-domain-setup-the-finishing-touches">Hosting and Domain Setup: The Finishing Touches</h2>
|
||
|
||
<p>Once we settled on the design and functionality, it was time to get the website online. I opted to host the site on a virtual machine (VM) within my own server. This gave me complete control over the hosting environment and security features.</p>
|
||
|
||
<p>For domain registration, we selected Cloudflare, known for its robust features and security enhancements. This decision meant that visitors would benefit from faster load times and improved site safety—important factors when dealing with sensitive topics like mental health.</p>
|
||
|
||
<h2 id="conclusion-a-journey-of-purpose">Conclusion: A Journey of Purpose</h2>
|
||
|
||
<p>Building this website was more than a technical endeavor; it was an opportunity to contribute to a cause I truly believe in. Knowing that this platform can help connect individuals with the mental health support they need is immensely gratifying.</p>
|
||
|
||
<p>As my friend embarks on this new chapter of her practice, I’m excited to see how the website will grow and evolve. If you’re a mental health professional in need of an online presence or any kind of support to bring your ideas to fruition, remember: the journey may pose challenges, but the rewards are lasting.</p>
|
||
|
||
<p>This web dev adventure taught me that purpose drives creativity. Creating a meaningful website is not just an end goal; it’s a way to serve and connect with the community. Here’s to more adventures and the endless possibilities that come from percolating ideas!</p>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<footer class="wrapper-footer">
|
||
<div class="footer">
|
||
<span class="footer-text float-left">This work is licensed under <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPLv3</a></span>
|
||
<span class="footer-text float-right">
|
||
Site Updated: 2025-07-29 ET (<a href="/feed.xml" target="_blank">RSS</a>)
|
||
</span>
|
||
</div>
|
||
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
|
||
<script>
|
||
kofiWidgetOverlay.draw('dustinnewkirk', {
|
||
'type': 'floating-chat',
|
||
'floating-chat.donateButton.text': 'Support Me',
|
||
'floating-chat.donateButton.background-color': '#ff851b',
|
||
'floating-chat.donateButton.text-color': '#3D2200'
|
||
});
|
||
</script>
|
||
|
||
</footer>
|
||
</body>
|
||
</html>
|