Before I move forward, I just wanted to confirm that you do not need to know how to code to make a website and I really think that WordPress is the best option if your business is NOT a pure web product:
- you are selling something physical (ecommerce)
- you are selling a non tech related service directly or even via a small marketplace
- you are selling advertising on an article based website
So many people have used WordPress to do this before. All the bugs have been ironed out for you and all you have to do is concentrate on running your business.
If you are not in these 3 categories, please feel free to jump directly to #learn to code)
The problem with using CMS platforms like WordPress and their thousands of âoff the shelfâ plugins is that you may feel limited by the kind of businesses you can build.
I say âfeel limitedâ as although you can more or less build any project with WordPress, not understanding code will make you dependant on the quality of the pluginâs documentation and its client support.
This is when learning to code can completely change your business. It will give you confidence (itâs really not that difficult) and open your eyes to exciting growth opportunities.
#Learn to code
Learning to code is a great idea if :
- you want to take control and be more independent in your WordPress/CMS environment
- you want to build your own web or mobile product
- you want to manage a team of developers to build your product for you
So basically learning to code is a great idea⌠letâs give it a go!
When you type âlearn to codeâ on Google, youâll be overwhelmed by the number of coding languages and learning options available. There are countless forums arguing about the best way to get started. And the first snippets of code you come across and the terms used by developers can be very frightening.
First, letâs simplify and demystify : HTML and CSS !
The REAL basics of coding are HTML and CSS. These 2 languages are useful for anybody in web development, design but also any business owner that is interacting with clients online.
HTML gives the structure of a webpage
CSS makes your webpage look pretty
With just HTML and CSS you can build an awesome looking website with hundreds of pages ! However these pages will be static. This means that to change something on 10 pages, you will need to open each page and make the relevant change. And thatâs hard work.
For anybody on WordPress, basic HTML and CSS are more than enough for you to grow your web presence. What you are doing here is understanding the structure of your website and using the power of WordPress to make your website dynamic.
The very good news for everybody, is that HTML and CSS are dead easy to learn!
Learn HTML
HTML is about using tags to structure your webpage.
Lesson #1: If you open a tag <tag> you have got to remember to close it like this </tag>!
Lesson #2 : The html structure of a basic webpage will look like this :
<html>
<head>
</head>
<body>
</body>
</html>
<html></html> : tells everybody this is html
<head></head> : thatâs where you put information to tell machines about your website. If you put <title>My Title</title> between <head> and </head>, it will put My Title in the tab of your browser. This code is not seen by the users.
<body></body> : if <head> was for machines, <body> is for your users. Itâs where you show the users the content for your website.
Letâs try this. Open notepad and copy :
<html>
<head>
</head>
<body>
</body>
</html>
Save the notepad as index.html
Go to the file and open it in your browser > itâs empty right ?
Now, between <body> and </body> add âI love codingâ.
Save and refresh ⌠you should see :
Congrats !!!!! Youâre coding !!! đ
Letâs do one last thing. Add <h1> tags arround âI love codingâ
It should look like this :
<h1>I love coding</h1>
Save, refresh⌠is your âI love codingâ a lot bigger now?
Congrats again, youâve just made a title! đ
Coding is easy nuh??
Obviously there is a lot more to learn, but hopefully this will show you that coding is that complicated.
Letâs move on to CSS
Learn CSS
CSS allows you to link your html tags to design styles. Remember that <h1> tag from above. Itâs CSS that tells your h1 tag to go bigger or smaller, or to change color, or to be underlined.
Try this : between <head></head> in your notepad add:
####################
<style>
h1 {
Color: red;
}
</style>
##################
Save and refresh.
You have told your CSS to take anything between h1 tags and make them red!
Again, there is lots more to learn about CSS. But thatâs the idea. You create a HTML page with tags. You create CSS that assigns design to the tags.
To move on from here, Iâd suggest following a quick tutorial on Codeacademy. The HTML and CSS courses are free and Codeacademy do a good job of making learning quite fun and addictive.
Is HTML and CSS enough ?
For wordpress owners : yes itâs enough for 90% of business owners. However, if you find yourself more and more frustrated because you canât build exactly what you want.. then read on…
For others : after HTML/CSS youâll need to learn another language to make things move on your website.
HTML and CSS check.. What next?
Deciding the next language to learn can be quite paralysing. You want this new coding skill to be transferable to further projects. Itâs a balancing act between learning something that will quickly be useful for you now but also still be current in a few years, so you donât have to start from scratch.
There are a few decent options for web development, but for anything frontend today Javascript seems like the obvious choice. Javascript is not that difficult to learn and is really powerful. You can more or less do anything. Only Python seems to be more trendy these days, but itâs more a data language than front end. Youâll quickly see that the principles between languages are quite close. Get one language right and then itâs lot easier to learn a second language down the line.
Learn Javascript
A few definitions :
Variable :
You give a name to a variable and it holds bits of data. Itâs called variable because the elements inside a variable can vary (smart ;-))
Arrays:
Itâs a single variable that stores data
Methods that can be applied to arrays
.push : adds an element at the end of an array
.pop: removes an element at the end of an array
.shift : removes the first element of an array
.unshift : adds an element in the first position of an array
.slice (first, last+1) : remove elements from an array > is not mutating
.splice(indexstart, how many indexes to remove, ‘word to replace’): remove elements after indexstart, and replace them all with a new one.
.join(‘ ‘) : join all the arrays together to make a sentence, removing the ,
Functions:
Functions make things happen. Think about Excel. When you write in cell A4: = A2 + A3. You are writing a function to cell A4 to become the sum of A2 and A3.
Basically with functions, you can play around with data to get the result you want to show. There are a lot of predefined functions that you can put together to create more complexe ideas and calculations.
You can also use functions to interact with other languages like HTML and CSS.
For example :
Whenever a user lands on your website, randomly show them different background pictures.
DOM manipulation
DOM manipulation is making things move on the front end of a webpage. Start manipulating with Javascript
