A Smooth Start into Web Development
Codeacademy, Squarespace, and WordPress - 3 Website Tools for Beginners. Design by Nicole Shive | NicoleShive.com

A Smooth Start into Web Development

Marketers today wear many hats. In fact, in the past few weeks, I’ve written about a wide range of digital marketing tasks within the digital marketing industry, including

What do all of these digital marketing methods have in common? The majority of humans don’t understand back-end the code that makes them all possible!

A very simple definition "code" is written instructions in a particular language that computers can read.

Considering that websites are the underlying hub that businesses use to market and sell their products and services, marketers with basic website coding abilities have the following benefits over marketers who do not know how to code:

  1. Save time making quick fixes with basic coding knowledge without relying on busy developers
  2. Be more creative and think outside the box because they know what’s possible
  3. Be able to “speak the language” to translate complex changes and ideas between developers and designers

Marketers can learn how to code through interactive learning platforms such as Code Academy. When they’re ready to create or modify a website, they can pay a premium to use an easy web editor that does not require any coding knowledge, like Squrespace, save some money and use a slightly more complex editor like WordPress, or create a webpage completely from scratch using HTML.

Let’s dive into how to learn how to code through Code Academy.

Learning to Code Websites (Without Paying Expensive College Tuition)??

Using HTML to create a website is relatively simple. In fact, did you know you could publish a very basic webpage without using a platform like Squarespace or WordPress??

There are two coding languages involved in creating a webpage:

Hypertext Markup Language, or HTML as it is mostly commonly known, is often referred to as one of the easiest coding languages to learn.?

HTML is used to create the structure of web pages and websites, with a very simple level of design-editing ability. For example, you can create a webpage with a simple image, text headline, and some body text, and format the fonts and sizes of images. HTML is used to construct the page and display the elements in order.

Cascading Style Sheets, or CSS, is a coding language used to format the HTML by providing rules and instructions for how webpage content should be visually displayed.

To learn HTML basics, those motivated to create or modify websites can sign up for Codeacademy to learn how to use HTML to build websites.

In the first course on the “Intro to HTML” from Code Academy, users can practice coding their own basic webpage by following step-by-step instructions and seeing the results in real time.?

The image below slows off Codeacademy's dynamic hands-on-learning platform.

No alt text provided for this image
Codeacademy 3-screen layout from left to right; (1) instructions (2) code-it-yourself area (3) visual display

Thanks to the advent of online technical courses, marketers can confidently grow their skills in the ever-changing digital landscape.?

Website Building for Beginners

While learning how to write code from sources such as Codeacademy can be very useful for marketers, it is relatively easy to build websites without any coding knowledge at all.?

Aside from the code that “builds” the webpage, the most important thing needed for websites to function is hosting. Hosting is the process of renting a home on the internet for your website to live.?

Let’s put it this way. Imagine you are building a house out of bricks. First, you need to buy or rent the land to build upon. In this case, HTML are the bricks that create the structure of your house, and the website hosts are the landowners you rent the land from. You can’t have one without the other.?

WYSIWYG web editors (fun word, right?!) are a type of software that enables users to host their website and create and edit content in a form that looks identical to how it will appear when it is displayed online. In the world of web development, WYSIWYG?is an acronym for “What you see is what you get.”?

Two of the most common WYSIWYG editors are Squarespace and WordPress.?

Squarespace - A Premium Web-Building Tool

The easiest WYSIWYG editors to use are ones that allow users to drag and drop image boxes and content blocks and add their own content without modifying any code. Squarespace is one such editor.?

Squarespace currently has 3.79 million subscribers – and that number keeps on growing. It is a privately owned company that raked in $621.15 million in revenue in 2020.?

Squarespace aims to offer convenience, customization, brand equity, and lower costs than hiring a developer

Squarespace aims to make it easy to create beautiful and functional websites for all purposes from setting up an online shop to creating a political webpage.?

Creating a website in Squarespace does not require any coding ability. It uses a drag and drop functionality that is common for WYSIWYG editors. Users can drag headlines, text boxes, image placeholders and more into the spots on the page that they want them to appear. The software “writes” the corresponding HTML code behind the scenes.?

To get started building their site, users

  1. Fill out a questionnaire what the website is used for and the website theme (such as health and beauty)
  2. Select the website layout preset with fonts, navigation, and image boxes
  3. Sign up for an account
  4. Personalize
  5. Publish

I created this 5-page website in less than three minutes. It even came with images and content. After swapping out the content and pictures for my own, the site is publish-ready.

No alt text provided for this image
Squarespace website homepage

To make modifications, users click the text the right-hand panel.

When it comes to pricing, businesses pay around $30 per month to build and publish a Squarespace website.

However the real cost is the switch cost – after they put in the work setting up their site, it ends up becoming really difficult to move website platforms, so users are somewhat forced to continue paying for many, many years.

For people needing a convenient, fast, and beautiful website at a relatively low cost, Squarespace is a great option. But what other options are out there??

WordPress – The Most Popular Website Building Tool in the World

43% of all websites are built on the WordPress platform, including my portfolio website.?

WordPress provides users the ability to build, edit, and host their website all in one place. It can be free to build and host a website on WordPress, but it is also more difficult to use.?

There are two versions of wordpress, Wordpress.org (referred to as “the real WordPress”) and Wordpress.com.?

Unlike Squarespace, nobody owns Wordpress.org. Wordpress.org is an open-source software, which means anyone can see the code and contribute to make the software better. Wordpress.org is the version most people use when they build a site through Wordpress.?

Wordpress.com is owned by a company called Automattic. Automattic makes money by selling advertising on sites that use the free hosting service.?

The difference between Wordpress.com and Wordpress.org is that the former (.com) is a hosting software service, and the latter (.org) is a website editing software service.??

As you can see already, setting up and building sites in WordPress is more complex than Squarespace.?

Like Squarespace, WordPress users do not need to know any programming code to build and design a WordPress website, but it does take more technical know-how and patience than Squarespace.?

However when you build a site with WordPress, you’re not alone! There is a huge community and well-known resource base called WP Beginner to help people learn to use the platform.?

When I built my portfolio site I tried the free version of WordPress. However, with my background in graphic design, I quickly became frustrated by:

  • The pre-set WordPress layouts. Yes, there is a selection of WordPress website designs called “themes”, but the free ones are pretty outdated and basic (see below)

No alt text provided for this image
All the free wordpress themes

  • The free WordPress hosting required my website to end in .wordpress.com and would have featured ads. My website would have been NicoleShive.Wordpress.com, which would have doubled the length. To remove the text after my last name and keep my website ad-free, I needed to upgrade to premium hosting.
  • The clunky interface: after selecting a theme, I wanted to edit the pages to put my own design spin on it. Without knowing coding, it was difficult to customize the header and footer and the inner page content.

I built my site in WordPress, but ended up using?a “plug-in” (a piece of software that “plugs into” your site to add enhanced features and capabilities) called Elementor.?

Elementor allowed me to drag and drop images and headlines (like you can with Squarespace), and manually adjust font sizes, button spaces, padding, and other design aesthetics without using any HTML. I used the free version of Elementor, but had to sign up for hosting to use the free version.?

I purchased the domain nicoleshive.com and hosted it using a platform called HostGator, which is the majority of my monthly website expense. All said and done, my website costs me about $32 per month, although I would save about 33% if I subscribed to the annual pricing model.

While I am proud of how my website turned out, do I wish I knew how to write HTML well enough to build my own pages, exactly how I want them to look without using Elementor? Heck yes!?

The Wrap-Up

When it comes to building a website, we have three options:?

  1. Live with standard WordPress webpages and spend a great deal of time getting them to work for us
  2. Pay a premium to design and host the website easily
  3. Learn how to write HTML so you can save money on the website builder, save time designing the webpage, and have a site you love.

Investing time in learning HTML early on is the best approach to building a website.

Knowing HTML can help marketers make website adjustments on their own without waiting for developers to do it for them.?

Codecademy makes it easy to learn HTML. There’s nothing standing in our way.?

要查看或添加评论,请登录

Nicole Shive的更多文章

社区洞察

其他会员也浏览了