Leeyat Slyper

Frontend Class Overview, Concepts Breakdown for Reference, and Weeks Review

The goal of this 8 week course is a rounded view of frontend development, advanced HTML and CSS structure and layout, and an overall look at development practices as a whole, exploring how frontend is starts as designs and carried through to launch and maintenance. Importantly, we will start with text editors, such as Atom or Sublime, and version control, using GIT, as these are critical for either frontend or backend design.

Once complete, you will be able to prototype then develop a multipage site with several unique templates and explore how this design can be applied to a CMS or used as linked flat HTML pages.

We’ll start with a few questions and perspective about current knowledge and interests. After some open ended exploration into sites or projects that interest you, we’ll dive into good development practices then into prototyping, low-level HTML and CSS structuring, boilerplates, and responsive setup.

We will throughly explore frontend development then culminate with a look at how frontend integrates into backend (since the line is becoming increasingly blurred.) In closing, we’ll look at how to continue either a deep focus on frontend design and development or how to, down the road, expand backend development for further development breadth.

Timeline

An outline of the weeks and what topics will be covered.

June 5-6th.HTML and CSS overview. DOM overview. Digging into HTML tags.
June 12-13th remote.Structuring HTML. Structuring and applying CSS to structured HTML files. Dive into CSS, SCSS and/or SASS. JavaScript introduction, and basic events exploration.
June 19-20th.Introduction/further look at prototyping with Sketch, Zeplin, and Framer. Translating designs to HTML with an eye towards accuracy. Simulating interaction before construction. (Ended up not going too far into design, instead, right into Javascript.)
June 25-26th remote.Templating, multi-page HTML with CSS. 
July 9-10th.Open. Either adding HTML tag walkthrough and study, or more SCSS/SASS study in CSS.
July 17-18th remote.(Javascript introduction, OOP programming basics, why JS has become so integral to more advanced frontend development. Way past this.) 
July 17-18th.POST, GET, forms and how HTML integrates into interactive apps. How to build prototypes without the need for full stacks. 
July 24-25th.Next steps, where learning can continue on HTML, CSS, or JS. Looking at how languages are used in CMS or in frameworks. Path to an app.
https://nodejs.org/en/download/

https://hackernoon.com/setting-up-node-js-with-a-database-part-1-3f2461bdd77f

knex migrate:latest
 https://github.com/roberttod/tutorial-node-database

A resource on Traversing the DOM. https://www.digitalocean.com/community/tutorials/how-to-traverse-the-dom

Arranging your JavaScript Documents.

Declare and initialize your variables and arrays up top.

var name = ‘Steve’;

var shoppingList = [ ‘apple’, ‘orange’ ];

There are variables and objects. Arrays are lists with only an index, objects are identifiable they have keys and indices. 

var array = [ ‘listitem0’, ‘listitem1’ ];

var arrayOfObjects = [

     { letter: ‘A’, words: ‘Apple, Ardvark’ }

     { letter: ‘B’, words: ‘Banana, Barnacle’ }

]

Next create your reusable functions.

Last, initialize the events and functions you want to run when the document loads.