8 Code Snippets for New Website Projects

By / Oct 24, 2012 / Tips
shares

Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk, and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process.

Featured Image - coding HTML5 CSS3 iOS Android apps on MacBook Laptop

In this article I’d like to share 8 bits of code which any web developer can use. These code blocks include typical HTML5 and some more intermediate-level CSS3 solutions for various website layouts. You could store these snippets in a txt file or in development software like Coda or Adobe Dreamweaver. But either way these blocks of code should prove useful in nearly any development project.

1. Basic HTML5 Page Template

To get us started I have included my very basic HTML5 webpage template. This code snippet has the obvious doctype tag along with some additional header scripts. The template makes reference to an external page styles.css for your stylesheet designs, which can be updated to anything.

Also I have included references to 2 Google-hosted scripts. The first is jQuery 1.8.2 which is the most recent version as of this publication. Then second I’m including the HTML5shiv document so that older versions of Internet Explorer can recognize newer HTML5 elements.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Default Page Title</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

</body>
</html>

2. Clearfix for CSS Floats

I learned about the CSS clearfix method years ago when just first getting into coding. Most web developers understand how floats work, but clearing floats brings in some additional rules.

You should copy my code below into any CSS document you’re using with floats in a layout. Then you should append the .clearfix class onto any container elements with internal floats. This is useful, for example, if you have 1 or 2 sidebars floating alongside your main content and need to clear the lower footer content down to the bottom of the page.

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

3. CSS Browser Resets

Each web browser comes packaged with its own set of standard rules for styling documents. By default if you include no other CSS rules you’ll be given a set of standard fonts, margins, and padding for your website.

Typically web developers want to remove these preset values so that each browser will render the webpage exactly the same. Margins and padding is one big area, but there are other topics as well. I’ve worked out this snippet through Eric Meyer’s CSS resets while adding a few additional lines of, in my opinion, important code.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

4. Full CSS3 Gradients

The code below should create CSS3 gradients for nearly all web browsers on the current market. It can be tough when you are working with these new properties since there are so many rules to keep in mind. Also you have to conform to CSS prefixes for alternate rendering engines, and they’re tough to memorize!

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);

Just copy and paste these properties into any CSS selector which needs a gradient background. Then you can modify the color values to anything you like, including rgba() syntax for transparency. Internet Explorer has a lot of proprietary settings for generating gradients inside the browser. But since many of these are unsupported elsewhere you may choose to remove them from production code.

5. CSS3 Transforms

This is a lesser-used property by developers because of the lack in support from older browsers. But CSS transforms have changed the way developers create user interfaces on websites. Thanks to browser transforms you can generate custom tooltips and custom shapes with just a few lines of code.

-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);

You will have to be careful about using the transform properties on too many elements. These may sometimes cause ugly bugs with Internet Explorer and some older versions of Firefox. Your designs will look best if you can tack on other properties as well, such as box shadows or rounded borders. Or alternatively offer a background image as a fallback method.

6. Custom @font-face Typography

There have been plenty of tutorials explaining how to include your own custom fonts using CSS3. The process isn’t as easy as designing text in Photoshop, but you do get some neat effects in the browser. Use this code snippet if you want to include copies of your own fonts and load a unique font-family value into your CSS.

@font-face{ 
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#webfont') format('svg');
}

h1 { font-family: 'MyFont', sans-serif; }

Note that you will still need to setup the font-family property on any elements you need using this font. Also you’ll want to provide at least a .woff file which is heavily supported by all CSS3-based browsers. Ideally you should include copies of the fonts which are OTF, TTF, EOT, WOFF, and SVG.

There is a fantastic tool online named Font2Web which can actually do this conversion for you. They are limited to a select number of requests per day, but it is one of the best free solutions to generate copies of your fonts.

7. HTML Meta Tags for Responsive Layouts

Mobile responsive web designs have become extremely popular in the past few years. As such it’s common to see more code snippets thrown around and used for this purpose. To make things a bit simpler I have included just a few meta tags which you can add into your document <head> section.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

The meta viewport tag is the only one which should be required for responsive layouts. This will set the view on all screens at a 1×1 aspect ratio. This will remove the default functionality from smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching. The other two tags are supported in Mobile IE and older smartphone browsers, but aren’t necessary for mobile effects in your layout.

8. HTML5 Embedded Media

The new <video> and <audio> tags are such a relief to developers who frequently work with digital media. Images have always been supported on the web, but audio and especially video files have been struggling for decent support going on a long time now. Up until recently there were very few file types which could stream video on all major Operating Systems.

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 
  <source src="media/video.mp4" type="video/mp4"></source> 
  <source src="media/video.webm" type="video/webm"></source> 
  <source src="media/video.ogg" type="video/ogg"></source>
</video>

<audio controls="controls" preload="none">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Thankfully the audio and video tags share a similar syntax. We can use the preload attribute to start downloading data before the user even clicks play. I tend to veer away from this method since we don’t always know if the user is going to stream, and thus could be wasting bandwidth. But you can feel free to customize these options as they best suit your needs.

Conclusion

I am sure there are some other awesome code snippets which have not been covered in this article. I want to present this collection as a very basic starter kit for web developers to build off. These are some amazing solutions for creating killer HTML5/CSS3 websites.

Feel free to copy and share this article anywhere on the web. Additionally you may back up these code snippets to a local file or template on your computer. If there are any related codes or questions you can think of, feel free to share with us in the discussion area below.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

24 Comments

  1. amitabha ghosh
    October 25, 2012

    It’s really helpful. Thank You for sharing.

    Reply
  2. Sini-Maaria
    October 25, 2012

    Thanks Jake! This was (and will be) very useful! :)

    Reply
  3. Web design Wolverhampton and Birmingham
    October 25, 2012

    clearfix is always a top tip :)

    Reply
  4. Martynas
    October 25, 2012

    1) html5shiv should be available for all browsers without HTML5 support (an ex. Firefox 3.6)

    Reply
  5. ePHP
    October 25, 2012

    Not that it matters much, but I prefer to include scripts this way (e.g. without including the protocol such as http or https):
    src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js”

    Reply
    • Jake Rocheleau
      October 25, 2012

      Interesting syntax, thanks for sharing this bit.

      Reply
    • Chris L
      October 24, 2013

      Be aware that this code won’t download jQuery whilst developing a file locally on a Windows machine.

      Reply
  6. Jason
    October 25, 2012

    Thanks for the post. Good resources in a quick spot :)

    Reply
  7. Dave
    October 25, 2012

    Awesome!!

    Reply
  8. Ria
    October 25, 2012

    Thank you so much! Very helpful. :)

    Reply
  9. Marco Berrocal
    October 25, 2012

    Just use SASS, put those babies on some mixins and never worry about it ;)

    Reply
  10. AbeEstrada
    October 25, 2012

    Use SASS

    Reply
  11. samra
    October 26, 2012

    Does CSS3 works fine with latest versions of IE? IE is there just to spoil the party :-D

    Reply
  12. verpixelt
    October 26, 2012

    Use Sass with Compass and u dont have to worry that much about it. There are several build in solutions e.g. clearfix, gradients & breakpoints for RWD. The css reset from Eric Meyer is a great one but I prefer normalize.

    Reply
  13. AKS
    October 26, 2012

    Thanks for the code Jake, it helped a lot. Waiting for more good stuff from you :)

    Reply
  14. Paul
    October 27, 2012

    I would also include some htaccess for error pages.

    ErrorDocument 400 /400.html
    ErrorDocument 401 /401.html
    ErrorDocument 403 /403.html
    ErrorDocument 404 /404.html
    ErrorDocument 500 /500.html
    ErrorDocument 502 /502.html
    ErrorDocument 504 /504.html

    Reply
  15. Erik Briones
    October 29, 2012

    Cool! :)

    Thanks Jake!

    Reply
  16. Website Designers
    October 29, 2012

    Nice code snippets but I still don’t think I’m jumping on the HTML5 bandwagon. Personally, I feel it’s better to let it develop a bit more and allow new tools for development to come out that would make coding quicker, easier and simpler.

    Aadil

    Reply
  17. Web Design Malaysia
    October 29, 2012

    the embedded media code snippet is just what i need.

    thanks!

    Reply
  18. Beben Koben
    October 31, 2012

    don’t forget about prefixfree…hohoho

    Reply
  19. Vladimir J
    November 7, 2012

    Nice. I’ll bookmark this page so I can come back every time I’m starting new web design project.
    Thanks!

    Reply
  20. azizul islam
    November 12, 2012

    relly nice! please add the demo file

    Reply
    • Jake Rocheleau
      November 13, 2012

      No demo file you should be able to just copy/paste and try them out in any HTML5 document.

      Reply
  21. GS&F
    September 9, 2013

    The clearfix class is one of the most loved and hated classes I use. Everything has to float nowadays especially with responsive design.

    Reply

Leave a Reply