Aug 3, 2016

The basics of coding - Ashley @ Nosegraze || #LITHW16

Hey bookworms!

Today we are presenting you the first guest post of Learnt It The Hard Way 2!

In case you missed it, Jillian and I kicked off the second edition of our blog event Learnt It The Hard Way on the start of the month! For those who don't know, it's a blog series consisting of blogging tips and tricks, and this year we're focusing on more external factors on blogging!

Today's post will focus on coding! If you're like me, then HTML would've been your biggest nightmare when you started blogging! Even after a year of blogging, I still get stuck with certain aspects of simple coding and has to run to help from someone. *cough* Jillian *cough*

So today we have Ashley from Nosegraze, to break it down and explain the basic coding knowledge a blogger would require! Ashley is not only an experienced blogger, she is also an expert at coding and even has a store for plugins and themes! Don't forget to check it out!

The floor's now yours, Ashley!

First let's get one thing straight: you don't need to be a coder to be a blogger. More specifically, you don't need to be a coder to use WordPress or Blogspot. In fact, both of these platforms come with visual editors and pre-made themes specifically to cater to non-bloggers.

My point is, if you're hesitant to start a blog because you don't know how code, don't be. You don't need to be a coder at all. There's nothing that requires code and you can 100% get by without using it.
That being said, knowing some code can be useful.

The two types of code

Okay there are actually a lot more than just two types of code, but we're only going to talk about the two most commonly used by non-coder bloggers: HTML and CSS.
HTML is used for adding content and structure to the page.
  • Want to insert an image? That's content. It uses HTML.
  • Want to insert a link? Content again—also HTML.
  • Want to add a new paragraph?
(A lot of those things can also be done in visual editors if you prefer.)
CSS, on the other hand, is for styling and controlling design.
  • Want to center that image? Then add like 15 pixels of white space below that image? That's design—CSS.
  • Want to change the colour of that link? CSS.
  • Want to increase the font size of paragraph text? CSS.
HTML is for adding content, and CSS is for changing how that content looks.

How to add code to your site

HTML is added exactly where you want the content to appear. So this would be inside your "Edit Post" box or inside your page.
CSS isn't added where you want it to appear. It's done separately.

Using WordPress?

On WordPress, you'll want to add a plugin for adding custom CSS. If you already have the Jetpack plugin installed, you can add CSS in Appearance > Edit CSS.
Otherwise, you'll need to install a separate plugin. I recommend Simple Custom CSS. Install this plugin, activate it, then you can add custom CSS in Appearance > Custom CSS.

Using Blogspot?

If you're using Blogspot, click "Template" on the left in the admin area, then click "Customize". On the next page, click "Advanced" then scroll down and click "Add CSS". You then add your CSS code in the box that appears.
Page for adding custom CSS in Blogger

Now let's look at a few examples.

Adding and changing link colours

Adding a link is pretty simple, and can easily be done through a visual editor, but let's take a look at the HTML side of it:
<a href="URL HERE">Clickable text here</a>
So a 'real' example might be:
<a href="">Visit my blog Nose Graze</a>

Visit my blog Nose Graze

If you wanted to change the colour of all links on your page, you'd need to use CSS. Let's check it out:

a {
    color: pink;

The first big (the "a") is the same as the tag we were using (<a>). Then inside the curly braces is a list of things we want to change about that HTML tag. In this case, I'm setting the color to pink. You can also use hex values like #e138cd.

Increasing font size

Changing the font size is also done in CSS. The days of using HTML to do it are long gone.

INCORRECT - Don't do this
<font size="5">My text here</font>
Instead of using HTML, we use CSS, like this:

body {
    font-size: 18px;
I'm using the body tag name here because that's where the default font size for the whole page should be set.

Centering text

Another one that people often get wrong is centering text. Here's how it USED to be done:

INCORRECT - Don't do this
<center>My text here</center>
This is massively outdated and no longer correct. Now we use a bit of HTML to give the centered text a name, then we use that name to style it in CSS. Here's what I mean:

<div class="text-center">My centered text</div>CSS:
.text-center {
    text-align: center;
You only need to add the CSS code to your site once. Then you can use that HTML over and over again wherever you want.

Creating links that look like buttons

This one is exciting! I'll show you how to create links that look like big buttons. This is great for sidebar links, like perhaps to your most popular blogging categories.

First, we need to use HTML to insert the links and also give them a class name. For example:
<a href="url here" class="pink-button">Clickable Text</a>

You can change the class name if you want, but it's important that you use the same name in the next step—the CSS.

.pink-button {
    background: #ef3b58;     /* Background colour */
    color: white;            /* Text colour */
    display: inline-block;   /* Just helps the link behave more like you'd expect */
    padding: 10px 15px;      /* Add space between the text and the edge of the button */
    text-decoration: none;   /* Remove the underline beneath the text */

Don't forget the period before the class name! And I added some comments to help explain what each line does.

Here's the final result:

If you want the buttons to expand to fill the whole sidebar area, you'd need to tweak the CSS a little. Change display: inline-block; to be display: block; then add a new line for text-align: center;.

Here's my final CSS now:

.pink-button {
    background: #ef3b58;     /* Background colour */
    color: white;            /* Text colour */
    display: block;          /* Makes the button have a width of 100% */
    padding: 10px 15px;      /* Add space between the text and the edge of the button */
    text-align: center;      /* Centers the text inside the button */
    text-decoration: none;   /* Remove the underline beneath the text */

Here's the new result:

You could use this to create category buttons like this:

If you want to add a hover effect, add a brand new block of CSS like this:
.pink-button:hover {
    background: #91ca01;     /* New background colour */

Learn little pieces at a time

Coding is like learning a whole new language. You don't have to learn it all over night. Don't overwhelm yourself! Instead, try tackling little bits and pieces at a time. This is where Google will be your new best friend.
  • How to create a link in HTML
  • How to center an image HTML CSS
  • How to add space below an image HTML CSS
  • How to change the background colour CSS
  • How to create columns HTML CSS
Those are some useful search queries you could use on Google. Those are probably exact things I searched for back when I was brand new to coding.
There's a lot you can do with code, but there's also a lot you can do without it. So if coding doesn't feel like your cup of tea, then there's no shame in sticking with the visual editor!

Are you interested in coding at all? Or is code one of those things you'd rather avoid at all costs?

Thanks for that informative post, Ashley!

No comments:

Post a Comment