I was recently asked to review some résumés for someone I work with at a large corporation in the Washington, DC area. She complained that she couldn’t find anyone qualified to do HTML5 banners. No one in the entire Washington DC area? I was amazed. HTML5 banners can be challenging, but with a little perseverance anyone can learn how to make them. There was clearly an opportunity here. An opportunity for me to give back to a community that has blessed me with a long fruitful career and more importantly an opportunity, for anyone interested, to break into a career in front-end web development.
My father always said a college education is essential to success in today’s world. He’s a very successful guy so who am I to argue? I think he’s right about the importance of an education and those who are blessed with that opportunity should go. If fully utilized, it is likely to accelerate your growth.
However, I never completed college and I do rather well. The reason is because my natural interests happen to be very much in demand. I’m hardly alone. Software Engineering, Back-end development, Front-end development, includes millions of people who, like me, are self-taught.
The digital universe presents an opportunity. At this point in time, an investment in a college degree is not required to capitalize on it.
Can you capitalize on it? Maybe. You were drawn to this book so you must have an interest. Maybe you can learn independently. This book is here to help you find out.
If what we do in the book excites you – if you can generate a sense of what’s possible with even this small taste, you just might be able to capitalize.
The goal of this book is four-fold:
- Eliminate overwhelming feelings about coding
- Expose you to fundamental front-end development concepts
- Teach you the best way to make an HTML5 banner
- and inspire you to grow through the use of HTML5 banners
The creation of HTML5 banners requires a skill that is a sub-set of a much larger collection of skills known as front-end development.
What is Front-End Development?
Front-end development could be described in many ways. In the interest of making this book as accessible as possible, I’m going to keep it simple.
Front-end Development is the process of using HTML, CSS and JavaScript to create the part of a website that people see and interact with.
So, when you visit a site like Amazon.com, or any .com for that matter, you are interacting with the work of front-end developers. Many very smart people spent and are spending an extraordinary amount of time thinking about how to make your visit to Amazon.com as easy as possible. They know this will result in you either liking their site, or at least not hating it. This in turn will result in you spending more time on it and ultimately making a purchase. What they present to you is the User Experience (UX) and it is the result of front-end development.
Of course, as the name implies, there is back-end development as well. Back-end development describes the aspects of a web site that you don’t see. These are things like databases and server side languages like PHP.
Excellent front-end development makes a lot of people a lot of money. Poor front-end development can destroy what is otherwise a good idea. Consequently, people who are good at front-end development are high in demand and can make an excellent income. As of 2015, the current salary for a front-end developer can be as high as $170,000 (US) annually. If you diligently read this book and do everything in it will you make that? Not right away. But it will put you on a path to where you can. If you’re like me, you’ll enjoy the journey in getting there.
As a sidebar, I am a little reluctant to try and motivate you by dangling large sums of money. Ultimately, money will not be enough to sustain your interest. Your interest should be born from curiosity and through the satisfaction of learning. That is what will keep you going over the long run. At the same time, the pursuit of financial security has inspired unbelievably humanitarian medical advances, technological, infrastructure – you name it. So, if money is the impetus for your ambition, let’s put it to use. The fact remains, front-end web development can pay very well.
Why HTML5 Banners?
Before I answer that, let me make sure you know what HTML5 banners are. If you’re visiting websites, you’ve seen banners. They are the advertisements that pay for the content you’re consuming. Up until August 1, 2015, these banners were made with Adobe Flash. On this date Google decided that banners made with Flash would be paused by default. Users would have to click a banner for it to animate. This would obviously be unacceptable to advertisers, so Google simultaneously proposed that everyone involved in digital ads, use a technology called HTML5. Google promised that if your banner was made using HTML5, it would not only automatically play, but it would play on mobile devices, which Flash could not. So, there we were. Google Chrome currently commands a considerable amount of the browser market share. Enough that, everyone knew that there was no choice but to use HTML5.
HTML5 banners are an excellent means of introducing you to front-end development, because:
- HTML5 Banners are relatively easy to understand and yet reveal the very same components used in much more complex front-end development projects.
- With a little imagination, a basic understanding of HTML5 banners will show a novice developer a potential path to much richer possibilities.
- HTML5 Banners don’t require a lot of expensive tools to make.
- HTML5 banners can be very satisfying to create.
- The ability to code HTML5 banners is a skill you can sell.
How to Use This Book
Before we get too far, let’s talk about ways you can absorb the contents of this book. If you’re able to retain what I’m writing by simply reading, then by all means please do. However, if you’re like me, learning happens by doing. There are several ways you can learn by doing.
The best way is if you’re reading this on a desktop or laptop. I’ve created a page dedicated to this book where all examples (and then some) can be easily retrieved in a sandbox environment that lets you see code and its output simultaneously. You’re also encouraged to edit the code and experiment in any way that interests you. Playing and experimenting are an excellent way to learn.
Please visit: https://dommermuth.com/html5-playground
This can also work from your Kindle or other type of tablet, but experimenting directly with the code will be a little more cumbersome just because tablets are not great for hands-on learning.
Another option is to use a text editor and copy and paste my examples into it.
Copy: Ctrl+C on PC, Command+C on a Mac
Paste: Ctrl+V on PC, Command+V on a Mac
Once you copied and pasted code, save it as whatever you’d like with an .html extension and open it in your browser. One caveat to this is that when you copy and paste, you may be pasting special characters that interfere with your intention. Quotes can especially be problematic. This is not just true for this book, but any time you copy and paste code.
Otherwise, the advantage of the latter means is that it is more like what a professional front-end developer would be doing.
What is HTML5?
HTML5 is the fifth version of HTML (Hyper Text Markup Language). It is a means for presenting content on the World Wide Web. HTML5 introduced many new capabilities and empowered front-end developers to do much more without third party tools like Adobe Flash. However, HTML5, for all its promise, is not a standalone language. Without CSS (Cascading Style Sheets) it surely won’t look good and without JavaScript it isn’t particularly robust.
In the field of front-end web development, HTML5, regardless of the official definitions you may find, is casually understood to be a combination of HTML, CSS and often times JavaScript. Technically, this is not really true, but when you talk to clients and people in the business, when they say “HTML5” they mean some combination of HTML5, CSS and JavaScript.
Let’s break that down into three parts. The first part being HTML:
HTML is a markup language that allows it’s user to display content in a browser using predefined tags or elements.
For example:
<p>Hello World!</p>
The <p> tag or paragraph tag is a means of telling the web browser that its contents should be displayed as a paragraph. Without it, “Hello World” would just be a line of text. You could hit the return key as much as you want, but there would never be a line break.
CSS let’s front-end developers control how the HTML looks in a refined way. CSS is a way of specifying the fonts, colors, sizes, positions and much more, of the HTML.
Let’s continue with our example:
<p style="color:red">Hello World!</p>
You can probably guess what color our example paragraph would be now. This is CSS or more specifically, inline CSS. There are many ways to write CSS, inline being one, but you can also write CSS in a completely different document and include it separately.
JavaScript is a scripting language that is capable of many things. It can be the tool that animates HTML. It can be the tool that allows for interaction with HTML. It can even be the tool that gets data from a database and in turn brings it to the ‘front’ so a user can see it. It can be used to make full-blown apps. For our purposes it’s going to be the tool that animates and adds interactivity.
Here’s a simple example of interactivity using JavaScript:
<p onclick="alert(‘Hello’);">Hello World!</p>
Can you guess what the new code does? You might be able to tell that the additional code involves what is known as a ‘click’ event in JavaScript. By adding the JavaScript onclick="alert(‘Hello’) to the <p> tag, we’ve told the browser the following:
When the user clicks “Hello World” an alert box will be displayed that says “Hello”.
Please do try it out by clicking the live example link above.
For the purposes of this book, we’re going to use JavaScript to animate elements within a banner. It should be said, that CSS3 allows for animation as well and is something that should be understood by the aspiring front-end developer. However, it is my intention to inspire and because JavaScript allows for so many possibilities in addition to animation, I feel it is important to introduce it. HTML5 banners are an excellent vehicle for doing so.