Introduction to JavaScript

About this course

Want to understand the language of web? Eager to build your own website? This introductive course will bring you to the world of web. After step-by-step learning, you will lay a foundation for adding dynamic behavior, storing information, handling requests and responses on a website, etc.

JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before attempting to learn JavaScript, you are strongly advised to get familiar with these two technologies first. The detailed materials on HTML and CSS will also be given in our course.

Table of Contents

Session 1: Getting Started with the web

This is a concise series introducing you to the practicalities of web development. You’ll set up the tools you need to construct a simple webpage and publish your own simple code.

  • Installing basic software 
    • In this section, we show you step-by-step how to install just the software you need to begin some basic web development
  • What will your website look like?
    • We outline a simple method you can follow to plan out your site’s content and design
  • Dealing with files 
    • This section explains how to set up a sensible file structure for your website and what issues you should be aware of
  • HTML basics
    • Here you can get familiar with HTML
  • CSS basics
    • This section takes you through what you need to get started with CSS
  • JavaScript basics
    • This section gives you an idea of what is possible with this exciting language, and how to get started
  • Publishing your sample code
    • This section describes how to get your simple sample code online with minimum effort
  • How the web works
    • This section outlines what happens when you view a webpage on your computer

Session 2: Introduction to HTML

  • Getting started with HTML
    • This section covers the absolute basics of HTML, to get you started
  • What’s in the head? Metadata in HTML
    • The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. This section will show you the secret of the head of an HTML document
  • HTML text fundamentals
    • This section digs into how to use HTML to break a block of text up into a structure of headings and paragraphs, add emphasis to words, create lists, and many more
  • Creating hyperlinks
    • This section shows the syntax required to make a link, and discusses link best practices
  • Advanced text formatting
    • This section will introduce less well-known elements than the elements in HTML text fundamentals, but still useful to know about
  • Document and website structure
    • This section looks into how to plan a basic website structure, and write the HTML to represent this structure
  • Debugging HTML
    • This section will introduce you to some tools that can help you when something  is going wrong, and you can’t work out where the error in the code is

Session 3: Introduction to CSS

  • How CSS works
    • In this section we start off with a theoretical grounding
  • CSS syntax
    • Let’s dive into CSS syntax in a lot more detail
  • Selectors
    • We are going to show what selector types are available and how they work
  • CSS values and units
    • In this guide, we look at more common values like length, colour and simple functions, as well as exploring less common units like degrees, and even unitless numerical values
  • Cascade and inheritance
    • This section covers two systems which resolve situations where you have selector conflicts and elements nested inside other elements in enough detail
  • The box model
    • This section introduce the foundation of layout on the Web
  • Debugging CSS
    • This section provides the tools that can help you find errors in your CSS code

Session 4: JavaScript First Steps

Session 5: JavaScript Building Blocks

Session 6: Introducing JavaScript Objects

  • Object basics
    • We will look at fundamental JavaScript object syntax, and revisit some JavaScript features we’ve already looked at earlier
  • Object-oriented JavaScript for beginners
    • This section presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances
  • Object prototypes
    • We explore that difference, explain how prototype chains work, and look at how the prototype property can be used to add methods to existing constructors
  • Inheritance in JavaScript
    • In this section you will learn how to create “child” object classes (constructors) that inherit features from their “parent” classes
  • Working with JSON data
    • In this section we give you all you need to work with JSON using JavaScript, including parsing the JSON so you can access data items within it and writing your own JSON
  • Object building practice
    • In this section we dive into a practical exercise, giving you some more practice in building custom JavaScript objects

Session 7: Client-side Web APIs

If the course is of your interest, then simply register Hackathon and get started!

Acknowledgement: Mozilla Foundation

At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

With Oxford Entrepreneurs, we will open the course on July 14th London time at the Oxford Inspires.



%d bloggers like this: