In this level you will be learning the fundamentals of front-end development, this will include:

• Learning HTML, CSS, JavaScript
• Introduction to Single Page Applications
• Understanding / Using Browser APIs
• Creating a solution based on requirements

 

1. Single Page Application

What is a Single Page Application?

Watch the videos below on ‘What is a Single Page Application?’ and ‘How does it work?’ (take notes).

 

2. HTML

Click the image below and read the article ‘HTML Basics’.

Click the image below and follow the HTML Tutorial (remember to take notes and try what you learn).

3. CSS

Click the image below and read the article ‘CSS Basics’.

Click the image below and follow the CSS Tutorial (remember to take notes and try what you learn).

 

4. JavaScript

Click the image below and read the article ‘JavaScript Basics’.

Click the image below and follow the JavaScript Tutorial (remember to take notes and try what you learn).

EventListener

Click the image below and read the article on ‘JavaScript HTML DOM EventListener’

JavaScript Async/Await/Promises

Click the image below and read the articles async, await, promises’

5. Browser APIs

Click the image below and read the article “Client-side web APIs”.

Click the image below and read the article ‘Introduction to web APIs’.

6. IndexedDb

IndexedDB is a Browser API that allows a web application to store data inside a user’s browser. Because the data is stored locally, applications can work and query data regardless of network availability (online or offline).

We will be using IndexedDB in this Bootcamp as it simulates requests to server-side/external APIs.

Click the image below to learn more about Client-Side Storage.

Click the image below and read the IndexedDB API Documentation.

Level 1 Development

For the Level 1 Development Solution you will need to create a Job Board App in the DN Basic Web Framework, using the skill/knowledge you have gained from the learning resources/research in this level.

To make things easier, try to do one thing at a time. Split the problems you encounter into smaller steps for ease of understanding.

The PowerPoint below contains a list of requirements/wireframes for the Application. Your task is to create a Jobs Board Application that meets all of the requirements.

Important – Requirements and wireframes are important, make sure you follow them ;).

PowerPoint – Job Board Brief

Spreadsheet – Jobs Dataset

Suggested Approach: Experiment/Fail, it’s OK:

• Get familiar with the DN Basic Web Framework.
• Try adding new sections for each of the views.
• Try adding the required HTML elements to the sections.
• Try getting the navigation between the buttons working.
• Try branding it with CSS.
• We should have a barebones app that looks OK but doesn’t show any data.

Suggested Approach: Handle Data:

• Read the Links about Browser API’s and IndexedDB.
• Build a table to display the data using a static JSON array.
• Try to save the static array to IndexedDB.
• Try to read the array from IndexedDB.
• Create a subset of the example jobs file.
• Try to load a file into the array. (This will be tricky)

 

Level 1 Complete!

Once you have completed your level 1 solution, you are then ready to start level 2.

Click the image below to start Level 2.