Last active
April 25, 2016 21:15
-
-
Save s-espinosa/9c2406709f1887a9897522c3d107ae72 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Warmup (5 mins) | |
* Clone repo | |
* index.txt | |
* One minute - what are the pieces? | |
* One minute - discuss with neighbor. | |
* List on board. | |
# HTML (10 mins) | |
* index.html (in atom) | |
* Way to organize/describe content. | |
* Uses tags (markup printouts or on screen). | |
* Headers (h1) | |
* Paragraphs (p) | |
* Lists (ul/ol li) | |
* Standard base html page | |
* html | |
* head | |
* title | |
* body | |
* my_index.html (in atom - code along with prepared content) | |
* Add html tags. | |
* p | |
* h1/h2/h3 | |
* ul/ol li | |
# Styling (10 mins) | |
* styled.html (in browser) | |
* One minute - describe the page. | |
* One minute - discuss with neighbor. | |
* List on board. | |
# CSS (15 mins) | |
* styled.html (in atom - code along from repo) | |
* What haven't we seen before? | |
* base.css (in atom) | |
* What do you notice? Does anything look familiar? | |
* h1 | |
* p | |
* Way to describe styles for html elements. | |
* color | |
* background-color | |
* text-align | |
* font-family | |
* Finding a specific tag (class/id code along) | |
# Color (5 mins) | |
* Names (white, green, blue, orange) | |
* Hex (#FFFFFF, #008800, #000088, #AA6600) | |
* Hex and RGB | |
* Three hx numbers. Red, Green, and Blue. | |
* 00 to FF | |
* 0 to 255 (16^2) in RGB | |
# Sass (just enough - 10 mins) | |
* Sass is a preprocessor for CSS. Generates CSS, but allows you to use variables, etc. | |
* Setting up Sass | |
* sudo gem install sass | |
* to watch a file: sass input.scss output.css | |
* Saving colors as variables | |
* Nesting css | |
# Questions (5 mins) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment