Learning web design

All chapters feature content for various topics, organised into sections. Any additional footnotes are section-specific and can be found at the very end of the section.
To allow a clear overview and easy access to content, each topic's title is set up as a toggle for the article, indicated by a preceding ‘+’ (plus symbol) which will reveal the content on click/tap; some articles include sub-toggles. This includes the tutorials which at times feature videos as well as step-by-step instructions.

Getting stuck in

Any craft is best learnt by doing: by practising and experimenting. By making a mess. By making mistakes. By having fun and letting loose before honing in on improving our skills.

One way this handbook is planned to support you in your learning journey are the step-by-step tutorials. They include explanations and clear instructions to achieve a certain outcome. The videos and steps are designed to get you to learn the process for the creation of the set design, from start to finish.

The other way to support your learning progress are the practice projects. These are intended to set you specific tasks to work on, asking you to stretch your design muscles and practise what you've learnt.

Included after the chapter content itself, these projects are designed to focus on both the design and the execution. The briefs are written to set specific challenges with creative and technical objectives.

Project briefs state a list of the objectives, offering files for download (if needed) and links as relevant. Some but not all will include possible solutions or approaches. These projects are intended to serve as prompts for you to work on independently. Hope you'll enjoy these and have fun practising your new skills ツ

On the topic of coding

This handbook is intended as start into webdesign. There has been much debate about whether a designer should be able to code - and in my humble opinion, it is important to learn HTML and CSS to be able to design well for the web. My own background was in design before the web came along and changed my path. Being worried I would not be able to tackle coding myself, I ended up as a Flash^[1] designer initially ~ I know... the wrong approach entirely but I did not realise it at the time. If you don't know what Flash is, that's fine ~ it no longer exists :D

Soon, I saw the error of my ways and started learning to code, thanks to ‘Designing with web standards’^[2] by Jeffrey Zeldman^[3] which made me change my approach to web design fundamentally and pushed my skills into the right direction. After reading this book, I ended up discovering more inspiring people who were promoting web standards and aiming to push us all towards an all inclusive web in the early days. I learnt much from Eric Meyer^[4] whose blog posts explained the intricacies of the code I was trying to understand. His books helped me learn the code I was worried I would not be able to grasp. I read books and online articles from Molly Holzschlag^[5], who is often lovingly called the 'fairy godmother of the web'. Her view of the web as open platform, as an accessible medium inspired my interest in accessibility early on. And then there were many blogs and sites - with A List Apart being one that is still around, still publishing brilliant articles and one I'd highly recommend to you.

I will always be grateful to the many sharing spirits, brilliant writers and experts who so openly shared their knowledge online. Without them I would not have learnt coding ~ and my design skills would not be what they are today. This is the reason why I added an extra section at the very bottom (right above the footer) to each chapter's page with links to external sources. These will progressively go deeper into coding methods to expand your skills. This is meant as a guide to help you learn how to code, ultimately help you to execute your designs as webpages ~ and become a better web designer.

The 'learn coding' toggle can be found right above the footer of each section. The content will offer notes and links to various external resources, starting at beginner level and progressively going deeper into various coding techniques.

My advice is to at least learn the foundations and explore both design and coding (HTML + CSS) in parallel. While most tutorials in the handbook are focused on design only - some will include coding quite specifically and give you step-by-step instructions.

Even if you end up working solely in design and don't need to be able to code your own designs, a basic understanding and the ability to develop prototypes as static webpages will be a huge benefit. You'll find it easier to understand some of the technical aspects involved in the builds which will mean it'll be easier to talk to developers and discuss your design concepts. Hey, you might even discover that front-end development is for you.