I was recently approached by someone at a .NET User Group about how
to get started in HTML5, JavaScript, jQuery, CSS3, etc... The
developer's primary background was writing thick client Windows
applications. I figured the best place to start is to focus on the bare
essentials and then work up to more advanced concepts and resources. So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources.
A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer. (Volume 2)
So, it is pretty obvious that you are going to need to learn HTML5 if
you are doing to do front-end web development. From my experience most
developers regardless of their language of choice know the basics of
HTML. What they may or may not know are all the newer semantic tags,
cross-browser tricks, and native JavaScript APIs.
There is plenty to learn in HTML5 without getting into the JavaScript
APIs just yet. Once you learn JavaScript and feel comfortable in it,
that may be the best time to tackle topics such as Geolocation, Web
Sockets, Canvas, IndexDB, Web Workers, etc...
JavaScript is a dynamic and functional language, which is considerably
different than C# or Java for example. So, please take your time and
pick up the language. If you don't learn it appropriately you will
invariably run into barriers down the road due to lack of understanding.
If you have any resources that you think I missed please add them in the comments and I'll try to update the lists above if I think they are appropriate.
A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer. (Volume 2)
HTML5
So, it is pretty obvious that you are going to need to learn HTML5 if
you are doing to do front-end web development. From my experience most
developers regardless of their language of choice know the basics of
HTML. What they may or may not know are all the newer semantic tags,
cross-browser tricks, and native JavaScript APIs.
There is plenty to learn in HTML5 without getting into the JavaScript
APIs just yet. Once you learn JavaScript and feel comfortable in it,
that may be the best time to tackle topics such as Geolocation, Web
Sockets, Canvas, IndexDB, Web Workers, etc...
Resources
JavaScript
Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. A common danger is that developers think it looks just like their back-end language of choice (C, C++, C#, or Java) that they don't invest time to learn how it is different. HTML QuickStart Guide: The Simplified Beginner's Guide To HTML
JavaScript is a dynamic and functional language, which is considerably
different than C# or Java for example. So, please take your time and
pick up the language. If you don't learn it appropriately you will
invariably run into barriers down the road due to lack of understanding.
Resources
JavaScript and JQuery: Interactive Front-End Web Development
jQuery
The jQuery library has been around for several years and has catapulted as one of the most used tools in the web developer's belt. The reason for its vast usage is that it solves many of the cross-browser issues that creep up during development. The library is popular for both web developers and web designers. The community around jQuery is amazing and there are tons of jQuery plugins to choose from.Resources
JavaScript and JQuery: Interactive Front-End Web Development
Backbone.js
If you find yourself writing more and more JavaScript and jQuery then you may want to consider picking up Backbone.js to help you organize your web application. This library is also a great fit for Single Page Applications (SPA). Backbone.js uses the familiar MVC/MVP concepts of Models, Collections, Views, and Routers. In addition there is a nice Event model, History support, and a Sync mechanism. The community for Backbone.js is also very large and you can find many extensions and plugins to fit your needs.CSS3
You may or may not have experience with CSS. Brushing up on CSS concepts would be a good thing. If you already feed proficient at CSS1-2, then you should pick up CSS3 as well. A lot of features have been added recently that is in most modern browsers. There are many things that you can do in CSS3 now where you used to use JavaScript or custom images.Feature Detection
Inevitably you'll need to support browsers that don't support the native feature you are trying to use. Thankfully you can use Feature Detection to determine if the browser you are in implements that feature and if it doesn't then you can provide functionality to mimic that feature (a.k.a. a polyfill or shim).Responsive Web Design
Instead of implementing a different UI for mobile devices, tablets, and desktop browsers you can use responsive web design techniques to provide one experience that restructures the UI according to its size.Conclusion
Hopefully the above resources will get you started in your transition to front-end web development. There is a lot to learn, but it is an exciting space that changes frequently. Having a desire to learn is a good trait to have in this field.If you have any resources that you think I missed please add them in the comments and I'll try to update the lists above if I think they are appropriate.
No comments:
Post a Comment