Week 01

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