Week 02

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.

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.