Why learn HTML5 & CSS3?

When it comes to learning new languages many front-end developers do not like to add on to their current bandwagon of knowledge. I think in most cases many developers think that there is absolutely no reason to learn a new language because they can already do it with the knowledge they currently have or just believe they should hold off until html5 and css3 starts to become “popular”.

Expand knowledge

Wouldn’t it be nice if new syntax just appeared in your brain without having to do the hardwork? If you’re a developer who already has experience with html and css then why not expand your knowledge in those fields? If someone were just begining in the web development field they would probably start with the new stuff like css3 and html5 because they would think the old syntax is outdated. If someone new to coding is learning the new stuff sooner or later they will past you up because of your lack and effort and not willing to learn mentality. Learning the new css3 and html5 syntax maybe a bit fustrating but once you get the hang of it you will become a better front end developer and will have both experience with both the old and new syntax. You will also have the best of both world considering you have experience with writing the old syntax.

Ability to do greater things

If you have noticed html5 and css3 has a variety of effects and fascinating things you can do with it. If you’re already writing css2 then you may have notice that you cannot create gradients without photoshop images and that you cannot use transitions without javascript. If you’re writing html4 then you many notice you cannot define regions or tags like

, or

This is a new article tag.

and or have the abilty to create functions like placeholders(name that appears inside of a form before you begin to type).

Expand Portfolio and build upon resume

If you have ever applied for a job then you know that employers loves someone who is up to date with current web standards and knows what they’re doing. Learning html5 and css3 now may seem alike it is nothing but when a job looks at your resume and sees you are constantly learning and expanding your skillset then you will look like gold in their eyes. Also learning the new syntax will give you the ability to showcase new websites you have completed using html5 and css3, and show future or potential clients that you’re up to par with your field of profession.

Innovate and demostrate new technquies

After learning the new html5 and css3 sytnax you can now begin to lead the industry. As as web designer, or developer we are always trying to innovate for our industry. If you have taken the time to learn new html and css sytnax and truly understand what you are doing then why not become a leader and help out the development community? Let’s take Internet Explorer 6 (IR) for example. Everyone used ie6 for a very long time but it took someone to say we’re not supporting ie6 anymore. As many people started to drop support for ie front-end developers were able to speed up coding process and promote the use of modern browsers like Firefox(FF) and Google Chrome(CH). You can teach others in areas in which you have struggled in or implement new solutions to current development problems.

Conslusion

Html5 and css3 are very great languages and the new sytnax for each version maybe a bit tricky when first learning but you can assume that learning it will be worth it. As a full time college student and full time working student I can assure you that I know how it feels not to have time to learn new things like you used to. Even if it is just for an hour a day or 30 minutes a day, check out some html5 & css3 books. If you’re not into reading books then check out video tutorials or tutorials from design blogs and mess around with the code. I hope the future of the new html and css are bright and hope to see you all using it and implementing it into your current projects. What are your thoughts on this subject?

From Photoshop to css3

When making the transition from using photoshop gradient images many of you probably think that css3 is way to complicated and have not yet used its incredible features. When working with css3 gradients you will find how photoshop now goes hand and hand with css3.

Linear Gradients

Linear gradients are gradients that is usually vertical or horizontal. In Photoshop designers in most cases use 2 colors but sometime you will want to use more then 2 colors at a time and just how that can be achieved using Photoshop it can also be achieved using css3. Take a look at the code below.

background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 53%, #05abe0 100%); /* FireFox 3.6+ */

Now Lets break the code down so you can better understand what is what and what is going on.
Moz linear gradient targets Mozilla Firefox

-moz-linear-gradient

Top lets the css3 know that the gradient is starting from the top

top

The first color if you can see the image, is from photoshop gradient tool.

#87e0fd 0%

The second color:

#53cbf1 53%

The third color:

#05abe0 100%

Targeting other browsers

So you have created your css3 gradient and you noticed that it only shows in Firefox. Why? The reason why comes to the simple fact we have not targeted other browsers in our stylesheet. How do you target other browsers with css3? Look below.

Chrome, Safari4+

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(53%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */

Opera11.10+

-o-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* Opera11.10+ */

Internet Explorer10

-ms-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* IE10+ */

My “good” buddies Internet Explorer 6 (IE6), Internet Explorer 7 (IE7), Internet Explorer 8 (IE8), Internet Explorer 9 (IE9)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

Optional: For W3C Purposes if you’re into validations of your website.

background: linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* W3C */

UPDATED: This tutorial was updated on 7-10-2011. I have made it so you can now add content over the slider.

Things you will need:

• Jquery Slideshow
• Jquery

The HTML

Copy the code below and I will explain.

<div id="slideshow">
    <img class="active" src="image1.jpg" alt="Slideshow Image 1" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
    <img src="image5.jpg" alt="Slideshow Image 5" />
</div>

For our full background image slider you can use as many images as you may like but I will only use 5 images. The first image has a special class name active which will trigger our slider effect. I name the class active so I can later call on it, as of now it does nothing.

The Javascript

The main part of our full background slider is the JavaScript. Copy the JavaScript and I will explain. Insert the codes below into the head section of your html document.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

The code above gets or as you like to say calls the jquery. Change to your correct location.

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

The code above is our jquery function or shall i say script. The script is basically telling jquery to look for an image with the class name active, which we’ve already provided in our html markup,Then it tells the JavaScript that when it finds the image with the class name active to get the images in the order they’re provided in.

The css

Copy the css code below. The css code below is the code which styles our full page slider image. It’s very simple and makes our background look nice.

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px;
}
}

Source: Jonraasch

If you would like to add content over your slider image copy and paste the code below into your css document. The code below is just a content div that holds our content. I position the background and gave it a -1 z-index so it would appear below our content div below.

#content {
	width: 920px;
	margin: 0 auto;
	background: rgba(11,11,11, 0.5);
	padding: 20px;
}

That is all for this tutorial but you should now have a good understanding of how to create a multiple background sideshow for your website. I did not go over the css code that much because the best way to learn is to download and dissect the code. I hope this tutorial has helped you.

The Steps

So adding rounded corners to IE6, IE7, and IE8 is fairly simple thanks to css3pie . First things first, download the PIE distribution zip and save it.

You should have 3 files inside of the folder. Look for a file called pie.htc and drag it into your website directory. It can be place where just remember to call it correctly in the stylesheet.

Now we will create the rounded corners and call the effects. In the code below I have written some css. The #myelement is the variable that you can identify in your HTML document. I’ve also called for the pie.htc function in my stylesheet where I would like for rounded corners to work in IE.

#myelement {
       behavior: url(PIE.htc);
       border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
}

You should now have rounded corners in IE browsers. Remember that this is this development is still in beta so if you just so happens discover a bug or so report it to the css3pie team. I have not encountered a problem yet but everyone code is different so look out. I hope you guys enjoy this little hack. What are your thoughts on this and have you used css3pie before?

Website Designer

Many of you designers out there probably consider yourself as a web designer. A web designer can live up to more than just designing and often work with familiar web languages to create dynamic web pages.

What does it mean to be a Web designer

a person or business that designs and prepares content for the World Wide Web, including text, images, site architecture and multimedia.
Source

Web designers are mainly the ones who design the whole look and aspects of a website. As a web designer your job would be to stay up to date with the latest trends and produce great designs that you or a developer could code. Being a web designer may seem like an easy job or thing to do but if you actually break down the steps it can take quite sometime to produce a homepage with sub pages. So what is a web designer typical schedule?

A Web designer schedule is not exactly how I will list it below but I will just give you a prime example. I will skip the wake up and brush teeth steps, you should already have that down pack.

1. Find Inspiration
2. Sketch out a design on paper
3. Clean sketch up in Photoshop, use guide lines
4. Find Colors for website
5. Find clip arts, images, brushes, textures, etc
6. Start inserting textures, brushes, and icons into design
7. Name layers and group them
8. Slice the layout and get it ready for the developer
9. Save work

That may seem like it is nothing but each step can take a very long time. Whenever you design something it is very important that you design and send it off the right way. For example a developer expects for your design to be pixel perfect, layered & grouped, sliced, and ready to be coded.

Website Developer

Many of you designers out there probably consider yourself as a website designer/developer. If you’re wondering what is a web developer, then do not worry I will explain it below.

Web Developer is the person who deals with websites from a technical perspective
Source

Web developers are usually the ones doing all of the dirty work. What I mean by dirty work is coding the website in many different web languages. As a developer their jobs are to create web pages using front-end developer techniques or back-end developer techniques. If you’re lost then do not worry, I will explain it below.

Developer usually work with many web languages depending on whether its front-end work or back-end work. If you take a look at the list below you can see what type of languages web developers work with to create dynamic web pages.

• Markup languages (such as HTML, XHTML and XML)
• Style sheet languages (such as CSS and XSL)
• Client-side scripting (such as JavaScript)
• Server-side scripting (such as PHP and ASP)
• Database technologies (such as MySQL and PostgreSQL)
• Multimedia technologies (such as Flash and Silverlight)

Many designers consider themselves as Web developers but mainly know half of the languages. I know it is very difficult to learn new web languages while mainly working with a code that you’re familiar with. Each language above is very important if you’re one of those developers who has a plan to work for a company or keep a job.

Front-End
Front-End Developers mainly know some of the basic codes like HTML, CSS, Javascript, and might have a little understanding of PHP, and some back-end work. To learn more about Front-end developers check out this article from Fuel Your Coding.

Back-End
Back-End Developers are just as important as a Front-End developers. Back-End developer mainly work with web languages like Perl, PHP, ASP, JSP, ColdFusion, etc. What I love about working on the back-end of the site is that you can control the website and its functions. Say you wanted to create a membership website and you need a place to store the visitors user-name and password. You would need to create a database that stores the information and that is when the back-end developers come in.

What should I know to be considered a website designer/developer

To be considered a website designer and developers I would recommend that you spend time working with new lanuages that you normally do not work with and you keep designing the kick butt web pages and designs. You do not have to have every single web language down pack but it would be good to have a good understanding of what each languages does and how you can work with it to create something worth while. I hope this article gave you a basic understanding on what each field does and the main codes they use. If you’re looking forward to becoming a developer or designer keep working hard and you will be one in no time.

Folder Structure

In the folder of your for your image gallery you should have 3 folders and 2 files.

• Css – Contains the jquery css
• Images – Contains images
• Js – Contains the javascript
• index.html
• style

The HTML Structure

For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom.

<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>

The Css

For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css

1. -webkit-transform: – Used to rotate the images
2. -webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins

First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Now we want to add the script below to the body of our HTML document right before the end of the body tag.

<script type="text/javascript">
$(document).ready(function(){
$(".thumb-top,.thumb-bottom").fadeTo("slow", 0.3);
$(".thumb-top,.thumb-bottom").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

$(function() {
    $('#gallery a').lightBox();
});
</script>

For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions.

The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.

For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3); function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.

For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.

Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3.

After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with.

Credit

Credit goes to Csswizardry for the css3 image gallery.
Credit goes to Leandrovieira for the lightbox plugin.

Becoming an addiction

Once you get into the habit of taking a peak at someone else code and copying and pasting it, it all will become a habit to you. Ever heard of the saying if you steal something once and get away with it you will continue doing it until you’re finally caught. Well that saying is very true. People who steal code from other websites often make it a habit and continue doing it, hoping it will improve their work and skill-set.

Losing your skill-set

That’s right. Believe it or not if you’re constantly copying and pasting others people code to create a website then you’re most likely just damaging your very own skill-set. When you want to learn something or get better at something you have to work with it. For example you did not grow up knowing how to ride a bicycle without training wheels. You had to practice and practice until you finally got it. As you were practicing trying to learn how to ride a bicycle you sometimes looked at other kids to see how they have done it. Over the years you continues riding bikes and became very proficient at it , not cheating once at it. Didn’t that feel good knowing that you learned how to ride a bike all by yourself. That’s applies to web development also. If you constantly write code and continue to feed off of your own work then your skills will always be improving and proceeding to the next level, making you greater at what you do.

No ideas

Often when viewing or always browsing someone else work you may feel that you work will never be that good or amount to the value of their work. That is completely false. Every designer/Developer start off designing not knowing the latest tips and techniques. When I first started off designing I have to say that my designs were not great at all haha. I used fonts that could not be used, margins and padding were completely off, and the design was just bad. I looked at others works from time to time but I knew if I continued looking at their work I would continue belittling myself. The more you look at others work the more ideas you lose.

Finding inspiration

As a designer we often visit many websites for inspiration. What I have found out as being a designer/developer is I never find inspiration looking at others website or design. It might sound crazy but its the truth. I find inspirations from wallpapers, graphic posters, and videos. If you think about it Graphic designs posters are usually colorful, and very outgoing, and wallpapers are like backgrounds giving you an idea in your head on which background to create and videos are like websites in motion. If you’re watching TV on a network like spike TV or MTV you will often see some crazy motions graphics effects that can lead to a very nice design.

If you would like to avoid copying others source code or design then follow my tips and you will be on the road to becoming a better designer/coder. To this day I am constantly working on my coding skills and designing skills trying to become better at something that I love and enjoy doing. Quit stressing out and go watch a video or look at a poster for an idea.