Class 3: Let's make something!
The Plan
- Look at links
- Discuss this tweet:
Two CSS properties walk into a bar.
A barstool in a completely different bar falls over.
— Thomas Fuchs (@thomasfuchs) July 28, 2014
Discuss: Readings
- How do these relate back to prototyping?
- How about that weird text stuff we did last week?
Lecture: About Apps
- Native vs. Web vs. Webapp
- Advantages/disadvantages
Together: Prototype
- About environments
- We’ll be using Cloud9, Sublime is still relevant!
- Introduce Git and Github
- Look at existing text (clone in Cloud9 workspace: git@github.com:laras126/webapp-exercise.git)
- Emphasize mobile first/device agnostic design, turning an mobile app into a website or webapp
- Create pages for views
- Plan a component system
- Add markup
- What might our classes be called?
- Where would we use wrappers for a layout?
- Review difference between classes and IDs
- Add wrapper tags for components
Break
Together: Review-ish
- Check-in - how are the tutorials going? Easy or overwhelming?
- Floats and clearfixing
- Mobile first, introduce media queries
Together: Prototype
- Add some layout in larger sizes inside media queries (already in stylesheet)
- Add stuff in head to remove URL bar and add touch icon
- View and add to homescreen on your phone!
Pair: If extra time
- Continue with adding layout
- Add another page to the app
For Next Time
Readings:
- Please Don’t Learn to Code - huh.
To do:
- Post a code question to Disqus on the next class page
- Feedback questionnaire (will email the link)
- Add another page to the app and email to me for feedback (optional)
- Recreate this layout and email me a zipped file, starter files here: