What to Learn (the Web Dev Trifecta)
For web development, you will want to start out learning HTML, or hypertext markup language, which isn’t technically a programming language, but it’s a good gateway into the world of programming. HTML basically provides the content and structure of websites. You also need to know CSS or cascading style sheets, which in simple terms is a way to make websites look pretty. So, HTML is the content of websites, and CSS is used to present that content in a pretty manner.
Then the third part of this web developer trifecta, is JavaScript. It’s highly recommended that you learn plain JavaScript, or what is sometimes called vanilla JavaScript, before getting into some of the more advanced JavaScript web frameworks that you may or may not have heard of such as Angular or React.
Learning HTML and CSS
HTML and CSS are the backbone of web development. On your journey to learn web development, you definitely want to learn HTML first. HTML provides the structure for the content of your web pages. The individual building blocks of HTML consists of elements, which are marked by opening and closing tags. I’ll cover more specifics in a detailed crash course on HTML.
CSS consists of selectors, properties, and values. Now there’s also something called CSS preprocessor such as SASS as which makes it a little bit more convenient for you to write CSS. You will eventually want to learn how to use these preprocessors, but you can learn them later on once you have the basics of CSS down and can write it manually.
JavaScript
JavaScript is the programming language that allows you to add interactivity to your websites. JavaScript can animate content, dynamically change content on web pages on the fly by talking to back end servers, and allow the user a level of interaction with the website that’s not possible without programming functionality.
Knowing JavaScript well is a fundamental requirement of being a front end developer. You should focus on learning vanilla JavaScript to a solid level before proceeding to learn one of the popular frameworks and libraries out there such as Angular or React.
Web Frameworks and Libraries
JavaScript frameworks and libraries are meant to provide built in functionality that is common to web applications so that you don’t have to write all of that boilerplate functionality yourself. It allows you to create more complex and feature-rich web applications in a much shorter amount of times with much more polish and much fewer bugs than you could ever do on your own.
A web framework will actually be a key piece of knowledge you need to know in order to get your first job as a junior web developer, because companies generally want you to be skilled in a specific framework that they use. Before you start learning about them though, make sure you have your fundamentals down in HTML, CSS, and JavaScript. Learning the frameworks will be ten times easier and ten times faster if you first focus on the three fundamentals of HTML, CSS and JavaScript.
Frontend vs Backend Web Developer
Right now let me quickly touch on the concept of front end vs back end. A front end developer is a developer who focuses on the front end, or UI, which is the part that the user sees and interacts with, so it’s important that the front end is clean intuitive and easy-to-use.
Back end developers are focused mainly on servers and databases and all the parts of the application that the user doesn’t see directly — the part that stores all the data that is used to make the application work properly.
A full stack developer is a developer who can do both the front end and the back end.
As a new developer who is starting out on your journey of learning how to program and get a job relatively quickly, it is highly recommended that you try to become a front end developer and not a full stack developer, because there is just too much to learn in too short of a time period. And trying to become a back end developer first before learning front end development is a little bit harder to do for most new programmers because back end dev is much less visual, and there is not as much of a feedback loop to indicate that you are doing something wrong when you are learning. And most back end developers need to have at least some basic knowledge of front end development anyway, so in the end the lowest hanging fruit for you to get a job as a programmer is to just go for a front end developer position.
Now you don’t have to take this advice, you can try to learn both the front and the back end and try to become a full stack developer all in a few months if you want to try it, but if you do so you will pretty much have to be superhuman in terms of the amount of effort you put in, or you will likely fail pretty hard. Just some friendly advice from someone who has tried to learn too much too fast.
Web Design vs Web Dev
Let me address another question I sometimes get, which is, “What is the difference between a web developer and a web designer?” Well, they are really two different roles in this day and age, although the two roles could technically be filled by the same person.
Does a web developer need design skills? Does a front end developer need to be good at art and design in order to make attractive user interfaces? Well, the fact of the matter is that most companies will have artists and designers who will work solely on making the UI look good. And as a front end developer, all of that design will be handed to you and all you have to do is implement it and make it look the same as it was designed. In other words, you don’t have to come up with the designs yourself, so you don’t really have to have a good artistic background, meaning, a web developer doesn’t really need to have web design skills.
Of course, it doesn’t hurt for you as a front end developer to have good artistic sensibilities and to know the basics of what makes a UI attractive and easy to use. In any case, at the very least you should have a solid understanding of colors and how you can use colors effectively in order to make a UI thematically cohesive. You should also know how to use white space effectively to make sure that a UI is not too cluttered.
Now, if you are interested in working as a freelancer and you will be spending most of your time doing web development on your own for clients, then it becomes more important to have a good well-rounded set of skills that includes a little bit of web design and even a little bit of back end work.
In this case it may be worth your while to invest some time into learning the very basics of some front-end design tools such as Sketch, Experience Designer, or Invision. Don’t spend too much time on this though because your goal is still ultimately to focus more on the programming aspects, but you can pick up the basics quickly if you are really interested. It’s not really necessary to use these types of tools for your portfolio pieces, but they are a good way of presenting potential designs to freelance clients and to go back and forth with them and get approval before you actually write any code, which is much harder to change.
Like I said before, needing to know web design becomes less of a concern if you are part of a larger company or part of a team, because in that case your role will be more specialized and you’ll be dealing with the nuts and bolts of HTML and CSS and the functionality that JavaScript provides, but won’t really need to flex your artistic muscles at all.
Tooling
Another thing that trips up new programmers a lot is not actually learning the programming itself, but rather all the tooling and setup that is necessary in order to get up and running, and to deploy whatever you build onto a live website. Some examples of this would be downloading and setting up your development environment such as a code editor or IDE (which stands for “integrated development environment”), buying a domain name, finding and setting up hosting or other deployment, learning how to use git and version control, setting things up securely with SSL and SSH, making builds, etc. I don’t expect any of that previous sentence to make a lot of sense to beginning programmers, so everything will be covered step by step, or I’ll point you to the best resources where you can learn about all these topics in depth.
You should eventually learn how to use build tools, source control such as git, and become familiar with testing. However, most of this can be learned on the job so you will only need to have a good basic grasp of the fundamentals in order to get a job. It’s fairly unlikely for you to be tested do any significant degree on any of these topics during a front end interview for a junior developer position.
Code Editor
For your text editor I recommend Visual Studio code, as it is cross-platform and can be used for both Windows and Mac, depending on what kind of computer you currently use (as a brand new programmer I’m assuming you don’t use Linux). It has good support for JavaScript and even other programming languages such as Python, so it’s a very convenient general-purpose code editor.
As an alternative some people like to use Brackets, which is convenient for front end work because it has a built-in development server which can be used to preview your web pages. But really feel free to use whatever code editor that is comfortable for you, for example Sublime Text or Atom.
APIs
You should know the basics about how the internet works, particularly in terms of how networking operates under the hood, and how to utilize API calls to send and receive data to and from other computers known as servers. Now, if that last sentence made no sense to you don’t worry, I’ll be going over specifics and more in-depth into what APIs are and how you can use them, along with some networking basics, later on.
When it comes to actually learning, doing is more important than reading or watching. Meaning, it’s good to know the background theory of something, but nothing beats actually physically typing in the code yourself and watching it work — or in most cases not work — and then having to go in and fix it. That’s actually the very best way to learn programming. I mentioned “tutorial purgatory” before… it’s very easy to fall into that trap where you’re just reading or watching tutorial after tutorial but not actually trying it out yourself, so that in the end you spend up watching weeks or months of tutorials but can’t actually program the most basic website yourself when presented with a blank code editor and you have to code something up from scratch.
Remember, if your goal is to get a job as a programmer, you need to demonstrate what you can build things with your own hands. That means you must be able to create portfolio pieces from scratch all by yourself to demonstrate what you yourself know about programming, and not just following some tutorial word for word, but building something that’s original and has your own stamp on it.
Focus and Move Fast
In order to start moving towards your goal of getting a job in the programming industry as quickly as possible, probably the most advisable thing for you to do would be to focus on one programming language. Now this won’t apply if you have all the time in the world — perhaps you already have a full-time job that you enjoy or you’re just a student or you’re just learning programming as a hobby, and there’s no real timeline for you to get a job as a programmer — in that case, you can go ahead and learn as many different programming languages or technologies as you want at a shallow level. In other words, just have fun with it enjoy yourself and take your time to really enjoy the process.
But if you really are focused on getting a programming job as quickly as possible, you need to move fast and not get bogged down buy anything — even if it seems beneficial at the time. For example, learning a little bit about multiple programming languages or very intricate details about functionality which you may not even running to at the workplace for years down the line, is very detrimental to you learning practical programming skills quickly.
This is not to say that you won’t eventually end up knowing a lot of different technologies and multiple programming languages once you are in fact working as a software engineer. In fact, once you know one programming language very well, it’s actually pretty easy to pick up another programming language. And the more languages you know, the easier still it becomes to learn more programming languages.
But the strategy of focusing and moving fast applies for someone who doesn’t know even one programming language yet and wants to get a job as a programmer as soon as possible. You really need to focus and not spread your attention and concentration around trying to learn the fundamentals of multiple programming languages, it will cause you to learn everything at a much slower rate and confuse you, than if you focused on just learning one and learning it as well as you can in your allotted timeframe.
You want to move quickly and get that job as a junior developer as fast as you can, so that from that point onward everything that you’re learning, you can actually learn while being paid.
Build a Portfolio
Once you become as proficient as you can with that one programming language and technology stack, what you need to do is build demonstrations of your newfound skills by building a portfolio. This portfolio will showcase your skills in a tangible manner which potential employees can go ahead and look at and to see what kind of work they can expect from you if they hired you as one of their developers.
For those of you who don’t have a computer science degree, having a very solid portfolio is crucial because potential employers don’t really have a way of knowing your skill level or even the fact that you know any programming at all, because you don’t have that work experience and you don’t have that comp sci education. So that’s probably the most crucial step in you being able to get a job — to have a really impressive portfolio.
You want to make sure your portfolio is live online so that employers can take a look for themselves without you having to email them anything or without them having to access your example projects in some other manner which may be inconvenient to them.
A lot of people recommend that you put up your source code up on a public repository somewhere, but in all honesty most potential employers really don’t have time to look through the code of potential hires, unless you’re very deep in the interview process, which means they’re seriously considering hiring you and will just ask you for code examples. My advice is, don’t worry about putting up your source code on Github (unless you are super proud of your code), but do make sure your actual portfolio projects are up and available for anyone to see at any time.
PHP Controversy
A quick note about the programming language PHP, many developers these days hate the idea of new programmers learning PHP because they say it’s an outdated and dying language. However, just be aware that there are tons of PHP work out there if you are primarily focused on making money from programming. In my opinion, it’s a great second language to pick up after JavaScript, if you are interested in making money more than “being cool.” It’s very easy to pick up once you know JavaScript, and it’s a great weapon to add to your arsenal if you want to go freelance, especially combined with a web building technology called WordPress. In fact, my first job as a developer was doing WordPress in a part time freelance role, and the pay wasn’t too shabby at all at $50 per hour, probably more than I would have been paid hourly as a full time junior developer doing something like React or Angular. I’ll cover WordPress and PHP development in more detail for those of you who are interested in going this route.
Learn the Basics
Once you actually get into the trenches of actually getting your hands dirty learning how to code, you will soon realize there is much more information about that particular tech stack that you can learn, than possibly be learned in probably even your whole career. You need to focus on learning the core amount of information that will let you accomplish the task at hand, and don’t get bogged down into learning a bunch of additional unnecessary information that you won’t actually use to complete your current projects.
It’s not good to learn theory in a vacuum, meaning it does no good to learn a bunch of concepts without any kind of context. For example, let’s say you’re learning to speak French and want to be able to live in France on your own. It does you no good for you to simply grab a French dictionary or encyclopedia and start reading every single page of a dictionary or encyclopedia — all this information about vocabulary or topics about France unrelated to living everyday life. What would be more effective if you go to France and just start talking to French people and trying to order food or catch a bus or get directions. You will very quickly realize that there is only a very limited set of words and interactions that you need to learn in order to be able to move around France in an actual practical manner. And likewise for doing something like building websites, it does you no good to learn the ins-and-outs of every piece of functionality when it comes to a programming language for framework, you just need to know the practical parts that will let you build the type of website you want to build, and not waste your time spinning your wheels learning irrelevant topics you’ll probably never actually use on your projects.
In other words, build stuff, and learn how to build stuff while you’re building stuff. This is an amazing way for you to have actual context while you’re learning new concepts, because you’ll be able to apply those concepts right away while you’re building.
“Hello World!” (Learn While Building)
So how do you build stuff if you don’t know how to build stuff yet? Well the answer is to build the simplest thing possible, which in most cases will be a “Hello World” application, meaning an application that displays the words “Hello World” to the user and that’s all it does. After you build that first Hello World application, you can start to add more functionality, such as adding buttons to click on and more colorful backgrounds and images. This is literally the way I myself learn any new programming language, by first building a Hello World app in whatever new technology that I’m learning, and then gradually learning more and more pieces of functionality to add as I go.
And it will be the same with you. Your first website will likely be a Hello World webpage. And then you will make a slightly more complicated webpage such as a blog entry, and then a more interactive webpage such as a to-do app, and then a small website such as a searchable weather app or recipes finder, and then go on from there to build your portfolio sites. So, with steady progression you will move from simple and basic to more and more complex over time. During the process, you we’ll pick up the necessary programming skills and concepts that you need in order to build the things you want to build, and that will automatically give you the context of new concepts at the same time you learn them.
Debugging
The first thing you’ll probably notice as you start learning programming is you get immediate feedback on whether or not what you’re doing it’s correct or incorrect. And while this may be a blow to your ego (because everyone makes tons of errors in the beginning), it’s actually a fantastic thing when it comes to learning. These constant error messages makes the feedback loop much shorter and allows you to learn much more quickly when compared to learning many other skills in which you may not be sure you are doing something correctly or not.
Google is Your Friend
But at the beginning you may be totally stuck whenever you encounter some error condition and don’t know how to proceed. Well in this case, Google is your best friend. Every programmer I know turns to Google as the first step whenever they are stuck on a programming problem that they cannot seem to solve right away. Probably the best thing about learning to program in this day in age is that there’s so much information instantly available online about pretty much any programming problem that you will run into. Whenever you run into a programming problem, chances are someone has run into that exact same problem already and better yet, has documented how to solve it on the web somewhere. This is like being able to pick the brains of more experienced programmers all over the world anytime you have a problem.
More likely than not you will be using the website StackOverflow a lot, as whatever solution you are looking for will most likely be served up on that site by a Google search.
Of course, if you do happen to know an experienced programmer nearby whom you can directly ask for questions, they will probably be able to guide you or mentor you when it comes to solving these actual problems. But for most of you will be relying heavily on Google, and this is true even when you start working as well and when you become a senior level developer.
Over time as you learn to fix these errors you encounter, an error which may have taken you hours or days to fix at the beginning will end up only taking you a few minutes to fix. This is what experience does for you, and this is why it’s important for you to consistently be doing actual programming, running into problems on a daily basis and figuring out how to solve those problems, again on a daily basis. This is the best way for you to learn the nuts and bolts of actual programming.
Programming that you do on a real job actually consists of these very same steps. Plan and design a software application, start coding that application, run into problems, fix those problems, run into more problems, fix those problems, and repeat over and over again until you finish the application (or at least until it’s deemed ready to release). Programming is actually a series of fixing a seemingly endless number of problems.
Mental Attitude
I noticed that a lot of people who want to learn programming delay actually starting to learn because there’s a lot of fear around the topic. Programming is admittedly an intimidating field, and it can seem overwhelming to a beginner, especially in the sheer number of topics that you can learn in programming. However, it’s very important for you to focus and buckle down, and to realize the core set of skills needed to do something like build a website, are not very overwhelming at all — the core skills are not all that complicated and, most importantly, are not that hard to learn.
You just need to be willing to get started and to power through all your beginner mistakes and all those inevitable errors that are going to come flying your way. It’s the same as learning any other skill. Programming is not some magical mystical art that only geniuses can do, in fact I know of little kids and housewives and even old people who have learned to program and build websites — you just need to get over your fear into get started and to put in the consistent practice.
There’s only really a core set of skills that you need to focus on in order to get most of your work done. as long as you focus on this specific set of skills and get really good at them, you’ll be able to accomplish the tasks that are set before you. With this core knowledge, you will be able to easily branch out over time when it becomes necessary to pick up other skills along the way.
© Copyright 2019 ProgrammingFromZero.com