├── .DS_Store ├── CSS └── style.css ├── LICENSE ├── README.md └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GalvanizeOpenSource/Learn-To-Code-Week-1/100433ca05c0c58b1b6a22fa8110078de9a8b603/.DS_Store -------------------------------------------------------------------------------- /CSS/style.css: -------------------------------------------------------------------------------- 1 | * {margin: 0; padding: 0; outline: 0;} 2 | 3 | 4 | body { 5 | font-family: 'Raleway', cursive; 6 | color: #e5e5e5; 7 | font-size: 12px; 8 | background:#bfbfbf; 9 | } 10 | 11 | 12 | h1, h2 { 13 | font-family: 'paprika'; 14 | font-weight: 300; 15 | margin:0 0 15px 0; 16 | } 17 | 18 | 19 | h1 { 20 | font-size: 36px; 21 | letter-spacing: -1px; 22 | line-height: 100%; 23 | } 24 | 25 | 26 | h2 { 27 | font-size: 24px; 28 | } 29 | 30 | 31 | p { 32 | margin: 0 0 15px 0; 33 | } 34 | 35 | a { 36 | color: #3e3e3e; 37 | } 38 | 39 | 40 | .clear { 41 | clear: both; 42 | } 43 | .wrap { 44 | width: 100%; 45 | max-width: 1600px; 46 | min-width: 960px; 47 | z-index: 10; 48 | position: relative; 49 | margin: 0 auto; 50 | padding: 0; 51 | } 52 | 53 | .section { 54 | width: 100%; 55 | max-width: 1600px; 56 | min-width: 960px; 57 | z-index: 10; 58 | position: relative; 59 | margin: 0 auto; 60 | padding: 0 0 20px 0; 61 | height: 500px; 62 | } 63 | 64 | .section img { 65 | width: auto; 66 | height: 50%; 67 | } 68 | 69 | .inner { 70 | width: 960px; 71 | margin: 0 auto; 72 | position: relative; 73 | min-height: 50px; 74 | padding:30px 0; 75 | font-size: 18px; 76 | font-family: 'Open Sans', sans-serif; 77 | font-weight: 300; 78 | } 79 | 80 | .inner:after { 81 | content: ""; 82 | display: table; 83 | clear: both; 84 | } 85 | 86 | 87 | .subMenu { 88 | height: 50px; 89 | z-index: 1000; 90 | width: 100%; 91 | background: #0977bc; 92 | } 93 | 94 | .subMenu .inner { 95 | padding:0; 96 | font-weight: 400; 97 | margin: 0 auto; 98 | } 99 | 100 | 101 | .subNavBtn { 102 | display: block; 103 | height: 55px; 104 | width: 10%; 105 | float: left; 106 | margin: 0px 0px 0 0; 107 | text-decoration: none; 108 | font-size: 14px; 109 | padding: 15px 2% 0 2%; 110 | text-align: center; 111 | 112 | color: #fff; 113 | } 114 | .subMenu a:hover { 115 | background: #1783c7; 116 | } 117 | 118 | .active { 119 | background: #25aae1; 120 | } 121 | .end { 122 | margin: 0; 123 | } 124 | 125 | /*.photoWrapper { 126 | 127 | }*/ 128 | 129 | 130 | /* SECTIONS */ 131 | .sTop { 132 | min-height: 130px; 133 | background:#fff; 134 | color:#3d3d3d; 135 | padding: 50px 0; 136 | height: 300px; 137 | } 138 | 139 | .s1 { 140 | background:#184764; 141 | color:#fff; 142 | } 143 | 144 | 145 | .s2 { 146 | background: #313131; 147 | } 148 | .s2 a { 149 | color: #fff; 150 | } 151 | 152 | .s3 { 153 | background: #1b83b3; 154 | } 155 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 GalvanizeOpenSource 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn to Code HTML & CSS 2 | Brought to you by Galvanize. Learn more about the way we teach code at (galvanize.com)[galvanize.com]. 3 | 4 | ## Overview 5 | The goal of this brief course is to provide you with a fun introduction to the world of web development, starting with HTML and CSS. 6 | 7 | #### Here's what we'll be doing: 8 | * Setting up our computers for web development 9 | * Overview of basic HTML concepts 10 | * Overview of CSS concepts 11 | * Playing around in the sandbox 12 | 13 | #### Before you begin, a quick gut check: 14 | * This course is for absolute beginners 15 | * Feel free to move ahead 16 | * Help others when you can 17 | * Be patient and nice 18 | * You will get through it! 19 | 20 | #### What web coding is (really)? 21 | Recipes to give to your computer to “cook” up some awesome things for you online 22 | 23 | ## Setting up your computer 24 | (Brace yourself...) 25 | 26 | #### Please set up the following: 27 | * A web browser to see what we're working on as others see it (Recommend Google Chrome: [chrome.google.com] (chrome.google.com)) 28 | * A text editor to modify your files (Recommend the Atom text editor: [Atom.io](atom.io)) 29 | * Download the tutorial files on this page within the zip file 30 | 31 | #### Download the files for this class: 32 | 1. Go to https://github.com/GalvanizeOpenSource/Learn-To-Code-HTML-CSS 33 | 2. Click on the button on the right-hand side that says "Download ZIP" 34 | 3. Go to your downloads folder and double click on the .zip file to unzip it 35 | 4. IMPORTANT! Leave all the individual files in the downloaded folder (if you would like to move it out of the downloads folder move the entire folder, not individual items) 36 | 5. From Atom: 37 | - File > open, select the folder and then click "Open" 38 | - If the file tree does not appear on the left hand View > Toggle Tree View -- this will show you the entire folder within Atom 39 | 6. *Now if you already know some of what we're talking about,* you're all set to poke around in the files -- index.html and CSS/style.css are the two files we will using. 40 | 41 | Patience! Setting up your computer takes time and can be tricky, especially across platforms. 42 | 43 | Once you're ready, you can move onto the next lesson. 44 | 45 | ## H.T.M.L. - "the building blocks of the internet" 46 | 47 | Hyper Text Markup Language, or HTML, is the most elemental language of the internet. Everything you see within your web browser is an interpretation of HTML in some form of other, and it is essential to learn in all web development. 48 | 49 | ###### The syntax of most HTML is as follows: 50 | * `` - code that wraps around the content of HTML to designate a particular effect, sometimes inherent to the tag. 51 | * `Attributes=""` - code inserted into tags to implement a particular effect that is external to the tag. 52 | * Elements - the combined syntax of tags, attributes, and elements. 53 | 54 | ``` 55 | e.g. Element = content content 56 | ``` 57 | 58 | #### HTML Tags: 59 | Tags are used to mark up the beginning and end of an HTML element. 60 | 61 | Almost everything in HTML needs to start and end with a tag 62 | Everything is wrapped like layers of an onion, `` and `` 63 | - e.g. `
”Hello!”
` 64 | - *Note: not every tag is like this!* 65 | 66 | ###### Common Tags: 67 | - `` designates document as HTML 68 | - `
` notes a block element in the page 69 | - `` anchor, activates a link in the page 70 | - `` contains meta information 71 | - `` contains browser information 72 | - `` notes an inline element 73 | 74 | ###### Irregular Tags: 75 | - `` creates an image in the page 76 | - `
` creates a big break in the page 77 | - `
` creates a horizontal line 78 | - `` connects this to related documents 79 | - `` creates an input field 80 | 81 | #### HTML Attributes: 82 | HTML attributes inform the browser on what to do with a tagged piece of content. 83 | Attributes generally appear as name-value pairs. 84 | ``` 85 |

This is the content of an element with class 'foo'.

86 | ``` 87 | ###### The most common attributes are: 88 | - id="" - id is used on only a single element" 89 | - class="" - class can be used on multiple elements" 90 | - href=”” - hyperlink reference to an internal or external link 91 | - src=”” - source file to an image, video, etc. 92 | - style=”” - add some color, font, margins, etc. 93 | - ^ *There’s a MUCH better way to do this via CSS - more on that later!* 94 | 95 | How do we check elements for whether they're talking to the browser? Use the **inspect element** feature! 96 | 97 | But... how do we make HTML... better? 98 | 99 | ## Overview of CSS 100 | 101 | What Does CSS Stand for? 102 | - Cascading - prioritizing certain values over others 103 | - Style - focusing on layout, colors, fonts, etc. 104 | - Sheet - another name for the file we use here 105 | 106 | The internet used to be ugly. Enter CSS - a consolidated way to make it prettier. 107 | 108 | #### Three primary objects: 109 | - Elements: e.g. h1, div, body, a - default HTML (already reviewed) 110 | - IDs: everything that starts with a “#” 111 | - Classes: everything that starts with a “.” 112 | 113 | #### Syntax of CSS: 114 | ``` 115 | h1 { // this is either an element, class, or ID 116 | font-size: 24px; // syntax is name: value; 117 | font-weight: bold; 118 | color: #000000; // hexadecimal, RGB, etc. 119 | } 120 | ``` 121 | Space doesn’t matter, but “onion” rules apply 122 | 123 | #### What are IDs? 124 | IDs are attributes that are used only on one element ONLY and noted with a “#” symbol in CSS 125 | e.g. 126 | ``` 127 | HTML: 128 | Lee Ngo 129 | 130 | CSS: 131 | #leesName { 132 | color: white; 133 | } 134 | ``` 135 | IDs are used to direct functions to unique elements in the HTML so that there’s no confusion 136 | 137 | *e.g clicking to a specific part of page* 138 | 139 | #### What are Classes? 140 | 141 | Classes are attributes something to multiple elements on a page noted with a “.” symbol in CSS. 142 | ``` 143 | HTML: 144 | Lee Ngo 145 | 146 | CSS: 147 | .ninja { 148 | color: black; margin: 10px; 149 | } 150 | ``` 151 | Classes are used to change or affect multiple items in an HTML document at once 152 | 153 | *e.g. everything with class=”ninja” should have the same attributes* 154 | 155 | In tandem, you can do a lot with HTML & CSS! Let's give it a shot! 156 | 157 | ## LET'S CODE! 158 | 159 | ###### Remember: 160 | - Coding can be hard - be patient! 161 | - Work in pairs! Even the pros do it 162 | - Ask for help - we’re in a school! 163 | 164 | #### Let's get started! 165 | 1. Open up your text editor 166 | 2. Navigate to your repo 167 | 3. Open up the following files 168 | - index.html 169 | - CSS/style.css 170 | 171 | #### Let's change the font! 172 | 1. Navigate to Google Fonts: https://www.google.com/fonts 173 | 2. Find a font you like and click "Add to Collection". 174 | 3. On the bottom right side of your screen click "Use". 175 | 4. On the "Use" page, scroll down to "Number 3" and copy the link tag provided. 176 | 5. Paste that link tag in your index.html file with the new link tag you copied from Google Fonts. 177 | 6. Copy the CSS code under “Number Four.” 178 | 7. Paste that code into your CSS under the body tag. 179 | 8. Save and refresh! 180 | 181 | Did it work! Great! If not open up **Inspect Element** and see what happened. 182 | 183 | ## Play around in the sandbox! 184 | 185 | Try one of the following: 186 | - Change the name of the site to...whatever! 187 | - Change all the navigation links & section headers 188 | - Replacing the images with your own images - locally, online, etc. 189 | - Show what you did with the others! 190 | 191 | # YOU DID IT! YOU'RE NOW A CODER! 192 | 193 | Welcome to the cool kids club. 194 | 195 | <<<<<<< HEAD 196 | ##The User wants some changes 197 | - Change the name of the site 198 | - Change all the navigation links & Section Headers 199 | - Replace my images with your own images 200 | - Add a video to your page 201 | - Push changes to github 202 | ======= 203 | #### Want to code more? Check out Galvanize's Full Stack Immersive Program! 204 | >>>>>>> 222d0db4c115293bf2ea9337213063f2486749d6 205 | 206 | - 24 Week Full-Time Program 207 | - 97% Job Placement Rate within six months 208 | - Average starting salary: $77,000 per annum 209 | - Scholarships available for those who qualify 210 | - Learn more at http://galvanize.com/courses/fullstack/ 211 | 212 | #### Looking for something more flexible? Check out our Evening Workshops! 213 | 214 | - Zero to Web Designer 215 | - Foundations of JavaScript 216 | - Learn more at http://www.galvanize.com/workshops/ 217 | 218 | #### About the Authors 219 | 220 | [Graham McBain](http://linkedin.com/in/grahammcbain) is a graduate of the 3rd cohort of the Galvanzie Full Stack Program and now Evangelist for Galvanize based in the Colorado area. Graham believes that programming is more accessible than people think and is passionate about showing people the path to becoming a developer. 221 | 222 | [Lee Ngo](http://linkedin.com/in/leengo) is an evangelist for Galvanize based in Seattle. Previously he worked for UP Global (now Techstars) and founded his own ed-tech company in Pittsburgh, PA. Lee believes in learning by doing, engaging and sharing, and he teaches code through a combination of visual communication, teamwork, and project-oriented learning. 223 | 224 | You can email him at lee.ngo@galvanize.com for any further questions. 225 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | <<<<<<< HEAD 4 | 5 | 6 | LTCW1 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

This is a title!

15 |

This is a subtitle!

16 |
17 |
18 | 19 |
20 |
21 | Home 22 | Link #1 23 | Link #2 24 | Link #3 25 | Follow me on Twitter 26 |
27 |
28 | 29 |
30 |
31 |

HTML Basics

32 |
33 |
    34 |
  • 35 | Tags Vs Elements 36 |
    • 37 |
  • 38 | attributes, how do they work? (a lot like magnets) 39 |
    • 40 |
  • 41 | How a browser reads html 42 |
    • 43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 |

CSS Basics

51 |
52 |
    53 |
  • 54 | ids' & classes 55 |
    • 56 |
  • 57 | how to use stylesheets, and why you never use inline styling 58 |
    • 59 |
  • 60 | specificity 61 |
    • 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |

Next class

70 |

Learn to code Week2

71 |
72 | Week two, Javascript! 73 |
74 | Learn more about Galvanize immersive programs! 75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | --------------------------------------------------------------------------------