thespacemaker / web-dev.-course

A web development introductory course

Web-Dev.-Course

A web development introductory course designed to teach front-end javascript development to students at TownView High School

Within this folder you will find 10 sub-folders each labeled by the day of instruction. These folders each contain a slideshow.js folder that houses the slideshows necessary for the day. These slideshows are built using reveal.js and will be one of the students projects. Each folder contains a README pertaining to that days tasks as well as any project folders the students are expected to work with.

The course is outlined in the pages Below.

Day 2

Introduction

Using the slideshow labeled Intro.js introduce code streams studios and yourself. The slideshow discusses the difference between web development and web design. It outlines some of the key components of HTML and CSS and outlines some of the tools that the students will be expected to learn over the course.

Day 2

GIT and first small project

After a brief discussion of what GIT is and how it is used, direct the students to clone the reveal.js repo into a directory on their computers. Instruct them through the file contents of Reveal and explain the use of section tags to create new pages. This is a great time to discuss the folder structure a typical web project (HTML, CSS, Javascript, and image folders). Implore the students to design their own slideshow website for the remainder of the class time.

Day 3

CSS

Using the css.js slideshow explain the fundamentals of CSS. Using CodePens walk the students through some common uses of CSS and drive home the idea of FlexBox and how it is used in the modern layout and design of websites.

Day 4

Introduction to JavaScript

Using the JavaScript.js slideshow explain the fundamentals of JS. Again use CodePens walk the students through some common uses of JS and how javascript introduces functionality to web components and sites.

Day5

The DOM

Using DOM.js introduce what the Document Object Model (DOM) is. Show the video enclosed on the folder as an introduction to the DOM. I still need to find a good example project to demonstrate the power of the DOM. You can also provide this link as Homework. CSS Tricks has a pretty good explanation as well.

Virtual DOM is a key aspect of both Vue.JS and React.JS. It will be important to cover the differences between manipulating the DOM directly vs. creating a virtual DOM and utilizing JavaScript to change it.

Day 6

Frameworks

Using the Framework.js slideshow answer the question, What is a framework? What are the benefits of frameworks. Introduce React and Vue.js. Explain the need that drove the development of React for Facebook.

Introduce Vue formally. There are videos for this that can be found and update the README. Before the end of the class have the students use git to clone the Vue-simple-boilerplate. Encourage them to fiddle around with Vue and design a simple SPA

Day 7

Vue-sidebar-app

Using the Vue.js slideshow introduce the Vue framework. Guide students through the Vue component and how routes are handled using the Javascript Framework. Vuetify-sidebar-template shows an excellent sidebar based Web App that the students can modify to their own design. Introduce Vuetify and explain the difference between a front-end CSS framework and a javascript framework. Encourage students to use the material guidelines and learn how CSS frameworks help make websites appear consistent.

Day 8

Nuxt.js