Web Designer guide to Front End Stack
Dozens of blogs have been written to demystify the miracle process of the birth of a new front end developer, I suspect that I’m gonna add more but, at least, I have an obligation to tell my fella designers how I mutated from a UI designer to Front End developer.
A bit of history?
Web designers with the old definition had responsibilities to Design the interface and code into HTML/CSS output, Maybe some of jQuery seasoning on top! But basically, that is what they had to do, give or take some parts.
Then out of nowhere there was the uprise of MVC libraries to handle the Frontend i.e Backbone, Angular …
Till now, I know a lot of web designers their role still around the same task and I was one of them till 2 years ago! Genuinely the problem was there is no clear vision of how to grow, and what to become in the new world?
Why is it hard?
When you are a designer, you can’t just process dev related jargon or concepts at ease. One of the biggest reasons is that the programmers/developers/engineers in this world just trying to overcompensate the bad years of high school with bag fatty word! :)
When you try breaking any big word down to understand you will find it very easy but someone just had to screw it for the next fellas :)
This happens a lot while reading design patterns books( in software design not in UX :P). You know what! just chill down it’s never a big deal once you get the hang of it.
Aside from the jokes, there is a lot for the designer mentality person to learn, This should be your first steps not to fast jump right into techniques and code snippets without understanding the underlying ideas.
Do not get distracted
Plenty of courses on Udemy, Codeshcool, Lynda or Pluralsight and they are all good but you will need to stick to one and apply!
3. Take your time: don’t rush it
At this moment, you will feel not productive and you can’t get your knowledge into execution level! which is frustrating, but don’t make any scary code pile intimidates you, just keep focus because now you will have to start your own first project!
4. First project
By now you will have an introductory level knowledge, and only knows how to create an object, declare a function or using the console.log()
you need to know how stuff is getting done in JS! imagine in CSS you’ve just learned about floats and you need to build your first grid system :)
To give an example, people tends to do a ToDo app at the beginning because it has a straightforward logic and has a lot of applications.
You should get your own idea and try to start to build it, it will be dirty and sluggish at the beginning but with time, it will get better.
for me, I choose to do an application for a food ordering app which I tried to implement concepts and techniques along with the courses I’m studying.
Here it is, and keep the laugh and mockery for yourself :)
5.Books and larger concepts
Now, it’s important that you get yourself familiar with the software design patterns, it will last forever :), know the basics, by time, you will figure out why every pattern is a good fit for the problem solve.
Those are the best to start off with in my humble opinion, sure after while you will need no guidance to read anything :)
6. Foundations of Programming: Fundamentals
with Simon Allardice.
Again, it may sound like a pep talk, but don’t feel down if you don’t get stuff like loops of if statements or the Why of things, you will get there!
To be honest, this sequence now is being modified, I didn’t see at the time but I hoped for something like this, as I’m really a visual guy who loves the code being written and execute before my eye.
So this course is a real catch, his style is very smooth and won’t assume you knowing a lot which is the best part of it.
8. Knowing the features and the quirks!
For example, closures, hoisting, memory leaks, ways of declaring a function or object property accessing.
IImportant: A test-driven approach to assessing JS skills
Don’t get overwhelmed, Just start!