🌐 Public

Designers learning to code - HTML/CSS/JS

By Dave Yoon

Introduction

Designers who are interested in taking the next step into taking full control of their designs – from concept to prototypes that are ready for hand-off.

2 Create your Icon Font in seconds

Don't open photoshop each time you want to update an icon color. Easily create custom icon fonts with Fontastic! Your icons can be modified on the fly via CSS. Rescale, change colour, add a shadow and more in just a jiffy.

3 Grid

Grid is a great learning tool but no longer supported. Learn why. A simple guide to responsive design. Made by Adam Kaplan. We want our websites to be useable on all devices by responding to the user's behavior, screen size and screen orientation. As of 2013, there are thousands of different devices and screen sizes that browse the internet, so

4 The real HTML5 boilerplate

There has been a lot of talk lately about a certain HTML5 boilerplate... theHTML5 Boilerplate. A boilerplate is a starting point, it's a base. It's a codebase from which things are built with only the necessary and relevant additions being made (note additions, not changes). I won't beat about the bush, seeing the HTML5 Boilerplate makes me frustrated. It makes

5 Front-end performance for web designers and front-end developers

It's hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web app, right through to a full-scale ecommerce project. Studies, articles and personal experience all tell us that fast is best. Performance is not only hugely important, it is

6 Taking Ems Even Further

I recently wrote about ems; what they are, how they're used and some bits and pieces to bear in mind when you implement them yourself. I only scratched the surface though, and the comments thread threw up twice as many questions as the article answered! In this follow-up I'll take things further, looking at ems in even more detail. E

7 Keep your CSS selectors short

One thing I believe, as a very, very general rule of thumb, is that as sites get bigger, selectors should get shorter. By this I mean that if you want to create extensible and maintainable, flexible and predictable websites, you should really take care to make your CSS selectors as dev-friendly as possible; i.e. short. Keeping CSS selectors short helps

8 The single responsibility principle applied to CSS

Having just spoken at the Front-Trends conference in Warsaw, I've decided to expand on something which my talk mentioned a lot: classes. My talk covered how to build big, scalable front-ends and one of the key factors involved in doing so is sensible and generous use of abstracted classes. One thing that really helps you achieve this is the application

9 Create a centred horizontal navigation

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don't know that fixed width? You could use text-align:center; but that won't work on 100%-width block-level elements either... that'll only work on text-level elements. Defining explicit widths and heights should always be avoided wherever possible, as doing so will make the document

11 All About Floats

Published by Chris Coyier What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap".

12 In Depth CSS Part 4: New CSS3 Styles - SpyreStudios

In the first part of In Depth CSS we talked about margins, padding and the box model. Our second post was on the difference between floats and positions and our third post was all about text. In the fourth, and last, part of our In Depth CSS series, we'll talk about several new CSS3 features - from fancy styling to

15 CSS In Depth Part 1: Margins, Padding & The Box Model - SpyreStudios

In the first of the CSS In depth series, we'll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility. In this post, we'll explain the difference between padding and margins, how the box model affects browsers and

17 Semantics and sensibility

For a while now, sensible naming conventions and semantics have been confused. Things such as class="left" or class="clear" have been deemed insemantic, whereas in reality, semantics really doesn't stretch that far... Let me illustrate with some code examples: Insemantic codeThe following code is just plain wrong, it's insemantic, using the wrong elements for the wrong job: <div class="nav-link"><a href="/">Home</a></div> <div

Added by Dave Yoon: “After experimenting with various text editors over the years, Sublime Text 2 stands out as the cream of the crop. If you want to get better at coding, and learn how to make the process more efficient, ST2 will need to become your best friend.

20 Sublime Text (2)

The usefuless of this setup guide will vary based on your personal preferences for how your text editor should function, but it should help with the initial setup of Sublime Text. Let's get started. Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. - Sublime Text

Amy Busch

Freshman

  • 0 Playlists
  • 0 Followers

Eugene R.

Freshman

  • 2 Playlists
  • 0 Followers

Это Антон

Freshman

  • 0 Playlists
  • 0 Followers

bcharteris

Freshman

  • 0 Playlists
  • 0 Followers

alfares_a1

Freshman

  • 0 Playlists
  • 0 Followers

moscowriot

Freshman

  • 0 Playlists
  • 0 Followers

Ahlawy

Freshman

  • 0 Playlists
  • 0 Followers

Sumit Manchanda

Freshman

  • 0 Playlists
  • 0 Followers

Bokuchava Bokuchava

Freshman

  • 0 Playlists
  • 0 Followers

alp2fg

Freshman

  • 0 Playlists
  • 0 Followers

salman

Freshman

  • 0 Playlists
  • 0 Followers

Kate

ಠ◡ಠ

  • 0 Playlists
  • 0 Followers

Lauren Stephens

I still have not decided what I want to be when I grow up. And ...

  • 0 Playlists
  • 0 Followers

Dek Carrillo

Multimedia Designer from Manila, Philippines.

  • 0 Playlists
  • 0 Followers

Jakub Dziedzic

Freshman

  • 0 Playlists
  • 0 Followers

hcaltiner

Freshman

  • 0 Playlists
  • 0 Followers

NAVIN KUMAR CHAHAR

I AM HUMAN ,SIMPLE AND STRAIGHT.

  • 0 Playlists
  • 0 Followers

rambococonut

Freshman

  • 0 Playlists
  • 0 Followers

John Wilton Williams

Visit my personal site at johnyux.com

  • 0 Playlists
  • 0 Followers

Austin Feltan

Técnico Electrónico, Aficionado al Diseño Web y HackSchooling

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?