Learn Web Design Via WordPress

In this WordCamp talk, I go over how you can begin learning HTML, CSS and PHP from the WordPress environment.

Transcript

1. Learn Web Design & Development Via WordPress
2. Learn Web Design Via WordPress @zgordon Zac Gordon PHP CSS HTML Talk Overview jQuery Hosting
3. Zac Gordon
4. Learn Web Design Via WordPress @zgordon About Zac Gordon
5. Web Inspector
6. Learn Web Design Via WordPress @zgordon Web Inspector Look at the code behind a web page
7. Learn Web Design Via WordPress @zgordon Web Inspector
8. Learn Web Design Via WordPress @zgordon Web Inspector
9. Learn Web Design Via WordPress @zgordon Web Inspector
10. HTML
11. Learn Web Design Via WordPress @zgordon HTML - HyperText Markup Language Identifies the structure of your content: HTML <h1> Header tags <title> Title tags <a> Links
12. Learn Web Design Via WordPress @zgordon Header Tags <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> Major headings for page and content
13. Learn Web Design Via WordPress @zgordon Header Tags Header 1
14. Learn Web Design Via WordPress @zgordon Header Tags Header 3
15. Learn Web Design Via WordPress @zgordon Title Tag <title>Page Name - Site Name</title> Display at top of browser and as search engine headings
16. Learn Web Design Via WordPress @zgordon Title Tag Title tag in search results
17. Learn Web Design Via WordPress @zgordon Title Tag Where's the description?
18. Learn Web Design Via WordPress @zgordon Title Tag
19. Learn Web Design Via WordPress @zgordon Anchor Tag <a href="http://site.com/link">Link</a> Create links to pages
20. Learn Web Design Via WordPress @zgordon Anchor Tag
21. Learn Web Design Via WordPress @zgordon Anchor Tag
22. CSS
23. Learn Web Design Via WordPress @zgordon CSS - Cascading Style Sheets Identifies the presentation of your content CSS h2 {font-size: 18px} body {background: #ddd} a:hover {color: #0074a2}
24. Learn Web Design Via WordPress @zgordon CSS Font Size
25. Learn Web Design Via WordPress @zgordon CSS Font Size
26. Learn Web Design Via WordPress @zgordon CSS Background
27. Learn Web Design Via WordPress @zgordon CSS Background
28. Learn Web Design Via WordPress @zgordon CSS Background
29. Learn Web Design Via WordPress @zgordon CSS Background
30. Child Theme
31. Learn Web Design Via WordPress @zgordon Child Theme
32. Learn Web Design Via WordPress @zgordon Child Theme
33. PHP
34. Learn Web Design Via WordPress @zgordon PHP: Hypertext Preprocessor - Use for dynamic coding and database interactions PHP - Functions - Loops and Conditionals - File Structure
35. Learn Web Design Via WordPress @zgordon Functions - Call a bunch of code PHP Functions <h1><?php the_title(); ?></h1> <?php the_content(); ?>
36. Learn Web Design Via WordPress @zgordon Test if content is available then displays it all PHP Loops and Conditionals <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php endwhile; endif; ?>
37. Learn Web Design Via WordPress @zgordon Test if content is available then displays it all File Structure
38. jQuery
39. Learn Web Design Via WordPress @zgordon jQuery JavaScript library that animates a site - Mostly done through plugins - Can do yourself - Trick to loading JavaScript
40. Learn Web Design Via WordPress @zgordon WordPress Plugins w jQuery
41. Learn Web Design Via WordPress @zgordon Add Your Own jQuery Plugins
42. 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' );
43. Learn Web Design Via WordPress @zgordon jQuery in Templates <div id="featured" class="clearfix flexslider"> <ul class="slides"> <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->t <li> <h2><?php the_title(); ?></h2> <p><?php the_field('description'); ?></p> </li> <?php endwhile; ifelse; ?> </ul> </div> jQuery(document).ready(function($) { $('.flexslider').flexslider(); })
44. Hosting
45. Learn Web Design Via WordPress @zgordon Hosting Hosting - Stores the content, files and database for your site - Hosting provider - FTP - Database Transfer - GitHub
46. Learn Web Design Via WordPress @zgordon Hosting Provider webhostingforstudents.com
47. Learn Web Design Via WordPress @zgordon FTP Transfer
48. Learn Web Design Via WordPress @zgordon Database Migration
49. Learn Web Design Via WordPress @zgordon Database Migration
50. Thanks! Zac Gordon wp.zacgordon.com