The secret to coding your own website

Any creative entrepreneur will tell you that experimentation comes with the territory. You constantly have to make the choice between money and time. Do you pay someone to do it for you or spend the time to figure it out on your own? When you’re just starting out, the answer is usually to figure it out on your own.

So we begin our entrepreneurial journey writing our own contracts, doing our own bookkeeping, and generally making up the rules as we go along. And yet, most creative entrepreneurs tell me that as much as they’d love to make changes to their website, they don’t know what they’re doing, and they’re too scared of messing it up to try.

The secret to coding your website from elembee.com

I’m going to let you in on a little secret: Even the most experienced developers don’t always know what they’re doing or if they’re doing it right. Code is constantly changing, and the possibilities are endless. Sure, there are standards, but for anything you build online, there are probably multiple correct solutions. Often, what separates one solution from another is personal preference.

So if you really want full control over your website? You have to practice. You have to learn through trial and error, like you would anything else in your business.

If you really want full control over your website? You have to practice.Click To Tweet

I get it, it’s still scary to mess with the one point of contact between you and your customers, that online storefront that’s paying your bills. Here are a few ways you can practice coding and still sleep at night knowing your website is safe and sound.

Play with Google Chrome developer tools

Did you know that with the Google Chrome web browser, you can change the code of any website, without affecting the live version? Right click on any element of your website, then click on “Inspect Element.” This opens the website code in a special footer, with the HTML on the left and CSS on the right. By default, the element you clicked on will be highlighted, and you’ll see the CSS rules that apply on the right. Click around the HTML, and you can see the CSS rules that apply to each area. Then, you can actually click on any CSS rule to edit, or even add new rules. You can also uncheck any line to disable it.

This is a great way to play around with CSS because you can actually see what happens when you make changes. Disable rules to see what each of them do. Change values to understand the different options available. And write your own code when you’re comfortable! The best part? If you don’t like it, simply refresh the page, no harm done.

Did you know that with Google Chrome web browser, you can change the code of any website?Click To Tweet

Take lessons on Codecademy

Codecademy is an online, interactive platform where you can learn to code for free. While the lessons won’t necessarily apply directly to your website, they’ll give you the background knowledge you need to tackle the changes you want to make with confidence.

All of the coding happens directly on their website, so you don’t have to worry about downloading programs, creating site backups, or messing anything up. You only need to login and pick up where you left off!

Create a staging version of your website

Ideally, you’re already running website backups regularly (I recommend BackWPUp or BackupBuddy). Most web hosts allow you to run multiple WordPress installations, so you can install a new WordPress site on staging.yourdomainname.com, then restore a recent backup. This will give you an exact copy of your site that you can mess around with. Just restore from backup again if you mess something up! You’ll also want to install Hide My Site for password protection so that search engines don’t see your duplicate site, and readers don’t come across the wrong version.

Alternatively, my preferred web host Flywheel (affiliate link) offers 1-click staging sites. All you have to do is turn on staging, and Flywheel automatically creates a copy of your site in a password-protected area. If you like the changes you make, you can even push them to your live site, and Flywheel will copy everything over for you. And if you don’t, simply turn off staging, and it’s as if it never happened.

Create a site for a passion project

I actually started this site in September 2010 as my own digital playground for coding for WordPress. I spent the first two years redesigning and recoding my site every few months. Eventually, people started asking me for help with their sites, and that’s how my business was born. Yes, I knew how to code before starting my blog — but I knew absolutely nothing about WordPress, and today that’s my specialty. It all started here.

The great thing about creating a website for a passion project is that it gives you a real-world example to work with, but it’s low-pressure, which makes it easier to experiment and be OK with messing things up.

Want to learn code? Create a site for a passion project to play!Click To Tweet

Join Creative Code Club

If you want to learn WordPress and coding in short monthly lessons with community support, join us in Creative Code Club! Each month I share videos focusing on different aspects of WordPress and coding, and you can actually see how I work as a developer, mistakes and all! Learn more and join for less than the cost of one hour of WordPress support.

Like this post? You'll love my emails!

Enter your email below, and each week I’ll send you quick + easy tips to help you take control of WordPress.

Meet the author

Hello! I’m Lisa M. Butler, and I help people build better websites. As a WordPress developer, I’ve built more than 100 websites on WordPress. I help my clients take their websites to the next level and teach them how to take control of their online presence. Through my blog, weekly emails, and club, I share that same advice with online creative entrepreneurs and publishers just like you.