author-cover

INTERACTIVE COURSE

Building Front-End Web Applications with Plain JavaScript

Beginner

143 Lessons

22h 10min

Certificate of Completion

author-cover

Looking to Train your Team?

Empower your engineers to reach their potential faster.

Takeaway Skills

Learn to build a front-end web app with plain JS.

Understand how to implement associations between model classes without third-party frameworks.

Learn how to build an app with constraint validation and enumeration attributes.

Improve your JS skills by building a complete app.

Learn to build a front-end web app with plain JS.

Understand how to implement associations between model classes without third-party frameworks.

Learn how to build an app with constraint validation and enumeration attributes.

Improve your JS skills by building a complete app.

Course Overview

This course shows you how to build front-end web applications with plain JavaScript without using any (third-party) framework or library. It follows a "learning by doing" approach, which means that you don't have to read lots of text about the intricacies of JavaScript. Instead, you’ll...

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built-in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built-in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

1. Introduction

Getting Started

2. The Foundations of Web Apps

The World Wide Web (WWW)

HTML, XML, and Unicode

Style Web Documents and User Interfaces with CSS

A Brief History of JavaScript

Accessibility for Web Applications

Quiz: Foundations of Web Applications

3. Javascript Fundamentals

JavaScript Basics

Data Type Testing

Important Types of Basic Data Structures

The localStorage API

New JavaScript Elements

More JavaScript elements

Quiz: JavaScript Fundamentals

4. Building a Minimal Web App with Plain JS in Seven Steps

Overview of the Minimal Application

Step 1: Set up the Folder Structure

Step 2: Write the Model Code

Step 3: Initialize the Application

Step 4: Implement the Create Use Case

Step 5: Implement the Retrieve/List_all Use Case

Step 6: Implement the Update Use Case

Step 7: Implement the Delete Use Case

Quiz: Minimal Application

Challenge: Movie Application Views

Challenge Solution: Movie App Views

5. Integrity Constraints and Data Validation

Integrity Constraints

String Length Constraints

Mandatory Value Constraints

Range Constraints

Interval Constraints

Pattern Constraints

Cardinality Constraints

Uniqueness Constraints

More Constraints

Responsive Validation

Constraint Validation in MVC Applications

Adding Constraints to a Design Model

Quiz: Integrity Constraints and Data Validation

6. Constraint Validation in Plain JS

Overview of Constraint Validation in JavaScript

Make a JavaScript Class Model

Folder Structure and Library Files

Model Code: Constructor Function

Model Code: Property Checks and Property Setters

Model Code: Serialization and Data Management

Quiz: Constraint Validation in JS

Challenge: Model Validations

Challenge Solution: Model Validations

7. Enumerations

Record and Extensible Enumerations

Enumeration Attributes

Enumerations in Computational Languages

Enumeration Attributes in a Design Model

Quiz: Enumerations

8. Enumeration Attributes in Plain JS

Enumeration Implementation Issues

Library File and Meta-Class Enumeration

Enumerations and Model Classes in Model Code

Getters, Setters, and Checks in Model Code

Serialization and Data Management in Model Code

Quiz: Enumeration Attributes

Challenge: Add Enumerations

Challenge Solution: Add Enumerations

9. Reference Properties and Unidirectional Associations

Reference Properties

References and Reference Properties

Referential integrity

Model Reference Properties

Unidirectional Associations

Eliminate Unidirectional Associations

Eliminate Associations from the Design Model

Reference Properties in the UI

Multi-Valued Reference Properties

Quiz: Reference Properties and Unidirectional Associations

10. Implementing Unidirectional Functional Associations

Introduction to the Unidirectional Association Application

Single-Valued Reference Properties

Make a JavaScript Class Model

New Issues and Model Summary

Deletion Policy, Serialization Function, and Object-to-Storage

Quiz: Unidirectional Functional Associations

11. Implementing Unidirectional Non-Functional Associations

Multi-Valued Reference Properties

JavaScript Class Model

Quiz: Unidirectional Non-Functional Associations

Challenge: Unidirectional Associations

Challenge Solution: Unidirectional Associations

12. Bidirectional Associations

Inverse References

Make an OO Class Model

Bidirectional Associations

Quiz: Bidirectional Associations

13. Implementing Bidirectional Associations

JavaScript Class Model

Part-Whole Associations

Quiz: Bidirectional Associations in JavaScript

Challenge: Inverse Reference Properties

Challenge Solution: Inverse Reference Properties

14. Subtyping and Inheritance

Intension, Extension, and Type Hierarchies

Class Hierarchy Merge

Subtyping and Inheritance

Subtyping and inheritance with XML and OWL

Class Hierarchies with SQL

Single Table Inheritance

Table per Class Inheritance

Joined Tables Inheritance

Quiz: Subtyping and Inheritance

15. Subtyping with Plain JS

Introduction to Subtyping in Plain JavaScript

Constructor-Based Classes

Eliminate a Class Hierarchy and Create a Class Model

Code the Model Classes

View and Controller Code

Class Hierarchy

JavaScript Entity Table Model

Implement the Class Hierarchy: Model Classes

Quiz: Subtyping

Challenge: Subtypes

Challenge Solution: Subtypes

16. Conclusion

Join more than 1.7 million learners from companies like

What our learners are saying

What our learners are saying

COURSE BY:

Gerd Wagner

Teams of every size choose

Educative for Business

to train, upskill & onboard their developers

Learn in-demand tech skills in half the time

SOLUTIONS

For Enterprise

For Individuals

For HR & Recruiting

For Bootcamps

PRODUCTS

Educative Learning

Educative Onboarding

Educative Skill Assessments

Educative Projects

Pricing

For Enterprise

For Individuals

Free Trial

LEGAL

Privacy Policy

Terms of Service

Business Terms of Service

CONTRIBUTE

Become an Author

Become an Affiliate

Become a Contributor

RESOURCES

Educative Blog

EM Hub

Educative Sessions

Educative Answers

ABOUT US

Our Team

Careers

Hiring

Frequently Asked Questions

Contact Us

Press

MORE

GitHub Students Scholarship

Course Catalog

Early Access Courses

Earn Referral Credits

CodingInterview.com

Copyright ©2023 Educative, Inc. All rights reserved.

soc2