Check out my first WordPress website! https://www.midiatoursglobal.com/

As a visual graphic designer, I got on board the Squarespace train when I was looking for a platform to build my portfolio website. It’s easy to use with many built-in features, you can create gorgeous websites quickly, and I didn’t have to code. I knew I was missing out on the mysterious world of WordPress and beyond, but I didn’t really know where to start when it came to building a beautiful WordPress website (and as a designer I can’t settle for less than beautiful). I was overwhelmed.

Then I got the client Midia Tours Global, a European travel company expanding its offering into the USA, that preferred to have their website built on WordPress so it could be hosted on a server of their choice (with Squarespace you are forced to use the Squarespace servers). I told him I could definitely figure it out, but it will take a bit longer as I’m in the process of learning WordPress. He was fine with that (as long as I didn’t charge for my learning time of course) so this finally pushed me to learn.

Now that I’ve created my first WordPress site, I am absolutely stoked about the amazing sites you can build on the platform, with way more flexibility and creative freedom (and faster server options, aka faster websites… I’m not the biggest fan of Squarespace’s server…). I have rambled to friends thinking about learning to build websites, so I wrote down some things I learned along the way and what I recommend if you are ready to build your first WordPress website. Of course just contact me if you are starting out and want advice. I’m fresh from getting over the learning curve and am happy to help!

Building your first WordPress website? Read this before you start!

1. Become Website-Savvy (aka – learn some code)

You will want to be familiar with how websites are actually built before you jump in. You really don’t have to be a master at coding to build a great WordPress site, but you’ll be way more comfortable and be in a better place to expand your skills as you build websites, as long as you have a good base.

I’ve dabbled in learning code here and there, as it’s also useful for my full-time gig as a digital marketer. But even though I knew HTML and CSS I still didn’t fully understand how to apply my learning and actually turn my HTML and CSS into a live site. So I was kind of stuck.

Then I came across a complete web developer course on Udemy for only $20 –  I have taken great lessons for free from CodeAcademy and General Assembly which gave me a good HTML/CSS/Java base, but the Udemy course is what made me understand the full picture – how websites are built, how I actually put a domain name on a hosting service, using a good tool (FireFTP) to upload files to my website, and ultimately make my work come to life. I ended up actually building my first WordPress website with a premium theme that comes with this course.

Also you should start playing with the chrome developer tools (also you should be using the Chrome browser if you aren’t already. It’s great for developers. You can also use Firefox if that’s your jam but I like Chrome). This will help you explore websites you like and then learn from their code, and apply it to yours.

My favorite things to do with the Chrome developer tools are:

1. View Page Source – this shows you how the current page you are on was built – sometimes you can see things like “this website was built on Squarespace” or type in “wp-” in your Finder and you may find the website was built on WordPress. (you can also use builtwith.com to find out what tools/CMS a website uses).

Right click, then select “View Page Source”

If you do it on my website you will see this at the top of the code!

2. Inspect Element Tool: Right-click on an element on a webpage, like the header, for example, and click “Inspect”. Chrome pulls up a sidebar that shows you where the element is within the site’s code, and provides the CSS and other properties being applied to the element. So if you want to find out what font something is, this is a good way to use it (or just install FontFace Ninja on your browser). You can even change the font size to see how it may look before you make any changes on your own website. You can also change the HTML to say what you want, if you just like messing with websites ?  wpmudev has a good article on all the ways you can use this tool, but I def recommend installing it and having a play around when you are browsing the interwebs.

Right click > Inspect”/> Hover over the element you want to check out > Right click > Inspect

The screen on the right gives you all the info you need. Plus you can edit it and see how it shows up live on the website!

2. Build an actual website for someone

As I said, what finally pushed me to really learn how to build WordPress websites is because one of my clients wanted a WordPress website, and I wasn’t going to turn down work just because I refused to learn one of the most essential skills for a web designer. So you should find a friend starting a business, or someone who wants a portfolio website, or maybe you want to just start your own website, and commit to building one that needs to be live in 2-3 months. Then you have something real to work towards.

However, don’t start with an existing website – you could mess it up or accidentally ruin its SEO when you’re just starting out (unless it’s a horrible website no one looks at). If you really just want to learn without publishing anything live, just learn in a local development environment (the web course I mentioned shows you how to do that. It’s easy). But having someone rely on you to build the website really motivated me, so that may be helpful.

3. Goals, navigation design and branding FIRST

I tried to work out the navigation design and branding before diving into the website build because that makes the process a lot smoother. But even then, I got too excited (I just wanted to learn how to make the website already) so I didn’t really solidify my client’s branding and font choices until I was making the website. It’s a much smoother process to determine the purpose that the website will serve, exactly what information will be on it, what are any CTA’s (call-to-action for the viewer) and color and font choices before diving in the build. Of course you’ll learn by trial and error but if you are tight on time spend the extra effort at the start and it will save you tons of time down the line.

I changed the font combinations on this site 6+ times by uploading custom fonts and testing everything in the CSS only to change it all again… until I finally just did the font design in Adobe Illustrator and then chose the final combination before installing online – that was so much faster hah…

Also, you should definitely determine the goal of the website because you will also ask the question “how is this page/element serving the goal” so you should understand that before diving in!

4. Then choose the Theme – child theme or use a premium theme with a website-builder

Once you have identified the purpose for the website and know what type of information will live on the website, you’ll need to choose a theme – go to wordpress.com/themes to check out some free themes you can start with, or you can check out premium theme websites like themeforest.

People use themes so they don’t have to build the whole site from scratch. You just use the theme as a base and then you customize from there. You want to use a theme – this is what people do (I thought that was ‘code-cheating’ at first but then realized there’s plenty of other coding work to be done – so start with a theme!!!). Great web developers build themes/templates from scratch, but I don’t recommend that when you’re starting out (three wordpress sites deep and I still would not be able to do that).

Some themes like the X theme come with a website builder so it’s really easy to customize the website content by adding blocks of theme and design elements without any code. They also often come with support team that answers questions quickly – in the essence of time I used this theme for my first wordpress website (which came free with the Udemy course!).

If you pick a free WordPress theme and want to customize a bit more, then you will have to make a child theme. You never edit the code of the main WordPress theme becasue when the theme updates, you will lose any updates you have. I’m not going to try and explain child themes here but know that you can do customization and build really cool websites by using one – http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

5. Reach out for help and feedback

There are tons of online communities and Meetups for WordPress development. Get in the mindset that once you start building a WordPress website you are a ‘web designer’ even if you are v confused. Just keep asking questions and people are happy to help (including me – I’m still a newbie but I can help clarify beginner stuff and we can learn together).

Don’t finish the website alone. Ask friends to check out your website and provide feedback – is it a smooth experience? Do they understand the offering/purpose of the website? Is anything missing? Is anything ugly? Do a few rounds of this to make sure the website is in a great place when you launch.

6. Never ‘set and forget’ !!!

The first mistake I made when I built my own website was that I created it and then pretty much left it there for 18 months until I realized it wasn’t me at all anymore! It needed serious updates. Web design is a fluid process – the digital world, your business and you are always changing – your website should reflect your evolution. As you or your business develops, you may want to add/delete/edit pages, update your branding, add new features as you get better at web design, etc.

You’ll also want to integrate with email marketing, SEO and social media to get more people viewing your work of art! Once you have this baby you need to keep learning and growing with the website. This is the fun part ?

I’m pretty excited to finally get over the initial learning curve of WordPress development – it’s opened a new door for freelance opportunities and I am much more easily able to help friends build their businesses, which is one of my favorite things to do. Let me know if you get stuck anywhere along the way and I can try to help while I keep learning too ! ☺

PS – I like this article for setting goals and expectations as you get started creating a website: https://www.inc.com/ilya-pozin/build-a-killer-website-19-dos-and-donts.html