Web Application Development 1

Semantic-UI I

An overview of the container and segments styles in the framework

Semantic-UI II

An exploration of the Grid and Image styles.

Semantic-UI III

An exploration of the Tables

Semantic Part IV

Our final tour of the Semantic-UI library - with a focus on icons, variations in segments and responsive grids

Back End Scripting

Introduction to the concepts of Back End Scripting

Introducing Glitch

What is is, what role it plays, why was it built.

Glitch Tour

A look at at the components of a Glitch project. Also types of project will we build?

Glitch Features

The options available in a Glitch project + a an overview of the community projects

JS Introduction

Place javascript in its proper context, and explore its relationship to the browser.

Variables

Explore the javascript variables, including the basic types, conversion and usage

Boolean Logic

Boolean expressions, operators and selection statements

Const, Let & Objects

Using const & let. Declaring and using objects.

Variables & Objects Review

A concise tour of the structure of variables & objects in Javascript

Web App Introduction

Structure of a web app: Front-end Vs Backend. Routers, Models, Views, Controllers

Front-end

Views: Handlebars layouts, partials and templates

Modules

The backend will use a modular approach, relying on specific mechanism to import/export shared objects

Back-end

Server, routes + controllers

Templates

Templates enable dynamic composition of views from layouts, partials and expressions.

Json

JSON is notatino for representing javascript objects in a simple literal format.

Dashboard

Review thee dashboard controller in detail.

Playlist

Revise the Dashboard to render playlist without their contents. Use a new playlist view renders individual playlists

MVC

Explore the MVC Pattern in action in Playlist 2

Gomark V1

A worked solution to gomark V1

Module View Controller

MVC is the guiding principle for the structure of our application.

Delete Song

How to remove a song from the playlist

Forms Design

How a form UI is laid out in HTML using Semntic UI

Form Programming

How to accept user input from a form and process it in a controller

The Store

The Playlist are ultimately stored in a JSON file. This file is managed by database modules.

Array Methods

Exploring length, slice, concat, join, indexOf, lastIndexOf

Array Iteration

Using for, while and do-while to iterate over an array

Arrays: Basics

Creating, accessing, adding to and removing from arrays.

Arrays of Strings

A review of the structure of arrays of Strings

Arrays of Objects

Arrays of more complex data structures, including nested objects.

Sessions Introduction

Keeping track of the currently logged in user is a challenge - as HTTP is, by definition 'stateless'. Hidden form fields, url rewriting and cookies are three common techniques for implementing sessions.

c-sessions
Using Sessions

Explore how we need to refactor the application to support sessions

Sessions UX

New forms needed to enable the user to signup / login

Creating Sessions

The API to create, access and destroy sessions.

Gomark V3

Gomark V3 Review

Cloudinary API

The fundamentals of the cloudinary service + API

Picture-store App

A review of the UX of the picture-store app

Picture-store Implementation

The Glitch app implementation.

JS Objects

Review the structure, syntax and access rules for Javascript Objects

Playlist 4 Review

Walk through the Playlist 4 application in detail

Functions

Function return values, scope and structure

Nested Objects

How more complex data structures can be constructed.

Review + Roadmap

A review of the course and a peek into the future of your learning