• | | |

    Learning HTML and CSS (with My New Book, Out Now!)

    I’ve always been a learn-by-doing kind of guy. Maybe it’s because I’m thinking about other things when something is explained to me, or maybe people are bad at explaining things. But either way, a concept doesn’t really sink in until I do it, or until I see an immediate application for it. When I learned HTML and CSS, I learned it by doing it. I’d make a page in Microsoft Front Page one then see what the generated source looked like.

    Eventually, when I moved to using Notepad (or more accurately, Notepad++), I’d try something and see what happens, or copy someone else’s source and modify it. It wasn’t ideal, and today there are lots of great alternatives. I’m happy to add a new one to the fray: my new book, HTML and CSS: Visual QuickStart Guide.

    Read More “Learning HTML and CSS (with My New Book, Out Now!)”
  • |

    Add IE Conditionals to wp_enqueue_style

    When creating a WordPress theme, it’s best practice to use wp_enqueue_style for adding all stylesheets, including style.css. At first glance, this can pose a challenge if you want to conditionally include CSS based on the browser (like IE-only styles, for example). Luckily, there is a quick way to do this in WordPress using $wp-styles:

    global $wp_styles;
wp_enqueue_style( 'jlc_ie_styles',get_template_directory_uri() . 'css/ie-style.css', array(), '1.0.0' );
$wp_styles->add_data( 'jlc_ie_styles', 'conditional', 'IE' );

    The code above calls on the $wp-styles class to associate our IE-only stylesheet (by tag/name/slug) with a condition, the condition being “IE.” If you wanted IE 9 and below, you could do this:

    $wp_styles->add_data( 'jlc_ie_styles', 'conditional', 'lte IE 9' );

    This is a great (and best practice) way to conditionally call styles. You can see more examples with comments over in this gist by wpscholar.

  • |

    Quick Tip: Use Post or Page Slug as CSS Class in WordPress

    I don’t know why, but for some reason, I thought WordPress already included the slug of a post or page in either the function body_class() or post_class(). Doing some work over this weekend I realized that’s not the case, but luckily, it’s very easy to do.

    The functions body_class() and post_class() serve as a way for you to easily customize a page’s CSS based on attributes of the page being viewed. They will output things like the post ID, the custom post type, if the page is the blog, home, or front page, and more. One thing it does not include, however, is the post slug. This could be useful if you want to style each of your posts a certain way, or in a more likely scenario, style each page a certain way. If you want to do this, the code is fairly straight forward; both functions accept an option argument: a string of your own classes. We use that combine with the $post array, like so:

    <?php body_class($post->post_name); ?>

    or, if you want to do it on a post-by-post basis:

    <?php post_class($post->post_name); ?>

    Note the latter must be used inside the Loop. Using this, if you have a page named, “Services” with the slug services, the output would look something like this:

    <body class="page page-id-108 page-parent page-template-default services">

    Now you can use the .services (or whatever) class name to do some custom stuff instead of needing to know the page or post ID.

     

  • |

    My One Month Learning Plan

    I have a confession to make. Lately I’ve felt like my skills have been slipping, or at least stagnating. Part of it is because I’ve been so busy, but part of it is because of feeble excuses like, “I’ve been so busy.” This year I’ve resolved to do a whole bunch of things, including learn more. Before I WordCamp Phoenix, I devised a plan that would take place pretty much the moment I landed back in Scranton; WordCamp Phoenix really reinforced I need to do this. So, here is my one month learning plan.

    Read More “My One Month Learning Plan”

  • Good Books for Web Development

    I’m teaching a couple of web development classes this semester and have been receiving a lot of questions as to what books would serve as good resources. Here’s a short list, starting with the ones I’ve chosen for my classes.

    1. HTML and CSS: Design and Build Websites: This is possibly the best book I’ve used for HTML and CSS. It is visual, puts things in simple terms, and it’s up-to-date. I would strongly recommend this for beginners. I am using it for my E-Commerce 251 (Intro to E-Commerce) course.
    2. Web Database Applications with PHP and MySQL: This book (by O’Reilly Media) takes a good look at PHP and MySQL. It covers a range of topics from beginner PHP and an intro to Databases to a look at bigger topics, like security. I’m using it for my Media Info Tech 315 (Web Applications and Databases) course.
    3. Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3: This book taught me everything I know about the right want to develop websites. Dan Cederholm is a pro and a great teacher who will take you through doing things, and making them bulletproof.
    4. Web Designer’s Guide to WordPress: Plan, Theme, Build, Launch: Once you’re comfortable with HTML, CSS, and PHP, you might want to get into WordPress. This book is an excellent starting point.
    5. Implementing Responsive Design: Building sites for an anywhere, everywhere web: Responsive Design is all the rage now, and for good reason. This book will tell you the principles of RWD and how to implement it in your site.
    6. The A Book Apart Books: Honestly I would recommend all of them, but the specifically web development ones are: HTML5 for Web Designers, CSS3 for Web Designers, Responsive Web Design, and Mobile First. 

    As you probably know, I also have a book, Building WordPress Themes from Scratch. However, there have been some changes the publisher has been doing lately and I am working with them to get the book in my hands. More on that here.

    Finally, I have another book coming out in December called Responsive Design with WordPress. I think this would work really well after books 4 and 5 on the above list. Keep an eye out for it; maybe I’ll even do a giveaway or two.

    What are your must-read web development books? Let me know in the comments!