⛔ This position is no longer available

Would you like an opportunity to give back to the community, convey your insight and wisdom to receptive learners at a fast-growing company?

If you answered yes, then we have some news for you.

We are currently looking for motivated, passionate, and knowledgeable individuals who want to give back to the community by writing video lesson summaries. These are short summaries of our video tutorials that include explanations, additional resources, screenshots and code snippets. You will be writing these summaries in our WordPress backend.

This is a flexible, paid contract-work position, and there are several openings for this position. Topics available range from Android (Java, Kotlin), iOS (Swift), Unity, Phaser, frontend and backend JavaScript & web development, Python data science and machine learning, and Excel.

–

To apply go here.

Selected candidates will be contacted via email.

Example of a Lesson Summary

See below an example of what these summaries normally contain. What you will find below is both an embedded video lesson and it’s corresponding summary:

In this lesson we will be going over how to include images on your page.

We will be looking at two different cases where the image is in the same folder as your HTML files, and the second case we will look at is where the image is in a different folder or sub folder.

Make sure you have downloaded the source code files for this course, and if you have done so go to the folder that’s called images, that has the assets for the images lesson,and you will see there is an image called “background.png” and we will be using this image file for the case in which the image is in the same folder as the index file.

There is also a folder called images and inside that folder there is another image called “another image.png” this will be used for the case where the image is located in a sub folder.

The Image Tag

The tag that we use for images is called the “img” tag.

Add the following code below to the file we have been working with in previous lessons:

<img src="background.png"></img>

Save this and refresh the web page.

Now, this is a sandwich without filling, and there is something that feels wrong about this.

There is something in HTML called self-closing tags, and you use that whenever you don’t have this situation. This is used when tags don’t have an inside filling, you just close them using the self-closing tag.

The best way to think of them is by thinking of a donut, which is in some way a self closing sandwich with no real filling.

They can have attributes as well, but it doesn’t have an actual filling. The tag that is shown in the image above is called the “break” tag. This tag is a tag that can be used to add new lines inside of a paragraph.

So for example we can add a break tag like so:

<p>I want <br/> to learn coding</p>

Save and then refresh the page ans it will look like this in the browser:

So we have jumped a new line, and you can add multiple lines.

Don’t use this for actually positioning your elements because that’s done with CSS.

Images in Sub Folders

If you want to include an image that is located in a sub folder, you have to type in the name of the other folder and then forward slash and the name of that file which is “another image.png.” See the code below:

<img src ="images/another image.png" />

Save this and refresh the page.

So this has shown the other image that we wanted to include.

Summary

To summarize, the “img” tag is what we use to include images.

The source or the SRC attribute, allows you to specify the location of this image. If the image is an external page and you know the full URL, you can include it.

If the image is in the same folder as your page, you can just include the name.

If the image is in a sub folder or many sub folders, you can use the forward slash until you find the file, and then specify the full name of the file.

Some tags and the img tag is one of them, that don’t have a filling, can be presented  as self-closing tags, for which the donut example was used.

So now have a play with the code you have written, and continue to the next lesson.