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.
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:
☞ 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.
☞ Code School Code School
☞ 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.
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. See also What is the best text editor for programming?
→ 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
→ 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)
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
Grids Frameworks & tools
☆ Layout Grid Responsive CSS grid, reordered with native HTML5 drag and drop
☆ Gridset - Responsive Grids made easy.
☆ Gridpak - Create your own responsive grid.
→ Frameless Grid ‘s tutorial by Mark Nugent
☆ Singularity is a grid framework.
☆ CSS Grid! CSS Grid is going to become supported-by-default in Chrome and Firefox in March of 2017.
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
If you’d rather use Sass, start here: Sass.
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
Some articles to better understand fonts size:
On Pixel to ems conversion — em — rem — px:
On web fonts:
☞ Google Fonts ✑ installing web fonts from start to finish ☞ CSS 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.
☞ Font Awesome — A font and CSS toolkits with vector icons and social logos, Font Awesome provides with different methods to use its growing SVG icons collection in your workflow. ☞ IcoMoon — IcoMoon is an iconography and icon management tool that let you use a collection of icons and customize your own in many different formats including SVG, Polymer, PDF, XAML, CSH, icon font or simple PNG/CSS sprites. ☞ Genericons — A Free Icon Font For WordPress ☞ iconmonstr — iconmonstr is a free, high quality, monstrously big and continuously growing source of simple icons run by Alexander Kahlkopf. ☞ (The) Noun Project — With over a million curated icons created by a global community, The Noun Project is probably the largest of its kind.
Working with Images
Don’t scale images in HTML. This means your site or application should serve scaled images on smaller devices.
☞ Images optimisation tools — If you work with images for the web, these image compression tools are extremely useful.
Other useful tools:
Slideshow / Carousel
☞ slick Advertised as the last carousel you’ll ever need.
Working with SVG files
The SVG format is one of the most promising image format for the web.
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.
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
Alternative to SVG
Working with colors
☞ Need help with choosing colours? Try 0to255
☞ i want hue A tool to generate and refine palettes of optimally distinct colors.
☞ 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 browser aimed at web developers
☞ https://www.browsersync.io — Time-saving synchronised browser testing.
☞ Chrome DevTools — is a set of tools built into Google Chrome browser.
☞ The W3C Markup Validator and the
☞ feeds validator often comes in handy.
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
☞ BrowserStack — online browser testing
☞ Testize — Cross-browsers testing for desktops, mobiles and tablets
Speed implementation — measurement and analysis
☞ TestMySite with Google
☞ Sitespeed.io — an open source tool to analyse websites and optimise speed and performance
Before launching → Web Developer Checklist
User Interface and web usability
✑ Nielsen Norman Group articles on user experience research.
Static sites are all the rage again now. Speed, simplicity, efficiency and building on top of existing infrastructure are some of the advantages.
☞ Pollen — The book is a program, by Matthew Butterick.
☞ Hugo is one of the most popular open-source static site generators, known for its speed.
☞ 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.
☞ Ascii art generator i.e. for the index html file
☞ Monodraw — Powerful ASCII art editor designed for the Mac.
☞ ExtendsClass/ - Free Online Toolbox for developers
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.