Steps to becoming a front-end web developer
There are a few things you have to know in order to be a front-end web developer. Where to start and what to learn. This guide will take you through the steps of becoming a front-end web developer.
First things first
Before we start seeing stuff on the screen, we have to make something out of nothing. We start at the basics of web developing: HTML. This markup language will draw shapes on the web page and display text.
HTML is not only very important, your whole markup will depend on it. Don’t touch CSS yet! We’ll come to that later.
CSS is worthless with a bad markup supporting it.
1. Learn HTML
Learning perfect HTML will take some time but it will really pay off later. It’s way easier to prevent mistakes and track down bugs when the markup is perfect.
Next step is what you’ve been waiting for; applying CSS.
2. Know CSS
- How to apply CSS
- Know all the important aspects of styling
- Learn about positioning
- Get to advanced CSS
You don’t have to be perfect at CSS. But being good at it will save a lot of time for your designer.
If you plan on becoming a server side programmer you are best off learning a server side language to generate HTML pages now. Take a look at PHP, ASP.NET, JSP etc. if you want to know more.
Now that you know good HTML and CSS it’s time to put in a little Javascript.
Don’t start by using a framework now, you first need to understand what Javascript is and what it can do to alter the layout of the web page.
3. Rock Javascript!
- Read a good book about Javascript.
- Get to know some funny Javascript effects and concepts. (There are a lot on the Internet)
After I read a good book and experimented with Javascript on some projects a bit, I wanted to get everything out of Javascript by making nice effects like the other guys do. For this there are a lot of frameworks available, which also happen to make your Javascript coding a lot easier!
4. Pick your framework
There are a few great Javascript frameworks out there. The biggest players in the game are: MooTools, jQuery and script.aculo.us.
MooTools is a lightweight Javascript framework which can be used to utilize simple effects on the elements on your page. It doesn’t have a lot of fancy features, but it does the job. Good choice for beginners.
jQuery might be the most popular one out there. Not without a reason! It’s easy to apply, it has great docs, maybe even easier to learn and does a wonderful job. Does require some plugins for extra functionality but it’s a really nice framework. Also has a large community.
script.aculo.us is the mother ship of the Javascript frameworks. It’s big and weights a ton. It might be a bit slower and requires a bit more programming than its competitors, but it is powerful in what it does. The capabilities of script.aculo.us take a lot up in speed, but for that you get complete control. You can create excellent Rich Internet Applications with this framework.
Conclusion
In just a few step you can become a front-end web developer. This might take a while and it might take some time to get used to a language, but it will pay-off in the end.
There is a lot to be learned on the Internet and it is never too late to try out web development and make the web a little more exciting.
Gaya Kessler is a 22 year old web developer writing about all kind of things. He’s the owner of Gaya Design. You can also catch him on twitter.
Grab the Feed
What a great way to present the first steps to becoming a front-end web developer. Hopefully this will reach the right people and set the record straight :)
Great article. For those of us who are already developers it may seem obvious but I remember when I was first getting started not really knowing where to start. Something straightforward like this would have been great to come across.
its a nice read!!!
Nice read Gaya!
I’m not much of a developer, but I always tend to do my HTML and CSS’ing side-by-side. Next time I’ll try and work out the HTML markup completely before working on the CSS and see how that works out!
Btw, which Javascript book would you recommend for beginners?
P.S. Maybe you should disable the smileys in Wordpress? They kinda break up the commments ;)
@brian and @angie: Would have saved me a lot of time if I knew where to start and which things to learn first.
I learned classic HTML and from then I was kind of thrown into the whole developing thing. Got to learn CSS at the same time I was learning PHP. With this article I hope to guide the beginner in the right direction.
Thanks for commenting :)
@Yoosuf: Thanks dude!
@Joel: Give the HTML first then CSS approach a try :)
I would recommend “Professional JavaScript for Web Developers.” Easy to read and gives you a great insight in Javascript.
Thanks for commenting :)
gr8 article Gaya … All the steps are in perfect line as Brian said …
Being a front-end developer myself, this is a good start at learning the bare necessities of a front-end developer’s job but it must be said that there is a TON of work to be done in order to come close to mastering front-end architecture, integrating your development process into a team process, and learning and understanding how various browsers and rendering engines work in order to better understand the challenges you face when designing your architecture for applications and websites.
I’ve used scriptaculous pretty heavily in the past but I wouldn’t say it’s more powerful than jQuery. In fact with scriptaculous I’ve found that the effects often need tweaking to make them look smooth, causing you to either compromise the animation you’re trying to achieve or dig around in the scripaculous core.
I strongly recommend people not already committed to a framework consider jQuery. It will make things easier for you both short term and long term.
I feel the Javascript frameworks were misrepresented a bit. jQuery is certainly excellent for beginners interested in accessing the DOM.
But Prototype and MooTools are both competent as well. And MooTools is just as powerful as Prototype for building RIAs.
There’s a new write-up comparing MooTools and jQuery pretty fairly – http://jqueryvsmootools.com
really usefull post
Once your get yourself familiar with CSS, you should start look into CSS Framework, either use a popular framework or develop yourself.
Scriptaculous for the win! ;)
Thanks for all the comments people :)
@Chris Walllace: Very true! That’s what makes someone professional or not :)
@Paul: My first JS framework was Scriptaculous, it did teach me a lot about Javascript coding.
@Sean McArthur: Thanks for the heads up!
@Dicky: CSS Frameworks look cool indeed :) might give that a quick look later on.
I’ve yet to really step into my own with Javascript frameworks (or the language itself), but I think reading a book is a great idea. I’m not usually a fan of reading coding books, as they become outdated fairly quickly; but, I think in this case I can make an exception.
Keep up the great work Gaya!
great motivational piece here Gaya, but candidly speaking i do not believe there is a margin between a designer and a front-end guy in today’s web development or if i may put it another way round; the designer comes before the front-end web developer. hence the front-end web-developer should be familiar and able to run with a graphic editing software like Photoshop or any other.
short of that little bit, you have done a great job here. Keep the spirit.
Here you mentioned Mootools as a lighweight among all why . compresses jquery size is only 16 kb while Mootools compressed version is 65 kb
jQuery is around 56 KB, and MooTools is around 62K. The 16KB is when it is gzipped on the server. Both jQuery and MooTools can be gzipped. The difference between the two is with jQuery you have to always include the whole library. With MooTools you can download only a part of the core library as needed for your project, making it more “lightweight”.
Excellent post! I’ve been trying to figure out what would constitue as front end developing and how to go about learning it. I’ll definitely be following these steps.
Thanks for the post!
hmm… the article loses a little credibility when Scriptaculous is mentioned but Prototype isn’t (Scriptaculous has a Prototype dependency).