Listen, with the level of detail that the new wireframe and mockup tools are giving to the consumers, do you really think that your design skill-set alone is going to survive? I’m going to cover some tools, books, and resources on how to begin learning web development as a web designer.
You probably already follow the latest trends, so I expect of you to know the latest technologies like the back of your hands. Learning front-end development as a web designer isn’t even that hard, the good news is that you’ve already built HTML, CSS and JavaScript code before, that’s exactly what we’re going to be working with!
Why convert (combine?) to Web Developer?
I suppose that’s the question that many of you are asking yourselves right now, but from my experience – one of the biggest advantages has been the ability to work with more clients, to work on more projects, and to have better control of my own workflow. Besides, knowing web development is going to open-up some really creative and crazy ideas!
Where to start?
Right, so you do want to learn more about web development, that’s great – because it really is an exciting sphere to be a part of, and that’s coming from someone who’s always looking for something new to write and tell about. Okay, so here is the list of four languages that you should consider learning first.
HTML5
HTML5 is the latest HTML standard. It walks hand in hand with CSS3, the latest CSS standard. Back in the day, it was HTML that everyone had to learn, but now the capabilities of browsers and web servers have evolved, and the new HTML5 language is offering some really great features to build native apps for both the browser, and the mobile.
CSS3
CSS3 is where the styling happens. You use HTML5 to build everything as you’d like to build it, but then comes the time to give things a more professional, homely look. If you feel proficient enough in CSS3 already, perhaps it’s time to pick-up some SVG books and see what you can learn from those!
LESS
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.
SASS
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Compilers for LESS & SASS
Right, because both LESS & SASS are pre-processors, you actually need to find a compiler to compile the end-result. I’m sure there are plenty of solutions out there, but we’re not looking to over-complicate things, rather – we want to keep the ‘transition’ as smooth as possible. Trust me, not every developer has one thousand tools to help him.
CodeKit
Are you working from a Mac? Great news, because it means that you’re eligible for the CodeKit app, one of the best compiling apps out there for developers, and even designers. CodeKit keeps an eye on everything that you’re building, and whenever there is an error, or code that needs to be compiled – the app will do it all by itself.
Prepros
Prepros is a GUI compiler for preprocessing languages such as LESS, Sass, Compass, Stylus, Jade, Slim, Markdown, Haml and CoffeeScript. Prepros can also live refresh your browser whenever you change your code on your favourite editor. The reason for including this here alongside CodeKit is simple – Prepros is also built to be working on a Windows machine.
Text Editors for Web Developers
By now, you should have a more general idea of what is trending in terms of front-end development, and in terms of what kind of tools to use in order to be able to produce the same quality stuff that others are producing. Not to confuse with copying someone, we’re taking into account only the essentials.
Sublime Text
I use Sublime, it seems to be a very popular choice among those who’re building for the web, and the functionality that this editor can provide, well – I can’t say many other text editors can do the same. Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.
Atom
This lovely text editor hit the scene only recently, and truth to be told – the project is far from done. The project was launched by the same lovely peeps who’re behind the code collaboration giant GitHub. Atom is composed of over 50 open-source packages that integrate around a minimal core. Our goal is a deeply extensible system that blurs the distinction between “user” and “developer”.
Learning Web Development from Books
Honestly, I have covered books, tutorials and learning resources for nearly every major programming language out there, so please use the search function; before you think that I’m forcing you to spend money. Remember, you always get what you pay for.
A Book Apart is run by people who know the web better than 99% of its users, the content in these books is always top-quality, easy to read, and provides invaluable insight into the web building process. I recommend you start with the following four.
HTML5 for Web Designers
The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. The biggest takeaway from this book is this – by the time you’ve finished reading it, you’ll no longer question what is HTML5, how HTML5 works, or what I can do to become a better web developer. This small book covers everything in sweet and concise manner.
CSS3 for Web Designers
Dan Cederholm (Co-Founder of Dribbble) takes you on a journey that will leave you wanting for more. Don’t worry, that’s a good thing! If you’re looking to jumpstart your CSS3 skills, this is the one book that you should absolutely purchase. It contains information about advanced features, selectors, and also about CSS3 animations – a very hot topic for developers.
Sass for Web Designers
We learned that Sass can help us build more exciting things, but did we learn how to actually use Sass? Dan Cederholm isn’t just knowledgable about CSS3, he has taken the time to also produce a book that talks about Sass – the CSS pre-processor that can help you to look at CSS from a new perspective.
Responsive Web Design
I couldn’t help myself but to include this book in this list of books to grab, responsive web design is such a trending topic right now. You’re literally seeing the phrases everywhere, and as more businesses and individuals are making their appearance on the web, so does the demand for developers who’re capable of writing code in modern languages. The author of the book is Ethan Marcotte.
Would you rather learn from online courses?
Technically, it doesn’t matter where you’re learning from, so as long as you actually do it – which seems to be the biggest obstacle for everyone. Anyway, I’m fully aware that some people prefer to learn from video courses, narrated by people who love to talk! Here is a list of online courses that you can become a part of:
Udemy
I’m in love with this platform. It’s not an interactive learning platform like the other two, but Udemy has the nicest and biggest directory of online courses that I’ve seen, at least courses related to building and engineering things. You’re always able to find some really nice deals, discounts, and offers as well. Take it a step further by becoming an instructor yourself, perhaps all those books have taught you something?
Treehouse
The last time I mentioned Treehouse was in my post about programming communities, despite Treehouse being populated mostly by beginner developers – their community forums provide great learning resources for everyone. The courses they ran range from basic HTML and CSS, to more advanced tutorials that cover Android & iOS development.
Learn from over 1000 videos created by our expert teachers on web design, coding, business, and much more. The Treehouse library is continually refreshed with the latest on web technology so you’ll never fall behind.
Code School
I have been very fortunate to have the CEO of Code School – Gregg Pollack – write a guest post for my blog. You can preview the JavaScript showdown post here. Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. It’s a pretty sick platform, and you’re going to learn plentiful!
Web Designers Who Want to Become Web Developers
Oh, look, we’ve reached the end of the post. I’m pretty happy for having taken the initivate to complete this post, it turned out to be much better than I had expected, and I think the decision not to include any affiliate or promotional links has proved to be very wise. You’re essentially looking at an introductory package that will help you transition from being a lousy designer, to being something more – a designer with web developer skills!
I don’t think there is much more to say, but I do have some questions to you. Did any of the tools and softwares that I discussed in this post ring a bell for you? Are you currently using any of them for your daily development routine? It would be great to see how everyone compares. The web is quite broad, but when it comes to quality learning – it seems we often ride on the same waves.
