-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathslides.html
1776 lines (1341 loc) · 67.3 KB
/
slides.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ladies Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CQuicksand%7CPacifico%7COpen+Sans:400italic,400,300' rel='stylesheet' type='text/css' data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<!--Slide 1-->
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/teenslc-logo-stacked-white.png" alt="Teens Learning Code logo">Welcome!</h1>
<div class="instructions">
<h2>Get <br>Connected</h2>
<p><strong>Wifi:</strong> wifi network</p>
<p><strong>Password:</strong> wifi password</p>
<hr>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content by <a href="https://twitter.com/EmilyBaillie">Emily Baillie</a>, <a href="http://www.stelsewhereweb.com">Daniel Butterfield</a> & <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.ca" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide welcome">
<h1><img class="logo-stacked" src="framework/img/teenslc-logo-stacked-white.png" alt="Ladies Learning Code logo">Getting Started</h1>
<div class="instructions nested-list">
<h2>Workshop<br> Instructions</h2>
<ul class="downloads">
<li>View slide presentation here: <a href="http://bit.ly/teenslc-wp-intro-slides">bit.ly/teenslc-wp-intro-slides</a>
</li>
<li>Go to <a href="http://wordpress.com">WordPress.com</a> and create an account.<br>
For additional instructions for setting up an account, navigate to the presentation url and click <a href="set-up.html">here</a>.</li>
</ul>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content by <a href="https://twitter.com/EmilyBaillie">Emily Baillie</a>, <a href="http://www.stelsewhereweb.com">Daniel Butterfield</a> & <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<!-- Instructor info -->
<section class="slide intro">
<img class="logo" src="framework/img/teenslc-logo-white.png" alt="Ladies Learning Code logo">
<h1 class="heading-bg">
<span>Intro to Blogging<br>& Wordpress - Part 1 </span>
</h1>
<!-- <img class="instructor" src="http://nerissamartin.com/wp-content/uploads/2014/07/NJM_HackerYou.jpg" alt="Nerissa Martin">
<h2><span class="cursive">with</span> Nerissa Martin</h2>
<ul>
<li><a href="http://nerissamartin.com">nerissamartin.com</a></li>
<li><a href="https://twitter.com/justnerissa">@justnerissa</a></li>
<li><a href="mailto:hi@nerissamartin.com">hi@nerissamartin.com</a></li>
</ul> -->
<!--div class="sponsor">
<p>In partnership with<br> <img src="framework/img/telus-logo-white.svg" alt="Telus"></p>
</div-->
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content by <a href="https://twitter.com/EmilyBaillie">Emily Baillie</a>, <a href="http://www.stelsewhereweb.com">Daniel Butterfield</a> & <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<!--Introduction Section (Where learners and mentors say their names)-->
<section class = "slide centered" data-markdown data-toc>
<script type="text/template">
#Introductions
<iframe src="https://giphy.com/embed/fGObGrJxGSugQ9rXQK" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/skylar-astin-greg-serrano-new-fGObGrJxGSugQ9rXQK">via GIPHY</a></p>
</script>
</section>
<!-- Adding Ice-Breaker Section Here-->
<section class="slide title dark" data-markdown data-toc>
<script type="text/template">
#Ice Breaker ❄️
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Coders' code
1. Be friendly and welcoming
1. Be respectful of others by choosing words and actions with care
1. Be mindful of how much space you take up in conversations
1. Ask questions
1. Try your best (and have fun!)
</script>
</section>
<!--Slide 3-->
<section class="slide" data-markdown>
<script type="text/template">
#Course Outline
<div class="table-of-contents"></div>
See the Ladies Learning Code WordPress sample blog [here](http://ladieslearningcode.wordpress.com). 💁♀️
</script>
</section>
<!--Slide 4-->
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Blog vs Website 💻
* blogs often contain an ongoing collection of time-based posts, presented in chronological order
* often (but not always) written in a diary-style of commentary
* a website usually contains informational pages but can also have a blog section
Some popular blogs:
1. [Girls Life](https://www.girlslife.com)
1. [TechCrunch](http://techcrunch.com/)
1. [The Sartorialist](http://www.thesartorialist.com/)
1. [The Huffington Post](http://www.huffingtonpost.ca/)
1. [Lifehacker](http://lifehacker.com/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Let's Think 🤔:
1. What makes a blog popular?<!-- .element: class="delayed" -->
1. What are some of your favourite blogs?<!-- .element: class="delayed" -->
</script>
</section>
<!--Slide 5-->
<section class="slide" data-markdown>
<script type="text/template">
# Why Should I Start a Blog? 📝
* Get noticed 😎
* Communicate your ideas to the world 🌎
* Create community 👭
* Be creative & have fun ❤️
* Document events in your life + learnings 📸
* Follow your passion 🤩
<iframe src="https://giphy.com/embed/prsVOti94aE2k" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/blogging-prsVOti94aE2k">via GIPHY</a></p>
</script>
</section>
<!--Slide 6-->
<section class="slide" data-markdown>
<script type="text/template">
#Content Management System (CMS) 📊
**A CMS** is an application used to edit content and manage a website using a graphical user interface rather than editing code.
A CMS, like WordPress, may also includes features such as:
* creating site navigation elements
* database management
* themes and templates for page layouts
* making content searchable and indexable
* and much more!
</script>
</section>
<!--Slide 7-->
<section class="slide wp-intro" data-markdown data-toc>
<script type="text/template">
#What is WordPress? ❓
* a type of blogging software and a CMS
* now powering 25%+ of the web! (Source: Forbes.com)
* an online, open source website creation tool
* uses templates & a database to create and store content
</script>
</section>
<!--Slide 8-->
<section class="slide two-col-list" data-markdown>
<script type="text/template">
#WordPress.com vs WordPress.org 😮
* WordPress**.com**
* yoursite.wordpress.com*
* hosted & maintained by WordPress
* no access to the code*
* theme are included but cannot upload your own or use plugins
* different plans (up to $299) with added features & upgrades*
* WordPress**.org**
* custom domain
* you're in charge of site maintenance
* requires web development knowledge (PHP, HTML, CSS, JS)
* more theme options
* full control over themes files
* 1000s of plugins to add features
*Paid upgrades available for additional customization. <!-- .element: class="note" --> [See more info here](https://learn.wordpress.com/get-started/#wpplan).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Make an account on [Wordpress**.com**](https://wordpress.com) 🤗
Create an account with your email and follow along!
<img src = "framework/img/workshop/wordpress.png">
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#The Dashboard 🖥
</script>
</section>
<!--Slide 10-->
<section class="slide" data-markdown>
<script type="text/template">
#The Dashboard 🖥
Logging into the WordPress admin area will automatically take you to the Dashboard. Access your Dashboard in two ways:
**Option 1:** Log in using your domain name and add `/wp-admin/` to the end of the URL.
```
https://yoursitename.wordpress.com/wp-admin/
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#The Dashboard 🖥
**Option 2:** Log into https://wordpress.com - This will default to your **Reader**. Select **My Site > Stats**.
</script>
</section>
<!--Slide 11-->
<section class="slide" data-markdown>
<script type="text/template">
#The Dashboard 🖥
* Once you are logged into the admin area, you'll see the Dashboard home page.
* Click on any of the options to see more detail.
Note that the Dashboard looks and works the same in both the <!-- .element: class="note" --> **.com** and **.org** version of Wordpress, though some of the options may be different based on customizations.
</script>
</section>
<!--Slide 12-->
<section class="slide" data-markdown data-toc>
<script type="text/template">
#WordPress Menu Options 📜
There are **lots** of menu options but today we'll focus on the most common options to get you up and running such as:
* setting up a public profile 👥
* configuring basic settings 🛠
* adding content - pages vs posts ✚
* publishing options 🖊
* categories, tags & slugs 🏷
* themes - customization options 🎨
* default navigation menus & custom menus
</script>
</section>
<!--Slide 13-->
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Set up your Public Profile 😎
Your WordPress.com account is also your WordPress public profile. Choose how your name displays as the author of a post or when you leave comments on another WordPress site.
You can also upload an image. All of the information is optional.
Click on your profile icon (top, right corner) to update.
</script>
</section>
<!--Slide 14-->
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Configure basic site settings 🛠
To change your **Site Title** and tagline, go to **Settings > General**. You can also set your timezone, date/time format and language options here.
Remember to select **Save Settings**!
</script>
</section>
<!--Slide 15-->
<section class="slide" data-markdown>
<script type="text/template">
#View your site 🔎
How do you actually *see* your site?
Go to **View Site**.
The page layout of your WordPress site will vary based on the theme.
</script>
</section>
<!--Slide 16-->
<section class="slide" data-markdown>
<script type="text/template">
#View your site 🔎
This is what a sample site looks like using the "Independent Publisher 2" theme.<br>
<span class="note">**Note**: The admin bar and *edit* link only show when you're logged into your WP account. </span>
</script>
</section>
<!--Slide 17-->
<section class="slide" data-markdown>
<script type="text/template">
#Theme support 🎨
Some themes don't include support for certain types of content, so when choosing themes make sure to test out different options.
Adding content first, before choosing a theme will also help.
<!-- .element: class="note" -->**Pro tip!** Open the Admin panel on one browser tab and the WordPress site in another browser tab to avoid switching back and forth.
</script>
</section>
<section class="slide first-website" data-markdown>
<script type="text/template">
#Project Brainstorming Time 💭
**Challenge:** The internet already has gazillions of blogs out there. How can you get people to read yours?
**Solution:** Focus on one small topic, write about that small topic and promote the heck out of it! People who are interested in that topic will surely land on your “specialty blog” rather than on a “general blog.”
Write about one thing, and do it really well.
>How might we create a blog that is unique and attracts an audience?
<header>
</script>
</section>
<section class="slide first-website" data-markdown>
<script type="text/template">
#What to blog about: Finding a Niche 🧐
Here's an example of finding a niche.
<img class = "niche" src = "framework/img/workshop/niche.png">
</script>
</section>
<section class="slide first-website" data-markdown>
<script type="text/template">
#What to blog about: Finding a Niche 🧐
Going even further!
<img class = "niche" src = "framework/img/workshop/niche-within-a-niche.png">
</script>
</section>
<section class="slide list-font-default" data-markdown>
<script type="text/template">
# Group exercise: Finding a Niche (20mins) 🥰
For this exercise, practice finding a niche for your blog by brainstorming and doing some research.
1. In groups of 2 or 3, narrow your given niche.
1. Do some research online and come up with a micro-niche that has not yet been covered. Get specific!
(e.g. Tennis for weight loss, Canadian fashion for women)
> Share your micro-niche with the class.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Understand your audience 🤗
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#What is a Persona?
<!-- .element: class="delayed" -->A persona is a representation of **the main group of people** who would use your product. Personas are fictional profiles based off **real data** to describe these end users. They can be current users or future users.
<!-- .element: class="delayed" --><img src="framework\img\persona-template.png" alt="Image of an example user persona">
---
###Resources
* [Neilsen Norman Group - Personas](https://www.nngroup.com/articles/persona/)
* [JustInMind Persona Templates](https://www.justinmind.com/blog/user-persona-templates/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#<!-- .element: class="delayed" -->Why are Personas important? 😮
* <!-- .element: class="delayed" -->Provide focus
* <!-- .element: class="delayed" -->Helps us connect to our users
* <!-- .element: class="delayed" -->Creates a point of reference when designing any product or software
* <!-- .element: class="delayed" -->Creates empathy - Gain an understanding of the people you're designing for and framing the problem you're trying to solve.
- <!-- .element: class="delayed" -->Note - Empathy is **not** sympathy. Sympathy involves feeling pity or sorrow for your user. As designers, we want to understand our user from their perspective, identifying with their feelings and struggles.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Data and Personas 📊
Best practice for creating user personas is basing the information off of real data!
Examples:
* User interviews
* Surveys
* Online datasets
We need to **test our assumptions**. 🔎
Why? Because our assumptions about personas are not always right.
For our purposes, we are drawing on our own experience + knowledge 💁♀️
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Creating personas responsibly 👊
"Your biases and social position will affect how you perceive others. Create personas responsibly and in collaboration with the people the personas represent — not from stereotypes and assumptions.”
##- Lorraine Chuen, Design Thinking for Open Education (2017)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Activity: Plan your persona 🧐
* List the characteristics of your target audience and create a persona
* Be specific! List age, gender, geographic area, education, marital status, interests, lifestyle characteristics - the more details, the better!
* Check in with 1-2 other learners to get another perspective on your persona, see if there is anything missing.
* This will help you plan out your blog!
<iframe src="https://giphy.com/embed/3owyoXMzSPGjbsQ5uE" width="450" height="320" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/drawing-painting-painter-3owyoXMzSPGjbsQ5uE">via GIPHY</a></p>
</script>
</section>
<!--Slide 18-->
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Adding Content
##Pages, Posts & Images
</script>
</section>
<!--Slide 19-->
<section class="slide" data-markdown>
<script type="text/template">
#Pages 📄
WordPress includes an option for creating static pages. This is best for "one-off" pages of content such as an "about" or "contact" page that are not date specific.
To add a page, go to **Site Pages > Add**
 <!-- .element: width="420" -->
</script>
</section>
<!--Slide 20-->
<section class="slide" data-markdown>
<script type="text/template">
#Pages & Permalinks
After adding the content, click the **Save** button. The URL (**permalink**) will be generated after the page is saved.
<!-- .element: width="90%" -->
<!-- .element: class="note" -->**Pro tip!** Remember to **Update** every time an edit is made.
</script>
</section>
<!--Slide 21-->
<section class="slide" data-markdown>
<script type="text/template">
#Publish Options ✅
<!-- .element: class="left" style="margin: 0 20px 40px 0;"-->
There are also various publish options.
Click the dropdown in the **Publish** box to see the different options.
---
###Extra Resource
https://en.support.wordpress.com/using-wordpress-to-create-a-website/
</script>
</section>
<!--Slide 22-->
<section class="slide" data-markdown>
<script type="text/template">
#Posts 📝
To use WordPress for blog or time-based posts, use the **Posts** menu. Posts can also be organized into **categories** and/or **tags**.
Note that the generated permalink includes the date.
By default, a listing of blog posts will appear on the home page.
More on changing this setting in part two of the course.
</script>
</section>
<!--Slide 23-->
<section class="slide" data-markdown>
<script type="text/template">
#Post Options: Categories 🗄
**Categories** allow for a broad grouping of post topics and can also contain sub-categories.
For example, a food blog can have recipes in categories and sub-categories like so:
```
Recipes:
> Breakfast
> Smoothies
> Pancakes
> Vegetarian
> Lunch
> Dinner
```
</script>
</section>
<!--Slide 24-->
<section class="slide" data-markdown>
<script type="text/template">
#Post Options: Categories 🗄
**Categories** can be found within **Posts**.
</script>
</section>
<!--Slide 25-->
<section class="slide" data-markdown>
<script type="text/template">
#Post Options: Categories 🗄
Create Categories by selecting **Add New Category**.
Sub-categories are created by selecting a parent before adding.
</script>
</section>
<!--Slide 26-->
<section class="slide" data-markdown>
<script type="text/template">
#Post Options: Tags 🏷
**Tags** are best used to create groups of content that can apply to *multiple* categories and be more specific.
For example, a frittata recipe can have the following category and tags:
```xml
Frittata recipe
Category: Breakfast
Tags: kid friendly, under 30mins
```
> What other tags could be applied to this example?
</script>
</section>
<!--Slide 27-->
<section class="slide" data-markdown>
<script type="text/template">
#Post Options: Tags 🏷
Just like categories, tags can be added when editing a post. But unlike categories, tags *cannot* have a hierarchy.
</script>
</section>
<!--Slide 29-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Adding content: Visual editor 🖌
When adding content into a Post or Page, the default visual editor uses a WYSIWYG (what you see is what you get) editor to format content.
Click on the **Toolbar Toggle** to show all of the editing options. Hover over any icon to see a short description of what each tool is used for.
</script>
</section>
<!--Slide 30-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Images & Featured image 🏙
For both posts and pages, you can add an image into the post or page content as well.
</script>
</section>
<!--Slide 31-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Images & Featured image 🏙
Another option is to use a featured image. Where the feature image displays will depend on the theme.
</script>
</section>
<!--Slide 32-->
<section class="slide side-by-side" data-markdown>
<script type="text/template">
#Adding content: Text 🖊
When using the Visual editor, the content is automatically converted into HTML. You can also edit your own HTML using the Text editor.
In the above example, the Text editor shows the link is surrounded by an `<a>` tag and the heading tag uses an `<h2>` like so:
```
<a title="Direct link to Add New Post in your Dashboard" href="https://wordpress.com/post">start a new post</a>
<h2>This is a Heading 2</h2>
```
You don't need to know any HTML to add content but it can be useful to have some basic knowledge of common HTML tags.
</script>
</section>
<!--Slide 33-->
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#HTML Crash Course!
##HyperText Markup Language
</script>
</section>
<!--Slide 34-->
<section class="slide" data-markdown>
<script type="text/template">
#HTML Syntax
HTML uses *tags* to create HTML elements to tell the browser how to interpret the content.
```xml
<p>This is a paragraph because it's using a "p" tag.</p>
```
* angled brackets `< >` represent HTML tags
* most elements have an *opening* tag `<p>` and *closing* tag `</p>`
* Note the forward slash `/` used in the closing tag.
</script>
</section>
<!--Slide 35-->
<section class="slide" data-markdown>
<script type="text/template">
#HTML Headings
There are six heading tags ranging from `<h1>` to `<h6>` that follow a hierarchical structure.
```
<h1>Most Important Heading</h1>
<h2>Second Most Important Heading</h2>
... etc
```
```
<h1>All About Apples</h1>
<h2>Apple varieties</h2>
<h3>Red Apples</h3>
<h3>Green Apples</h3>
```
</script>
</section>
<!--Slide 36-->
<section class="slide" data-markdown>
<script type="text/template">
#HTML Links 🔗
HTML uses an anchor `<a>` tag for links. Wrap the tag around the word(s) that the user will click on.
Links also require an `href` *attribute* to specify where to link to.
A `title` *attribute* is optional but can be added to provide extra info and also appears as a "tool tip" when you hover over the link.
```
Click <a href="http://ladieslearningcode.com" title="Ladies Learning Code website">here</a> for more info.
```
<div class="example">
Click <a href="http://ladieslearningcode.com" title="Ladies Learning Code website">here</a> for more info.
</div>
</script>
</section>
<!--Slide 37-->
<section class="slide side-by-side" data-markdown>
<script type="text/template">
#WordPress and HTML 😋
Paragraphs are very common in HTML documents.
However, adding HTML into the WordPress editor is a *little* different than writing pure HTML.
Usually, paragraphs would be written like this:
```html
<p>I'm a paragraph with only one sentence.</p>
<p>I'm another paragraph. And I have more than one sentence! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus molestias sequi voluptas voluptatem ipsam totam.</p>
```
</script>
</section>
<!--Slide 38-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Paragraphs 📑
In WordPress, you don't need to add `<p>` tags in the visual **or** text editor. In the visual editor, select the paragraph from the dropdown.
In the Text editor, just ensure you return/enter twice to add a space between the paragraphs. They will automatically be converted into `<p>` tags via WordPress magic!
</script>
</section>
<!--Slide 39-->
<section class="slide" data-markdown>
<script type="text/template">
# HTML line break
A paragraph written like the example below will be rendered on one line because HTML only reads one white space.
<p>
123 Anywhere St.,
City, Province
A3C 1H5
</p>
<p class="example" style="padding: 10px;">123 Anywhere St., City, Province A3C 1H5</p>
But line break tags `<br>`, it will look like this:
<p>
123 Anywhere St.,<br>
City, Province<br>
A3C 1H5
</p>
<p class="example" style="padding: 10px;">
123 Anywhere St.,<br>
City, Province<br>
A3C 1H5
</p>
</script>
</section>
<!--Slide 40-->
<section class="slide" data-markdown>
<script type="text/template">
#HTML line break
Like paragraphs, in the editor, break tags `<br>` are not needed.
Just use the enter/return key *once* for a line break in either the visual or text WordPress editor.
</script>
</section>
<!--Slide 41-->
<section class="slide" data-markdown>
<script type="text/template">
#HTML & Wordpress
Even though the WordPress editor doesn't require some of these specific HTML tags, you can still add them.
The text editor will accept the `<p>`, `<br>` and other HTML tags if included. Some people may prefer to do that to have more control over the HTML formatting.
Just note that it is not required and the visual editor can be used instead.
---
###Resources
* http://www.smashingmagazine.com/2009/07/html-5-cheat-sheet-pdf/
* http://www.simplehtmlguide.com/cheatsheet.php
</script>
</section>
</section>
<!--Slide 28-->
<section class="slide" data-markdown>
<script type="text/template">
#Group Exercise - Brainstorm (15mins) 🤔
In groups of 2 or 3, brainstorm and discuss the below points.
1. Think of a blog post you'd like to write about.
1. What category and tags would you use?
>Share your idea with the class!
<iframe src="https://giphy.com/embed/xpxtdcSjOIUSI" width="480" height="258" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/90s-arthur-muffy-xpxtdcSjOIUSI">via GIPHY</a></p>
</script>
</section>
<!--Slide 42-->
<section class="slide" data-markdown>
<script type="text/template">
#Exercise - Add some content (20mins) ✏
We know writing takes time so feel free to use some placeholder text and images for now! (Resources at the bottom of the slide.)
1. Add at least one page. (e.g. About page)
2. Add at least two blog posts with categories and tags.
[Here's how your page may look](framework/img/workshop/exercise-content.png) (this example is still using the "Edin" theme). Note how the different types of content appear (blog content, category, tags, etc).
We need some content to work with for the upcoming exercises so don't worry about finding or changing your theme just yet.<!-- .element: class="note" -->
---
###Resources
* use your own photos
* OR choose from some sample images [here](images.zip) (zip file)
* OR use stock photography - here's a [list of resources](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b)
* http://meettheipsums.com for placeholder text
* [Pixlr](https://pixlr.com/web) free tool for image editing
* [Free Image Compression tool](https://tinyjpg.com) (works for .jpg and .png files)
You may need to resize your images. Large images may slow down your site and small images may get pixelated. We recommend sizing your "large" images around 800px wide. The filesize can also be reduced regardless of the width and height to further improve performance. <!-- .element: class="note" -->
</script>
</section>
<!--Slide 43-->
<section class="slide resized" data-markdown>
<script type="text/template">
# Slug: Posts & Pages ✌️
A WordPress **slug** is used to describe a post, page, category, or tag.
In Posts and Pages, the slug appears in the URL and is generated automatically based on the title. It can be changed manually but it's best to keep it simple and relevant.
Only the highlighted portion is classified as the slug and can be changed. Select the hyperlink icon to change it manually.
</script>
</section>
<!--Slide 44-->
<section class="slide centered" data-markdown data-toc>
<script type="text/template">
# Wordpress Themes 🎨
</script>
</section>
<!--Slide 45-->
<section class="slide" data-markdown>
<script type="text/template">
# What is a WordPress Theme? 🥳
A theme provides all of the graphical styles for your site.
Most themes include:
* overall static page layouts & colour scheme
* styles for blog posts and blog archives
* typography styles
* different types of widgets and where they are located on the page
</script>
</section>
<!--Slide 46-->
<section class="slide" data-markdown>
<script type="text/template">
#Free & Paid Themes 😆
So why would you learn to code or pay for a theme if there are so many free, functional templates to choose from? Well, that all depends on how **unique** and **customized** you need your site to be.
Pre-built themes are a great way to get up and running and to try it out, and can help determine what you need before investing in development or paid themes.
If you're not ready to code yourself just yet but want more options, paid themes often offer premium plugins, more customization options and customer support.
</script>
</section>
<!--Slide 47-->
<section class="slide" data-markdown>
<script type="text/template">
#WordPress.com & Themes 👐
With WordPress.com, [you cannot upload your own themes](https://en.support.wordpress.com/themes/adding-new-themes/), but you can still make some customizations to the themes that are available.
The **.com** version aims to keep things simple and requires less technical maintenance, so this feature is not supported (but you can with the **.org** version).
</script>
</section>
<!--Slide 48-->
<section class="slide" data-markdown>
<script type="text/template">
#Choosing a Theme 👑
Look for a **responsive** theme so the design can adapt to different screen sizes on various devices.
**Columns** allow you to display content in chunks that are visually appealing. For example, you can have a larger main content area and a sidebar or use equal column widths to give the look of a magazine/newspaper.
**Page layout** determines the overall look and feel of your blog. Consider how (or if) certain content is displayed such as the site title, subheading, tags, categories, main menu, etc.
</script>
</section>
<!--Slide 49-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Choosing a Theme 👑
Select **Themes** from the menu. The first theme that appears in the listing is your *active* theme. You can also filter the options to show only free or premium themes.
</script>
</section>
<!--Slide 50-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Choosing a Theme 👑
Hover over any of the themes for more information.
Clicking the **info** button will show the features included in the selected theme.
</script>
</section>
<!--Slide 51-->
<section class="slide resized" data-markdown>
<script type="text/template">
#Choosing a Theme 👑
Select the **Try & Customize** option on the theme to see how the it looks with your content. The options on the left menu contain customizations and will vary among different themes.
You can also access these theme customization options from the Dashboard under **Themes**. To update the theme changes, select **Activate & Publish**.
