Save 37% off PRO during our Black Friday Sale! »

Learn Web Design Via WordPress

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
November 24, 2013

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.

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

November 24, 2013
Tweet

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