5 Step Guide to Becoming a Code Ninja!

How to Become a Code Ninja

So you want to be a code ninja?

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!

Ninja noun

a person skilled in the Japanese art of ninjutsu.

 

informal definition

a person who excels in a particular skill or activity.

“the courses vary—you don’t have to be a computer ninja to apply”

Let’s jump in!

Follow my  5 step guide to becoming a code ninja!

How to Become a Code Ninja?

Step #1

Read my best programming language guide.

Step #2

Come up with an idea for a mini project. Keep the scope small and manageable.

It’s best to go for a smaller project that you can see yourself finish in a few days rather than a large project that you may fail to complete.

Keep it small and fresh.

If you are stuck for ideas, just start making a web page around a topic you are passionate about.

Pick a hobby or something you enjoy and code around it.

Step #3

Choose your language! Don’t overthink this step, just go with a language that feels right, you can always learn a new language in the future.

If you are unsure, start learning HTML because it’s ideal for beginners. No special tools are required.

All you need is a text editor and a web browser and heaps of motivation!

Step #4

Allocate a full weekend for your ninja training.

Yes a full weekend.

I know you have stuff to do but trust me you will need a full weekend to get started.

Clear your schedule.

Forget your chores.

Cleaning, cooking and laundry can wait.

Forget socialising.

You are gonna become a code ninja!

Step #5

Take an online course for your language of choice.

Start learning and working on your mini project right away.

Hack away at your code until you get results.

Feel the burn but take regular breaks. Take a break every 45 minutes or so, stay well hydrated. You may become engrossed!

By Sunday aim to have something to show for efforts.

It will be amazing.

Let me know how you get on!

Best Web Server For WordPress

Best Web Server For WordPress

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

Technology

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.

Innovation

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.

Culture

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.

Performance

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.

Conclusion

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

best web server for WordPress
Special Offer!

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


Click Here To Find Our More About WP Engine

 

The Secret Most Programmers Won’t Tell You!

How to Make Your Own Website Tutorial

In this module we will cover the secret most programmers won’t tell you! This is the fourth module in the How to Make Your Own Website Tutorial.

If you have jumped straight into this section, make sure to start at the beginning and read through from module 1! If you jump straight into this module, it will probably not make sense and the secret will be a total waste!

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

The Secret

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!

Using Stack Overflow to learn
Using Stack Overflow to learn

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!

Crowd Programming

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 process of 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!

The Secret

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!

Summary

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”.

Next Module: How To Make Your Web Pages Look Cool

If you have any questions or comments please use the form below!

Top HTML5 Tags You Must Learn

How to Make Your Own Website Tutorial

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

HTML Tags

All HTML tags take the form:

<tag>content</tag>

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:

<tag name="value">content</tag>

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!

Example:

<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:

<a href="http://www.learn-to-code-london.co.uk">Homepage</a>

Notice how the href part above is an attribute to the anchor tag.

On a web page the link would then appear as:

Homepage

When you click the link, the browser will take you to that web page.

The HTML tag may also have an attribute called target. This attribute can be used to tell the browser to open the linked web page in a new window.

<a href="http://www.learn-to-code-london.co.uk" target="_blank">Homepage</a>

The Image Tag

As you may have guessed, the image tag inserts a picture into your web page! In HTML, the tag is abbreviated to <img>.

<img src="HTML5_Logo_512.png" title="HTML5" alt="HTML5">

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.

<img src="http://www.learn-to-code-london.co.uk/blog/wp-content/uploads/2017/02/HTML5_Logo_512.png" title="HTML5" alt="HTML5">

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:

HTML Tags

 

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:

<br></br>

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.

<br />

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:

<hr />

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.

<ul>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
</ul>

In a browser it would be displayed like this:

  • Monday
  • Tuesday
  • Wednesday

We can also have an ordered list:

<ol>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
</ol>

And in a browser it would be displayed like this:

  1. Monday
  2. Tuesday
  3. Wednesday

The Pre Tag

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!

Blockquote

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!

See the Pen XpQqWj by Learn To Code London (@learntocodelondon) on CodePen.

In the advanced editor:

HTML Tags
It’s easier to read HTML using an advanced editor

And in the browser it looks like this:

HTML Tags
Our example web page selling skateboards

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.

Exercises

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!

Anchor

An anchor is just another name for a link.

Short Hand

A short hand is an abbreviation that programmers use to make their code more concise.

Relative Path

A relative path starts from some given working directory, avoiding the need to provide the full absolute path.

Absolute Path

An absolute or full path points to the location in a file system, regardless of the current working directory

Syntax

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.

Landing Page

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.

Summary

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.

Next Module: The Secret Most Programmers Won’t Tell You!

If you have any questions please use the form below to comment!

Web Coding Using HTML

How to Make Your Own Website Tutorial

Welcome to the HTML tutorial! This is the second module in the How to Make Your Own Website series.

Imodule 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!

See the Pen Lxvdqy by Learn To Code London (@learntocodelondon) on CodePen.

This is how it should look if you are using Sublime Text.

HTML Tutorial
Your First Web Page

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!

HTML Tutorial
Your first web page in a browser!

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?

HTML Tutorial
HTML5

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!

Tag

An HTML tag is a special code structure used to “markup” an HTML document.

Source Code

This is the code that the programmer writes.

Hyperlink

A hyperlink or simply link is a pointer to another web page.

Nesting

This is the way coders indent their code to make it more readable.

Iterating

This is the process of writing code in small increments and then testing it and repeating this process.

HTML5

HTML5 is the current version of the HTML specification.

Operating System

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

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!

Summary

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!

Next Module: Top HTML5 Tags You Must Learn

If you have any questions or comments please use the form below!