2.1 Objects and CSS
Morning Exercise
- We're going to recap the REPS from the weekend.
- Source code is available in a section by itself.
Revisiting Objects
Objectives
- Revisit Object syntax and how to access properties
- Practice creating multiple Objects
- Model real world data as Objects
- Use Object methods
CSS Box Model
Objectives
- Explain the CSS Box Model
- Understand the difference between margin, border, and padding
- Describe the difference between absolute and relative positioning
- Build a wireframe outline using HTML and CSS
Agile Development, Wireframes, and User Stories
Objectives
- Explain the basics of Agile methodologies and why it's used
- Describe user stories and how they are different than to*dos
- Practice creating user stories for an example app
Slide Deck
Homework: Layout Challenges
You are provided with a PDF of "grey box" drawings. You must create HTML and CSS layouts for each of the layouts. Place each layout in a folder inside of 02../your_name/day1_hw/. You will need an HTML and CSS file for each layout (keep things organized).
The PDF included "gray box" drawings of page layouts that are increasingly difficult to achieve using CSS. These are intended to be used after introducing students to the basics of float and clear. These exercises are meant to help you explore the basics and practice to develop a better intuitive sense for how float and clear work.
If you'd like, use the first two layouts as sample layouts to work through in a demonstration to explain the basics to the class. If used this way, I still recommend asking the students to repeat those two when they start their own work, as this will validate to them that they are building an understanding and still be useful practice before they work on the harder examples.
Please also note that we are not providing finished HTML and CSS for these exercises. We've found that HTML and CSS style can vary considerably from person to person, so please feel free to take your own approach to these quick layout wireframes.