Not long ago, President Obama expressed that computer language courses should become a requirement in American public schools, striking up a debate about whether or not everybody— young and old– ought to be learning how to code these days.
As business owners, our work-lives call for us to be resourceful and self-sufficient well beyond most conventional jobs, so naturally you might be worried that lacking these skills could handicap your business, or worse, send you falling behind the times.
But truth be told, the way I see this playing out is much less dramatic.
Not everyone has the personality to enjoy or excel at coding– just like not everyone is cut out to be a biologist or creative writer, despite these subjects being required learning in schools. So if you’re a busy entrepreneur with no genuine interest in computer languages, you have my permission to cut yourself some slack!
Only those with a real passion for code will completely master it, whereas beginner-to-intermediate level web and app development can be easily and inexpensively hired out (if not purchased in the form of existing software, apps, themes, and plugins), freeing you up to focus on the work that’s truly most valuable for you to be doing.
Rather than invest a major amount of time into learning how to code, my personal suggestion would be to opt for basic familiarity instead. Because just a few well-chosen nuggets of technological wisdom can go a long, long way when you have a website or blog to tend to.
To show you exactly what I mean and get you started, I compiled this short list of 5 basic actions that every online business owner should know how to do with code. They’re as simple as it gets, but I guarantee that if you’re not already familiar with these 5 quick gems, they will prove extremely handy!
HTML Code To Know
HTML code can be found in files that end with .htm, .html, and .php.
HTML is the foundational skeleton of a website, which can be visually styled later by another type of code called CSS.
The gist of HTML is that it uses little instructions called tags to give commands to the web browser. Tags are always surrounded by the angle brackets “<” and “>”.
Usually there is an opening and closing tag like this:
Text or images inside the tagThese tags affect the content between them in some way.
Other times there is a single self-closing tag like this:
These are used for standalone elements like images or line breaks that don’t need to contain content within them.
1. Links
In HTML code, a basic link uses the “anchor” tag, abbreviated as “a”. It looks like this:
The linked text shown on the page.The text between these tags is what will appear on the page (typically as blue and underlined, unless otherwise specified in your CSS code).
Notice the href=”” inside of the “a” tag. Depending on the kind of tag you’re writing, there will be a few options like this (that look like option=””) available to you. This one in particular, href=””, is where you enter the URL of the website you want to link to.
To force the link to open in a new window or tab, you can simply add another specification, target=”_blank”, as illustrated below.
Linked text.2. Images
In HTML code, you can insert images using an “img” tag, that looks like this:
The URL of the image you want to display should go between the quotes of src=””.
(Tip for WordPress users: If you’re not sure where your image is, open up your Media Library and click “Edit” on the existing image you’d like to use. The edit page includes a File URL you can then copy-and-paste.)
The alt=”” specification is where you can write a quick description of your image. This description will show to search engines and to your users when the image is moused over.
If you would like to use the alt=”” portion to tell the search engines what your image is about, but it’s not the same text you’d like to show when the image is moused over, you can add title=”The description that will show when the image is moused over”.
You can also add an exact width or height in pixels (width=”0″ and height=”0″) if you don’t want the image to display in its original size.
3. Headings
Also in HTML code, it’s good practice to use “h” tags to specify your most important titles, headings, and subheadings because Google looks to these in order to rank your site properly.
They’re just as simple as this:
<h1>Most important title or heading.</h1>
<h2>Second most important title or heading.</h2>
<h3>Third most important title or heading.</h3>
<h4>Fourth most important title or heading.</h4>
To give you an idea of how to use these “h” tags, take Fairground Media, for example.
Here, I use “h1” tags for the title of my site and the title of the blog post you’re looking at– because these are the most important things on the page. Headings within my blog posts are all “h2” tags. Finally, the blog post titles in the right sidebar are all “h3” tags. I don’t use “h4” tags at all.
Notice I don’t use subheadings very often within my blog posts. Other people do, so they’ll likely distribute their “h” tags a bit differently.
4. Common Text Formatting
Basic text formatting works similarly to the “h” tags above.
Here are some of the various styling tags available to you:
Text inside these tags becomes italicized. Text inside these tags becomes bolded. Text inside these tags becomes underlined.Adding a single one of these tags creates a line break, so the text after it starts on a new line.
CSS Code To Know
Finally, let’s touch on CSS code, which resides in files that end with .css.
CSS is a styling language. You can’t insert anything onto your website with CSS alone, but it allows you to manipulate the visual style of any HTML element on your website.
5. Basic Style Tweaks
If you take a peek into a .css file, you will see many blocks of code that look like this:
body {
font-family: Verdana;
font-size: 15px;
color: #000000;
}
In this example, the “body” portion is called the selector. It identifies which HTML tag on the website you want to style.
The “font-family,” “font-size,” and “color” are called properties.
You can select pretty much anything on a website and style its properties using CSS.
Most importantly for our purposes, you can simply tweak the CSS that your theme’s creator already wrote to make elements on your website look the way you want them to!
To illustrate, let me walk you through how you might find and change your website’s font in your CSS code.
- First thing’s first, you need to find your main .css file. (Hint: In WordPress, it is called “style.css,” and you’ll find it by going to your Dashboard > Appearance > Editor.)
- Once there, if you know the font that’s currently showing up on your site, you might try pressing Ctrl + F and searching the page for its name. If you don’t know the name of the font, you might search instead for “font-family,” which is the property that controls this.
- Once you find the font, replace it with the name of the font you want to use instead, like Arial, Trebuchet, or Georgia. Then, do another search using Ctrl + F using the name of the font you just replaced, to be sure you find and replace every instance where it appears in the file.
- Then save your changes, and voila! New font!
A limitation every new CSS-manipulator runs into is not knowing all the possible selectors and properties.
No worries; you can always consult this list or this other one in order to find exactly what you need.
You can also try Googling the problem or posting to an online forum for live feedback when you really need it. A lot of people write CSS code, so there’s an endless well of wisdom and guidance available.
So, whaddya say?
Anyways, I hope this list of basic coding tips makes your life easier!
Bookmark it if you need to. Copy-and-paste my code examples if that helps. And share it with your friends if they could use the info too!
In conclusion, I’d like to pass the mic to you. Do you think everyone should learn to code fluently? Are you committed to learn a bit of code for yourself? Has this article been helpful?
Be sure to sound off in the comments below!