Cheat Sheets for Front-end Web Developers

1
9 months ago
in ,

Cheat sheets are helpful to have around because they allow you toquickly remember code syntax and see related concepts visually.Additionally, they’re nice decorative pieces for your office.

In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).

So go ahead – print out your favorites and pepper your workspace with these wonderful references.

HTML/XHTML

1. HTML Help Sheet

2. HTML Cheat Sheet

3. HTML Character Entities Cheat Sheet

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

6. CSS Cheat Sheet

More >

Are you a CSS fanatic?

0
9 months ago
in ,
I received a lot of messages from some readers who accuse me to be a “CSS fanatic” . They asked to me why I spend my time coding an “unnatural” CSS structure instead of using a more simple <table> tag to design a form with labels and inputs text…Ok,I admit it: I love CSS, but I am not a “fanatic”! I try only to findsome interesting solutions about how to use them. In fact, in mydefence, some weeks ago I wrote a post exactly about this topic (Table’s anatomy: why tables are not so bad) after my friend Jason asked to me: “I want to use CSS instead of a table to display a matrix with some values. How can I do?”My answer – shortly – was: Ingeneral, tables are not the devil and if used in the correct way (forexample

More >

Simplicity is better: some suggestions for a clean blog layout

0
9 months ago
in
In the past week I received many good comments about the design of myblog and some visitors asked to me suggestions about how to improvetheir site layout. I want to share with you some tips I thinkinteresting about this topic. These are not general rules but onlysimple suggestions which can help you in order to make your site moreattractive.Simplicity is betterBesimple. Don’t use complex site structure for your informative blog(like my site for example). A vertical orientation with two maincolumns is the better solutions, linear and simple to manage. If youneed for help to design the page layout take a look at this post: Conceptual design for site’s layoutBackground and text color for content.Use a white background (#FFFFFF) with black/gray scale text for the content. You can use black color (#000000) in order to emphasize title of posts and gray scale color (#444444, #555555…)for text (but don’t use

More >

Project a database: define relationships-entities model (tables, attributes, and relationships)

0
9 months ago
in

This lesson explains how to project a typical relationships-entities model for a database to be used in our web projects. My approach is:

  1. 1. Define database entities (tables)
  2. 2. Identify attributes for tables
  3. 3. Define relationships and cardinality between the istances (records) of tables

Step 1: define database entitiesThe first step when you project a database is to identify all entities (tables). For example if we want to project a simplified del.icio.us-like web site, our database will have these entities:

  1. - USER (to store data about users, email, password, nickname,…)
  2. - SITE (to store data about the sites added by the users)

Theseare only the main entities required from our project but, take a mind,that we will add other tables to store data about relationships betweenistances (records) of these tables in case of cardinality (M:M), many to many (see Step 3).Step 2: define attributesThe

More >

Simple CSS vertical menu Digg-like

0
9 months ago
in

This tutorial explains how to implement a simple vertical menudigg-like using CSS and javascript to show/hide sub-menu. The result islike this:

Download this tutorialStep 1: HTML codeHTML structure is very simple and contains two <ul> tags (menu and sub-menu):Copy and paste the following code in a new html page:

<div id=“middlebar”><ul class=“menu”>
<li><a href=“#” onclick=“javascript:showlayer(‘sm_1′)”> Profile</a></li>
<ul class=“submenu” id=“sm_1″> <li><a href=“p1.html”>Profile</a></li> <li><a href=“p2.hmtl”>Inbox </a></li> <li><a href=“p3.hmtl”>Log-out</a></li></ul>

</ul></div>

Step 2: CSS codeCopy and paste this code to define menu button:

ul, li{margin:0; border:0; padding:0; list-style:none;}#middlebar{ font-size:11px; color:#3b5d14; background:#90b557; font-weight:bold; padding:4px; height:30px;} #middlebar .menu li { background:url(lm.png) left top no-repeat; height:30px; float:left; margin-right:10px; } #middlebar

More >

FancyBox-Jquery :: A Fresh and fancy lightbox plugin using Jquery

0
9 months ago
in ,

Why? Because I was bored by so many pages using lightbox and it`s clones, I wanted something fresh and Mac-like. I couldn`t find any cool alternative that would be build on top of jQuery, so the FancyBox was born. Features:

  • Automatically scales large images to fit in window
  • Adds a nice drop shadow under the zoomed item
  • Groups related items and adds navigation through them (uses preloading)
  • Can display images, inline and iframed content
  • Customizable through settings and CSS

Examples:http://fancy.klade.lv/Download:http://fancy.klade.lv/fancybox/fancybox_1.0.0.zipTechnorati Tags:

400 Styles for Adobe Photoshop

0
9 months ago
in

400 Styles for Adobe PhotoshopRAR | 100 Styles | 26.4 MB Download Link:Part 1

Sliding Top Menu With jQuery

0
9 months ago
in

Sliding menus are very effective in areas where we have limited space .

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

And when opened:

Click here to see the final working demo of this jQuery sliding menu.

Step 1 – HTML:

<div id="sliderWrap"> <div id="openCloseIdentifier"></div> <div id="slider"> <div id="sliderContent"> Isn’t this nice? </div> <div id="openCloseWrap"> <a href="#" class="topMenuAction" id="topMenuImage"> <img src="open.png" alt="open" /> </a> </div> </div></div>

Step 2 – CSS:

<style type="text/css">body {margin:

More >

Go to Top