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.

 

 

 

Frontend Reference

For a perspective on websites that move from “website” to “web app” start by looking at a site like Zappos that is mostly marketing but has some information sorting. Then a site like Stripe has a marketing side on their main site, but an almost entirely informational section for managers and a very focused API section in particular. Last a site like Trello disappears once you’re logged in, the marketing is done, and the entire app runs within a browser.

Pay attention to what elements remain, what change, what stay the same between the different examples and their lifecycles.

Online Shoes, Clothing, Free Shipping and Returns | Zappos.com
Stripe – Online payment processing for internet businesses
Stripe API Reference
Trello

 

Frontend Class 06

How is CSS going? Revisit block vs in-line a bit.

In laying out the page, what is working, what isn’t.

Introduce Flexboxes?

This might throw a bit of a wrench, but it’s important to know where layout is going.
A lot, so much, of the current web uses Floats but flex will, is, gain popularity quickly.

If HTML is going, introduce SHTML as an intro to server side, and make things a little easier.

https://en.wikipedia.org/wiki/Server_Side_Includes

When information is stored and where.

More on JavaScript…

(Try and build CSS and JS together. Find ways of approximating them as much as possible.)

(LocalStorage? The only hard part there is clearing it.)

Get into modifying, more complex JS.

#Teaching

 

Frontend Class 05

Look at what you started with framing.

1. What questionsconcernsunknowns do you have?
2. Were you able to redesign the opening page hoe you wanted to?
3. How did structuring the pages go? Was it clear how to make each component?
Let’s do a quick review of HTML5 semantics.

Gauge progress with slicing design/framing HTML.

Understanding the header, footer, component relationships.
W3Schools has a good outline of why all these came to be:
https://www.w3schools.com/html/html5_semantic_elements.asp
Then there is better writing here:
https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

More on JavaScript…

(Try and build CSS and JS together. Find ways of approximating them as much as possible.)

(LocalStorage? The only hard part there is clearing it.)
Breakdown the functionality that the app needs. How we would go about building it.
What is dynamic, what can be done with just HTML.

Framer…

and what is CoffeeScript.

No we aren’t learning it, just going to know what it is.

Not a ton of examples have interaction.
Framer Cloud — Flows

Traversing and manipulating the DOM.

How you would go about building something, building after prototyping.

First, selecting the elements.
Second, have them do some kind of alternation, if not the final version of what you’re looking to do, as functions.
Next, expand the functionality of the functions so the more closely match intended use.

(Got through these.)
Have the input…
Have the button, need to move it below and pinned to the right.
Hint next to button on left.

Ended up doing about 75% Javascript and 25% CSS.

#Teaching

 

Frontend Class 04

Learned A LOT of layout yesterday. Let’s move onto framing in your app.

Show and Tell, then learning 2 specific things.

Framing in the pieces needs for full use, header, footer, sections?

Often, pieces of apps or sites will repeat. Think about to reuse as much of a site as possible. (PWA has good examples.)

You’ll start to see the code in

Stripe API Reference
Follow me by jiangxiaobei – Dribbble
https://pennsylvaniawine.com/find-wineries/
Mount Nittany Vineyard & Winery – Pennsylvania Wines
Trello

What a header has for a website, for an app.

Stripe – Online payment processing for internet businesses
Headers for apps assume more.
Trello

What footer’s often contain.

https://stripe.com/
Online Shoes, Clothing, Free Shipping and Returns | Zappos.com

Sidebars.

https://stripe.com/
Online Shoes, Clothing, Free Shipping and Returns | Zappos.com

Was the footer, now it’s the sidebar.
Dr. Scholl’s, Shoes, Men | Shipped Free at Zappos

(Get a variety of elements and try making HTML for them.)

Look at bootstrap example.
Cards, forms, text logos, social media areas.

Traversing the DOM.

Better CSS setups, SCSS.

JavaScript selects like CSS but then has logic.

#Teaching

 

Frontend Class 03

Review planning of the app.

Got pretty far, did user testing even!
Second round!

Did it make sense what parts are planned as “static/fixed?”
Are there still parts that you aren’t clear on how to construct?
Let’s look at a couple dynamic elements. Elements that fade in or out. Elements that move on an “event.”

Review what we learned so far.

Go over floats and setting things next to each other.
Fun to look up up different tags.

HTML, HyperText Markup Language, CSS, Cascading StyleSheets.

Elements, and selectors.

URLs, folders, project or template setup.

Ended up focusing a lot on Inline versus Block, Floats, Widths and Responsiveness

#Teaching

 

Frontend Class 02

Page areas.

1. Header, footer, homepage.
2. Necessary for setup, and for accessibility.
3. Common, but not essential pieces. Sidebars, comment areas, so forth.

Dynamic versus static.

So we know about the page areas now, what parts change, what parts stay the same. And why. This is important for preproduction.

Dynamic elements can either change on page reload or change right before your eyes. These roughly translate to asynchronous and synchronous. (As you learn more, SYNC and ASYNC are more complex but this a good way to learn the overall ideas of them.)

CSS.

We can spend a lot of time on CSS. It wouldn’t be wasted necessarily but you can learn a lot of this on your own via trial and error. In this case, skipping the basics probably won’t hurt. Lets look at SCSS (install Koala.)

These are the two main tools, you will be going back and forth between them constantly.

HTML and CSS work in concert, good HTML Makes CSS far easier to work with. Bad CSS is an enormous pain to untangle.

Let’s write some simple HTML and CSS.

Head and Body.

Then header and main.

Then nav.

Then H1s.

Then Ps.

Then move to CSS.

html, body, header, main, then nav, then hs, then ps.

A thought, APP versus Web Page. Hint, they are almost the same at this point so just think of everything as basically the same.

 

 

Frontend Class 01

Overview.

A note on the schedule, we are going to speed through the essentials the basics then get into advanced topics. We will continually reenforce the basics though. You may feel later like you’re having to revisit a lot of the same basics but you will have a continual desire to keep learning rather than boredom staying on the same topics for a long time.

Gauging.

Where are you at, break down the example.
1. What did you learn from doing Java?
2. What about the frontend work the designers do are you looking to learn?
3. Are you looking to better design to build?
4. Code versus script versus markdown versus markup.

Good development.

Good development, no discussion, has to happen.

Download, apps.
1. Text editors.
2. Pseudo-editors, Zeplin, Dreamweaver.
3. Git for Versioning.

We’ll get started with Sublime, and GIT.

Software walkthrough.

Once downloaded and installed, set up a www area. We aren’t going to get into *AMP’s or servers (unless you’d like to.) All the frontend pieces we are working with now will work no matter what platform they are on or where the files live.

Project setup, boilerplates.

There are so many ways of getting started without starting from a blank piece of paper. In fact using a boilerplate or bootstrap can keep you from making mistakes by not including essential pieces such as favicons or other necessary pieces.

That said, we will start from a blank page now and you should use a blank starter page your first few times so you can reenforce the concepts.

Everything we are doing, and most web development in general, is just made up of text.

Tags. The foundation of everything. Open and close. Open and close. Always close.

HTML is carrot open < and carrot attributes with name equals = and open quotes “ and close quotes “ close > then open < forward slash / and close >.

A word on quotes.

Single and double quotes are more or less interchangeable. “ ‘ This does change now and then but for all intents an purposes here, you can use either BUT keep it consistent!

HyperText Markup Language.

HTML is what everything ends up as. In fact, HTTP is just HyperText Transfer Protocol. The web got really popular because it’s all the same on the frontend. The backend, that can be literally anything.

Casading StyleSheets.

Long time ago, we used tables, no longer. Never lay things out in tables or we are done. We use divs, or we use proper tags laid out with CSS.

A few words on CSS3 and a few more on HTML5.

CSS gets added to now and then but will mostly stay the same. HTML5 is a fairly dramatic change, but you only have to use as much of the advanced features as you’d like.