├── README.md ├── css ├── box-model.md ├── chrome_inspector.md ├── design-resources.md ├── positioning.md └── responsive-font-sizes.md ├── design-resources.md ├── extra-resources ├── example-css-test │ ├── index.html │ └── style.css ├── nav-bar-activity │ ├── nav-example │ │ ├── index.html │ │ └── style.css │ └── nav-tutorial.md └── responsive-design │ ├── media-queries-examples │ ├── index.html │ └── style.css │ ├── media-queries.md │ ├── responsive-design.md │ └── responsive-example │ ├── index.html │ └── style.css ├── followup.md ├── gh-pages └── tutorial.md ├── html └── html-cheatsheet.md ├── keep-learning-coding.md ├── schedule.md └── teacher-resources ├── 2017-revamp.md ├── 2day-schedule.md ├── html.md └── schudule.md /README.md: -------------------------------------------------------------------------------- 1 | # workshop-html-css 2 | An introductory weekend workshop to HTML & CSS 3 | 4 | Welcome to our workshop! 5 | 6 | [Slides can be found here](https://drive.google.com/file/d/0B73woEu0t2mqaUV6bEdJMy03VjQ/view?usp=sharing) 7 | 8 | Positioning [game](http://codepen.io/tormod17/pen/WRpBpR?editors=1100) 9 | 10 | [Leave us your feedback](https://founderscoders.typeform.com/to/TEY1m4) 11 | -------------------------------------------------------------------------------- /css/box-model.md: -------------------------------------------------------------------------------- 1 | ###The CSS box model 2 | 3 | All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. 4 | 5 | The CSS box model is essentially a box that wraps around HTML elements, and it consists of: **margins, borders, padding, and the actual content**. 6 | 7 | The box model allows us to add a border around elements, and to define space between elements. 8 | 9 | The image below illustrates the box model: 10 | 11 | ![The image illustrates the box model](http://www.w3schools.com/css/box-model.gif) 12 | 13 | 14 | #####Explanation of the different parts: 15 | 16 | * **Content** - The content of the box, where text and images appear 17 | * **Padding** - Clears an area around the content. The padding is transparent 18 | * **Border** - A border that goes around the padding and content 19 | * **Margin** - Clears an area outside the border. The margin is transparent 20 | 21 | >Example: 22 | 23 | >div { 24 | width: 300px; 25 | padding: 25px; 26 | border: 25px solid navy; 27 | margin: 25px; 28 | } 29 | 30 | In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. 31 | 32 | When you set the width and height properties of an element with CSS, you just set the width and height of the content area. **To calculate the full size of an element, you must also add padding, borders and margins.** 33 | 34 | 35 | **Total element width** = width + left padding + right padding + left border + right border + left margin + right margin 36 | 37 | **Total element height** = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 38 | -------------------------------------------------------------------------------- /css/chrome_inspector.md: -------------------------------------------------------------------------------- 1 | ##Chrome Inspector (Dev Tools) 2 | 3 | When writing CSS Chrome developer tools are your best friend (other browsers offer a similar services). 4 | They will allow you to: 5 | - look at the structure of your HTML (including classes and styles that have been applied) 6 | - See which CSS styles are being applied 7 | - Test out new styles 8 | - Preview you your site on different sized devices (more on sundays workshop) 9 | 10 | .... and much more 11 | 12 | For more information 13 | - [Offical Documentation](https://developers.google.com/web/tools/chrome-devtools/?hl=en) 14 | - [Six Tips for Chrome Dev Tools] (https://css-tricks.com/six-tips-for-chrome-devtools/) 15 | 16 | #Opening Chrome Dev Tools 17 | To open Chrome Dev Tools (also known as chrome inspector) you either: 18 | ![type commands](https://files.gitter.im/foundersandcoders/html-june/LupJ/Screen-Shot-2016-06-03-at-17.50.44.png) 19 | or right click on the page 20 | ![right click](https://files.gitter.im/foundersandcoders/html-june/pMJV/Screen-Shot-2016-06-03-at-17.46.50.png) 21 | 22 | -------------------------------------------------------------------------------- /css/design-resources.md: -------------------------------------------------------------------------------- 1 | #Design & Image Resources 2 | 3 | 4 | ##Photos 5 | * [Unsplash](https://unsplash.com/) Beautiful and free to use stock photos. 6 | * [Pixabay] (https://pixabay.com/) Free images and videos you can use anywhere. 7 | 8 | ##Fonts 9 | * [Google Fonts] (https://www.google.com/fonts) Free to use web fonts, [a tutorial to get started using them](https://developers.google.com/fonts/docs/getting_started?hl=en) 10 | * [Font Awesome] (https://fortawesome.github.io/Font-Awesome/)Open Source icons. Use in a similar way to Google fonts (checkout the documentation). 11 | * [Font Squirrel] (http://www.fontsquirrel.com/) More free fonts to use. 12 | 13 | ##Colour 14 | * [Adobe Kuler or Colour CC] (https://color.adobe.com/create/color-wheel/) A great resource for picking a colour scheme. [Browse their library] (https://color.adobe.com/explore/newest/) or create your own from scratch or from a photo. 15 | * [50 Beautiful Colour Palettes for your next web project] (http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project) inspiration! 16 | 17 | 18 | ##Editor Tips 19 | * Shortcuts to writing tags - e.g. by typing li/p/h1 then tab will automatically give you the opening and closing tabs. 20 | 21 | 22 | ##Inspiration 23 | * [Awwwards](http://www.awwwards.com/) The latests trends in professional sites. Some very high spec examples here. 24 | * [Creaive Blog](http://www.creativebloq.com/) A great resource for web design information. 25 | * [Smashing Magazine] (http://www.smashingmagazine.com/) Lot's of information on all things design and front end. 26 | * 27 | ##Templates 28 | * [Bootstrap Agency](http://startbootstrap.com/template-overviews/agency/) A beautiful and free to use template. Download the files and customise. 29 | -------------------------------------------------------------------------------- /css/positioning.md: -------------------------------------------------------------------------------- 1 | #Fixed Absolute and Relative Positioning 2 | 3 | ###Static Position 4 | this is the default positioning. 5 | 6 | ###Relative positioning 7 | 8 | Essentially means "relative to itself". If you specify position:relative then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. However, if you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it's positioning. 9 | 10 | E.g. If you specify position:relative and give the element some other positioning attribute, such as, top: 10px; it will shift it's position 10 pixels down from where it would normally be. 11 | 12 | ![an example of relative positioning] (http://blog.teamtreehouse.com/wp-content/uploads/2012/11/position-relative.jpg) 13 | 14 | 15 | ###Absolute positioning 16 | Absolute positioning is a bit confusing. Basically the browser will look back up the elements DOM tree for the most recent parent that is positioned anything other than static (ie relative, fixed or absolute). If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. **Absolute positioning, positions elements relative to its nearest non static parent**. 17 | 18 | Because absolute positioning is based on the positioning of parent elements, this can make it difficult to workout. You will have to investigate the positioning of an elements parent. 19 | 20 | Still confused? [This blog post does a really good job of explaining absolute and relative positioning ](https://css-tricks.com/absolute-positioning-inside-relative-positioning/). 21 | 22 | ###Fixed positioning 23 | Elements are fixed in a static position to the viewport (ie the window you can see on the browser). 24 | 25 | 26 | 27 | 28 | ### Useful links 29 | http://learnlayout.com/position.html 30 | -------------------------------------------------------------------------------- /css/responsive-font-sizes.md: -------------------------------------------------------------------------------- 1 | ## Responsive Font Size 2 | 3 | #### Three ways to create responsive font 4 | * Using viewport units you can set your font size as a percentage of the browser size. The following units are available: 5 | * `vw` - sets the font size to be a percentage of the browser width 6 | * `vh` - sets the font size to be a percentage of the browser height 7 | * `vmin` - the shortest of the above two dimensions 8 | * `vmax` - the longest of the above two dimensions 9 | 10 | 11 | * Using media queries you can set discrete font sizes for various viewport sizes 12 | * Use `@media (min-width:2000px) { your CSS }`. will apply the CSS only when the screen width is greater than `2000px`. 13 | * Use `@media (max-width:1000px) { your CSS }`. will apply the CSS only when the screen width is less than `1000px`. 14 | 15 | 16 | * Use `em` and `rem` units to access pixel sizes of preset fonts. 17 | * `font-size=2em` this means that the font size of the text will be set to twice that of the default. e.g. you may set the font size of a paragraph to be `3em`. if the default font size is `12px` then the paragraph font size in pixel will be `36px` 18 | * `rem` is similar to `em`, except it look for at the font size of the html element. This allows all responsive font to look at the same root font size. 19 | 20 | #####For more information on responsive font sizing visit: http://codeitdown.com/responsive-font-size-css/ 21 | 22 | ## Responsive Div Size 23 | 24 | #### Three ways to create responsive Divs 25 | * Divs width can be set as a percentage of the parent width. e.g. `
` will set the width of the `div` to the width of its parent. 26 | * As above media queries can all be used to customise the size of `div` elements 27 | * As above the units `em` & `rem` can be used in setting the size of `div` elements 28 | 29 | 30 | ###Navbars 31 | [A tutorial to follow to add a responsive navbar with hamburger menu](http://inspirationalpixels.com/tutorials/creating-a-responsive-menu-with-html-css-jquery) 32 | 33 | 34 | ###Final Thoughts 35 | 36 | ##### Although all these techniques can be effective on their own, they work best when used in conjunction with each other 37 | 38 | -------------------------------------------------------------------------------- /design-resources.md: -------------------------------------------------------------------------------- 1 | # Design Resources 2 | - [Unsplash](https://unsplash.com/) Free high res photos. 3 | - [Adoble Color](https://color.adobe.com/) Colour schemes, and generate colour scheme from a photo. 4 | - [50 Beautiful Color Palettes for Your Next Web Project](http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project) 5 | - [Google Fonts Pairings](https://femmebot.github.io/google-type/) 6 | -------------------------------------------------------------------------------- /extra-resources/example-css-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | Cat Logo 15 |
16 |
17 |
    18 |
  • About
    • 19 |
  • Contact
    • 20 |
21 |
22 |
23 |
24 | 25 |
26 |

Hello World

27 |

I love CSS

28 |
29 | 30 | 31 |
32 |
33 |

Hipster lorem Ipsum

34 |

Ugh messenger bag typewriter tousled chicharrones, forage ethical. Craft beer cliche pinterest gentrify franzen. Church-key asymmetrical hoodie pitchfork gochujang, lo-fi PBR&B celiac keffiyeh umami street art. Flexitarian ennui affogato waistcoat. Gluten-free 8-bit bitters pour-over roof party. Chia gluten-free beard, swag health goth letterpress etsy 3 wolf moon drinking vinegar intelligentsia pabst street art hashtag biodiesel. Direct trade slow-carb semiotics, fixie distillery chillwave tacos drinking vinegar ugh mixtape poutine.

35 |

Shabby chic PBR&B photo booth retro. Before they sold out single-origin coffee you probably haven't heard of them literally, echo park messenger bag hoodie farm-to-table trust fund deep v polaroid. Vinyl pickled deep v, celiac before they sold out cliche meditation art party chicharrones williamsburg selvage. Microdosing fanny pack swag, roof party godard messenger bag sartorial DIY typewriter direct trade PBR&B. Narwhal 8-bit quinoa, kombucha franzen retro pour-over try-hard austin ugh. YOLO 90's taxidermy DIY. DIY you probably haven't heard of them church-key twee, trust fund scenester PBR&B listicle fingerstache beard.

36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 |
45 | 46 |
47 | 48 |
49 |

One

50 |
51 |
52 |

Two

53 |
54 |
55 |

Three

56 |
57 |
58 |

Four

59 |
60 |
61 | 62 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /extra-resources/example-css-test/style.css: -------------------------------------------------------------------------------- 1 | /*ALL ITEMS*/ 2 | * { 3 | font-family: sans-serif; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | width: 100%; 9 | } 10 | 11 | 12 | /*NAVBAR STYLING*/ 13 | 14 | .logo-div{ 15 | width: 30%; 16 | float:left; 17 | } 18 | .logo-div img{ 19 | width:8.5em; 20 | } 21 | .nav-tabs{ 22 | width: 68%; 23 | float: right; 24 | text-align: right; 25 | } 26 | 27 | .nav-tabs li{ 28 | text-decoration: none; 29 | display: inline-block; 30 | padding: 1em; 31 | /*margin and padding at space around the li elemenets*/ 32 | background-color: #704C38; 33 | border-radius: 2em; 34 | margin: 1em; 35 | color: white; 36 | } 37 | .clear { 38 | clear: both; 39 | } 40 | 41 | /*HEADER STYLING*/ 42 | header { 43 | text-align: center; 44 | background-image: url("https://images.unsplash.com/photo-1431975562098-bac8ded504c7?crop=entropy&fit=crop&fm=jpg&h=850&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1700"); 45 | padding: 2em; 46 | } 47 | 48 | header h1 { 49 | font-family: fantasy; 50 | font-size: 6em; 51 | margin: 0; 52 | } 53 | 54 | header h3 { 55 | font-size: 2.5em; 56 | margin: 0; 57 | font-weight: 100; 58 | color: white; 59 | } 60 | 61 | /*CONTENT STYLING*/ 62 | 63 | .row{ 64 | margin: 5em; 65 | } 66 | 67 | .left-div{ 68 | width: 40%; 69 | float: left; 70 | } 71 | 72 | .right-div{ 73 | width: 58%; 74 | float: right; 75 | text-align: center; 76 | } 77 | .right-div img{ 78 | width:55em; 79 | } 80 | 81 | /*BOX STYLING*/ 82 | 83 | .main { 84 | text-align: center; 85 | } 86 | 87 | .section-two{ 88 | background-color: #704C38; 89 | width:23%; 90 | height:10em; 91 | display: inline-block; 92 | } 93 | 94 | .section-two h1 { 95 | font-family: fantasy; 96 | font-size: 4em; 97 | color: white; 98 | } 99 | 100 | .section-two:hover { 101 | background-color: #777572; 102 | } 103 | 104 | /*FOOTER*/ 105 | 106 | footer { 107 | margin-top: 1em; 108 | text-align: center; 109 | padding: 1em; 110 | background-color: #777572; 111 | } 112 | footer a{ 113 | color: #704C38; 114 | text-decoration: none; 115 | font-size: 1.3em; 116 | } 117 | -------------------------------------------------------------------------------- /extra-resources/nav-bar-activity/nav-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Navbar 6 | 7 | 8 | 9 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /extra-resources/nav-bar-activity/nav-example/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | 6 | nav { 7 | display: flex; 8 | align-items: center; 9 | justify-content: space-between; 10 | 11 | width: 100%; 12 | background-color: #FAEBDB; 13 | font-family:sans-serif; 14 | 15 | } 16 | 17 | ul { 18 | padding-right: 4em; 19 | } 20 | 21 | 22 | nav ul li { 23 | display: inline; 24 | padding: 5px; 25 | text-decoration: none; 26 | } 27 | 28 | nav ul li:hover { 29 | color: white; 30 | } 31 | -------------------------------------------------------------------------------- /extra-resources/nav-bar-activity/nav-tutorial.md: -------------------------------------------------------------------------------- 1 | # Navbar Tutorial 2 | 3 | Follow this tutorial to make a simple navbar. If you get stuck you can have a look at the example in [this directory](https://github.com/foundersandcoders/workshop-html-css/tree/master/nav-bar-activity/nav-example) (but try and work through the tutorial without it as much as you can). 4 | 5 | ### HTML 6 | First we are going to need to layout our HTML. We are going to make a simple navbar that looks like this: 7 | ![Example Wireframe] (https://files.gitter.im/RachBLondon/F70a/Screen-Shot-2016-01-18-at-09.36.23.png) 8 | 9 | - create a new folder, and inside that folder create a file called index.html 10 | - create a basic html outline (Atom will auto complete this for you if you type start to type html and press `enter` (you can use this trick for other html elements as well). 11 | - We are going to use HTML5, so create a `