Web Development Resources

10 minute read

This wordless digital comics experiment had to start somewhere. The 24 June 2013, with zero coding skills, I set out to design a WordPress theme to showcase comics. My first day as a “developer” (not quite) began after installing a local test server. Bootstrapping, my goal was to learn enough about how code works, to design a basic comics site prototype from scratch. Since then, I work on this in my spare time, between drawing stories and various freelance assignments. Until I find an answer to the specific needs of this project, here is a compilation of the most useful links gathered in the process.

Learning Code

If code is the future, you might as well learn about it. One of the best way to do that is to start experimenting with something small first, like a personal website. Here are some learning resources links to get started and return to often:

Codecademy Codecademy is a great place to start with the basics. Learn html, CSS, php, and JavaScript.

freeCodeCamp freeCodeCamp is an open source community of people who learn to code and help nonprofits.

CodePen Codepen is a site where designers and developers test and share chunks of markup.

GitHub GitHub started with a well thought out user interface for social coding. Now it host a huge chunk of code.

Stack Overflow Stack Overflow is resourceful Question and answer site for programmers, professionals or enthusiasts.

teach yourself to code A learning site by Kate Ray

Code School Code School

Thimble Thimble is an online code editor designed by Mozilla, with which you can learn HTML, CSS & JavaScript in the browser to publish your own web pages.

Gomix, by Fog Creek, let you see the code behind an application or website, tweak it an play with it in a built-in editor in the browser.

Markup software editors

Any Text Editor You can write code with any text editor. TextEdit, for instance or any similar basic word processing software will do. In fact, it is arguably the best way to learn: writing every line of code without shortcuts and without relying on the bell and whistle of more sophisticated applications. Here are three text editors I have used.

ATOM Atom is an open source text editor originating from GitHub. With hundreds of plugins extensions it is quickly becoming a favourite.

Coda 2 A text editor aimed at designers to speed development

CodeKit A fantastic tool to test websites on a local server across multiple devices. You don’t use it to write code but to compile, streamline, optimise everything from code files to images when you build your website or application.

There are so many other options out there. With so many to choose from, this article will help you narrow down your choices: The Best Text Editors Compared — A review of some of the most popular text editors.

Web basics

HTML for structure, CSS for style, Javascript for animation.

HTML references

Introduction to HTML Mozilla’s introduction to HTML

html5 Doctor HTML5 Doctor has a ton of documentation pertaining to HTML5.

Dive Into HTML5 This is a book by Mark Pilgrim, free to consult online.

Useful CSS references

CSS Tricks is a trove of CSS articles and references maintained by Chris Coyier, who is also the founder of CodePen.

http://richbray.me/cms/#peaches

http://purecss.io/forms

http://purecss.io/customize

CSS Beauty

tachyons — Helps you design fast loading, highly readable, and 100% responsive interfaces with as little css as possible. The idea being reusing components.

Tridiv Create 3D shapes in CSS with Tridiv’s web-based editor

CSS Stats Visualize your CSS

CSS LINT Will hurt your feelings (And help you code better)

Useful JavaScript resources

Speaking JavaScriptYou Don’t Know JS You Don’t Know JS is a book series (free to consult in ebook format) by Kyle Simpson.


Working on a local server

MAMP stands for Mac, Apache, MySQL, and PHP. It sets up a virtual web server environment on your computer that enables you to test a website offline during development. Working “offline” may seem like a complicated thing but it is in fact a huge time saver.

Responsive web design

What The Heck Is Responsive Web Design? So, read What The Heck Is Responsive Web Design? by John Polacek — Developer

Guhru Studio’s Adding mobile menus to responsive WordPress themes without plugins

Grids Frameworks & tools

The Semantic Grid System

Preboot

Extra Strength Responsive Grids

Grid Calculator beta

Grid Style Sheets 2.0

Layout Grid Responsive CSS grid, reordered with native HTML5 drag and drop

Gridset - Responsive Grids made easy.

Gridpak - Create your own responsive grid.

Twitter Bootstrap - GitHub

Frameless Grid Joni Korpi devised an interesting alternate method to “responsive” grids that he called the Frameless Grid

→ Frameless Grid ‘s tutorial by Mark Nugent

Singularity is a grid framework.

Better grids for a responsive world by Scott Kellum

CSS Grid! CSS Grid is going to become supported-by-default in Chrome and Firefox in March of 2017.

CSS pre-processor

So, if Cascading Styles Stylesheet (CSS) weren’t enough you could also get familiar with things like CSS pre-processors. SASS, LESS, Stylus, are CSS pre-processors. A pre-processor extends the CSS language, adding features that allow variables, mixins, functions and many other techniques to help you to write CSS easier to maintain, modify and extend. This can either make your life easier or more complicated 😂.

Using Less CSS

Ok, so if you want to use LESS, start here: Less CSS. LESS CSS Tutorial: Designing A Slick Menu Navigation Bar By Thoriq Firdaus on hongkiat.com

Using Sass

If you’d rather use Sass, start here: Sass.

You can also try the Online JavaScript/CSS/HTML Compressor

Postcss

Based on the same principles of preprocessors such as Sass and LESS, Postcss uses JavaScript to automate routine CSS operations.

https://www.smashingmagazine.com/2015/12/introduction-to-postcss/

https://www.sitepoint.com/an-introduction-to-postcss/

Better Web Typography

Typography is the cornerstone of the web and therefore an inexhaustible subject. Let’s begin with a selection of good reads on Web typography:

The Elements of Typographic Style Applied to the Web, an adaptation of Bringhurst’s book for by Richard Rutter

Professional Web Typography is an online book by Donny Truong

Web Font Specimen $Web Font Specimen* is a free resource for web designers and type designers to see how typefaces will look on the web.

Typeplate Type Plate

http://modularscale.com/ Modularscale by Tim Brown

http://type-scale.com/ by Jeremy Church

☞ Pearsonified’s Golden Ratio Typography Calculator

Typekit, study sizing, the legible letter

Some articles to better understand fonts size:

The 100% Easy-2-Read Standard

CSS font-size Property

On Pixel to ems conversion — em — rem — px:

CSS - Pixels to emsFONT SIZING WITH REMCSS Sizing Advice: %, REMS, and EMs

On web fonts:

Google Fontsinstalling web fonts from start to finishCSS Font Stack by Denis Leblanc ☞ Font Squirrel - Help Freeware fonts licensed for commercial work, convert and generate webfonts. ☞ Web font specimen by Nice Web Type to test your type.

On web icons:

IcomoonGenericons — A Free Icon Font For WordPress ☞ iconmonstrElusive Iconfont on GitHubfonticonsiKreativ

Working with Images

Don’t scale images in HTML. This means your site or application should serve scaled images on smaller devices.

Images optimisation

Images optimisation tools — If you work with images for the web, these image compression tools are extremely useful.

Other useful tools:

PLACEHOLD.IT That site is handy if you need placeholder images. You can quickly experiment with ratios, colours etc. ☞ Retina js Format images for the iPad and “retina” display.

slick Advertised as the last carousel you’ll ever need.

RoyalSlider and PhotoSwipe Both by Dmitry Semenov. RoyalSlider is an image gallery & content slider — there is a jQuery and a WordPress plugin version. PhotoSwipe

Working with SVG files

The SVG format is one of the most promising image format for the web.

Using SVG - CSS Tricks

→ Kyle Foster - @hkfoster’s video on SVG workflow

SVG optimization

Peter Collingridge’s Apps Pot

Peter Collingridge’s SVG Optimiser

base64 encoding Among other things Base64 can be used to encode binary files such as images within scripts, to avoid depending on external files. Works fine for SVG.

Mobilefish’s Base64 Encoder

soqr.fr - SVG link with object

→Stéphanie Walter’s Inpixelitrust - SVG tests / SVG technique → Make SVG clickable with object method. → SVG Link Demo on Code Pen → Grumpicon

Center an object in css:

→ CSS Tricks How to centre an object exactly in the centre

→ An even easier method to centre a logo in CSS

http://howtocenterincss.com & ensuing discussion.

Alternative to SVG

Vector based graphics in HTML & CSS

Working with colours

Adobe Color

☞ Need help with choosing colours? Try 0to255

i want hue A tool to generate and refine palettes of optimally distinct colors.

rgb.to Colour converter (RGB, HSL, Hex, keyword, Pantone or RAL) by Carlos Cabo. Especially useful if you work in print.

Colors by MRMRS

COLOURlovers

Coolors by Fabrizio Bianchi and colourlovers.

Color Hex Color Codes Color-hex provides with colors information, color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors. Color-hex.com also generates a simple css code for any selected color.

Design and test in the browser

Firefox Web Developer Tools is great.

Firefox — Developer Edition — is even better, and getting better by the day.

Safari Technology Preview — a new browser aimed at web developers

https://www.browsersync.ioTime-saving synchronised browser testing.

Virtual cross browsers testing tools To test how your site works across different devices and screens online:

https://dev.windows.com/en-us/microsoft-edge/ — Microsoft offers virtual machines, for free remote testing of IE

Responsinator

Responsivator

ProtoFluid

The W3C Markup Validator and the

feeds validator often comes in handy.

BrowserStack — online browser testing

Testize — Cross-browsers testing for desktops, mobiles and tablets

Sauce Labs

CrossBrowserTesting

Speed implementation — measurement and analysis Minify Javascript and CSS ☞ YSlow

Google Page Speed Tools

TestMySite with Google

PageSpeed Insights

Pingdom Tools

Sitespeed.io — an open source tool to analyse websites and optimise speed and performance

GTmetrix

Make Your Website Faster: Checklist

Before launchingWeb Developer Checklist

User Interface and web usability

Nielsen Norman Group articles on user experience research.

https://www.goodui.org

User Interface Engineering (UIE)

Static sites

Static sites are all the rage again now. Speed, simplicity, efficiency and building on top of existing infrastructure are some of the advantages.

Jekyll is a simple static site generator in Ruby. This web log is built with Jekyll. Go here for Jekyll related resources.

Ruhohan open source static site generator similar to Jekyll, made for publishing content on the Internet by Jade DominguezPollenThe book is a program, by Matthew Butterick.

Hugo is one of the most popular open-source static site generators, known for its speed.

Dynamic sites

See Wordpress resources

App development

Xcode - Apple’s integrated development environment for creating apps for Mac, iPhone, and iPad.

Design Then Code iPhone, iPad and Mac interface design & development resources and tutorials. Start to design interfaces in Photoshop, then learn how to build them in Xcode.

Heroku — a cloud application platform built for developers.

Mag+ is based on an InDesign plugin made for creating tablet and smartphone apps without programming skills.

Fun add-ons

Ascii Art

Ascii art generator i.e. for the index html file

Monodraw — Powerful ASCII art editor designed for the Mac.

Search boxes Add a a Google search box to your page, or a DuckDuckGo Search Box. Swiftype also provides an option to add a search engine to your site.

Additional Reading

Paul Ford “What is Code?” Business Week June 11, 2015. http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/

Paul Graham. “Hackers and Painters.” Accessed March 27, 2014. http://paulgraham.com/hp.html

Jade Dominguez. “The Pain of Teaching Yourself to Code.” Accessed March 28, 2014. http://plusjade.com/posts/the-pain-of-teaching-yourself-to-code/

Joe Armstrong. “Why Programming is Difficult” Accessed April 2, 2014. http://joearms.github.io/2014/02/07/why-programming-is-difficult.html

Peter Welch “Programming Sucks”, 27 April 2014. http://www.stilldrinking.org/programming-sucks

Kate Ray. “Don’t Believe Anyone Who Tells You Learning To Code Is Easy”, 24 May 2014. http://techcrunch.com/2014/05/24/dont-believe-anyone-who-tells-you-learning-to-code-is-easy/

SmartScholar. “Computer Science Education Resource Guide”, retrieved 26 February 2017. http://www.smartscholar.com/computer-science-guide/

I’ll keep adding and updating links as the project grows — feel free to suggest relevant links.

Leave a Comment

Your email address will not be published. Required fields are marked *

Loading...