Get a job as a UI Developer / Front-end Developer in 12 weeks

The first thing to do is find a real life problem.

I know this can be challenging and it will require research and exploring, but if you can even just think of a problem that you have experienced, preferably in a digital experience, and work to solve that you will be well on your way. Below are a few examples, but coming up with your own is preferable.

Sample real-life problems

Have you ever used a banking system that drove you batty?

How about signing your kids up for sports?

Do you love everything about the way your social media platforms work?

That should get you thinking about past frustrations you have experienced with digital products. If none of those work for you and you really can’t find anything wrong in the digital world — first off you aren’t paying attention, but second, I wrote some scenarios in this blog.

Yes it will be more beneficial to have a real life client — even a client that does not pay you; but working through a problem that you have experienced is the best way to START. The last step in this process (prior to getting a super awesome, amazing job!) is to work with a client (for free if you must to prove out your skills), but working through your own problem will give you that “scratch your own itch” closeness to the problem that is exactly what you need when you are first starting out. So, you’ll perform a diagnosis on a problem you have experienced, solving with your UI/Front-end development skills and wrapping up by performing the same process (though at a higher level because you have gained some mad skills in the process!) with a client.

Photo by NESA by Makers on Unsplash

UI / Front-end Developer Skills

HTML, CSS, JavaScript (some basic JavaScript and maybe one JS library are needed). Here is the 20% of code that you need to know to make 80% of an impact to get you that job!

Outcome

Coding that executes the front-end vision of a product — the interface that a user interacts with. This does not include designing that interface, though it is assumed that will provide council and thoughtful choices when implementing a design.

Steps

  1. Learn HTML
    It is assumed you have a problem that you can solve with a digital media based so familiarize yourself with HTML keeping this problem in mind. By keeping the problem that you want to solve in mind, you will prevent yourself from going down the rabbit hole of learning every potential line of code that is possible. It is unnecessary and much more effective to pick out the 2–3 items that will help you solve your problem.

Where to learn
Start with w3 schools. It is great for (1) starting and (2) referencing. It is not what you will use for more complicated solutions. Most sources (unless they are junk) are not really good or bad. They are just right for the situation or wrong. Know what w3 schools is good for: starting & referencing. Codeademy is good source, but you only need to do the elements section.

What to learn

  • Structure of an HTML page https://www.w3schools.com/html/default.asp
  • Elements and attributes. Specifically img and link elements and style and id attributes. Those are the most important and have the biggest impact.
  • Don’t get too down and dirty with formatting, styling or calculating. I know you can do that with HTML, but that isn’t the most effective. You will use CSS to style and JavaScript to calculate and add logic.

2. Learn CSS

Where to Learn

For a great reference of all that CSS encompasses, as well as a CSS generator, I recommend http://enjoycss.com/ I love how you can learn a comprehensive approach to CSS through a visual picture. Many newbies, however, don’t love this so an alternative to try if enjoycss isn’t working for you is https://www.khanacademy.org/computing/computer-programming/html-css Don’t judge “khan academy” as being for kids. Kids educational courses/platforms are frequently well developed (Khan is a great example of this) and explain things BETTER than adult education which can skip over topics because is it assumed that you know them. Learning is highly subjective though and I would much rather skip over lots of detail than take a course that glosses over things that I need. One more resource, one you are ready to try your hand a more challenging concepts is: https://www.codecademy.com/learn/learn-css All of those resources are FREE. Eventually to skill up, codeacademy charges, but they provide a lot of value for what you learn.

What to Learn

  • Focus on screen layouts, text properties and inheritance
  • CSS Grid is a great 80/20 way to learn screen layouts. Test it out here.

3. Learn JavaScript

Where to Learn

Start with this video. It has a ridiculous name, How to Learn JavaScript in 12 Minutes.

Unfortunately, you can’t…learn JavaScript in 12 minutes. Or if you can, you are superhuman and you should go buy a cape. The video, however, is still very valuable in that you can get the high level of JavaScript in a really short amount of time. Try listening to it 3 times. Once for high level concepts, a second time to start doing what it says and third time to check through your code and see if it executes.

What to Learn

What you REALLY need to learn to get a job as a Front-end developer and what you might want to learn in order to be a super awesome JS developer are two different things. On the minimum side, knowing JS generally and how to write functions, call functions and interact with the screen are probably enough. To step up a bit, check out Bootstrap and Angular. Those libraries will beef up your developer knowledge and help you edge out competition. By the time you are interviewing, maybe mention that you are learning React (but only if you are) as this is a newer library that is considered more advanced and will take you to the more senior end of development. BUT and this is important. You don’t NEED React (or even Bootstrap and Angular) to GET the job. You will likely need them IN the job, but keeping those goals separate will help you get the right fit.

  • variables
  • function writing
  • function calling
  • interacting with the screen

Final Steps

To get that job, use the problem that you came up with in the beginning and apply the learning from steps above. You will find that you may need to add an item here or there on the learning end. You will likely need to scale down your original solution on the tech end of things. Scratch that, you will definitely need to scale down your original solution. Put all of your work in a Github repository. Once you have completed this project, you can use it to get your first FREElance job. Also add that to your git repo. Now you have two samples of real world problems that you can show potential job opportunities!

Happy Front-end Developing!

********************************
Want more info and support for finding meaningful, flexible, well-paid work in tech? Join our Facebook group!