-
Notifications
You must be signed in to change notification settings - Fork 0
/
EGGERS_CONTENTS.json
1 lines (1 loc) · 7.12 KB
/
EGGERS_CONTENTS.json
1
{"home":{"content":"# Lecture 5: The Box Model\n\nStacks on stacks on stacks, fam\n\n![asdfas](https://media2.giphy.com/media/y4tJKfZD2r2Za/giphy.gif)\n\n## Learning Objectives\n1. Explore CSS's box model\n2. Understand the difference between margin/border/padding\n\n## To Do List\n\n1. ### [Warmup](#warmup)\n2. ### [The Box Model](#the-box-model)\n3. ### [Practical CSS3 Usecases](#practical-css3-usecases)","idx":0},"title":{"content":"Lecture 5: The Box Model","idx":1},"desc":{"content":"Let's make some grids tho","idx":2},"warmup":{"content":"# Warmup\n---\n\nFor the following two images - **with a partner** - on your desk, draw out the **HTML divs/sections** you would have to use to create that layout.\n\n#### Options\n---\n\n#### [BaseCamp](https://basecamp.com/)\n\n<p></p>\n\n<img src=\"http://cdn2.hubspot.net/hub/53/hubfs/basecamp-landing-page-example.png?noresize&t=1468231454139&width=660&height=427\" style=\"width: 100%;\">\n\n\n\n#### [Wistia](https://wistia.com/account/signup)\n\n<p></p>\n\n<img src=\"http://cdn2.hubspot.net/hub/53/hubfs/wisita-landing-page-example.png?noresize&t=1468231454139&width=660\" style=\"width: 100%;\">\n\n","idx":3},"the-box-model":{"content":"# The Box Model\n---\n\nThe Box Model is a way of thinking about CSS DOM elements on the page. Instead of thinking of HTML elements as bits of HTML wrappers we style, we can think of them as boxes with specific dimensions and properties. Given this though, an HTML layout can be thought of as boxes within boxes.\n\n#### Exercises\n---\n\n1. ##### [Display Inline to Block](http://samantha.fewd.us/#fork/mottaquikarim/FEWD_Box_Model_Inline_to_block) | [LIVE Instructor Version](http://samantha.fewd.us/#broadcast/mottaquikarim/FEWD_Box_Model_Inline_to_block)\n\n2. ##### [Display Block to Inline-Block](http://samantha.fewd.us/#fork/mottaquikarim/FEWD_Box_Model_Inline_block_only) | [LIVE Instructor Version](http://samantha.fewd.us/#broadcast/mottaquikarim/FEWD_Box_Model_Inline_block_only)\n\n3. ##### [Simple Layouts](http://samantha.fewd.us/#fork/mottaquikarim/FEWD_Box_Model_Simple_Layout) | [LIVE Instructor Version](http://samantha.fewd.us/#broadcast/mottaquikarim/FEWD_Box_Model_Simple_Layout)\n\n#### Margin, Padding, Border\n---\n\n![box model](http://www.w3schools.com/css/box-model.gif)\n\n**Margin**: space in **between** DOM elements\n\n**Padding**: space **within** the DOM element\n\n**Border**: the outline **around** the DOM Element.\n\nIn general, the width of a DOM element is **padding** + **border** + **content**.\n\n#### Implications\n---\nThe main implications of this has to do with building **rows** with multiple tags / items inside of it. \n\nThe widths adding up to 100% isn't enough -- the **width** + **padding** + **border** + **margin** must add up to 100%!\n\n#### Box Sizing\n---\n\nThis is a useful tool. We can use box-sizing to force the padding to be **pulled into** our content width. This way, padding is **not** added to the overall width.\n\n**Types**: content-box, border-box\n\n","idx":4},"practical-css3-usecases":{"content":"# Practical CSS3 Usecases\n---\n\nThese are examples of CSS3 uses that we will either cover **today** or **at some point** in the duration of the course.\n\n#### Exercise\n---\nSee if you can implement some of the more simple ones outlined here into one of your websites (either the resume or the Wendy Bite).\n\n#### CSS Use Cases\n---\n\nHere are some interesting use cases where CSS3 in particular becomes super handy.\n\n#### Animations\n---\n\nYou can do some really awesome work with animating your elements.\n\n* **[Spinner](http://fewd.us/howdoi/#/problem/42730)**\n\n* **[Repeating, multiple animations](http://fewd.us/howdoi/#/problem/4270)**\n\n#### Transitions\n---\n\nTransitions are animations that are triggered usually by some form of user interaction.\n\n* **[Hover Effects](http://fewd.us/howdoi/#/problem/4268)**\n\n#### Pseudo Selectors\n---\n\nPsuedo classes allow us to style specific types of element features, **i.e.** the **:hover** pseudo selector can be used to style an element as the user puts his mouse over it.\n\n* **[Menu Hover Effect](http://fewd.us/howdoi/#/problem/4957)**\n\nOther examples of pseudo selectors: **:visited**, **:after**, etc\n\n#### Overflows\n---\n\nKeep track of content and determine how it should behave if there is more content than space in the container.\n\n* **[Overflow Example](http://fewd.us/howdoi/#/problem/4165)**\n\n#### Grids\n---\n\nThis one is super expansive and you could literally teach an entire course on this. For now, take a look at a few examples / problems to gain perspective on this.\n\n* **[Vertically and Horizontally Center](http://fewd.us/jargon/#/problem/10099)**\n\n* **[Three Column Grid](http://fewd.us/howdoi/#/problem/4258)**\n\n* **[Flex Align/Justify](http://fewd.us/jargon/#/problem/10100)**\n\n* **[Flex Direction](http://fewd.us/jargon/#/problem/10097)**\n\n* **[Flex Wrap](http://fewd.us/jargon/#/problem/10098)**\n\n#### References\n---\n1. **[Exhaustive Guide to Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)**\n2. **[CSS Animations Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**\n3. \n**[Exhaustive list of CSS properties and values](http://www.w3schools.com/cssref/)**\n4. **[Exhaustive list of CSS3 properties](http://www.tutorialrepublic.com/css-reference/css3-properties.php)**\n","idx":5},"frontend-frameworks":{"content":"# Frontend Frameworks\n---\n\n**Learning Objective**: What are front-end frameworks and how do they allow us to create modern, professional looking websites?\n\n#### Exercise\n---\n\nLet's get a simple site going that pulls in one of the following frameworks. Let's then use the documentation to build out a simple UI element using that framework.\n\n---\n\nFrameworks are basically CSS stylesheets that were developed by other people. They are built in such a way that you don't have to spend time and energy building out commonly reusable components like **buttons** and **input fields**, etc\n\n#### Semantic UI\n---\nSome quick facts:\n\n* They write the CSS and HTML blocks for you, all you do is copy and paste\n* With a basic understanding of HTML/CSS, you can easily start building professional looking websites\n\n**Visit their [website](http://semantic-ui.com/).**\n\n**Read the [docs](http://semantic-ui.com/introduction/getting-started.html).**\n\n#### Material Design\n---\nSome quick facts:\n\n* Built by Google.\n* Follows the Material Design spec that a lot of new Google apps now implement (like Google Calendar, Google Inbox, etc).\n\n**Visit their [website](https://getmdl.io/).**\n\n#### Bootstrap\n---\n\nSome quick facts:\n\n* Built by your boys over @twitter, it is a framework for quickly building out complex webpages\n* Probably **the** most popular front-end framework.\n\n**Visit their [website](http://getbootstrap.com/).**\n\n**Read the [docs](http://getbootstrap.com/getting-started/).**\n\n#### Primer\n---\n\nSome quick facts:\n\n* Build by your boys over @github\n* Much simpler than bootstrap\n* Lighter weight too!\n\n**Visit their [website](http://primercss.io/).**\n","idx":6},"__list__":["home","title","desc","warmup","the-box-model","practical-css3-usecases","frontend-frameworks"]}