A friend of mine recently expressed interest to me about learning how to make webpages. Given their background in more traditional design I could certainly understand the desire to move forward into interactive media as admittedly, there is a lot that can be accomplished on the web for which there are no parallels in other forms of media.
At the foundation of it, providing the skeleton of structure to the content of any website is going to be good 'ol HTML.
Once this structure for content is assembled together (hopefully with good and appropriate use of the sweet new hotness of HTML5 semantic tags) the skin over the bones can be layered on, using CSS.
In the hopes that it may be useful to someone looking to learn, or hone their web building skills, I'm going to try and prepare a collection of works here, available freely around the internet, that could take a beginner all the way up to pro.
So, without further rambling preamble, here's my list of awesome webdev resources.
The journey begins by letting go of control, and becoming flexible.
The philosophy and theory of web design. Fonts, Layouts, Colours, and learning adaptability.
Although this tutorial is not a paragon of excellent style and design, it does a fantastic job of getting people new to HTML up to speed and covers all the basics from how a doctype works up to the basics of adding in forms, while sticking to best practices and even passes along some great tips for search engine optimization.
A good primer for those new to CSS. Check out their HTML tutorials as well to make sure you have a good foundation on the beautiful soup that is HTML.
CSS Diner: A cute game teaching you about CSS Selectors
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
Time for some more fun! A nice collection of 'cool' effects you can achieve with CSS
You may have noticed from the previous link that a lot of the neat new effects available with recent browsers require a lot of repetition through the "browser-prefix" strings. With one extra line in your HTML file, you can avoid ever having to worry about browser css prefixes. Yay!
An awesome showcase site that gives great samples of what can be accomplished with modern CSS. The focus is on 'responsive' layouts, which mean that the layout adapts to the device it is being viewed on.
A solid guide to getting that same responsive layout as all those just showcased.
Welcome to Github! The central source for 20%-90% of open-source / free projects on the net. This is a final review of the basics of HTML/CSS and by now you should be able to totally follow along and put together your very own, strikingly good looking, resume / portfolio. Go ahead, roll one up.
The road to enlightenment
Begin to see with clarity. Learn to use the time-honoured techniques in new and invigorating fashion. Become one with the web.
1 page, 217 designs (and counting). Another showcase website that beautifully encapsulates the expressive power of stylesheets. It's all the same HTML, only the CSS gets switched. Inspiration starts here.
Want a great looking site, fast? There are many 'css frameworks' out there that bundle great looking styles and layouts together for you. Bootstrap by Twitter is probably the leader of this pack.
I think you are ready for this now. You don't have to take it all in by one go, and sometimes it gets a bit dry, but it is eloquent and an excellent place to begin your adventures in adding the real meat to websites.
Jennifer Dewalt decided that to learn how to make websites, she would build 180 pages in as many days. I dare you to build one cool website in one day with some kind of user interaction. Keep it simple and have fun!
It's like the Wild West, the Internet. There are no rules.
The first (ever?) HTML music video by The Arcade Fire. Makes extensive use of window.open() and HTML5's new video element.
Similar to The Arcade Fire's style of HTML music video, this time generated by OK Go / Pilobolus
The second Arcade Fire HTML music video. This one makes some very innovative use of your webcam and cellphone in conjunction with the the webpage.
Songs of Diridum will give you some soothing, generative jazz in a 3d world to calm your excitement now that you know of what magic can be done.
Matter.js is a 2D physics engine for the web - You can code in all manners of interaction and create that angry birds type game you have always dreamed of.
The Internet is the first thing that humanity has built that humanity doesn't understand, the largest experiment in anarchy that we have ever had.
Ok, this is really getting into uncharted territory. Up until now most everything discussed has been just plain html, css, and maybe some js files sprinkled on top.
Once you have a web server to tinker with, the possibilities of interactive design explode out in all directions. Being able to store and manipulate data, then later send it out again in new forms is powerful stuff.
From online cookbooks to team based collaborative todo lists to fun online games, to.. well.. anything imaginable, really.
At the core of it, is you can send data back to the server or retrieve it, usually either as a GET or POST request.
Almost every programming language in existence has some sort of capabilities for recieving and serving dynamic web content, and even those that don't can be wired up using other programs acting as a gateway to let you.
Popular server languages for the web usually include the laundry list of...
- PHP - http://php.net
- Python - http://www.python.org/
- Ruby - http://www.ruby-lang.org/en/
- Perl - http://www.perl.org/
- Java - http://java.com/
- Clojure - http://clojure.org/
- Go - http://golang.org/
With node, you can access and manipulate files, use good crypto, and most importantly, serve html and other content to people accessing your server.
This isn't to mention that it is a lot faster than a lot of the other options mentioned above, for example, php and ruby, they tend to fall apart on your average server when trying to push out more than 10-20 requests per second. Usually, node can handle 100+ requests per second. This isn't as good as something like C or Go which can handle 1000's per second, but it is usually 'good enough.'
You don't have to turn on the TV set. You don't have to work on the Internet. It's up to you.
The Little Book on CoffeeScript
Even more concise than coffeescript, Coco has some wild wild structures that can condense even the most complicated constructs to a single line.
If you are a fan of having things well defined and following strongly enforced, logical interfaces, then maybe typescript is for you.
Weeks of programming can save you hours of planning.
It's not fun to build every app up from scratch and there are some really great code libraries that can give you a lot of 'baked in' functionality.
A super common server side framework. As the homepage exclaims: Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.
An attempt to make a better express.js. Utilizing middleware and pluggable data sources, it has the advantage that all data is streamed rather than buffered up.
A better way to build apps. Using some really magical code wizardry, you can write a web app in terms of templates and have all the backing data just stay in with what your visitors see 'by default,' in real-time. Pretty cool stuff.
The road ahead
I’ve finally learned what ‘upward compatible’ means. It means we get to keep all our old mistakes
Time to start making things! Decide on something that you would like to accomplish and then just go for it. It's probably a good idea to keep things pretty simple to start with, maybe a advanced version of tic-tac-toe or a unique card game your grandmother taught you.
If you already have a solid foundation of print media that you have created, perhaps it's time to make a beautiful online showcase for your work? Google is your friend for answering all kinds of your questions. "Lightbox using jquery" for example, and dozens of options for making that perfect picture gallery will appear.
A lightbox is a way for for displaying pictures or other content with a front and centre bordered frame and the rest of the page greyed out. All these extra terms will be found by you though time, experience, and perseverance.
Finally, the most important aspect is that you are having fun doing all this, design is a creative endeavour and for the best of it, there needs to be passion and lots of heart put into it.
I wish you all of the best in your adventures in webdesign and if there is anything further I can do to assist, please either contact me directly at firstname.lastname@example.org or leave a comment in the discussion area below.