Let’s face it – who doesn’t want to be a code ninja? According to a recent Stack Overflow survey, 10% of developers identified themselves as ninjas! Funnily enough, more than 7% self-identified as rockstars!
That is kinda true, coders have become like rockstars, creating disruptive and innovative technologies in every sector.
For “normal” people, what coders do is like a black art and that is why I think many developers embrace this image and joke around saying that they are ninjas!
It’s like a funny concept in the developer world. It has even become embedded in the ninja definition!
a person skilled in the Japanese art of ninjutsu.
a person who excels in a particular skill or activity.
“the courses vary—you don’t have to be a computer ninja to apply”
In this article I will introduce the best web server for WordPress. Drive Your Online Business Forward With Managed WordPress Hosting From WP Engine!
WordPress is one of the most powerful frameworks for building amazing web sites and you need the best web server for WordPress. You need a WordPress hosting platform!
One of the issues, is that WordPress can be challenging to setup by yourself and even once you get setup it becomes hard to scale your website as it grows!
Why Choose Managed WordPress Hosting?
Often overlooked, WordPress hosting is one of the key component of every successful website. Choosing the best managed WordPress hosting platform for your needs can drastically improve your search engine visibility and increase sales.
Introducing WP Engine
Thrive amid high-traffic demands, suddenly changing markets, and unforeseen conditions. Create robust and reliable websites with direct cutting edge technologies and one-click management.
With a full time engineering staff and dedicated labs team, WP Engine are defining the bleeding edge of WordPress technology. Unlock your brand‘s full potential by leveraging their innovations.
WP Engine are proud of our people as they are of their technology. WP Engine commitment to individual and community success makes WP Engine a trusted technology partner to customers.
Your visitors are impatient. And if your site is slow, they’ll take their business elsewhere. But with WP Engine, your visitors are staying put. Sites run four to six times faster on WP Engine unique front-end technology than on another environment. Every WP Engine customer benefits from the same robust, enterprise-grade software technology stack. So whether you have a personal account or a dedicated enterprise solution, you always get an efficient, scalable, secure WordPress experience.
Overall, WP Engine is the WordPress hosting solution that I highly recommend.
Build faster, protect your brand and grow your business with a WordPress platform built to power remarkable online experiences.
WP Engine provides best-in-class customer service on top of innovation-driven technology. This is why over 60,000 customers in 120 countries have chosen us for their mission critical WordPress hosting needs.
In summary, WP Engine is the best web server for WordPress so check it out today!
20% Off WP Engine
We partnered up with WP Engine to bring you 20% off with a special promo code!
Service Provider: WP Engine
Start Date: 20/02/2017
End Date: none
Promo Code: wpe20off
Last time, we covered the key HTML5 tags used when building web pages. We also saw an example combining all the newly learnt HTML5 tags in a single page. In this module, I will introduce you to the secret most programmers won’t tell you! This module is a bit different because we are going to focus on the process of learning a new language. And believe me, you will love it! OK ready?
Watch Supporting Video on YouTube
Google will almost write the code for you
Yes You Read That Right!
When learning a new language, learn the very basics and how it all fits together, take time on this step, then jump straight in and start coding. Then, this is the secret – Google will almost write the code for you! I can feel your doubt…
Let’s Address The Doubt With An Example
Allow me to demonstrate.
So far in this free beginners course, we have learnt most of the HTML basics. We learnt to write HTML code using an advanced text editor. Additionally we found out how to adhere to the HTML standard. We covered the basic structure of an HTML document. Also, we can now use HTML tags and attributes. We can view the results in a web browser. Then we edit, save, view the results and repeat this loop until we are happy with the result. Remember this is called iterating in programming speak. We got this process locked down! As a result, I would argue, we now know HTML!
“Ah but we only learnt a few HTML tags”, I hear you say! “I don’t know HTML at all! For example, I want to make my text bold and you have not shown me how to do that!”
Yes that is true. BUT you understand the process now! The rest you can figure out by yourself easily as long as you know how! All we need to do, is find the missing piece and fit it into our code.
This is where Google comes in. Just search “how to make text bold in html”. Pick a result that looks like a good match. Stack Overflow usually provides the best results because the best answer has the most up votes from other programmers!
We just learnt that the correct tag to use is <strong>! It is so simple! We don’t even need to remember anything and believe me even the best programmers who juggle multiple languages sometimes forget simple HTML tag names or attributes. In this example, the answer had over 80 up votes on Stack Overflow which gives us confidence that the answer is correct.Let’s try it out:
<strong>WOW - I just learnt a new tag!</strong>
And the browser will show you…
WOW – I just learnt a new tag!
A Word Of Warning
It won’t always be this easy, especially when you are looking for answers to more complex questions. However, as long as you got the fundamentals of the language understood and you have your iterative loop locked down, you can learn how to do incremental things in a breeze!
You simply need to provide the context to Google by supplying the language you are using, in this case HTML and then what you want to do in plain English. Then you need to find an answer from a reputable source like Stack Overflow, take the answer, plug it into your code and test it out!
In fact, the rest is just practice and learning how and where to plug things! I kid you not!
As long as you understand the language fundamentals, you can do this. Trust me, the best programmers do this all the time. It even makes sense, if I want to do something new, I want to see how other programmers are doing it and look at best-practices to find the most efficient way possible! What better way to find out then to consult the best programmers from around the world? It’s like crowd-programming!
However, if you have not learnt the language basics and do not fully understand what is going on, do not have your iterative loop setup, you will likely not be able to join up the dots and will end up guessing and getting into a mess.
The Process Of How To Learn
It may feel like cheating, but it is not. It is just a good way to incrementally increase your knowledge of the language you are learning. The best thing for a beginner to understand is the processof how to learn.
I’ve lost count how many times I have applied this technique over the years as a programmer! I still do it today.
As your experience, knowledge and confidence grows, you can feed back into the community by posting your answers to Stack Overflow (or another programming forum) to more complex questions and help other people out. Programming is about sharing and it is also about the journey. As you go from rookie to guru, you will experience this. Programmers are hippies at heart really! 🙂
Another big mistake new people often make is they learn the whole language. They read all the theory, all the examples, all the intricate details. And then, they say – “now what?” They are stuck! On the one hand, they have learnt the language but are now facing a wall. They don’t know how to apply the knowledge they have gained. The best way is to learn the basics, have a small project in mind and then let the creativity drive you, learning what you need along the way!
The Pace Of Change
It may feel like a cop-out, but it’s not. It is actually necessary to learn this way. We learnt the most common HTML5 tags in the previous module and there is little point learning more at this stage.
Technology is changing at a staggering pace and the days where you read a manual and became good at a language are over. There is constant change and keeping up with the latest and greatest has become part and parcel of being a good programmer.
Another example, I use WordPress for this blog. When I want to add a new piece of functionality, I do a bit of research and see if there are any cool plugins with good ratings I can use. Then I might customise them a bit. Because I know HTML, CSS, JS and PHP fundamentals I can make a few changes to get the functionality I want, learn something new along the way and get up and running very quickly.
New Terminology You Learnt In This Module!
Learn the basics, get coding and learn what you need as you go! Leverage other programmers’ knowledge in what I like to call crowd-programming!
That’s the end of “The Secret Most Programmers Won’t Tell You” module. The key point, there is no point learning EVERYTHING about a language. Just understand the big picture, get something basic working and learn what you need as you go along by drilling down into the details. The more you use a language in practice, the more of an expert you will become. You can then dive deeper into particular areas that your project requires you to become knowledgeable about. There is no point learning every tiny detail because it is not necessary. Moreover, it is almost impossible.
Learning programming is a continuous journey of keeping yourself up to date too, so you will never sit back and say “right I know everything about programming now”.
Let’s learn HTML tags! This is the third module in the How to Make Your Own Website Tutorial.
In module two, I introduced the “Hello World!” example using basic HTML tags together with the tools and process enabling you to make your first website! It was only one page, but it’s a start! I introduced you to a free advanced text editor and HTML5 tags. We also learnt that tags are defined by W3C and learnt a few basic ones such as <title>, <h1> and <p>.
You are now ready to learn the most common HTML5 tags enabling you to add more content into your web pages and bring them to life! The reason I say the most common, is that W3C defines a pretty big set of HTML tags but you rarely need to use all of them. It is sufficient to learn the most commonly used ones and then later pick-up a few more additional ones as needed. Most tags may also have attributes associated with them and again we will learn the most common ones to get you started in no time!
Remember, the key take-away from the previous lesson, your HTML code is written in a text editor, saved to an HTML file which has a .html extension and then the results can be viewed in a web browser.
So let’s continue learning and discover the top HTML5 tags you must learn. Let’s jump in!
Watch Supporting Video on YouTube
All HTML tags take the form:
Think of <tag> as marking the start of the content and </tag> as marking the ending of the content. The tag describes or marks your content to tell the browser how to show it. That is why HTML is known as a mark-up language. Notice how the actual <tag> is only visible in HTML code and only the content of the tag is visible when you view the web page in a web browser!
HTML Tag Attributes
Tags may also have attributes. HTML attributes are coded like this:
Think of an attribute as a name/value pair associated with the tag. It usually tells the browser additional information about how that tag should be displayed or how it should behave! The attribute value is enclosed in double quotes.
A tag may also have many attributes associated with it, not just one attribute. In such cases, HTML tags with several attributes look like this:
<tag name1="value1" name2="value2">content</tag>
This will become clearer once we learn about the link tag below!
The Header Tag
As we covered in module 1, the header tag is used to defined titles inside the HTML document. <h1> all the way through to <h6> are available to create titles and sub titles!
<h1>1. This is a title</h1>
<h2>2. Sub title</h2>
<h3>3. Sub sub title</h3>
<h4>4. And so on</h4>
<h5>5. One more sub title</h5>
<h6>6. All the way to header 6</h6>
This is how it looks on a web page:
1. This is a title
2. Sub title
3. Sub sub title
4. And so on
5. One more sub title
6. All the way to header 6
The Link Tag
This tag defines a hyperlink or link for short which points to another web page. It is also sometimes called an anchor. In HTML it is abbreviated to just <a>. The anchor may point to another of your own web pages or a web page created by someone else.
The basic structure of an anchor tag looks like this in HTML code:
Notice anything funny about the <img> tag? Look closely! It is one of the few tags that does not have a closing mark-up tag! An eagle eyed reader may have spotted that it does not end in </img> as you may expect. This is an exception to the usual tag structure and is this way for historical reasons.
The src attribute tells the browser which image file to download and show. This image file must be stored on your web server such that it can be accessed worldwide. The src tag can be relative or absolute. Relative simply means that the image is found with respect to the HTML page. So in the example above, the image file HTML5_Logo_512.png is expected to be available on the web server along side index.html file. If we specify an absolute path we would have the full web address (or URL) of the image file inside the src attribute.
The <img> tag also has a title attribute which will be shown when the mouse is hovered over the image on the web page. The alt attribute defines the alternative text to display if for some reason the image cannot be displayed by the web browser.
Modern browsers can display images in many different formats, but as a general guideline it is best to stick with PNG and JPEG formats.
On a web page the image tag would then appear like this:
The Line Break Tag
It is useful to break up text on a web page with a line break and of course there is a tag defined for that:
But it seems silly to just open and then immediately close the tag with no content. So for such empty tags (without content) there is a short hand syntax.
The Horizontal Rule Tag
Notice how some web pages break up the paragraphs using a faint line? Thats the horizontal rule tag in action and it looks like this:
In a browser it would be displayed like this:
The Div And Span Tags
The <div> tag defines a division in an HTML web page. It is particularly useful for formatting separate parts of a web page differently. Here is an example:
<div>It's really useful to learn HTML</div>
<div>Because it allows you to build your own web site!</div>
In a browser it would be displayed like this:
It’s really useful to learn HTML
Because it allows you to build your own web site!
A <span> tag is very similar to a <div> but it is usually used to surround a smaller amount of content. The key difference is that <div> will always be followed by a line break whereas <span> will be inline.
The List Tag
The list tag, abbreviated to <ul> allows us to have a list of items displayed on a web page using bullet points. <ul> stands for unordered list.
The <pre> tag is used to mark-up pre-formatted text. It is great for showing code in a web page for example. It can also be used as a neat way to show footer text too.
<pre>2017 Learn To Code London</pre>
And in a browser it would be displayed like this:
2017 Learn To Code London
Yes, we have been using the <pre> tag in this web page to format the code examples all along!
This tag is used for indicating long quotations:
<blockquote>You affect the world by what you browse</blockquote><p>- Tim Berners-Lee</p>
And this is how it would appear on a web page:
You affect the world by what you browse
– Tim Berners-Lee
Bringing It All Together
We have now covered the most common HTML tags and attributes, let’s bring it all together in one example web page! Remember, that HTML documents have hierarchy and we can nest our tags how we please to get the result we want!
Let’s take a look at an example – I like skateboarding so I’m going to setup a simple landing page for a made up website called RetroSkatr.com!
Take a bit of time to step through the code line by line. This will probably be your first hurdle that will require persistence. Try to see through the wall of code. There is structure, a hierarchy which simply brings everything together that we have covered so far into one big example. The best way to read it is in sections. Identify the <head> and <body>. Then look at each one at a time.
Our web page is good, but still looks pretty boring! Don’t worry, we will bring it to life over the next few modules! So stay tuned.
1. Try playing around and changing the example. Grab the code, copy it into your text editor, save it to your computer in a file called index.html and then open that file in a web browser to get started.
2. Try setting up a new web page about a topic that interests you!
New Terminology You Learnt In This Module!
An anchor is just another name for a link.
A short hand is an abbreviation that programmers use to make their code more concise.
A relative path starts from some given working directory, avoiding the need to provide the full absolute path.
An absolute or full path points to the location in a file system, regardless of the current working directory
Syntax is the structure of code in a language. We are learning HTML syntax. Syntax can also be applied to natural language. For example, the syntax of English is the arrangement of words and phrases to create well-formed sentences.
A landing page is a simple web page which serves as the primary entry point for a website. It’s aim is to catch the attention of the visitor and get them interested in a particular product or service.
That’s the end of “Top HTML5 Tags You Must Learn” module. We learnt the most commonly used HTML tags and combined them into a simple web page selling skateboards! We also saw HTML attributes in action.
Welcome to the HTML tutorial! This is the second module in the How to Make Your Own Website series.
In module one, I introduced the core fundamentals for web development and in this HTML tutorial it is time to continue our journey. You learnt that a browser is a program that knows how to take a URL, fetch the required resources from a web server and display the retrieved web page for you. We also learnt why we need to learn HTML and the benefits of doing so!
Now you are ready to actually create your first web page and see this process in action for yourself. Let’s jump right in to HTML!
Watch Supporting Video on YouTube
The Right Tools For The Job
As we are about to learn how to code up web pages using HTML, we need some tools. For web programming, I highly recommend you download and install a good text editor program on your computer. A good text editor will make coding more easy and fun. It will do handy things like auto-completion and syntax highlighting. That is, it will second guess and finish off code for you and highlight different code in colours making it easier to read! I recommend the following free text editors:
If you do not wish to install anything you can use a tool like Notepad but it will not have features to help you code like syntax highlighting.
You will need to do this tutorial on a laptop or desktop computer. It cannot be done on mobile or tablet unfortunately, because those devices are primarily designed for content consumption, not creation, so they do not have the required functionality.
You will also need a browser but luckily this comes pre-installed with all computers these days. I am doing these steps on Microsoft Windows using the Google Chrome browser but any Operating System (OS) and browser combination will do, the HTML code will always be the same.
Introduction To HTML
Hyper Text Markup Language (HTML) is a structured language for describing web pages. The “markup” part refers to a set of tags. Each tag describes content within a web page. A website is simply a set of web pages.
HTML was originally developed at CERN by Tim Berners-Lee in 1980 as means for scientists to create and share information. It is always useful when learning a new language to check out its history and understand why it was created and what problem it was designed to solve. This helps put what you are learning into context.
HTML allows us to create and publish pages online. We can include text, images, video and other rich content. It also allows us to navigate from page to page using hyperlinks or just links for short.
Everything you see online is essentially HTML!
You Can Check Out HTML Code Of ANY Web Page
You can see the HTML source code for any web page. How you do this will vary browser to browser. In Internet Explorer, right click the page and click on “View Source”. In Chrome, right click the page and click on “View Page Source”. This will bring up the HTML code for that page! Try it!
Your First Web Page – Hello World!
It is usual when learning a new language to do the most basic thing first. Tradition has it that the first program when learning a new language should say “Hello World!”. Don’t ask me why, it is just a fun thing that programmers do!
Open up the text editor you downloaded and type in the code below. I advise you to actually type it in, rather than copy and paste it. This will force you to think about it and you will understand the structure more intuitively!
Note I am using CodePen to show source code in this tutorial series. If you click “EDIT on CodePen” you can open this code and play with it!
This is how it should look if you are using Sublime Text.
Now save the file somewhere on your computer, for example on your Desktop and name it – index.html
Go to your Desktop or wherever you saved your file to. Right click it and select open with and select a web browser. You can also usually drag the file into an empty browser tab. Again this part may vary depending on the OS/browser combination you are using and may require a little trial and error!
Once you open it successfully in a browser it should look like this!
Congratulations! You just created your first web page!
What’s Going On Here?
Well, we created an HTML document. Each part of the document tells the browser something about the content it needs to display!
DOCTYPE marks the document type to be HTML
An HTML tag starts with <tag> and ends with </tag>
The content of the tag is between the start and end
<html> tag describes the HTML document
<head> is data about the HTML document or meta data
<title> is the title of the HTML document
<body> is the actual content of the page
<h1> is heading 1, we also have h2, h3 to h6
<p> is a paragraph
HTML code is not case-sensitive but it is usual to write it in all lowercase
Notice also how the tags are nested forming a hierarchy. Each web page will have a common structure. Each web page will have a <html> section, a <head> and a <body>! Notice also how each line of code is on a new line and is indented using tab – this is just to make it easier to read and see the structure.
Why not take a moment to have a play around with your code changing the text and seeing what happens? Try adding additional sub header using <h2> tag and test what happens. Save your code in your text editor and refresh the browser using F5 to see the results!
This is called iterating, where the developer changes code and then checks the results and then repeats the process continuously, refining their work as they go. The tighter this loop, the less chance of introducing difficult to fix bugs into your code. You should aim to make small changes and double-check those changes work before moving on as a general programming principle.
Where Do These Tags Come From?
WWW Consortium (W3C) maintains and develops the HTML specification with input from commercial software vendors. It is continuously evolving and we are currently on HTML5. All the different browsers implement the HTML specification.
New Terminology You Learnt In This Module!
An HTML tag is a special code structure used to “markup” an HTML document.
This is the code that the programmer writes.
A hyperlink or simply link is a pointer to another web page.
This is the way coders indent their code to make it more readable.
This is the process of writing code in small increments and then testing it and repeating this process.
HTML5 is the current version of the HTML specification.
Also known as an OS, it’s the base software that runs on top of the hardware – such as Windows, Mac OS or Linux.
CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. Developers can quickly create web code snippets and share them!
That’s the end of the HTML tutorial. We learnt how to create a very simple first web page and see it in action using a browser. There are many other tags for use in HTML and we will cover the most common ones in the next tutorial!