Using custom code in your application

Using custom code in your application

12 videos

Beginner

36min

About

horizontal divider blue

So you know how to build traditional webpages, but wonder how you put this knowledge to good use in Betty Blocks? This course got your covered.

This course includes...

Videos that explain how and where you can apply code in your Betty Blocks application and specific assignments so you can put your new skills to practice straight away. In short, during this course you'll learn:

  • How to create several endpoints where code is used
  • In which order code is added and linked to use in your endpoint

Note: This course does not cover any of the technical subjects about the programming languages themselves, only where they can be applied in your Betty Blocks application.

At the end of this course...

You've built your own to do application, using several webdevelopment techniques in a webpage.

Ready to get started?

All you need is:

  • A computer or laptop

  • Chrome or Safari browser

  • Betty Blocks account

  • Coffee or tea

  • Basic understanding of HTML, CSS and Javascript

Assignments

horizontal divider blue
1. HTML Assignment

In this assignment, we’ll create a custom HTML page for the to do application where you will be able to view your tasks. We will also add the buttons for the create, update and delete functions and make these functional later on in the course.

2. CSS Assignment

In the previous assignment we’ve written some HTML code for our application.

In this assignment we’re going to style our existing page with CSS code. I will be adding a custom font and applying a new colour.

3. Liquid Assignment

In this assignment, we’re going to use Liquid to create a JSON endpoint template with data that we are going to collect later on in this course. The JSON template stores the data of our tasks collection.

4. Javascript Assignment

In the previous tutorials, we’ve learned how to use Javascript in your Betty Blocks application. In this assignment, we'll add basic validation and make the toggle button functional. The toggle button will show or hide completed tasks.

5. Ajax Requests

In the previous tutorials, we’ve learned what AJAX requests are and how to use them.

In this assignment, we’ll create four AJAX requests to send and retrieve our data to and from the back-end, all without reloading our page.

Frequently asked questions

horizontal divider blue

Follow this course

12 videos

Advanced

36min