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.

Mozilla Thimble – A Great HTML Editor for Beginners

Mozilla is trying to encourage more internet users to become familiar with HTML. Honestly, learning HTML is not really very difficult and anyone who creates content online through blogs should ideally try to learn atleast a little bit of it.

Often people are stuck with what sort of HTML editor they should use on their computers. Also questions are there on if these editors will be compatible with the OS of your computer.

For starters, Mozilla has a nice web app called Thimble which allows users to type in the HTML code in an editor and see the changes immediately.

Thimble Features

  • The web app is compatible on most modern browsers and not just Firefox.
  • Thimble has the text editor on the left hand side and the changes are shown in real-time on the right hand side of the browser.
  • You can also publish your HTML content and share it with friends with via a URL. It also has easy options on sharing it across Twitter, Facebook and Google+.

If you are new to HTML and a beginner, I would recommend starting with Mozilla Thimble. Try it out and do drop in your comments.

Link: Mozilla Thimble

Create Portfolio with Image Sliding Effect with jQuery

portfolio-image-sliding-effect-with-jquery
There are tons of tutorials already out there about creating portfolio image slide effect with jQuery. I wanted to create an easy-to-implement jQuery image slider for my portfolio page, you can check the live demo at Blogger To WordPress portfolio.

This slider requires the latest release of jQuery and functional knowledge of jQuery, HTML and CSS

So let’s start the implementation

Step 1 : Include the JQuery Library

First, you have to include the JQuery library between ‘<head>’ and ‘</head>’ tags of your html page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Step 2 : Add HTML Code

Add HTML Code, this is the source code of our sample:

<div class="image-container">
 <a title="Devils Workshop" href="http://devilsworkshop.org/" target="_blank"> 
  <span class="image-caption">image title</span> 
  <span class="image-content"><img title="custom title" alt="custom alt" class="attachment-rt-gallery" src="http://path-to-image.jpg" /></span> 
 </a>
</div>

Step 3 : Add Style/CSS code

Add CSS Code in your style sheet file, this is the source code of our sample:

.image-container {
  border: 1px solid #CCCCCC;
  float: left;
  height: 180px;
  margin: 0 25px 20px 0;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  width: 300px;
}

.image-container a {
  color: #66A83E;
  display: block;
  font-size: 18px;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.image-container a span.image-caption {
  display: table-cell;
  height: 180px;
  text-align: center;
  vertical-align: middle;
  width: 300px;
}

.image-container a span.image-content {
  height: 180px;
  left: 0;
  position: absolute;
  top: 0;
  width: 300px;
  z-index: 5;
}

.image-container a span.image-content img {
  border: medium none;
  margin: 0;
  padding: 0;
}

Step 4 : Add jQuery Code

You have to include the following jQuery code to work the image slider. To do so, embed it within <script type=”text/javascript”> /* Put the Code given below */ </script>, or even better, put it in a separate .js file.

jQuery( '.image-container' ).hover(
    function() { jQuery( '.image-content', this ).stop().animate( { left : '300px' }, { queue : false, duration : 500 } ); },
    function() { jQuery( '.image-content', this ).stop().animate( { left : '0px' }, { queue : false, duration : 500 } ); }
);

Screenshot

rt-screenshot

Hope this helps and saves your time, do drop in your opinions and comments below.Smile

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

Clear Parent Element In CSS Using Clearfix

Overflow:hidden is very popular method to clear floats without adding extra markup. I always use overflow:hidden but it becomes undesirable in few circumstances where I place absolute positioned element it cuts off the element. So we can make use of different methods.

I have explained it with two different examples below how we can clear the parent element.

A parent div with child element which has float property affects the parent div or makes it disappear.

General

<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>
</div>

<!--------------------------------------------->

.parent {   width: 416px;   padding: 20px ;  background-color: tan;   }
.child  {   width: 200px;   height: 100px;   float: left; border: 1px solid #000;   margin:2px;   background-color: green   }
.clear  {   clear:both   }

As you can see in the below image what happens when the child element has float property.

clear1

I have  added an extra div at the end this it will clear the float and solves the issue but in the next example I will show you how to clear it without including extra markup.

Method 1

<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
<div class="child">child 4</div>

<div class=”clear”></div>
</div>

After clearing the float it results in something like this.

clera2

Now I am adding a class to a parent element which forces its children to self clear, in this technique we do not have to create extra markup. Both technique results in same but I found using clearfix better as it is also implemented in HTML5 Boilerplate.

Method 2

<div class="parent clearfix">
<div class="child">child 1 </div>
<div class="child">child 2 </div>
<div class="child">child 3 </div>
<div class="chlid">child 4 </div>
</div>
<!-------------------------------------------->

.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

That concludes two methods to clear parent element,  one uses extra markup and the other method saves the extra structural markup. Thanks to Thierry Koblentz for Clearfix Realoded.


Alternative To Conditional Stylesheets And CSS Hacks

When we  need to apply CSS for other browsers, we either create new CSS files and enclose it with conditional comments. This actually causes blocking issue, which slow downs  the site’s  loading speed for a few seconds. We might also use browser specific hacks which will create issues while getting W3C validation.

What happens with Conditional Stylesheets?

Below I am using a typical example of using conditional stylesheets to work with various versions of Internet Explorer.

<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/style.css”/>

<!–[if IE 7]><link rel=”stylesheet” media=”screen” href=”css/ie7.css”/>

< ![endif]–>

<!–[if IE 6]><link rel=”stylesheet” media=”screen” href=”css/ie6.css”/>

< ![endif]–>

  • Conditional style-sheets will mean additional HTTP requests to download.
  • As the statement is included in the tag, rendering of the page is affected. This happens because the page has to wait until the style-sheets are loaded.
  • This can separate a single CSS rule into multiple files which should be avoided.

What happens when we use CSS Hacks?

Example:

.ClassName{ margin-right: 15px; _margin-right: 5px; float:right;}

  • CSS hacks are targeted at specific browsers but it certainly does not validate the code.
  • Use of hacks are not necessary as many time hacks and workarounds can be avoided by just coding things to work in IE from the beginning.

Solution

We can make use of “Rob Larsen’s” technique which is used in Paul Irish’s boilerplate.

<!–[if lt IE 7 ]> <html class=”ie6″> <![endif]–>
<!–[if IE 7 ]> <html class=”ie7″> <![endif]–>
<!–[if IE 8 ]> <html class=”ie8″> <![endif]–>
<!–[if IE 9 ]> <html class=”ie9″> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><html class=””><!–<![endif]–>

  • This will fix the file blocking issue and we do not need to write any empty comment which also fixes the issue.
  • CMS platforms like WordPress and Drupal use the body class more heavily. This makes integrating there a touch simpler.
  • This technique when used will not be validated in HTML 4 but it works fine with HTML 5.

So CSS experts out there, do you find this article useful? Do drop in your views and any other alternate solutions through your comments.

Online text converter tool for HTML, Word and Text

Many bloggers who might not be very adept as knowing a lot about HTML might have a problem with copy-pasting content on a website from a Word Document. As Editor at DW, I have often had to use some online text converter or the other. With ToolsGeek I found an online service which can be used to convert text to HTML and backwards in seconds.

Features of Tools Geek Text converter

  • Requires no sign-up and we can just paste the text into the large text box.
  • The buttons are pretty self-explanatory about how to go ahead and cleanup or convert the text.
  • What I like is that it allowed me to convert from Word to HTML and even convert HTML to TXT. There are other minor features too like word count, changing all text to upper and lower case.

I had previously written about a similar tool but that only worked to clean up Word content when copied into HTML Editors. This one works with a lot of different types of text.

Do look it up and drop in your comments about your views and also if you know of similar tools which you find useful.

Link: Tools Geek Text converter

Use Static FBML for advanced options with Facebook page

Putting social icons on your page can be a better way of promoting or getting connected to your friends and mentors. You would have observed several kind of social buttons/icons or different advanced functionality on many fan pages.well this is how you can-
Static FBML (Facebook Markup Language) is a Facebook platform application developed by Facebook engineers to enable fan page administrators to add such advance functionalities like extra tabs. A box is added to your page in which you can put the HTML/CSS code to display such images(icons) or you can add a new tag and information related to it.

Minimum requirement:

You should have a Facebook account :) and at least a page of your own. If you don’t have a page of your own then create it using this tutorial. (or simply click here to create a new page).

Adding static FBML to your Facebook page:

  • Click edit on the page: Go to the left sidebar on your Facebook account home page. Click on the Ads and Pages link. Select Edit on your page.
  • Static FBML: Scroll down you will find Static FBML click it. If you dont find it you may have to browse further and you will get it.
  • Go to Static FBML apllication .
  • Click add to my page: In the left column you will see the option as add on my page. Click it.
  • If you have more than one page a pop up will appear asking on which page do you want to add the Static FBML. Select the desired page.
  • Success !! :)

Now you can add a tag ‘join’ or any other tag. I am saying ‘join’ every time just to give you an example.

  • Go to your page. Click Edit option ( as shown in first screenshot).
  • You will find a series of options. Search for FBML.
  • Once you find it click on the edit option. A box will appear.
  • Edit the name by ‘FBML‘ to ‘join’.

  • On the box below you can add any text you wish  the user to see when he/she arrives at your fan page.
  • Save the changes :)

Instead of ‘join’ you can keep the FBML name as it is. And inside the other(description) box add the HTML/CSS code for the desired icon. You can place the icon on navigation bar, side bar or any place you wish to.
Static FBML has a great usability and edit options. I tried several options like what your users should see when they enter the fan page and I find it really interesting tweaking its other options :)

HttpFox – a helpful Firefox Add-on for Debugging

Debugging had never been this easier like today. Different debugging tools and add-ons have really made programmers life easier. Let it be a Firebug, xDebug etc..

HttpFox is one of such add on which can potentially help you to debug your code. Especially in debugging a query string.

What does HttpFox do?

  • Well, many times it happens that our page request goes through number of pages and gives the response in the form of web page. While programming we are passing many values as query string parametes but are not sure whether they are passed properly or not.
  • Most times these values which we sent as query string parameters gets manipulated in between and most times we end up appending values which are really not required. This certainly adds to the GET or POST overhead.
  • HttpFox will help you to know different page requests and what all pages get loaded and parameters uppended to it. To see this you just have to open HttpFox as you open firebug. But unlike firebug, HttpFox needs to be started by clicking on green button as shown in following screenshot.

How to use HttpFox?

  • Once you start HttpFox, you are ready to debug.
  • Now you can click on a link which you want to debug and a result will be shown in HttpFox window (refer screenshot)
  • You can see query string parameters various other pages and scripts being loaded during this page request

What does HttpFox do that Firebug Cannot?

  • You may be wondering that why to use another addon, when firebug gets the job done.
  • There is a reason. Firebug though offers these facilities it becomes bulky. So for URL, Headers, Cookies etc why not have separate add-on like HttpFox?
  • That really makes sense doesn’t it? You can find more reviews here.

Installation

Installation is simple. Go to HttpFox Firefox Addon Page and click on “Add to Firefox” button.

This will take some time and prompt you with “Add-on installed”. Restart Firefox browser and you are ready to go.

HttpFox icon after installation

Summary

This is the basic functionality that is discussed. Beyond this HttpFox also provides other tabs like Headers, Cookie, Query String, POST Data, Content which you can further explore. So enjoy debugging! :-)

Scan CSS properties on any website with Chrome

A blogger starts usually with an idea he or she wants to share with others. Some of us end up writing on a Blogger platform and get wiser and migrate to WordPress. Almost every professional blogger knows a bit of code or atleast some HTML basics. CSS is obviously the most important part of your website as it basically shows how your website looks. It is the front end skeleton in other words. CSS borders basically give your website the look it has.

Here is a great Chrome extension which allows you to scan any webpage and CSS elements to reveal their properties.

About CSScan

  • This extension called CSScan allowed me to look up any text or box in a website and a pop up would show with its CSS properties.
  • This extension is a great way to look up exact what font was used or the exact color to get a quick work around for hours of trial and error.
  • The extension only displays these properties and does not grab CSS details for you to copy or paste. Just clicking once on the CSScan icon shows up the CSS properties as you roll over the mouse on any webpage.

CSScan is of great use for quick ideas on CSS properties which you can look up by just rolling over the mouse. If you are new to CSS then I guess this extension will be quite useful. If you liked reading this you might also like to read up copy-paste ready made HTML Tags and also creating vertical and horizontal menus without coding language.