├── README.md
├── assets
    ├── coding examples
    │   ├── stage-0-css-structure.css
    │   └── stage-0-html-structure.html
    ├── handouts
    │   └── codepen-pens.md
    └── images
    │   ├── sketch-palette.jpg
    │   ├── stage-0-css-structure.png
    │   ├── stage-0-html-structure.png
    │   └── stage-2-color-picker.png
├── stage-0.md
├── stage-1.md
├── stage-2.md
├── stage-3.md
├── stage-4.md
└── stage-5.md


/README.md:
--------------------------------------------------------------------------------
 1 | # Beginners Coding Workshop
 2 | 
 3 | ## Setup
 4 | - open Google Chrome
 5 | - open and login into Codepen.io
 6 | - open and login into Github.com
 7 | 
 8 | ## Goals
 9 | * practice something new to see if it interest you
10 | * able to read and understand HTML/CSS & Bootstrap (front-end development)
11 | 
12 | ## Outline
13 | * stage 0 - [Hello, World Wide Web](stage-0.md)
14 | * stage 1 - [Let's learn HTML](stage-1.md)
15 | * stage 2 - [Beautiful pages with CSS](stage-2.md)
16 | * stage 3 - [Sketch your idea](stage-3.md)
17 | * stage 4 - [Bootstrap for speedy design](stage-4.md)
18 | * stage 5 - [Build your site](stage-5.md)
19 | 
20 | ## URLs for your school's tech dept
21 | * https://github.com
22 | * https://codepen.io
23 | * https://placeholder.com
24 | * https://google.com (fonts.google.com, docs.google.com)
25 | * https://ccsearch.creativecommons.org
26 | * https://getbootstrap.com


--------------------------------------------------------------------------------
/assets/coding examples/stage-0-css-structure.css:
--------------------------------------------------------------------------------
1 | .posts article {
2 | 	font-family: Helvetiva, sans-serif;
3 | 	font-size: 1em;
4 | 	color: #444;
5 | 	padding; 15px;
6 | }


--------------------------------------------------------------------------------
/assets/coding examples/stage-0-html-structure.html:
--------------------------------------------------------------------------------
1 | <h1>News Posts</h1>
2 | <div class="posts">
3 | 	<article>
4 | 		<h2>Artcle #1 Heading</h2>
5 | 		<div class="post-content">
6 | 			Some article content here!
7 | 		</div>
8 | 	</article>
9 | </div>


--------------------------------------------------------------------------------
/assets/handouts/codepen-pens.md:
--------------------------------------------------------------------------------
 1 | # Codepen Pens
 2 | 
 3 | ## Plain Pen
 4 | Paragraph tag:
 5 | ```
 6 | <p>Paragraph text here</p>
 7 | ```
 8 | 
 9 | ## Roboto and Fish
10 | 1. https://fonts.google.com/
11 | 1. Heading tag:
12 | 	```
13 | 	<h1>Heading text here</h1>
14 | 	```
15 | 1. Heading tag with class:
16 | 	```
17 | 	<h1 class="roboto">Heading text here</h1>
18 | 	```
19 | 
20 | ## Candy Shop
21 | ```
22 | <h1>Simple Candy Shop</h1>
23 | <p>Jaw breakers and jelly beans only.</p>
24 | <p>Lorem...</p>
25 | <!-- start list of candies -->
26 | <ul>
27 | 	<li>jaw breakers</li>
28 | 	<li>jelly beans</li>
29 | 	<li>nothing else</li>
30 | </ul>
31 | ```
32 | 
33 | ## Yard Services
34 | ```
35 | <div class="services">
36 | 	<div class="service">
37 | 		<img src="http://via.placeholder.com/350x150" alt="cut and trim lawn care">
38 | 		<h1>Cut and Trim</h1>
39 | 		<p>Lorem...</p>
40 | 	</div>
41 | 	<div class="service">
42 | 		<!-- landscaping -->
43 | 	</div>
44 | 	<div class="service">
45 | 		<!-- tree removal -->
46 | 	</div>
47 | </div>
48 | ```
49 | * placehold.it
50 | 
51 | ## Company Team
52 | ```
53 | <div class="col-md-6">
54 | 	<h2>Susan Smith</h2>
55 | 	<p>Lorem...</p>
56 | </div>
57 | <div class="col-md-6">
58 | 	<img src="http://via.placeholder.com/350x150" alt="cut and trim lawn care">
59 | </div>
60 | ```


--------------------------------------------------------------------------------
/assets/images/sketch-palette.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chancesmith/Beginners-Coding-Workshop/f926a8f4af583b81c0a5830661da3d4db675c39f/assets/images/sketch-palette.jpg


--------------------------------------------------------------------------------
/assets/images/stage-0-css-structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chancesmith/Beginners-Coding-Workshop/f926a8f4af583b81c0a5830661da3d4db675c39f/assets/images/stage-0-css-structure.png


--------------------------------------------------------------------------------
/assets/images/stage-0-html-structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chancesmith/Beginners-Coding-Workshop/f926a8f4af583b81c0a5830661da3d4db675c39f/assets/images/stage-0-html-structure.png


--------------------------------------------------------------------------------
/assets/images/stage-2-color-picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chancesmith/Beginners-Coding-Workshop/f926a8f4af583b81c0a5830661da3d4db675c39f/assets/images/stage-2-color-picker.png


--------------------------------------------------------------------------------
/stage-0.md:
--------------------------------------------------------------------------------
 1 | # Hello, World Wide Web!
 2 | ### Beginners Coding Workshop - Stage #0
 3 | 
 4 | ## What makes up a website?
 5 | Bring on the languages of the Internet!
 6 | 
 7 | There will be two files of HTML and CSS to build a website.
 8 | 
 9 | ### HTML - Hypertext Markup Language
10 | ![HTML example](https://github.com/chancesmith/Beginners-Coding-Workshop/blob/master/assets/images/stage-0-html-structure.png)
11 | 
12 | Gives content structure and hierarchy.
13 | 
14 | ### CSS - Cascading Style Sheets
15 | ![CSS example](https://github.com/chancesmith/Beginners-Coding-Workshop/blob/master/assets/images/stage-0-css-structure.png)
16 | 
17 | Gives the content colors, fonts, and design.
18 | 
19 | ### JS - Javascript
20 | Not covered in this course, Javascript helps with user interactions. When a button is clicked, what should happen?
21 | 
22 | Checkout a Bootstrap Modal example:
23 | https://codepen.io/DawsonMediaD/pen/byDqv
24 | 
25 | ## How do these languages work together?
26 | 
27 | ## The Browser
28 | With the above ingredients, the browser knows what to do with them.
29 | 
30 | 1. Browser --> Google.com
31 | 1. Google.com --> Web Server
32 | 1. Web Server --> Google Server
33 | 1. Google Server --> HTML/CSS/JS
34 | 1. HTML/CSS/JS --> Browser (back again)
35 | 
36 | ## Where do I go from here?
37 | Learning to code is doable. Start here:
38 | * Find a passion project.
39 | * Find a mentor.
40 | * Code every day.
41 | 
42 | ## Tools of the Trade
43 | * text editor (Ex: [Sublime Text](http://www.sublimetext.com/), [Atom](https://atom.io/), [Visual Studio Code](https://code.visualstudio.com/))
44 | * Inspector tool (Ex: Chrome inspector)
45 | * Boilerplate (Ex: [HTML5 Boilerplate](https://html5boilerplate.com/))
46 | * Playground area (Ex: [Codepen](http://codepen.io))
47 | * [Github](http://github.com) (Also learn: Command Line and Git)
48 | 
49 | ## Next up
50 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
51 | * stage 1 - [Let's learn HTML](stage-1.md)
52 | * stage 2 - [Beautiful pages with CSS](stage-2.md)
53 | * stage 3 - [Sketch your idea](stage-3.md)
54 | * stage 4 - [Bootstrap for speedy design](stage-4.md)
55 | * stage 5 - [Build your site](stage-5.md)


--------------------------------------------------------------------------------
/stage-1.md:
--------------------------------------------------------------------------------
  1 | # Let's learn HTML
  2 | ### Beginners Coding Workshop - Stage #1
  3 | 
  4 | ## slide deck
  5 | [https://docs.google.com/presentation/d/1z_lGhTlZHh0yHGR6kHiLLJZV52LMm8-y5NcktPWYKuQ/edit#slide=id.gc6f59039d_0_0](https://docs.google.com/presentation/d/1z_lGhTlZHh0yHGR6kHiLLJZV52LMm8-y5NcktPWYKuQ/edit#slide=id.gc6f59039d_0_0)
  6 | 
  7 | ## HTML tips
  8 | * **everything is a box** - Think of everything you see on a website as a box. This will help you build and design the pages you create.
  9 | * **seek inspiration** - there are lots of websites to look at the source code of for inspiration of how things could/should be done.
 10 | 
 11 | ## Headings
 12 | ```
 13 | <h1>Top most heading H1</h1>
 14 | <h2>sub-heading</h2>
 15 | <h3>sub-sub-heading</h3>
 16 | <h4>sub-sub-sub-heading</h4>
 17 | <h5>sub-sub-sub-sub-heading</h5>
 18 | <h6>sub-sub-sub-sub-sub-heading</h6>
 19 | ```
 20 | 
 21 | ## Your homepage of your website
 22 | For this course and post sites, expect to see `index` as the homepage.
 23 | * Example: `index.html`
 24 | 
 25 | ## Other pages in your website
 26 | * 'about.html'
 27 | * 'team.html'
 28 | * 'services.html'
 29 | * 'directory.html'
 30 | * 'products.html'
 31 | * 'contact-us.html'
 32 | 
 33 | ## Link to other pages
 34 | The anchor tag `<a>` is what you'll use to create links to other pages and other websites.
 35 | 
 36 | Using the pages listed above, let's see a list of links that would help us navigate between the pages.
 37 | ```
 38 | <a href="about.html">about</a>
 39 | <a href="team.html">team</a>
 40 | <a href="services.html">services</a>
 41 | <a href="directory.html">directory</a>
 42 | <a href="products.html">products</a>
 43 | <a href="contact-us.html">contact-us</a>
 44 | ```
 45 | 
 46 | ## Images example
 47 | An image is an `<img>` with two attributes `src` (source) and `alt` (alternate text).
 48 | `<img src="logo.png" alt="chick-fil-a logo">`
 49 | `<img src="big-candy-machine.png" alt="very big candy machine">`
 50 | 
 51 | ## See example content in CodePen
 52 | This Pen is a CSS change, but it shows an example of content with images.
 53 | [https://codepen.io/chancesmith/pen/dNOyxQ?editors=1000](https://codepen.io/chancesmith/pen/dNOyxQ?editors=1000)
 54 | 
 55 | ## List examples
 56 | Unordered list
 57 | ```
 58 | <h1>Best Fruits</h1>
 59 | <ul>
 60 | 	<li>oranges</li>
 61 | 	<li>bananas</li>
 62 | 	<li>cake</li>
 63 | </ul>
 64 | ```
 65 | 
 66 | Ordered list
 67 | ```
 68 | <ol>
 69 | 	<li>one</li>
 70 | 	<li>two</li>
 71 | 	<li>three</li>
 72 | </ol>
 73 | ```
 74 | 
 75 | ## Typography tags
 76 | * `<em></em>`
 77 | * `<i></i>`
 78 | * `<strong></strong>`
 79 | 
 80 | ## Other content tags you
 81 | * `<div></div>`
 82 | * `<span></span>`
 83 | * `<section></section>`
 84 | *	`<article></article>`
 85 | 
 86 | 
 87 | ## Hosting
 88 | Github Pages is a great tool for free hosting of simple HTML/Javascript sites.
 89 | 
 90 | Wait, Hosting? This is where your files will live, on a server/computer, so that the world and see your creation.
 91 | 
 92 | ## Get some practice
 93 | Head to [CodePen.io](http://codepen.io)
 94 | 
 95 | ## Next up
 96 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
 97 | * ~~stage 1 - [Let's learn HTML](stage-1.md)~~
 98 | * stage 2 - [Beautiful pages with CSS](stage-2.md)
 99 | * stage 3 - [Sketch your idea](stage-3.md)
100 | * stage 4 - [Bootstrap for speedy design](stage-4.md)
101 | * stage 5 - [Build your site](stage-5.md)


--------------------------------------------------------------------------------
/stage-2.md:
--------------------------------------------------------------------------------
 1 | # Beautiful pages with CSS
 2 | ### Beginners Coding Workshop - Stage #2
 3 | 
 4 | ## slide deck
 5 | [https://docs.google.com/presentation/d/1D0ZityRJ7nnBM3glEjirlrTdINdhYLBbV8Y9eLLr3a0/edit#slide=id.gc6f59039d_0_0](https://docs.google.com/presentation/d/1D0ZityRJ7nnBM3glEjirlrTdINdhYLBbV8Y9eLLr3a0/edit#slide=id.gc6f59039d_0_0)
 6 | 
 7 | ## important to remember
 8 | * CSS is not intuitive. So, give it time and welcome to the party.
 9 | * CSS is cascading. Meading the last style overwrites everything before it. CSS goes in order from top to bottom
10 | 
11 | ## selectors
12 | * tag `div` would select all `div`
13 | * class `.cake` would change all elements of `<div class="cake"></div>`
14 | * id `#chocolate` would only select one `<div class="cake" id="chocolate"></div>`
15 | 
16 | ## relational selections
17 | * select `.cake > .layer` would select on the layer in the cake
18 | ```
19 | 
20 | <div class="table">
21 | 	<div class="cake">
22 | 		<div class="layer">this one</div>
23 | 	</div>
24 | 	<div class="layer"></div>
25 | </div>
26 | 
27 | ```
28 | * select `.cake + .layer` would select on the layer in the cake
29 | ```
30 | 
31 | <div class="table">
32 | 	<div class="cake">
33 | 		<div class="layer"></div>
34 | 	</div>
35 | 	<div class="layer">this one</div>
36 | </div>
37 | 
38 | ```
39 | 
40 | ## CSS game to practice selectors
41 | [CSS Diner](https://flukeout.github.io/)
42 | 
43 | ## Colors
44 | There are a few ways you'll see colors definded:
45 | 
46 | Literal
47 | * `color: red;`
48 | * `color: blue;`
49 | * `color: green;`
50 | 
51 | HEX (hexadecimal)
52 | * `color: #f00; /* red */`
53 | * `color: #001aff; /* blue */`
54 | * `color: #2f0; /* green */`
55 | 
56 | RGBA (red green blue alpha)
57 | * `color: rgb(255, 0, 0); /* red */`
58 | * `color: rgb(0, 26, 255); /* blue */`
59 | * `color: rgb(34, 255, 0); /* green */`
60 | 
61 | There is a method to the madness, but you'll be happy to know there are color pickers to help you.
62 | 
63 | ![chrome inspector color picker](./assets/images/stage-2-color-picker.png)
64 | 
65 | ## CSS property list
66 | Here are some of the lists of properties you'll see in the wild. You'll want to use these a good bit.
67 | 
68 | ```
69 | p {
70 | 	font-size: 18px;
71 | 	font-family: sans-serif;
72 | 	color: #333;
73 | 	line-height: 1em;
74 | }
75 | .service {
76 | 	border: 1px solid #333;
77 | 	padding: 10px 14px;
78 | 	margin: 0;
79 | 	width: 100%;
80 | 	height: auto;
81 | 	background-color: #fff;
82 | }
83 | ```
84 | 
85 | ## Get some practice
86 | Head to CodePen.io
87 | 
88 | ## Next up
89 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
90 | * ~~stage 1 - [Let's learn HTML](stage-1.md)~~
91 | * ~~stage 2 - [Beautiful pages with CSS](stage-2.md)~~
92 | * stage 3 - [Sketch your idea](stage-3.md)
93 | * stage 4 - [Bootstrap for speedy design](stage-4.md)
94 | * stage 5 - [Build your site](stage-5.md)


--------------------------------------------------------------------------------
/stage-3.md:
--------------------------------------------------------------------------------
 1 | # Sketch your idea
 2 | ### Beginners Coding Workshop - Stage #3
 3 | 
 4 | ## Get your ideas on paper
 5 | There are lots of digital tools for sketch, but paper is permanent. Your brain responds differently to something you can't erase or undo.
 6 | 
 7 | ## Explore elements of sketching websites and apps
 8 | Here is a rough sketch of elements you can use to sketch your website.
 9 | ![website sketch palette](./assets/images/sketch-palette.jpg)
10 | 
11 | ## Let's sketch
12 | - follow the leader
13 | - example site
14 | - real site
15 | 
16 | ## Next up
17 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
18 | * ~~stage 1 - [Let's learn HTML](stage-1.md)~~
19 | * ~~stage 2 - [Beautiful pages with CSS](stage-2.md)~~
20 | * ~~stage 3 - [Sketch your idea](stage-3.md)~~
21 | * stage 4 - [Bootstrap for speedy design](stage-4.md)
22 | * stage 5 - [Build your site](stage-5.md)


--------------------------------------------------------------------------------
/stage-4.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap for speedy design
 2 | ### Beginners Coding Workshop - Stage #4
 3 | 
 4 | ## Bootstrap - a web framework
 5 | A framework is a collection of reusable code and common design patterns for websites. No need to start from scratch.
 6 | 
 7 | Bootstrap comes with HTML and CSS to get your projects started. There are so many examples to follow in their documents.
 8 | 
 9 | ## Starting from scratch
10 | Hello, Responsive design!
11 | ![responsive design](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/e8f2a947810259.588a1ff409751.gif)
12 | [Presented on Behance for 2017 Design Trends](https://www.behance.net/gallery/47810259/2017-Design-Trends-Guide)
13 | 
14 | Responsive design is presenting different layouts of a website in proportion to a device's screen size. This ability to adapt to different screen sizes is used with CSS Media Queries.
15 | 
16 | ## Bootstrap Walkthrough
17 | https://getbootstrap.com
18 | 
19 | ## Bootstrap column examples
20 | * https://codepen.io/chancesmith/pen/KWoyjX
21 | * https://codepen.io/chancesmith/pen/ZerqZe
22 | 
23 | ## Next up
24 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
25 | * ~~stage 1 - [Let's learn HTML](stage-1.md)~~
26 | * ~~stage 2 - [Beautiful pages with CSS](stage-2.md)~~
27 | * ~~stage 3 - [Sketch your idea](stage-3.md)~~
28 | * ~~stage 4 - [Bootstrap for speedy design](stage-4.md)~~
29 | * stage 5 - [Build your site](stage-5.md)


--------------------------------------------------------------------------------
/stage-5.md:
--------------------------------------------------------------------------------
 1 | # Build your site
 2 | ### Beginners Coding Workshop - Stage #5
 3 | 
 4 | ## Setup CodePen project
 5 | https://codepen.io/chancesmith/project/editor/AgaxvL/
 6 | 
 7 | ## How to source images
 8 | https://ccsearch.creativecommons.org/
 9 | "Copy credit as HTML"
10 | 
11 | https://images.google.com `(search for an image) > tools > usages rights`
12 | 
13 | Placeholder images: https://placeholder.com/
14 | 
15 | ## Setup Github repository
16 | http://github.com
17 | 
18 | ## Next up
19 | * ~~stage 0 - [Hello, World Wide Web](stage-0.md)~~
20 | * ~~stage 1 - [Let's learn HTML](stage-1.md)~~
21 | * ~~stage 2 - [Beautiful pages with CSS](stage-2.md)~~
22 | * ~~stage 3 - [Sketch your idea](stage-3.md)~~
23 | * ~~stage 4 - [Bootstrap for speedy design](stage-4.md)~~
24 | * ~~stage 5 - [Build your site](stage-5.md)~~
25 | * finish line (You're done!)
26 | 


--------------------------------------------------------------------------------