Table Of ContentLEARN TO CODE HTML, CSS & JAVASCRIPT
LEARN TO
CODE
Learn HTML, CSS & JavaScript
& build a website, app and game
Written by
Garry Owen
I
LEARN TO CODE HTML, CSS & JAVASCRIPT
II
LEARN TO CODE HTML, CSS & JAVASCRIPT
CONTENTS
INTRODUCTION ............................................................................................................... 2
WHAT WILL YOU NEED? ............................................................................................. 2
ABOUT THE AUTHOR ................................................................................................... 2
CONVENTION USED IN THIS BOOK ............................................................................... 5
LESSON OBJECTIVE: .................................................................................................... 5
WHAT IS THE ‘HELLO, WORLD’ PROGRAM?............................................................. 5
STEP❶ - CONVENTIONS EXAMPLE ........................................................................... 5
HELLO, WORLD! .............................................................................................................. 8
LESSON OBJECTIVE: .................................................................................................... 8
WHAT IS THE ‘HELLO, WORLD’ PROGRAM?............................................................. 8
STEP❶ - CHOOSE A SUITABLE CODING EDITOR ..................................................... 8
STEP❷ - SET-UP YOUR FILE STRUCTURE ..................................................................... 8
STEP❸ - DEFINE YOUR HTML STRUCTURE ................................................................. 9
STEP❹ - EXPLORING THE USE OF CASCADING STYLE SHEETS .............................. 11
WHAT ARE CASCADING STYLE SHEETS? ................................................................. 11
STEP❺- ADD MULTI-LANGUAGE SALUTATIONS ..................................................... 14
STEP❻ - JAVASCRIPT FUNCTIONS .......................................................................... 16
WHAT IS A JAVASCRIPT FUNCTION? ...................................................................... 16
STEP❼ - ADDING IMAGES ....................................................................................... 22
FAST ACCESS WEB MENU ............................................................................................ 26
LESSON OBJECTIVE: .................................................................................................. 26
STEP❶ - INFORMATION GATHERING ...................................................................... 26
STEP❷ - ARRANGING THE FILE STRUCTURE ............................................................ 26
STEP❸ - DOWNLOADING AND PREPARING IMAGES .......................................... 27
STEP❹ - IMPLEMENTING THE HTML FILE STRUCTURE .............................................. 28
STEP❺ - PAGE LAYOUT DESIGN .............................................................................. 29
III
LEARN TO CODE HTML, CSS & JAVASCRIPT
STEP❻ - IMPLEMENTING THE PAGE LAYOUT WITH HTML ...................................... 29
STEP❼ - CHOOSING THE COLOUR DESIGN AND IMPLEMENTING THE CSS ....... 35
STEP❽ - ADDING WELL-FORMED IMAGE ELEMENTS ............................................ 41
STEP❾ - ADDING STYLES TO THE IMAGES .............................................................. 44
STEP❿ - IMPLEMENTING WELL-FORMED HYPERLINKS ........................................... 46
CREATING A WEB APP ................................................................................................. 52
WHAT IS A WEB APP AND HOW IS IT DIFFERENT FROM A WEBSITE? .................... 52
LESSON OBJECTIVE: .................................................................................................. 53
STEP❶ - SETTING UP YOUR FILE STRUCTURE ........................................................... 53
WHAT IS A JSON FILE? .............................................................................................. 54
WHY USE JSON? ........................................................................................................ 55
STEP❷ - IMPLEMENTING THE HTML STRUCTURE ........................................... 57
STEP❸ - BUILDING THE QUESTION BANK JSON FILE ................................... 62
STEP❹ - ADDING SOME STYLE .......................................................................... 64
STEP❺ - BUILDING THE JAVASCRIPT ENGINE ........................................................ 74
STEP❻ - THE BUILD QUIZ FUNCTION ....................................................................... 77
WHAT IS AN ARRAY? ................................................................................................ 85
STEP❼ - THE SHOW RESULTS FUNCTION ................................................................. 89
STEP❽ - SHOW EACH QUESTION ON ITS OWN PAGE .......................................... 92
STEP❾ - ADDING A COUNTDOWN TIMER ............................................................. 96
STEP❿ - ADDING USER ADMINISTRATION FUNCTIONS....................................... 108
HOW TO CONSTRUCT OUR HTML FORM .............................................................. 111
INPUT TYPE FORM ATTRIBUTES ................................................................................ 113
OTHER FORM ATTRIBUTES ....................................................................................... 114
STYLING OUR HTML FORM ..................................................................................... 121
GET DATA FROM THE HTML FORM AND ADD IT TO THE JSON FILE .................... 123
WHAT IS LOCAL STORAGE? ................................................................................... 126
IV
LEARN TO CODE HTML, CSS & JAVASCRIPT
CONSTRUCTING THE ‘REMOVE QUESTIONS’ FORM MARK-UP .......................... 128
STYLING THE ‘REMOVE QUESTIONS’ FORM .......................................................... 131
UPDATING QUIZ JAVASCRIPT FILE TO ACCOMMODATE LOCAL STORAGE .... 132
BUILDING THE JAVASCRIPT TO DELETE QUESTIONS ............................................. 133
HOW TO SET UP NAVIGATION BETWEEN PAGES ................................................. 140
STYLING OUR SIMPLE NAVIGATION MENU ........................................................... 143
JAVASCRIPT TO HANDLE SIMPLE NAVIGATION .................................................. 145
CREATING A PLATFORM GAME ................................................................................ 149
WHAT IS A PLATFORM GAME? .............................................................................. 149
LESSON OBJECTIVE: ................................................................................................ 149
STEP❶ - SETTING UP YOUR FILE STRUCTURE ......................................................... 150
STEP❷ - CREATING THE HTML FILE FOR OUR PLATFORM GAME ....................... 151
STEP❸ - CREATING THE CSS FOR OUR PLATFORM GAME ................................. 152
STEP❹ - CREATING ASSETS FOR OUR PLATFORM GAME ................................... 154
STEP❺ - CREATE AND REFERENCE TILES FOR BUILDING OUR TILE MAPS .......... 155
STEP❻ - CREATE AND REFERENCE SPRITE OBJECTS ........................................... 158
STEP❻ - CREATE THE MAIN JAVASCRIPT FILE TO TIE IT ALL TOGETHER ............. 159
STEP❼ - HANDLING THE START / TITLE SCREEN .................................................... 161
STEP❽ - BUILDING OUR FIRST TILE MAP ................................................................ 164
STEP❾ - DESIGNING TILE MAPS............................................................................. 168
STEP❿ - COLLISION DETECTION ........................................................................... 175
WHAT IS AN OPERATOR? ....................................................................................... 180
STEP⓫ - ADDING ENEMIES - BOTH STATIC AND MOVING ................................. 188
GAME OVER ............................................................................................................ 197
STEP⓬ - ADDING COLLECTABLES ........................................................................ 198
SPRITE SHEETS ........................................................................................................... 199
STEP⓭ - THE GAME MONITOR .............................................................................. 213
V
LEARN TO CODE HTML, CSS & JAVASCRIPT
STEP⓮ - ADDING MORE GAME SCREENS ........................................................... 216
STEP⓯ - ADDING SOUND (SFX) AND MUSIC ....................................................... 223
STEP⓰ - CONCLUSION .......................................................................................... 228
DEPLOYING YOUR PROJECTS ONTO A WEB SERVER ............................................. 229
FILE TRANSFER PROTOCOL .................................................................................... 229
WHAT IS SSL? ........................................................................................................... 232
WHAT IS SSH?........................................................................................................... 232
WHERE TO GO FROM HERE ....................................................................................... 233
CHECK OUT SOME OF MY OTHER PUBLICATIONS (YES I WRITE FICTION TOO!) ... 234
INDEX ........................................................................................................................... 236
VI
LEARN TO CODE HTML, CSS & JAVASCRIPT
~ 1 ~
LEARN TO CODE HTML, CSS & JAVASCRIPT
INTRODUCTION
Hello web developer!
Sit back, strap yourself in and get ready for a fantastic learning
experience. This book will take you through easy-to-follow, step-by-step
lessons and give you all of the guidance you need to write your first
program with some flair, make a useful website that will give you fast
access to all of your favourite places online, make a quiz app that fits
smartly onto your mobile phone and finally make a platform game. Top-
notch!
This book is designed for you to be able to code everything and run it in a
browser, and program it locally on your PC or Mac. In fact, by design
HTML, CSS, and JavaScript can be run in any browser and coded in almost
any text editor.
WHAT WILL YOU NEED?
Everything you need is available for free on Windows and Mac. Better
than that, what you need is built-in, if that’s the way you decide to go.
However, I would recommend using the Google Chrome browser (this is
not essential, you can use almost any browser), Visual Studio Code
(…again not essential, you can use Notepad or similar if you wish) and
lastly a hint of patience as you learn.
ABOUT THE AUTHOR
I have been coding in various languages for almost four decades. I work as
an IT Director and have been employed in Director level roles for almost a
decade.
~ 2 ~
LEARN TO CODE HTML, CSS & JAVASCRIPT
One of the first lessons I ever learned as a programmer was ‘Top-Down
Design’ and ‘Step-wise Refinement’. In simple terms, this means breaking
down a problem into ordered steps and then refining or optimising each
step and where necessary breaking those steps down even further.
Let’s take an everyday life example.
Make a cup of tea
1. Fill the kettle with water
2. Turn on the kettle
3. Add 2 tea bags to a tea pot
4. When the kettle has finished boiling pour over 1.5
litres of hot water
5. Stir the tea pot
6. Put the lid onto the tea pot and allow to brew for 3
minutes
7. Check the tea, if it is dark brown pour into a mug,
filling to about ¾ full
8. Add milk until it appears an even caramel colour
9. Add 1 tea spoon of sugar and stir
Okay, so each step here can be further broken down, but that is only
necessary if you need further clarification to understand the steps. That is
the same with computer programming and indeed any other problem
that you might face in your life.
For someone with prior knowledge, the instruction, ‘make a cup of tea’ is
more than adequate. Shy of a please and thank you of course!
You only need to break down a problem far enough for you to be able to
understand it. When you need to tackle a problem I highly recommend
this philosophy.
Let’s have some fun….
~ 3 ~
