WordPress has made the web so easy that almost anyone can build a website. However, learning the basics of how web pages work enables you to build a better blog. Use these resources.
A large number of websites, millions in fact, are built using just four technologies and these are:
- HTML
- CSS
- PHP
- JavaScript
Only professional developers working for large commercial websites use other technologies and if you have a blog or website you almost certainly use the listed items above.
They are fundamental to the web and to the way that WordPress works. All web pages on WordPress websites, and even on many non-WordPress websites, use these technologies.
By learning a little about how they work you can do a lot more on your website. You can use fancy tricks like setting the background colour of text to highlight it. You can create text or image boxes that text wraps around. You can change the colour of links on the page, choose different font sizes and more.
You don’t need to learn coding, become a programmer or developer to use these technologies, you just need to learn the basics of how they work. Just enough to tweak your website.
Here is an example of what I mean. The screenshots are from the old classic post editor in WordPress, but the same can be done with the Gutenberg block editor – click the three dots in the top right corner of the post editor and select Visual editor or Code editor to switch between editing modes.
You can also click the plus to insert a block, type classic into the search box and add the Classic block. It is simpler for doing this sort of thing.
1 Highlight some text in the WordPress post editor with the mouse.
2 Set the colour to yellow. (If you don’t see the second row of icons, click the icon at the far right of the toolbar.
3 The colour of the selected text is now yellow.
4 Switch to the Text tab and look for the word color. This is the text colour.
5 Change it to background-color.
6 Switch back to the Visual tab and now the text is highlighted in yellow.
This is not a feature of WordPress, but knowing a little CSS enables the code to be tweaked. How would you do it otherwise? Use a plugin?
(If you use UK English like me, you have to remember to use the US spellings for everything, so color and not colour.)
I hope I have convinced you that knowing a bit about the technologies used to build web pages is useful. It really is and a little knowledge goes a long way.
Here are some free apps for your phone that enable you to learn these web technologies.
The aim is not to become a programmer but take the introduction and first module or two for HTML, CSS, PHP and JavaScript. You don’t need to complete the courses, just learn the basics.
SoloLearn: Learn to Code for Free
This app is available for Android phones and the iPhone and it has a nearly perfect score of 4.8/5 on Android. It is brilliant and it is a great way to learn about a wide range of coding technologies.
Tap the first icon in the toolbar and a list of topics is displayed, among other things, and there is a search facility if you cannot immediately see what you want. HTML, CSS, PHP and JavaScript are all here and selecting one enables you to begin a course.
HTML Fundamentals is excellent and I would at least take the part Overview and HTML Basics sections. The lessons are short and it offers more than boring text, you get to try things for yourself with little bits of code. There are multiple choice questions, fill-in-the-blanks questions, drag-and-drop questions, and more.
PHP Tutorial’s first three modules are useful but if you can go a bit further then you will understand more about how WordPress works. WordPress is powered by PHP.
CSS Fundamentals is another excellent course and the first four modules are great for learning the basics. CSS controls the way things look and is a big part of WordPress themes.
The app has a very strong community and you can ask questions, get answers and follow conversations about coding. Many tutorial lessons have dozens or even hundreds of comments.
SoloLearn is an excellent app and is recommended.
Encode: Learn to Code
Encode is another free phone app that is available in the Google Play Store and Apple App Store. Just search for it. The app focuses on three technologies, Python, JavaScript and Web. Ignore the first two and press the Web button in the bottom right corner.
The Web section has tutorials on HTML building blocks like text, lists, links, images, and so on. A bit further on is CSS styling elements I and II, colours and fonts.
Lessons involve changing code snippets, and writing tiny bits of code, which can be done by tapping the list of items on the screen. No need to type. The app is not quite as polished as SoloLearn or as beginner-friendly but is still very good and is recommended.
W3Schools Offline FullTutorial
W3Schools is my go-to site whenever I want to know how to do something in code on a web page. It is one of the best resources on the web.
This is not really a tutorial and it is more like a dictionary explaining terms or perhaps like a Wikipedia for web developers. I use it to look up things.
For example, if I want to know how to draw a border around a paragraph of text I will go and look up borders in CSS and it shows the syntax and options. You can then just copy what it says, paste it into your web page (the text tab in WordPress post editor) and tweak it to suit you.
This is a fantastic resource to use after learning the basics of HTML, CSS, PHP and JavaScript in the other apps. Use it to look up things when you aren’t sure.
