by Zac Gordon

Slide 1

Slide 1 text

Learn Web Design & Development Via WordPress

Slide 2

Slide 2 text

Learn Web Design Via WordPress @zgordon Zac Gordon PHP CSS HTML Talk Overview jQuery Hosting

Slide 3

Slide 3 text

Zac Gordon

Slide 4

Slide 4 text

Learn Web Design Via WordPress @zgordon About Zac Gordon

Slide 5

Slide 5 text

Web Inspector

Slide 6

Slide 6 text

Learn Web Design Via WordPress @zgordon Web Inspector Look at the code behind a web page

Slide 7

Slide 7 text

Learn Web Design Via WordPress @zgordon Web Inspector

Slide 8

Slide 8 text

Learn Web Design Via WordPress @zgordon Web Inspector

Slide 9

Slide 9 text

Learn Web Design Via WordPress @zgordon Web Inspector

Slide 10

Slide 10 text

HTML

Slide 11

Slide 11 text

Learn Web Design Via WordPress @zgordon HTML - HyperText Markup Language Identiﬁes the structure of your content: HTML

Header tags Title tags Links

Slide 12

Slide 12 text

Learn Web Design Via WordPress @zgordon Header Tags

Header 1

Header 2

Header 3

Major headings for page and content

Slide 13

Slide 13 text

Learn Web Design Via WordPress @zgordon Header Tags Header 1

Slide 14

Slide 14 text

Learn Web Design Via WordPress @zgordon Header Tags Header 3

Slide 15

Slide 15 text

Learn Web Design Via WordPress @zgordon Title Tag Page Name - Site Name Display at top of browser and as search engine headings

Slide 16

Slide 16 text

Learn Web Design Via WordPress @zgordon Title Tag Title tag in search results

Slide 17

Slide 17 text

Learn Web Design Via WordPress @zgordon Title Tag Where's the description?

Slide 18

Slide 18 text

Learn Web Design Via WordPress @zgordon Title Tag

Slide 19

Slide 19 text

Learn Web Design Via WordPress @zgordon Anchor Tag Link Create links to pages

Slide 20

Slide 20 text

Learn Web Design Via WordPress @zgordon Anchor Tag

Slide 21

Slide 21 text

Learn Web Design Via WordPress @zgordon Anchor Tag

Slide 22

Slide 22 text

CSS

Slide 23

Slide 23 text

Learn Web Design Via WordPress @zgordon CSS - Cascading Style Sheets Identiﬁes the presentation of your content CSS h2 {font-size: 18px} body {background: #ddd} a:hover {color: #0074a2}

Slide 24

Slide 24 text

Learn Web Design Via WordPress @zgordon CSS Font Size

Slide 25

Slide 25 text

Learn Web Design Via WordPress @zgordon CSS Font Size

Slide 26

Slide 26 text

Learn Web Design Via WordPress @zgordon CSS Background

Slide 27

Slide 27 text

Learn Web Design Via WordPress @zgordon CSS Background

Slide 28

Slide 28 text

Learn Web Design Via WordPress @zgordon CSS Background

Slide 29

Slide 29 text

Learn Web Design Via WordPress @zgordon CSS Background

Slide 30

Slide 30 text

Child Theme

Slide 31

Slide 31 text

Learn Web Design Via WordPress @zgordon Child Theme

Slide 32

Slide 32 text

Learn Web Design Via WordPress @zgordon Child Theme

Slide 33

Slide 33 text

PHP

Slide 34

Slide 34 text

Learn Web Design Via WordPress @zgordon PHP: Hypertext Preprocessor - Use for dynamic coding and database interactions PHP - Functions - Loops and Conditionals - File Structure

Slide 35

Slide 35 text

Learn Web Design Via WordPress @zgordon Functions - Call a bunch of code PHP Functions

Slide 36

Slide 36 text

Learn Web Design Via WordPress @zgordon Test if content is available then displays it all PHP Loops and Conditionals

Slide 37

Slide 37 text

Learn Web Design Via WordPress @zgordon Test if content is available then displays it all File Structure

Slide 38

Slide 38 text

jQuery

Slide 39

Slide 39 text

Learn Web Design Via WordPress @zgordon jQuery JavaScript library that animates a site - Mostly done through plugins - Can do yourself - Trick to loading JavaScript

Slide 40

Slide 40 text

Learn Web Design Via WordPress @zgordon WordPress Plugins w jQuery

Slide 41

Slide 41 text

Learn Web Design Via WordPress @zgordon Add Your Own jQuery Plugins

Slide 42

Slide 42 text

Learn Web Design Via WordPress @zgordon Can autoload jQuery for your plugins Loading JavaScript Files function theme_js() { wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true ); } add_action( 'wp_enqueue_scripts', 'theme_js' );

Slide 43

Slide 43 text

Learn Web Design Via WordPress @zgordon jQuery in Templates

jQuery(document).ready(function($) { $('.flexslider').flexslider(); })

Slide 44

Slide 44 text

Hosting

Slide 45

Slide 45 text

Learn Web Design Via WordPress @zgordon Hosting Hosting - Stores the content, ﬁles and database for your site - Hosting provider - FTP - Database Transfer - GitHub

Slide 46

Slide 46 text

Learn Web Design Via WordPress @zgordon Hosting Provider webhostingforstudents.com