🌐 Public

Web Masterclass: From Zero to Hero

By Jae Aquino


This course features how you can apply golden ratio on designing and developing the web including "colors of phi," "golden ratio typography," "golden grid system" that will fit on Teehan+Lax's 6px baseline grid, and more. Start learning today! LEGEND: A — Article B — Book F — Framework I — Inspiration O — Online Course P — Plugin Rf — Reference Rs — Resources S — Slideshow T — Tool W — Website (This course will be updated from time to time)

Jae Aquino — Author & Visual Designer at Envato

2 How Not to Get Overwhelmed as a Web Developer

In the past week, I've worked on projects that have required me to write HTML, CSS, Javascript, and PHP. In working on those projects, I've had to employ various technologies, including responsive design, AJAX, WordPress theme development, API integration, and modular javascripting. Let's not forget that most (if not all) of these projects involved a preprocessor, build tool, or method

3 Being a Full Stack Developer

The barrier of entering the web development industry as a web developer is still low, but it's getting increasingly complex. The dynamic nature of the whole industry makes requirements shift often to the most popular and "next best thing" tools and programming languages. Gone are the days when only one programming language or a very specific process was required from

6 The 15 Column 1200px Grid System

A logical approach to planning & prototyping your new, responsively designed website. Grids have always been an important planning element for designers. They know that a well gridded layout can help ease a user's cognitive load and help them scan a page with far greater efficiency than one that is chaotic and misaligned. With responsive website design (RWD) now firmly

7 Responsive Web Design Demystified

What exactly is responsive design, and how do you create a responsive website? This tutorial explains the concepts, and walks you through the basic steps for creating a responsive website layout. Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers

8 Designer's guide to first Responsive Website | Code Parallel

Over the last few months, we have worked with many designers to help them with Frontend Development and one thing that has actually become a default standard is "Responsive Web Design". The simplest definition people often give is: " Its a website that works across desktops, tablets and mobile phones ". But it hardly explains what it really means and

9 Loosely Coupled Designs - The secret to designing great interactive websites -

Parallax websites are the latest trend in designing interactive websites these days. There is no doubt parallax adds a wow feeling to a website but if not done well, it has a lot of Usability pitfalls. As interactive developers, we keep getting requests where we receive a standard one page design with a request to add some parallax effects to

10 Responsive Deliverables

In a world of growing front-end complexity, what are we handing off to clients? During the era of Print Design, companies would approach agencies for a brand identity system. Don Draper would then hire one of two people: either Paul Rand or Saul Bass. Paul Rand's work with Westinghouse makes a great case study for building a design system. The

12 The Web Design Process Periodic Table

How many times have you had to placate your clients because they want to see their website live, and they want it NOW? Unfortunately too many of us have had this experience and frankly it's usually because clients have no understanding of what happens behind the scenes when we develop websites. And why should they? They are far too busy

13 The Golden Ratio in Web Design - Tuts+ Code Tutorial

Math is beautiful. Does that sound a little strange? I sure thought so when I first started designing. Math is so rigid and often times boring, or so I thought. You would be surprised to find out that most aesthetically pleasing designs, works of art, objects and even people have math in common. Specifically the Golden Ratio, also known as

17 Tools for getting things done (on Windows)

I am often asked what tools I use to get things done on the PC at home. It's a very broad question, so I'm going to narrow it down to what Windows programs I use frequently, as opposed to more broader topics like what services, hardware, apps, and sites I use. I use Windows exclusively for web development & hacking

19 The Many Faces of 'Mobile First'

We see the phrase 'mobile first' everywhere. Luke Wroblewski definitely struck a nerve when he coined the phrase a few years ago and created an important battle cry as we head into this multi-screen future. Luke's definition of mobile first consists of three core components: The growth of mobile is a huge opportunity to reach more people than ever The

20 Responsive Web Design - A Dummies Guide

This guide answers common questions around Responsive Web Design, a technique for building mobile and tablet websites that is also recommended by Google. Google has officially recommended Responsive Web Design as their preferred method for building mobile websites. If you have a website or a blog, it is time that you seriously consider switching to a responsive design instead of

21 The 10 Things You Should Include In Your Website

Here's a list of 10 things that you can include in the design of your website to improve the visitor experience and also make the site more search friendly. Your website has a beautiful design with tons of useful content but there may sill be scope for improvement in other areas. For instance, does your website support Live Tiles? Can

22 How to Get Web Design Experience - Treehouse Blog

It's even nerdier than it sounds. Back in the mid 2000s, I spent a good deal of my free time learning to code PHP in my school's library while most of my classmates were out partying. I attended the University of Central Florida, and like many college campuses, there were paper flyer bulletin boards everywhere. I was building a web

23 Box-Sizing: The Secret to Simple CSS Layouts - Treehouse Blog

( Photograph from Flickr user Rachel Kramer) Box-sizing is a CSS property that makes CSS layouts work intuitively. If you've been working with CSS for any period of time, you know that using properties like width, padding, and border can be confusing. Sometimes when you use the width property, it doesn't always apply in the way that you might expect.

24 How I Rapidly Prototype Websites - Treehouse Blog

(Photo by Andrés Nieto Porras/Flickr) Treehouse students will often ask me which mockup tool I use to prototype websites, and my response is almost always the same: pencil and paper. I feel like when I give this answer, there's a small sigh of disappointment. I think it's because people are hoping for a better way to simplify the complexities of

26 The 2014 Guide to Responsive Web Design - Treehouse Blog

Responsive web design has changed a lot over the last few years. Front end development teacher, Nick Pettit updates you on all that's changed when it comes to making websites work on mobile devices. Responsive web design is a technique for building websites that work on mobile devices, tablets, and desktop screens. Not long ago, websites were typically designed specifically

28 Become a Better, Faster Front-End Developer - Tuts+ Web Design Article

So you're a pretty great web developer already. You've got some killer CSS chops (cross browser even), perhaps you've been a Photoshop expert for years, and you've got enough jQuery knowledge to make almost any chained animation go smoothly. But certainly you ask yourself, what's next? In fact, one of the most asked questions about web development is, "how do

32 Hatch's 10 Quick Design Tips To Improve Your Website

We see it all the time. Websites that have so much potential but fail on the design basics. Some of our client websites that we can't wait to put on the portfolio often end up being changed to the point of embarrassment; bigger fonts, more content, glow in the dark spinny things, garish icons...the list goes on. These 10 quick

33 The Periodic Table of HTML's Elements - CodeVisually.com

The Periodic Table of HTML's Elements shows the 106 elements, arranged by type, currently in the working draft and two proposed elements (marked with an asterisk). It also allows you specify to specify a URL and will show a heat map of which tags are used the most. Homepage: http://joshduck.com/periodic-table.html

34 CSS Guidelines

High-level advice and guidelines for writing sane, manageable, scalable CSSAbout the AuthorCSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies all over the world write and manage better quality UIs for their products and teams. I am available for hire. Support the GuidelinesCSS Guidelines is provided through

35 5 Virtues of a Good Software Developer

Recently I was watching a video by John Carmack the creator of Quake and Doom on the process of software development. He has has been developing software for over 20 years and is at the top of his game. And yet he claimed that he's learning a lot recently. Learning? You would think that he knew everything already. He is

37 Style Guides: A Design Mock-up for the Responsive Web

Most designers follow a set process when creating websites, but now that we are in the world of responsive design, and websites are accessed on more devices than ever before. Using Photoshop to create design mock-ups is increasingly becoming flawed. It may vary slightly from project to project and from designer to designer, but the current process usually looks something

38 What's the Purpose of a Website, and Do I Really Need One?

"What does a website do?" That is the question that I was asked recently. A genuinely inquisitive question from a person who could potentially benefit from having a website for his business but had simply never considered it before. And it got me thinking about the purpose of having a website.

Added by Jae Aquino: “Download the assets here: http://www.medialoot.com/images/simply-tut/images.zip

39 How to Code a Homepage Template with HTML5 and CSS3

This tutorial has been created to guide you through the process of converting one of our most popular PSD homepage templates on Medialoot into fully coded HTML and CSS. What We're CodingLet's take a look at our design, we will be working with a Medialoot PSD template called Simply. Simply is a minimal homepage design with subtle colours and strong

40 Best Practice to Organize Javascript Library & CSS Folder Structure

I will outline a recommended structure to organize files in your HTML5 application. This is not an attempt to create any kind of standard. Instead, I will make suggestions on how to group and name files in a logical convenient way. Your ProjectLet's assume you are building an HTML5 application. In some cases you may use the root of your

42 How to get HTML5 working in IE and Firefox 2

HTML 5 may be the latest and greatest technology, but some browsers don't have native support for the new semantic elements. Let's momentarily forget about the really sexy functionality, like full control over the <video> element, and just focus on getting the elements rendered. The problematic A-grade browsers include IE 8 and below, Firefox 2, and Camino 1 (these last

43 John Resig - Write Code Every Day

Last fall, work on my coding side projects came to a head: I wasn't making adequate progress and I couldn't find a way to get more done without sacrificing my ability to do effective work at Khan Academy. There were a few major problems with how I was working on my side projects. I was primarily working on them during

44 Responsive Web Design

Issue № 306by Published in Ethan MarcotteCSS, Layout & Grids, Mobile/Multidevice, Responsive Design, Interaction Design · The English architect Christopher Wren once quipped that his chosen field "aims for Eternity," and there's something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. A building's

46 Learning To Use The :before And :after Pseudo-Elements In CSS - Smashing Magazine

If you've been keeping tabs on various Web design blogs, you've probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene - and for good reason. In particular, the experiments of one blogger - namely, London-based developer Nicolas Gallagher - have given pseudo-elements quite a bit of exposure of

47 Tips For Mastering A Programming Language Using Spaced Repetition - Smashing Magazine

Since first hearing of spaced repetition a few years back, I've used it for a wide range of things, from learning people's names to memorizing poetry to increasing my retention of books. Today, I'll share best practices that I've discovered from using spaced repetition to learn and master a programming language. Some great articles on this topic are already out

48 10 Essential Sublime Text Plugins for Full-Stack Developers

When I started with web development a few years ago, Vim was my first choice of text editor. It was easy to work with and I could get the basics done without much hassle. Also, many developers like terminal based text editors because they get the same environment in both their local development machines and remote servers. In spite of

53 lynda.com Training | Responsive Design Fundamentals

Keep up with news, tips, and latest courses with emails from lynda.com. Sign up and receive emails about lynda.com and our online training library: new course releases newsletter general communications special notices Here's our privacy policy with more details about how we handle your information.

54 How we make RWD sites load fast as heck

Posted by Scott on 07/30/2014 There has been a lot of discussion about optimizing responsive layouts for performance lately, and I think that's great. Speed broadens access and makes users happy, much like responsive design. In the past year I've spent a lot of time researching page loading performance, both for our ongoing client work here at FG and for

55 Gridlover

Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 - h4 headings, but you can of course apply your adjusted values to any element by editing the css later.

61 The 10 commandments of documentation

Toyota is well-known as the most efficient organization on the planet outside of the human body, and one of their philosophies is to avoid documentation. Instead of making a "process" for when someone on the assembly line needs more bolts, they simply have 5 bins of bolts on their shelf and when one is empty they move it off the

64 EditorConfig

What is EditorConfig?EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control

65 The 10 Things You Should Do When You Have Your Next Web Idea

You're spending a lazy afternoon with your family, when a brilliant idea suddenly strikes you. Whether it's an app, a product, a service, or a new way of doing things: if done right, this idea could be the next uber cool thing, and even change the world. What do you do next? Here's a guide to getting from a brainwave

66 Designer, Architect, Developer

Over the last six years I've bootstrapped three successful enterprises (Cube6 Media, Gravatar, and GitHub) and failed to gain traction with a handful of others. After a lot of thought and reflections on these experiences, I've identified three major skills that should be present in order to best build a successful web application. These roles can be loosely defined as

67 How to get a job as a web developer

Get StartedIn 2008 I moved to the UK after two years of teaching English in Japan. I was newly married with no job and little of my own money. While teaching English and in university I had done some freelance web development work, I didn't feel confident that I could sell my programming skills on a fulltime basis. I was

69 20 Things I Learned About Browsers and the Web

Very Special Thanks ToBrian Rakowski, Ian Fette, Chris DiBona, Alex Russell, Erik Kay, Jim Roskind, Mike Belshe, Dimitri Glazkov, Henry Bridge, Gregor Hochmuth, Jeffrey Chang, Mark Larson, Aaron Boodman, Wieland Holfelder, Jochen Eisinger, Bernhard Bauer, Adam Barth, Cory Ferreria, Erik Arvidsson, John Abd-Malek, Carlos Pizano, Justin Schuh, Wan-Teh Chang, Vangelis Kokkevis, Mike Jazayeri, Brad Chen, Darin Fisher, Johanna Wittig, Maxim

71 a — Code Guide

Syntax Use soft tabs with two spaces-they're the only way to guarantee code renders the same in any environment. When grouping selectors, keep individual selectors to a single line. Include one space before the opening brace of declaration blocks for legibility. Place closing braces of declaration blocks on a new line. Include one space after : for each declaration. Each

73 a — Prototyping Your Workflow

Issue № 396by Published in Mark LlobreraBusiness, Web Strategy, Workflow & Tools · Last year the digital agency I work for, Bluecadet, started a website redesign project for The Franklin Institute -a renowned Philadelphia science museum undergoing the largest expansion in its history. My colleagues and I were excited because not only were we getting to work with an iconic

75 Dive Into HTML5

Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards. We encourage you to buy the printed work - Mark Pilgrim's artfully titled "HTML5: Up & Running" - published on paper by O'Reilly, under the Google Press imprint.

76 Design Issues

Tim Berners-Lee Date: 2008-01-18, last change: $Date: 2010/02/28 00:12:12 $ Status: personal view only. Editing status: Published by Tim Berners-Lee on January 18, 2008 in the W3C blog. Copied to DesignIssues and edited in response to a comment from Noah Mendlesohn in Feb 2010.Up to Design Issues Simple things make firm foundationsYou can look at the development of web technology

77 T— Creating a Killer Style Guide

1. Include enough to build out a site, more or lessIt's a set of guidelines and coded UI patterns that, in context of template pages, exemplify the site. Your style guide should have enough components to build a page from scratch - within reason. While accounting for every possible scenario is difficult at best, having many pre-built components, written in

78 F— Object-oriented CSS

All the resources you need to get started are linked from the left navigation. Start by downloading the base files. Exercises one and two can be completed in Firebug if you are comfortable with it. Then you can download the finished file at the beginning of Exercise 3.

79 F— Scalable and Modular Architecture for CSS

I have long lost count of how many web sites I've built. You would think after having built a few hundred of them I would have discovered the "one true way" of doing it. I don't think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code

82 3 reasons why you should let Google host jQuery for you | Encosia

All too often, I find code similar to this when inspecting the source for public websites that use jQuery: If you're doing this on a public facing website, you are doing it wrong. Instead, I urge you to use the Google HostedLibraries content delivery network to serve jQuery to your users directly from Google's network of datacenters. Doing so has

83 Mailto Link Syntax: The Complete Guide - Yoast

For a small project I had to create a smart mailto link to make my life a bit easier. I wanted the mailto link to hold not only a to and the subject (I'd figured that much out) but a multi lined body too. Turns out that is pretty darn easy to do. So, for my own reference, and yours,

85 Styleguide Driven Development

Styleguide Driven Development (SDD) is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing the UI separately in a styleguide. By separating the UI and backend tasks so they don't rely on each other, it allows teams to iterate fast on prototypes and designs without having to make changes to

86 The Drawbacks of Freelance Web Development

The Drawbacks of Freelance Web Development...and how to get in control of your own destinyI've been a web developer since 2004, which thinking about it is almost 10 years-quite a long time. During this time I went through different phases: from being excited about starting up my own business, to learning how to deal with clients, how to charge the

87 Letter To A Young Programmer Considering A Startup

I regularly get emails from young people, usually those with an interest in programming, who are trying to make decisions about school and/or their professional futures. This post is for those young people.If you're in your late teens or early twenties, you've grown up in a world that has come to idealize startups, their founders, and the people who go

90 Powerful Workflow Tips, Tools And Tricks For Web Designers

Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price. However, some steps can be repeated for every project. These are steps we know and should make as

93 Ten Lessons from GitHub's First Year

NOTE: This post was written in late December of 2008, more than two years ago. It has stayed in my drafts folder since then, waiting for the last 2% to be written. Why I never published it is beyond my reckoning, but it serves as a great reminder of how I perceived the world back then. In the time since

94 5 Blind Spots to Consider When Designing Web Apps | BARREL

Web apps each have their own unique functionality, content, and purpose. As designers, we consider the core actions a user can take and how these flows and journeys work. We create cohesive styles for all the different pages and views. We may be able to mock up enough designs to get approval from our clients to begin development, but there

95 Why Developers Need to Learn Design

A couple of years ago at Happy Cog, I transitioned from my position as a designer to a developer full-time. Up to that point, I had been a hybrid designer and developer, splitting my time between the two responsibilities. The truth is that it was a long-overdue transition. My passion lies in the development side of the spectrum, so I

96 7 Psychological Traps that Hold Web Designers Back

Let's talk about self-confidence and psychological misconceptions that may hold web designers and web professionals back from getting ahead in their career. When it comes to daily routine tasks most of us are not that diligent and logical as we used to think (or want to think). Everybody knows what to do, but somehow we try to avoid following our

97 Semantic Versioning 2.0.0

SummaryGiven a version number MAJOR.MINOR.PATCH, increment the: MAJOR version when you make incompatible API changes, MINOR version when you add functionality in a backwards-compatible manner, and PATCH version when you make backwards-compatible bug fixes.Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format. IntroductionIn the world of software management there exists a dread place called

98 The Principles of Adaptive Design

There's a conversation that crops up time to time again about the definition of responsive design and treating RWD as a goal unto itself. Has it evolved beyond Ethan Marcotte's original definition? There are so many articles out there on the subject already, but since it keeps coming up I figure it's still worth talking about. Of course there's a

101 How to Think Like a Programmer: The Developer Mindset

Adda BirnirDevelopers come in all shapes and sizes, but they do share one thing in common: they all THINK like programmers. And they bring that approach to everything in their lives, whether it is a challenging software problem, or "hacking" other aspects of their lives like garlic breath or travel or relationships! Developing and cultivating this mindset is a crucial

102 Skills of a successful front-end web developer

Everyone wants to hire the perfect Drupal developer - but you need a way to identify future potential Drupal front-end developers. What previous experiences and transferable skills are going to help someone make the switch to Drupal and excel on a busy team for a typical Drupal site owner. What are the transferable skills and characteristics someone could look for

103 Skills of a successful back-end web developer

Everyone wants to hire the perfect Drupal developer - but you need a way to identify future potential Drupal back-end developers. What transferable skills are going to help someone make the switch to Drupal and excel on a busy team for a typical Drupal site owner. What are the transferable skills and characteristics someone could look for in a potential

105 What Is: Front-End Web Development

1. In 140 characters or less, what is front-end web development? A mix of programming and layout that powers the visuals and interactions of the web. 2. If a website were a house, front-end web development would be ______? The pretty exterior that gives the house character, or the host that invites guests in and makes them feel at home.

106 A Quick Guide to Sublime Text

I arguably spend more than 90% of my workday working in my text editor. Knowing how to become faster and more proficient in Sublime Text has saved me a great deal of time and headache every day. In this guide I've outlined the resources needed to make the most out of using Sublime Text. As of this writing, I am

107 How to Handle Revision Requests for Web Design Projects - Treehouse Blog

You spend weeks working on a website, agonizing over every detail and producing something that you can't wait to show your client. You're sure the client will be just as overjoyed as you are about the final look. You click "send," and you wait for the accolades to start pouring in. Then you get the e-mail. The one that says,

109 Productivity hacks for web designers

Ernest Hemingway composed his masterpieces during the wee hours of 5 and 6am. Richard Branson is known for clocking in around 5.45am. And Disney CEO Robert Iger is up by 4.30am. If you've read any of the thousands of 'How to be successful, brilliant or filthy rich' articles out there, you'll have noticed that CEOs are quick to extol the

110 Web Standards Curriculum

NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT http://www.w3.org/community/webed/wiki/Main_Page. ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED. Introduction What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics

111 How the web works: HTTP and CGI explained

Introduction | Following links | Caching | Client request | Server response | Server-side scripting | More details | FAQs | Appendices Other articles and hacks by me. About this tutorialThis is an attempt to give a basic understanding of how the web works and was written because I saw so many articles on various news groups that plainly showed

113 Interview with Zack Fisch of SpeakMe

Zack Fisch is a former-law-student-turned-entrepreneur who founded a social video startup called SpeakMe with his brother Adam. He's a current student of The Odin Project and I chatted with him about the role of web development in his life and the life of his startup. It's inspiring that he's taking the plunge into learning development himself in the midst of

116 Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes

Have you ever used a pixel font? If so, have you experienced the text looking blurred, unsettled, not sharp? This Illustrator tutorial will help you avoid this hurdle! Pixel fonts are quite popular these days. It all started in Flash: these developers have been using pixel fonts for some time now. The trend soon swopped over to static design, and

119 Establishing Your Grid In Photoshop - Smashing Magazine

Creating a grid is typically one of the very first things you do when starting a design comp. After all, it provides the basic structure on which the rest of your design will lie. In this article, we'll provide two different methods for efficiently establishing a grid. These methods enable you to quickly and smartly form a grid so that

121 Designing Style Guidelines For Brands And Websites - Smashing Magazine

A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide. Edward Tufte once said: "Great design is not democratic; it comes from great designers. If the standard

123 Genius Ways To Use Photoshop Smart Objects | Viget

What They AreAdobe says: "Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image's source content with all its original characteristics, enabling you to perform nondestructive editing to the layer." I say: Smart Objects are magical containers. They can hold an image, a vector graphic, or

124 Front End Style Guides: Your Questions Answered - Tuts+ Web Design Article

We recently gave our Twitter followers the opportunity to ask anything they wanted on the subject of Front End Style Guides. Here are the best questions and (of course) the answers! 1. SemanticsThere are lots of interpretations, but this is how I see it: Style Guides are an overarching term for a range of possibilities; editorial style guides that discuss

127 Styleguide Generator Roundup

Styleguides for websites are by no means a new idea, but they are more easily talked about than implemented, which is why people are still advocating for them. Thankfully there are many tools-with more arriving all the time-that automatically generate styleguides based directly upon the code you write. Recently I was tasked with creating a living styleguide by my employer

128 Carrying out Successful Research for a Web Project - Tuts+ Web Design Article

Conducting research for your web project is really simple and it doesn't have to take up much of your time. By planning and breaking down it into a few smaller steps you can save time and get the most out of it. It all comes down to getting the whole picture before you begin thinking about design, development or anything

129 The Web Designers' Guide to Photo Selection - Tuts+ Web Design Tutorial

Photographic images grab our attention and trigger an almost instantaneous response when we encounter them. They are therefore an important part of any website we create. Photos play a significant part in determining our first impression, but they can also tell us what the site is about and can be a huge factor in earning trust. When used properly, photos

130 Eye Tracking 101: How Your Eyes Move on Websites [Infographic]

Design trends and best practices may change, but the way we instinctively scan a page has not. The "F-pattern" still dominates eye-tracking studies, and optimal design takes this into consideration. Our first infographic of the year is courtesy of Crazy Egg and Single Grain. Enjoy! Click to enlarge infographic Tweetables Users spend 80% of time viewing a web page above

131 Programming Skills Most Desired by Employers in 2014

It's no myth that programmers are a highly sought after group in companies all over the globe. In her Forbes article on the Top Jobs for 2014, Jacquelin Smith analyzes an EMSI job study, which found that software developer (applications and systems software) is "the higher-paying occupation that has produced the most jobs post-recession". She also points out that the

137 Lesson 6 : Working with Typography

The field of web typography has grown substantially over time. There are a couple of different reasons for its rise in popularity; one widely acknowledged reason is the development of a system for embedding our own web fonts on a website. In the past we were limited to a small number of typefaces that we could use on a website.

139 Lesson 8 : Creating Lists

Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it's easy to understand why they are also popular online. When we want to use a list on a website, HTML provides three different

140 Lesson 9 : Adding Media

We browse the Internet in search of interesting and informative content, which we usually find in the form of plain text. To accompany this plain text, HTML provides ways to embed rich media in the form of images, audio tracks, and videos, as well as to embed content from another web page in the form of an inline frame. The

142 Lesson 11 : Organizing Data with Tables

HTML tables were created to provide a straightforward way to mark up structured tabular data and to display that data in a form that is easy for users to read and digest. When HTML was being developed, however, CSS was not widely supported in browsers, so tables were the primary means by which websites were built. They were used for

143 Lesson 12 : Writing Your Best Code

There's a lot to learn-different elements, attributes, properties, values, and more-in order to write HTML and CSS. Every lesson until this point has had the primary objective of explaining these various components of HTML and CSS, in hopes of helping you to understand the core fundamentals of both languages. This lesson takes a step back and looks at a more

144 Organize Your Design Files - Or ELSE!

Organizing your design files - Or ELSE! Design file names and folder structure are a key ingredient to your success as a graphic designer. Ok, here's the scenario; a client calls you because he just picked up the presentation your firm designed from the local Kinko's and they've found some typos. Also, they've decided to change some images. They have

145 Web Design Process - A Step-by-Step Guide to Designing Websites

Here's my breakdown of the ideal web design process. I know a lot of people are going to read this and shout "That's not the best way to go about designing web sites!" All I can say is: this is the essence of the process that works best for me. I offer it in the hope that maybe bits of

146 Web Design Workflow and Process Comparison

This blog is intended as a resource for professionals that are responsible for the long-term planning of a website (How to find out if you a Web Strategist at your company). While not a Web Design blog, web strategists need to make decisions, dictate budget, or approve web design projects. A client recently asked me for some resources for Web

147 Why you should manage your CSS with pattern libraries

Whenever I start a new project, I get that good feeling. This is a fresh start, a new beginning. I'll get a chance to do things better than last time. I'll be able to use that new methodology I just learned. Everything will be great. I start out so organised and so determined to keep things that way. It doesn't

148 Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. View demo Download source It's time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share

149 CSS Terms and Definitions

Thanks to yesterday's article on Smashing Magazine wherein I covered the use of !important in CSS, my eyes were opened to a small but significant terminology discrepancy. The article used the phrase "the !important CSS declaration" in reference to the word "important" that appears with a preceding exclamation point at the end of a line of CSS. That's not the

152 Following A Web Design Process

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how

153 How to get started with creative coding

Creative code is fun but daunting to break into. If you look at a crazy WebGL experiment or a site with complex CSS transitions it's easy to feel like only a coder Jedi could pull off such feats of engineering brilliance. There's truth that being technically proficient goes a long way, but you don't need to know everything about everything

154 Get Free WEB DESIGN BOOK OF TRENDS 2013-2014 E-book By Marcin Treder

Marcin Treder is a design enthusiast that literally lives for creating the best user experience possible. After years working as a UX Designer and UX Manager he focused on his own start-up UXPin that provides tools for UX Designers all over the world. UXPin tools are used by designers in companies like Google, Apple, Microsoft, IBM, Salesforce.

161 A — Craftsmanship in Designing Websites

By Shawn Borsky With high pressure from clients and crazy development schedules for web designers, it is easy to forget to spend the proper amount of time crafting a design. In the interest of speeding things up, it's tempting to skip over small details. This is an easy pitfall to which to succumb, but in the end, it can hurt

162 A — Why "Simple" Websites Are Scientifically Better

In a study by Google in August of 2012, researchers found that not only will users judge websites as beautiful or not within 1/50th - 1/20th of a second, but also that "visually complex" websites are consistently rated as less beautiful than their simpler counterparts. Moreover, "highly prototypical" sites - those with layouts commonly associated with sites of it's category

163 The Art of Distinction in Web Design

By Alexander Dawson One of the hardest tasks we undertake in the user experience field is trying to gain and hold a visitor's attention in the right way. Distinctive design and the ability to focus eyes where they are needed in our web designs is a tricky task, but is something that we should have a firm grasp of. Understanding

166 The Ingredients of a Successful Website

By Jacob Gube The first published article on Six Revisions was about the things you need for a web project to succeed. Two years later, the site has reached a point that I would consider "successful". The definition of "success" is different to everyone. To me, I define success as having a large audience that consists of readers from all

167 Information Architecture 101: Techniques and Best Practices

By Cameron Chapman Information architecture (IA) is an often-overlooked area of website design. Too often, as designers, we just let the CMS we're using dictate how content for a site is organized. And that works fine as long as the site fits perfectly into the narrow content formats most CMSs are designed around. But too often, a website's content breaks

168 Grey Box Methodology

After I read Underline Text in Adobe Illustrator by Douglas Bowman last week, it got me thinking about my own process for designing a website. The main point of his article focuses on not being able to underline text simply in Illustrator (which is quite annoying) and his solution and workaround. Afterwards, there was some interesting discussion about what programs

169 A — A Beginner's Guide to Wireframing

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it's time to get your feet wet.. It's like an architectural blueprint;

170 A — A Beginner's Guide to Wireframing in Omnigraffle

Omnigraffle is a tool that can be use for many purposes, but today we'll explore how to use it for wireframing. I've used all kinds of applications for wireframing and, while it's not perfect, Omnigraffle has the best combination of capabilities and efficiency for my workflow. The biggest thing it doesn't have is great interactivity for prototyping. You can produce

171 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears. Wireframing is one of the first steps in your planning process and arguably it's one of the most important

172 Ultimate Guide to Website Wireframing

By Cameron Chapman Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects. Wireframes can come in handy when you're communicating with clients, as it allows them to visualize your

174 Style Tiles

What are Style Tiles? Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client. Style Tiles are similar to

175 O — Photoshop Tutorials For Beginners: Make Money With Photoshop

This course is designed to teach you the ins and outs of Photoshop, even if you have little to no experience with it, to create profitable web designs that help you stand out from the competition. Learn how to make your workflow more efficient so you can spend less time completing projects and more time getting more clients to increase

Added by Jae Aquino: “You can freely download and use this as your text editor, or buy it for $70.

176 T — Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. Version 2.0.2, 64 bit , 32 bit Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is no enforced time limit for the evaluation. Other Platforms Sublime

177 O — Up and Running with Sublime Text 2

Keep up with news, tips, and latest courses with emails from lynda.com. Sign up and receive emails about lynda.com and our online training library: new course releases newsletter general communications special notices Here's our privacy policy with more details about how we handle your information.

182 Markdown

Download Markdown 1.0.1 (18 KB) - 17 Dec 2004 Introduction Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

183 O — Up and Running with HTML

Keep up with news, tips, and latest courses with emails from lynda.com. Sign up and receive emails about lynda.com and our online training library: new course releases newsletter general communications special notices Here's our privacy policy with more details about how we handle your information.

184 O — HTML Essential Training

Keep up with news, tips, and latest courses with emails from lynda.com. Sign up and receive emails about lynda.com and our online training library: new course releases newsletter general communications special notices Here's our privacy policy with more details about how we handle your information.

187 Rf — HTML: The Markup Language

This non-normative reference describes the HTML markup language and provides details to help producers of HTML content create documents that conform to the language. It is intended to complement the normative conformance criteria defined in the HTML5: A vocabulary and associated APIs for HTML and XHTML specification, as well as information in related deliverables published by the HTML Working Group ...

190 O — CSS Fundamentals

Keep up with news, tips, and latest courses with emails from lynda.com. Sign up and receive emails about lynda.com and our online training library: new course releases newsletter general communications special notices Here's our privacy policy with more details about how we handle your information.

196 10 Simple Web Accessibility Tips You Can Do Today

By Jacob Gube One of the most overlooked aspects in designing a website that we often brush off is web accessibility. There's a misconception that web accessibility requires sacrifices to aesthetics, or that it's not worth the effort. But, with a growing number of ways that users access the web, creating highly-accessible and universal designs that can be viewed in

198 A Look into Color Theory in Web Design

By Shannon Noack Unarguably one of the most important aspects of any design is its colors. Designers create the style of a site, as well as the movement it makes, the emotion it creates, and its purpose based largely upon the color choices they make. Colors are powerful tools and an important thing all designers should understand when creating websites.

202 [Rs] The Golden Grid

What it isThe Golden Grid adds the horizontal guides to the 960 Grid System. The rectangles formed by the intersection between the lines and the columns are characterized by harmonious dimensions and are the same as those found in nature and in the human body. The layout is magically more balanced, and the positioning of the elements on the page

203 [A] Designing Faster with a Baseline Grid

Lately, grids have become the ultimate obsession of designers and design writers. Hundreds - not to say thousands - of articles, tutorials, books and websites solely dedicated to grids and their application in (web)design have been published in the last few years. A simple search on Google with the terms "grid" and "webdesign" returns almost 5 million results. There is

204 [F] Golden Grid System

Four featuresColumns, gutters, a baseline and a script. Folding columnsGolden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the

205 O — Typekit Practice

Lessons walk through specific topics or methods in the practice of typography, with a clear objective or takeaway skill that can be immediately applied to design work. In this lesson, we'll evaluate type specimens for web fonts - and turn those artful arrangements of glyphs, styles, and weights into design tools. By guest author Aura Seltzer. Read this lesson References

206 [A] The Ultimate Guide to Golden Ratio Typography

Right now, there's a mathematical symphony happening on your website. Every single one of your readers is subconsciously aware of this symphony, and more important, they are all pre-programmed to respond to it in a particular way. The question is this: Is your site's symphony pleasing and inviting to your readers, or does it turn them off and make it

207 [A] How to Tune Typography Based on CPL

In my research into Golden Ratio Typography, I focused primarily on the core geometric properties of text-font size, line height, and line width. But there's another facet of text that nearly all of the existing research on typography deals with: It's called characters per line (CPL). If you've ever read a study on typography, you've no doubt encountered CPL. Many

209 The 100 Greatest Free Fonts for 2012

Today we'd like to delight you with an extensive list of The Best Free Fonts for 2012. We've made a collection in which you can find Sans Serif, Slab Serif, Rounded, Modern, Display , Art Deco, Geometric, Urban, Futuristic and even abstract style types. An important part of typography is selecting the right typeface for a project. This is one

210 The 100 Greatest Free Fonts for 2013

Do you remember our successful article 100 Greatest Free Fonts Collection for 2012? We're sure you often come back when you are working hard on a project trying to find some good typography. It's a really useful resource. Today we bring you the sequel, "100 Greatest Free Fonts Collection for 2013" with the latest free to download fonts published so

212 [A] 10 Things Every Website Owner Should Know

I talk with business owners all the time about the impact a good website should have on business. Unfortunately for many, the facts show their sites aren't doing much at all to help their business, instead they've become just another way to spend the money they have less and less of. I've made this list of 10 things I feel

213 Reductionism in Web Design

By Alexander Dawson In the field of design, the phrase "complexity is the enemy" speaks to how keeping things simple makes our work more functional. With the modern crop of technologies that dole out increasing amounts of functionality, it's important that we take the time to ensure a balanced level between oversimplification to the level that insults our visitor's sense

214 Understanding Visual Hierarchy in Web Design

Visual hierarchy is one of the most important principles behind effective web design. This article will examine why developing a visual hierarchy is crucial on the web, the theory behind it, and how you can use some very basic exercises in your own designs to put these principles into practice. Design = CommunicationAt it's core, design is all about visual

215 8 ways to add visual hierarchy

There are many ways to achieve a visual hierarchy. Below are a few that can add direction to your design. Size Contrast Color Style Grouping Unity Symmetry Similarity What are some other ways to add visual hierarchy? I would love to hear your thoughts.

216 Design a Stylish Timeline Portfolio Page Using Photoshop (Part 1)

In this tutorial I'll be using Photoshop CS6 to design a simple, clean, three-column portfolio page, with a trending timeline. During this process we'll look at creating custom grids with guidelines, styling typography, and playing with colors and contrast to achieve the aesthetics we want. The finished PSD file will be ready to hand over to a developer for coding

217 Building the Responsive Timeline Portfolio Page (Part 2)

What You'll Be CreatingDuring this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery. File and Directory StructureOK, the first step is to create the files and folders we need. The image

218 Finishing the Responsive Timeline Portfolio Page (Part 3)

What You'll Be CreatingMoving on from the previous tutorial, let's add some flourish to our build. Loading IconWe are going to delve into CSS3 Animations and create a simple spinning animation for our loading icon. We already have the markup we need on the page, so let's get straight into the CSS. div.loading { color: darken($grey, 20%); position: absolute; width:

219 Design a Clean e-Commerce Website Interface in Photoshop

Remember the Fashion Store freebie? Today I'll show you how to create this clean e-commerce website interface in Adobe Photoshop. This tutorial isn't only filled with many Photoshop techniques but also design concepts that go beyond the how-to part, which I'm sure you don't want to miss. So let's get started! Fashion Store, The FreebieFirst of all, I'd like to

220 What Makes a Website Credible? Top 5 Credibility Signals

We've all been there. You head to Google for a quick answer to a question or problem, click on a website and say to yourself "something's fishy here" and you head back to the search engine to browse through additional search results until you find a reputable website. There's something "fishy" about non-credible websites - consumers know it when they

221 A — 5 Principles of Persuasive Web Design

What's the best way to persuade somebody when talking to them? You have to be confident, talk fast and swear a little, among other things. But what about persuading somebody without words - possible? You bet. Researchers installed a 'fly' onto urinals across different airports around the world: The presence of a fly in a urinal literally changes human behavior.

222 Towards A Retina Web

With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the "non-Retina" Web in 2010, we had to wait for the third-generation iPad to

223 A — List of Style Guides, Brand Guidelines, and Front-End Frameworks

This list originally came about when a friend (@emilyloveslimes) asked her fellow designers to send her style guides they've found. I collected those and started grabbing a few more from around the web. If you have any great guides that I've missed, please leave a note and I'll include it! If you found this post useful shoot me a message

224 A — 50 Style Guide Tools, Articles, Books and Resources

When you get started with the process of creating and applying your own Style Guides, be aware that you're not on your own. Style Guides have been around for a while now so there is a mountain of useful information available. You can learn a tremendous amount from examining what's already out there. There are also several great tools and


OverviewDeveloped at Twitter to support our internal styleguide, RECESS is a simple, attractive code quality tool for CSS built on top of LESS. Incorporate it into your development process as a linter, or integrate it directly into your build system as a compiler, RECESS will keep your source looking clean and super managable. InstallationRun the following line in your terminal:



  • 1 Playlists

Vasily Khalaim


  • 0 Playlists



  • 0 Playlists

Vladimir Milojevic


  • 1 Playlists



  • 0 Playlists

Дамир Аралбаев


  • 0 Playlists

Bokuchava Bokuchava


  • 0 Playlists

Yohanes Setiawan


  • 0 Playlists



  • 0 Playlists



  • 0 Playlists



  • 0 Playlists

Ahmad Seder


  • 0 Playlists

Patrick M. Ndifon II


  • 0 Playlists

Flora Edwards


  • 0 Playlists



  • 0 Playlists

Marie Bocquet

French graphic designer currently living in Montreal, QC, Canada.

  • 0 Playlists

Keeks Prisk


  • 0 Playlists

Mohamed Salah


  • 0 Playlists



  • 0 Playlists



  • 0 Playlists
Load more

Delete your comment

Are you sure you want to delete your comment?