5 Great Sites for Beginners To Learn HTML/CSS

Recently, I’m on the verge of learning basic web designing. It all started with the idea of making a landing page for myself from scratch, without using sites like About.me. I ended up discovering sites which can be very handy for beginners who’re trying to code.HTML5

1. Codecademy

This is one of the best things I’ve stumbled upon this year. Codecademy is where you learn code by actually writing it, i.e. by completing exercises which are created by experts of those field. This year, they launched a free initiative named Code Year, calling everyone to learn the basics of coding.

The site lets you track progress, achieve badges and other cool stuff. If you’re stuck at some particular exercise, you can post your doubts in the forums, there are some helpful people out there! You can grab exercises related to Javascript, JQuery and of course CSS3. They also seem to add lessons related to Python, in future. The best thing? All this is free.

Link: Codecademy

2. Dochub

How about an instantly searchable documentation of all major programming languages? That’s Dochub. You can easily find documentation for various programming languages online, but it’s all scattered, and it’s not fast. Dochub solves this. Also, you can get the local version of the website from the Github page.

Link: Dochub

3. Mozilla Developer Network

Mozilla Developer Network(MDN) provides a great in-depth documentation for CSS and Javascript. It’s more like Wikipedia for web developers (you can even edit the wiki, and changes will be reviewed). Bonus is that, you can also learn about making Firefox addons and HTML5 apps, which are cross platform.

Link: Mozilla Developer Network

4. 30 days to learn HTML and CSS

If learning coding by reading documentation or books doesn’t work for you, then consider taking this free course. It’s a series of video tutorials by Jeffery Way, of TutsPlus. Of course, the tutorials are really basic, so if you want something more advanced, you should consider paying for Treehouse, a subscription based learning platform for web and and even iOS developers.

Link: Learn CSS

5. Read Blogs

Blogs related to web designing are in plenty. Starting with the TutsPlus network, till Smashing Magazine, there are so many blogs dedicated to this niche. Most of them will rank well on Google, if you search for anything related to web designing, that’s the best way to find good blogs.

I’m sure there are many more sites which fall under this category, and I’m no web designer. So, do you know any free resources for learning web designing? Write them in the comments.

Add custom CSS classes to wp_nav_menu’s HTML output using WordPress filters

WordPress has a great feature called ‘filter’ with which we can add our own classes to nav menu items.  Most times you need to add classes in nav menu items on some conditions.

For example, in menu you have ‘sample ‘ category item. You have to add class to this item if your single post is of ‘sample’ category or its categories have parent category as  ‘sample’. You can easily add class by using ‘nav_menu_css_class’ filter.

add_filter(‘nav_menu_css_class’ , ‘rt_nav_special_class’ , 10 , 2);

‘nav_menu_css_class’ is name of the filter to hook our function  ‘rt_nav_special_class’.

10 is the priority of the function and 2 is the number of arguments the function accepts. Now you may write your condition in ‘rt_nav_special_class’ to add class to menu item.

function rt_nav_special_class($classes, $item){
     if(your condition){ //example: you can check value of $item to decide something...
             $classes[] = “special”;
     }
     return $classes;
}

rt_nav_special_class() accepts two arguments $classes and $item. $classes is an array contains class name already assigned by wp_nav_menu. We can add our classes in this array. I am added ‘special’ as class name. $item is current nav menu item to which we are adding a class.

If you var_dump this $item you will get all information about the current nav menu item. Using this $item you can any condition you want. Below is screen shot of our ‘special’ class in nav menu item in Firebug.

I hope you get what I explained to you. If you have any queries or suggestions do write in your comments.

Syntax Highlighter Compress – Best Syntax Highlighter WordPress Plugin

When I write post and highlight HTML/CSS or PHP or any other languages, I have to replace tags ‘<‘ with ‘&lt;‘ . It consumes a lot of time to convert. An easy way to implement source code or programming language is to implement a WordPress plugin. WordPress plugin Syntax Highlighter Compress has support for many languages listed below. Though there are many similar plugin available but the advantage of using this plugin is that it loads the necessary brush files dynamically. Unlike other plugin based on Syntax Highlighter Script but these cause long page loading time and they are difficult to handle.

When you choose a plugin first look at its rating, compatibility and last updated these are the parameters one must check before testing or implementing any plugin.

Syntax Highlighter Compress

The highlighted code in your post will look like in the image below more highlight styles are available, you can change the highlight setting in setting menu.

image

Supported Mark-up or Available Programming languages

Syntax Highlighter ComPress is a simple WordPress plugin. Code and source text of various programming languages or mark-up can be highlighted in WordPress. This plugin last updated at 2010-9-29, requires WordPress version 2.6 or higher and it is compatible with version 3.0.3. Once you have installed this plugin, activate it then  an icon appears in your post text area, look at the image below, click it select language and paste your code. You can go for a Demo Here.

  • AppleScript
  • ActionScript3
  • Bash/shell
  • Coldfusion
  • C#
  • C++
  • CSS
  • Delphi
  • Diff
  • Erlang
  • Groovy
  • JavaScript
  • Java
  • JavaFX
  • Perl
  • PHP
  • Plain Text
  • Python
  • Ruby
  • Scala
  • SQL
  • Visual Basic
  • XML

You can find more setting option in the admin panel settings menu. Settings option available for stylesheet, Auto-Links, Collapse, Gutter, Smart-Tabs, Tab-size and Toolbar.

Let me know if you have idea about better WordPress plugins.

Link : Syntax Highlighter ComPress

Using Dynamic URL for .htc File in WordPress Theme

As we all know in Mozilla, Chrome or most of the browsers we can use CSS3 properties, but how those  CSS properties can be used in Internet Explorer. A smart way is to use pie.htc or ie-css3.htc file that supports some new styles available in CSS3 standards. While I work on WordPress project I use pie.htc files, so that I can implement some of the CSS3 property for Internet Explorer here is an example how to use it.

Absolute path for .htc file

An absolute path is applied to htc file in the stylesheet for CSS3 support to IE.

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(http://demosite.info/wp-content/themes/twentyten/pie.htc); /*   absolute path  */
}

The above syntax works well, as we have set an absolute path for .htc file in the stylesheet but it becomes inconvenient to move styelsheet from one domain to another.

Relative path will not work in case of .htc file

Indeed Internet Explorer does not interpret the path relative to the CSS file, but it interprets the URL for the behavior property relative to the source HTML document. This causes the PIE behavior inconvenient because the path has to be absolute from the domain root this makes the CSS not easily movable to different directory. (Note : Here pie.htc is in js directory)

.example {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
behavior : url(js/pie.htc); /*  relative path, pie.htc is in js folder  */
}

We can make use of Dynamic URL for accessing .htc file

We can use WordPress function “bloginfo(‘template_directory’)” in header.php file to generate the path dynamically. Put the classes into tag within the section. Now you can use the htc file by adding classes to it separated by commas.

header.php


<style type="text/css" >
        .Class1, .Class2 { behavior : url(<?php bloginfo('template_directory'); ?>/path/to/PIE.htc; }
 </style>

style.css

.Class1 {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

.Class2 {
-moz-box-shadow : 0px 0px 4px #ffffff;
-webkit-box-shadow : 0px 0px 4px #ffffff;
box-shadow : 0px 0px 4px #ffffff;
}

For my WordPress project I tried to access .htc file keeping it at different domain but could not access it, because the IE behavior property does not allow .htc file to access cross domain. You can also visit this link for reference. If you have any updates or idea about this you can share it though your comments.

[Solved] CSS Position fixed in IE6

When it comes to Internet Explorer most times we use the css property position:fixed. This works fine most times but does not work in IE6. I have often faced this issues as a developer and finally I figured a way out based on some of my experience with web-designing.

I use the steps below to solve the CSS position:fixed issue

  • Create a IE6.css file
  • Include this css file in head
  • Write the following line of code and it will work. ;-)
#body-background {
/**/position: absolute;
top: expression((0 + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
right: expression((20 + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
/**/ }

I find this a very practical solution. Do you know of any better ones? Do share them through your comments.

WordPress Themes – Standards and Checklists (beta)

This article was originally created (in parts) for rtCampers to guide our trainees and follow the best CSS and design practices. It is by no means complete but hopefully it will evolve over time as we get more mature with WordPress, CSS and web-design in-general.

The goal of this article is to create a master list of standards that we want to follow while designing wordpress themes. Comments & criticism – awaited!

#1. Always Start with CSS-Reset

CSS-Reset is a snippet of code that should be always pasted in your “style.css”.

CSS-Reset clears (nullify) formatting on all HTML tags. Each browser has its own default formatting for most HTML tags and they vary from browser-to-browser. CSS-Reset brings all browsers to common ground! ;-)

There are many variation of CSS-Reset, but one I have always used is pasted below. It is from Stakers theme by Elliot Jay, which has been starting point for most of my themes. I will talk about stakers theme in detail some other day!

[css]
/* RESET */
/* —————————————– */

/* Global reset */
/* Based upon ‘reset.css’ in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:”}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE’s blue borders */
[/css]

#2. Don’t forget to add CSS for WordPress Generated classes

WordPress post-editor adds some classes like .alignleft, .alignright to the content. Also some template tags and standard widgets generates additional CSS classes that may be useful. More details about this can be found here.

At bare minimum you should have following CSS added in your theme.

[css]
.aligncenter,
div.aligncenter { display: block; margin-left: auto; margin-right: auto;}

.alignleft { float: left;}

.alignright { float: right;}
[/css]

Also note coding style of above CSS block is different than style given on WordPress codex page.

Its matter of personal choice. You can see my CSS coding style here.

#3. Javascripts in WordPress Theme

These days tabs and sliders are quite common among wordpress themes! Most of this fancy stuff is done using jQuery, its plugins and/or some extra javascript files.

Best way to include javascripts in wordpress theme is:  wp_enqueue_script( ) function.

Always create your own javascripts files under “js” folder in your themes directory.

For javascripts library, before adding/uploading a copy to your theme directory, check list of javascript libraries that comes with wordpress. All these default libraries can be included in your theme merely by calling wp_enqueue_script( ) function. There is no need to upload them separately in your theme. ;-)

#4. Use Proper Test Data

To properly test a theme you are developing, you need test-data that covers most commonly used type of contents.

By default, when you install a new wordpress it creates a “Hello World” post, a comment on that post, an “About” page and few more data which is completely useless if you are developing a theme. Also exporting data from real big blog for testing purpose may not be good idea. We need test-data which must have lots of variations rather than larger number of posts.

For this:

  1. Always test your theme with standard test data given here.
  2. Above link open (or downloads) a XML file. Save it on your disk.
  3. Then log into wordpress admin side. Go to “Tools >> Import >> Wordpess” and select XML file.
  4. Its good idea to check “Download and import file attachments” checkbox on next screen

Thats all! Now check each link/page on test site in each browser!

Standard test data and CSS-Reset will save your considerable time that goes wasted in support phase.

#5. Final Testing & Checklist!

The biggest and most extensive checklist with plenty of test-cases can be found on wordpress codex.

Any theme we develop must be tested against that checklist.

#6. Additional Work for Public Themes

In case you want to release your theme for public on official wordpress.org theme repo, then make sure you follow these guidelines.

For GPL compatibility, you can simply put the following 2 lines in a comment block in top-portion of your style.css file.

[css]
/* The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php */
[/css]

(to be continued…)