Screen 4

The aim of this site is to help you learn the basics of frontend web development. There are 3 main components.

• Games
• Tutorials
• Tests

The games should help you to learn some basics about the JavaScript programming language. The tutorials will cover HTML, CSS and JavaScript. The tests will help you consolidate your knowledge.

The tutorial pages contain explanations and examples but the games do not have a lot of explanation. On these pages especially (but also on other pages) we recommend you use the Chrome Inspector to analyse the page. You can use the Inspector to see which HTML elements are used and how they are styled with CSS. You can understand about CSS Selectors and Rules. You can also use the Inspector to analyse the JavaScript. At the simplest level you can just download any JavaScript files and read them. Beyond that you can use the debugger to set breakpoints and watch variables.

On this page are two videos based on our simple Dino game which show you how to use the Inspector.

The site uses the Bootstrap framework . When you anaylse the CSS you will see examples of Boostrap CSS in the source map files *.scss. Our own CSS files have the extension *.css. There is one main file and some projects have their own styles.css file in the same directory as the project.

The site does not use a JavaScript library and all the JavaScript examples use native DOM manipulation techniques. We think this is the best way to learn.

HTML and CSS in the Chrome inspector

JavaScript in the Chrome inspector