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:
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
Course Introduction
00:42
What is HTML and where to add in Betty Blocks?
01:59
Using Layouts on Endpoints
02:16
HTML
What is Liquid and where to use it?
02:25
Liquid Data Output
02:37
Liquid Logic Tags
02:03
Liquid
What is JavaScript and where to add?
01:57
Add filter to only show open tasks (DOM manipulation)
02:26
Add javascript validation
02:18
Javascript
What are Ajax requests and where to use them?
02:56
AJAX requests
Course Recap
01:24
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.
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.
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.
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.
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.